Top

International Address Fields in Web Forms

Communication Design

Musings from the merger of medium and message

A column by Luke Wroblewski
June 9, 2008

As enablers of online conversations between businesses and customers, Web forms are often responsible for gathering critical information—email addresses for continued communications, mailing addresses for product shipments, and billing information for payment processing to name just a few. So it shouldn’t come as much of a surprise that one of the most common questions I get asked about Web form design is: “How do I deal with international addresses?”

But before we get into the nuances of address variations, it’s worth pointing out that addresses have a commonly understood structure. Through years of experience with mailing and postal systems, people have a pretty concrete idea of what constitutes an address block. This common understanding is so definitive that eyetracking data suggests, once people begin filling in a set of input fields that make up an address, they often cease looking at their labels. The basic structure of an address is so familiar, people don’t need the guidance labels provide.

Sponsor Advertisement
Continue Reading…

This is an important point to consider when laying out the input fields that make up an address. Figure 1 shows how to lay out the fields commonly included in an address in the United States. The alternative, a divided address structure in which each field appears on a separate line as shown in Figure 2, doesn’t offer the benefit of being understood as a set of related input fields. So people are more likely to consider each input field in relative isolation instead of looking at the address as a whole.

Figure 1—Common address structure for the United States in a Web form
Address structure for US
Figure 2—Divided address structure for the United States
Divided address structure

Luckily there is a fair amount of commonality between the elements that make up an address across the world. In most countries, the destination, or recipient, in an address structure progresses from most to least specific—Russia and Iran are notable exceptions. So when shipping to an individual at a corporation, the individual’s name would come first, then the corporation second. Following the destination is street address, city line, and lastly, the country line, as illustrated in Figure 3. This line structure is a pretty reliable baseline for all international addresses.

Figure 3—International address structure
International address structure

International Variations

International variations in address fields start with the most specific destination—the person to whom an address belongs. Individuals across the world might have one name, two names, three names, or more. A Formulate Information Design article, “The Name Riddle,” gives a great overview of the possible variations—from Sukarno, Indonesia’s first president, to Fahad bin Abdul Aziz bin Abdul Rahman Al-Sa'ud, the fifth king of Saudi Arabia.

Street addresses can also vary quite radically, even within a single country. The United States Postal Service’s Postal Addressing StandardsPDF outline variations in the United States—from 1401 Main St to RR 9 Box 23A to 475 Lanfant PLz SW, Rm 10022.

Though names and street addresses can have many variations, a single input field for each of them that provides an adequate amount of room for longer answers is usually all that’s necessary. Street number comes before street name? No problem. Street number comes after street name? Also, no problem. When it comes to the city line of an address block, however, we’re not as lucky.

In addition to a city name and postal code, the city line can also include a state, region, province, or county. Depending on the country, each of these can have different names, abbreviations, and locations in the address block. There is also a slew of postal code format variations across countries, including the use of spaces, numeric or alphabetic characters, and various lengths. The order of these elements also varies quite drastically. Figure 4 shows a few of the possible variations in the city line of an address block.

Figure 4—A sampling of city line variations
City line variations

To account for these international variations, Web form designers have taken a number of approaches: specific formats, changing formats, and generic formats.

Specific Formats

The specific format approach works best when you know or can confidently infer a customer’s country. Using this approach, you custom tailor the address block structure for each specific country. Figure 5 shows examples of address blocks for France and Italy. Note the variations in line placement and labels.

Figure 5—French and Italian address blocks
French and Italian address blocks

If you know a customer’s country with a high degree of certainty, the specific formats approach can provide a familiar address structure that supports quick comprehension and, thereby, fast form completion times. Frank da Cruz’s Compulsive Guide to Postal Addresses is a fantastic online resource for learning about unique address structures across the World, so you can deliver country-specific address block layouts.

Changing Formats

As with the specific format approach, a design that utilizes the changing format approach provides country-specific address blocks. However, the format is based on user selection instead of a known or inferred location. The registration form on eBay, shown in Figure 6, is an example of a form that utilizes a changing format. If someone changes the selected country from the default—which is based on the eBay site a user has accessed—the form displays the address block input fields the selected country requires in place of the address fields that are present by default.

Figure 6—eBay lets users’ selections change the address formats in its registration form
Users' selections change address formats

In this case, when someone selects Canada instead of Australia in the Country or region drop-down list, State/Territory changes to Province and Postcode changes to Postal Code. It’s important to note that, if a user has filled in any information in form fields that are common to both address structures—such as First name or Street address—you should preserve that information when changing countries. Removing information people have already provided is highly likely to upset customers.

Generic Formats

The generic international address format offers an alternative to maintaining multiple address block variations to support country-specific solutions. The generic format lets you manage variations in name and street address by providing a single input field for each element of an address. To accommodate variations in the address block layout and city line, you can use a set of generic input fields. The Amazon.com form in Figure 7 does just that.

Figure 7—This address form from Amazon.com supports addresses from many countries through a generic format
Amazon.com generic address format

Instead of displaying different drop-down lists according to the selected country, a single input field with an all-inclusive label, State / Province / Region, lets users provide their state, province, or region. Likewise, the broad label ZIP/Postal Code—which could also have included Postcode—accounts for postal code variations in an input field that allows alphanumeric characters, spaces, and various lengths. By distributing address elements across multiple lines, you can manage the ordering of postal codes, regions, and towns without implying any specific address structure.

While this kind of generic format can provide a flexible set of input fields for international addresses, error checking may be harder, because several fields can have many valid formats. Also, by virtue of its flexibility, the generic format isn’t really optimized for any country or culture, so it’s likely to be functional, but not ideal.

I’ve covered considerations for several international address field design solutions, but there may be other options or issues out there. If you’ve got additional insights, I encourage you to speak up in the comments! 

For more information about form design, check out Luke’s book—Web Form Design: Filling in the Blanks—a Rosenfeld Media publication that covers Web form usability, visual design, and interaction design considerations.

Editor’s note: Tony Meyn asked me to post these screen shots of an interesting design solution he found for international address forms. See his comment below.

Figure 1—Address in India
Address in India
Figure 2—Address in Canada
Address in Canada
Figure 3—Address in the United States
Address in the United States

Product at Google and Speaker and Author at LukeW Ideation & Design

Silicon Valley, California, USA

Luke WroblewskiAn internationally recognized digital product design leader who has designed or contributed to software more than 700 million people use worldwide, Luke is currently Chief Design Officer for the newly launched startup Bagcheck. He is also an Entrepreneur in Residence (EIR) at Benchmark Capital and speaker and author at LukeW Ideation & Design. Before embarking on his entrepreneurial career, he was Chief Design Architect (VP) at Yahoo!, where he was responsible for product alignment and forward-looking, integrated customer experiences on the Web, mobile, and TV. Formerly Lead User Interface Designer on the platform team at eBay, Luke led the strategic design of new consumer products and internal tools and processes. He got his start at the University of Illinois, where he taught graduate interface design courses and worked as a Senior Interface Designer at the National Center for Supercomputing Applications, birthplace of NCSA Mosaic. Luke is the author of two popular design books: Web Form Design: Filling in the Blanks and Site-Seeing: A Visual Approach to Web Usability, as well many articles about digital product strategy and design. He is a top-rated speaker at conferences and companies around the world and a cofounder and former Board member of the Interaction Design Association (IxDA).  Read More

Other Columns by Luke Wroblewski

Other Articles on Web Form Design

New on UXmatters