7

Most address forms in e-commerce (or anywhere) look like this:

enter image description here

The street always comes before the city/postal code. I guess that's simply because that's what we're used to. The accepted answert to this (older) question indicates the same, to not change the order and rather stick with what's known:
Is it ok to change the (US) address input field order in favor of a pre-fill feature?


But now with services like Google's Place Autocomplete or Loqate becoming more common, which give users address suggestions for their input, wouldn't it make sense to change the order?

For example see here, the form starts with the address first and I start typing what would be "Main Street" in German. That of course procs a ton of different suggestions, since a lot of cities have a generic street name like that.

enter image description here

So would it not be a much better UX to first make them fill out the city/postal code with the help of these APIs and then the street, which at that point can be made a hundred times more precise due to the code before?

  • You are aware that you can also write the city name into the address field, right? – Roman Abashin Feb 2 at 12:19
  • 1
    During checkout at secure.nordstrom.com/os#/shipping-address, Zip Code comes before City or State, and as a user, I like it because the autocomplete prepopulates those fields. – Ryan Feb 3 at 22:05
  • 1
    @RomanAbashin Well you only type part of the zip code, then get the right suggestion. The city is filled automatically and then you only have to type a few letters of the street because they're already pre-filtered. Though it's probably true that only one field can be easier than multiple. But in this case it didn't feel so. – Big_Chair Feb 4 at 9:22
  • 2
    My Honda car navigation GPS does city before street. It also auto-populates city based on GPS coordinates of my current location. I wonder if your form could similarly use GPS to determine your current address and add a simple "Use 222 Barker Dr. Waukesha, IL 55555" link that if you click, would auto populate everything. – John Zabroski Feb 5 at 1:50
  • 1
    @JohnZabroski Good point! People do know another address order from car systems. So maybe it is not too far fetched to change it for online shopping too. – Big_Chair Feb 5 at 16:08
10

Completing the city/postal code first would allow your UI to propose a narrower selection but, in your context, this would go against the user's mental model of how an address works.

Even in a world where letter-writing is a dying art, people in the Americas and Europe learn that addresses start by smallest unit to largest. Generally something like this:

  1. Addressee's title and name
  2. House Number/Street name*
  3. Locality
  4. State/Province, if required
  5. Postal Code
  6. Country

(* The sequence of house number and street name varies by language and country: in France it's Number then Street; in French-speaking Belgium it's Street then Number, like in Germany.)

To ask people to enter the address in an order other than this breaks with their expectation and may lead to higher error rates and user frustration. This is a hypothesis; if someone has studies we can refer to it would help.

Note that there are places, such as Japan and China the order is reversed. This pattern is also reflected how dates are written in East Asia (YYYY-MM-DD) vs. Europe (DD.MM.YYYY).

  • 2
    Hmmm, I guess you're right. But I'm curious if it would result in so much confusion. Hope we'll have some resources here soon to A/B test this cuz I'd really like to try it. – Big_Chair Jan 31 at 9:46
  • Have you ever heard of Luke Wroblewski and his book on designing forms that work? I guess my point is you are not the first person to think of this. – John Zabroski Feb 5 at 1:52
  • 1
    Luke Wroblewski (@lukew) tweeted at 11:13 AM on Fri, Aug 15, 2014: Faster address collection in forms. Research: t.co/xIrkmnyr77 t.co/W2pVeKB6PS (twitter.com/lukew/status/500299332168728577?s=03) – John Zabroski Feb 5 at 1:53
3

Yes, you can change the order of address fields on forms to improve completion. Many services on Brazil have done it and people adapted just fine.

The following picture illustrates the address form in the registration of a big online store used on brazil that starts from the postal code.

Example of a brazillian address form

The site requires the postal code (CEP) to start. Many sites provide a link to the postal office search page, but many doesn't.

Answers to comments

@John Zabroski asked about the quirks listed on the last page of Luke Wroblewski's Research.

Those quirks has to do with time to update the combos. Those quirks seem consequence of bad programming: The ajax request to populate the combo should be at onfocus event and should be sync. That way the "tab" or "click" would wait the combos to be populated before allow the user interaction with the field. The americanas.com.br example does something similar. It is a two step process: In the first you fill the postal code and confirm. In the second you see the rest of the form. I found easier that way.

It is also important to notice that Wroblewski's research used a small sample of 32 subjects that was aware of the testing. The results are very interesting, but should be taken with a grain of salt. I suspect the percentage of persons affected by the quirks would be way smaller on a blind study with a bigger sample. This is not excuse for the bad programming tough.

  • Wow, that's actually interesting. Do you have any example website by any chance? Here in Germany I have honestly never seen it done other than the standard. – Big_Chair Feb 2 at 12:51
  • I recommend reading Luke Wroblewski research on this, in particular the bottom of the PDF where he discusses common problems users have when you try to auto complete addresses, such as, what do you do if the user tabs fast and the city address web service does not come back in time? – John Zabroski Feb 5 at 2:00
  • @JohnZabroski: "common problems users have when you try to auto complete addresses, such as, what do you do if the user tabs fast and the city address web service does not come back in time?" - that sounds rather like a general low-level issue of input fields where the content in one field influences something about another field; it's an issue entirely unrelated to addresses or ordering of fields. – O. R. Mapper Feb 7 at 11:15
  • @O. R. Mapper - The whole reason to change the order of fields on the form is so that "one field influences something about another field". This is not a general low-level issue and calling it such doesn't make it one, either. I've provided real usability data with a detailed analysis of what issues users ran into in this UX problem domain. Perhaps you can constructively add something by providing examples of high level issues? – John Zabroski Feb 7 at 12:36
  • @JohnZabroski: It's unrelated to address input, as it occurs the very same way in any other input scenarios where pressing tab triggers an asynchronous call whose result is used to influence the next input field. Thus, it's a general issue, nothing specific to writing addresses as opposed to other kinds of data. – O. R. Mapper Feb 7 at 12:47
1

Filling out an entire address form in reverse order will likely be confusing for the user. So I suggest to break it down: first, the user only sees the input field for the zipcode and city. This could be done earlier in the registration process, or just in a different page / step. At this point, there is no expectations that they have to give their entire address.

Once the user gets to the page / step where they need to give their full address, the input fields appear in the usual order, but the zipcode and city are already completed.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.