{"id":9742,"date":"2017-06-05T14:32:54","date_gmt":"2017-06-05T13:32:54","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=9742"},"modified":"2017-06-05T14:32:54","modified_gmt":"2017-06-05T13:32:54","slug":"form-internationalization-techniques","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/form-internationalization-techniques\/","title":{"rendered":"Form Internationalization Techniques"},"content":{"rendered":"

Approaches to collect addresses in a globalized world<\/p>\n

\"\"<\/a><\/p>\n

<\/p>\n

Internationalization and localization<\/a> are broad topics, which have large implications on the web. This article examines techniques to internationalize address fields.<\/p>\n

\"\"<\/a>

Structured vs. Generic Input Field<\/p><\/div>\n

<\/p>\n

The example on the left shows two methods for collecting a phone number. As I wrote about in Design Better Input Fields<\/a>, the structure and length of the field communicates what is needed. Whenever possible, format the input to the desired entry.<\/p>\n

However, formatting the input in this way causes issues for international addresses and phone numbers. If the country is not known, it is usually better to present an unstructured generic input to account for the country variations in form fields.<\/p>\n

There are 3 common approaches to internationalize address fields as Luke Wroblewski points out<\/a>: specific, changing, and generic formats.<\/p>\n

Specific Format<\/h2>\n

\"\"<\/a><\/p>\n

<\/p>\n

The specific format works when the system can interpret the user\u2019s country and present the appropriate address structure. This technique is problematic if the system doesn\u2019t have access to a user\u2019s geo-location data, or if the user intends to enter an address for a location outside their country. For example, geo-location data is of no use if the user is entering a list of global distribution centers into a network database. The changing format is a better approach for this use case.<\/p>\n

Changing Format<\/h2>\n

\"\"<\/a><\/p>\n

<\/p>\n

Changing formats present the appropriate address fields based on the specified country. The country selector is presented before or after the address fields. When a user selects a country the field labels change and the structure reformats. The changing format can also be achieved by asking for a user\u2019s country in a step before presenting the address fields.<\/p>\n

Generic Format<\/h2>\n

\"\"<\/a><\/p>\n

<\/p>\n

The generic format is the most flexible way to capture an address. Each input is unstructured, which makes it hard to check for errors. This approach can cause data integrity issues because the user can enter an address in various ways. State\/Province\/Region and ZIP\/Postal Code should be optional because not every address will have them.<\/p>\n

A Fourth\u00a0Way<\/h2>\n

\"\"<\/a><\/p>\n

<\/p>\n

There is another way to approach internationalization. The fourth way incorporates an auto-complete address field input. A user is presented with a list of suggested addresses as they type. The user then chooses the correct address and the form changes structure based on the country and populates the selected data in the fields below. The user can then edit and add any missing data.<\/p>\n

What are other methods to collect addresses in a globalized world?<\/p>\n

Find me<\/a> on Twitter<\/strong><\/a>, and Dribbble<\/strong><\/a>.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"

Approaches to collect addresses in a globalized world Internationalization and localization are broad topics, which have large implications on the web. This article examines techniques to internationalize address fields. The example on the left shows two methods for collecting a phone number. As I wrote about in Design Better Input Fields, the structure and length of the field communicates what… Read More ￫<\/a><\/p>\n","protected":false},"author":140,"featured_media":9762,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-9742","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-viewpoint"],"acf":[],"yoast_head":"\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\n\n\n\n\t\n