18

I am working on an international site that requires the user to enter his postal address. I am wondering if it makes sense to have a slightly different order of input fields in favor of a time saving pre-fill feature.

This is the common format for US address input fields:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

A slightly different order might improve the input form UX:

Let's assume it would be possible to detect the City and State correctly after the user entered the ZIP code (I am aware of some ZIP codes not being unique in the US). Once the user left the ZIP code input field (onblur), city and state could be almost instantly be pre-filled.

mockup

download bmml source

My question is:
Would it really harm the user experience if I changed the input field order, i.e. would many users stumble or even drop off?

8
  • 4
    Are you planning on using this for US users only? Since you mention you are workig on an international site I must say that I (being a European citizen) have no idea what a ZIP code is, or what the state abbreviation is all about. We just use a street name, house number, postal code, city, and country, in that order. An address would be: Masurenallee 8, D-14057 Berlin, Germany. This is also the way I want to fill it in on a website. Commented Mar 12, 2012 at 14:13
  • 2
    @BartGijssens: The user would select the country first. If it was Germany, as in your address example, the order of input fields would change. Still there would be a mandatory input field for ZIP code if the user selected Germany. If the users' locale would also be German the content language would be set to German by default (so it would rather be 'PLZ' instead of 'ZIP'). For Ireland there would be no ZIP code input field. Commented Mar 12, 2012 at 14:20
  • If the validation on the fields is also adapted to the chosen locale, that sounds like a perfect web app! Commented Mar 12, 2012 at 14:27
  • 1
    @BartGijssens I'll try to convince the company to OpenSource it :-) Commented Mar 12, 2012 at 14:32
  • I would rather see the zip code autofill based on the address and city.
    – Taj Moore
    Commented Mar 13, 2012 at 19:53

8 Answers 8

5

I'd rather stick with the well know format since users tend to go to "auto-pilot" in this mode, so making them think isn't recommended. It has also happened to me before that I'm typing / choosing faster then the values are auto-update, creating confusion and sometimes input of double values.

Moreover, you've mentioned it's an international site, so that means:

  1. The user has to choose the country first
  2. You need to have the reverse lookup service for most countries for this to make sense (and I'm not sure you can rely on that)

Lastly - is the zip code a must? If not, it's better to leave all optional fields to the end.

2
  • To my knowledge ZIP code is must in most countries. Some exceptions though, e.g. Ireland.; 1. Right, user will choose country first; 2. lookup service is in place for most important countries (based on current usage); Not all users are very fast typing and the system should be build in a way that it would not overwrite user input. Commented Mar 12, 2012 at 14:16
  • +1 for double entry issue. I would probably tab and enter information in those fields before any auto-lookup finishes; not to mention browsers' auto-fill features. Commented Mar 12, 2012 at 17:54
3

Since you brought up the idea of auto-filling (which would greatly decrease my form filling out time) How about hiding the City/State fields until the zip is filled out.

  • If you can't get a good match from the auto-fill feature then you display the city/state fields and explain that you couldn't find a good match
  • If you do get a match, display the city/state fields filled out correctly with messaging after the display.
2

I agree with Dan's suggestion.

Based on my experience, I've only flipped the order once, and it was for an internal application for users whose job required transcribing addresses from written documents.

It didn't work too well for call-center application, because CSR typically has to get addresses over the phone, and customers prefer to say their addresses in a certain order.

Another item to consider is, it's actually easy for some people to mix up zip code. (e.g. 14171 14711), whereas people know their cities pretty well.

2

From a heuristics point of view I recommend sticking with the most common format of "City, State, Zip + 5".

Another options is to ask for the Zip on a previous screen then on the screen with the address pre-fill the State and Zip while offering a drop-down of possible cities. One of the hurdles your example faces is that multiple cities may exist within a single postal code.

1
  • Thanks for your comment. I am aware of non-unique postal codes. I'd tackle this by just not pre-filling them. Commented Mar 12, 2012 at 17:43
2

I was working on a recent project which required the design of a form based application which would be filled in by educational institutions which are looking for research funds. We did a lot of usability testing about the kind of layout which could perhaps be best used by an international audience and we found that having labels such as the ones mentioned below really confused people :

  • Street Address - Street addresses can be mentioned in so many ways eg: house number first,street address second or street address first, apartment name second,locality third
  • Zip - what do you mean by zip code,further more zip code is a US term and in countries like India,its referred as a pin code,so would you be changing your label text there too?
  • Apartment number (This might seem odd but then most people were not sure if this should be populated by the house number and how applicable this would be in a educational institutional address and whether the apartment number would be the room number in the building ?)

In the end we found that the most simplest solution which worked for everyone was just having a plain textbox for the address field which users could fill up in anyway they wanted.

I know this is not the solution you are looking for but its a simple and effective solution which worked just fine in our case

Edit: I am curious how you plan to do your validation? I worked on a project during grad school in which we built a mapping application for mapping US impact information (locations of libraries and internet centers) in locations such as Chile and Bangaladesh and we found that the only way to get consistent co-ordindates was to use longitudinal and latitudinal points.I know I am not answering your question but do you really have a way to do validation which works effectively?

2
  • I never considered this solution. I came up here twice and I will consider it in another project. For this one, the data entered would be validated and I cannot think of an easy way doing this from a textbox. Anyway, thanks for your thoughts! Commented Mar 13, 2012 at 8:55
  • International validation is bloody hard. Is "2B" a valid house number? "2 bis" ? Don't get me started on houseboats, whose address isn't on a road but in a canal (!)
    – MSalters
    Commented Mar 13, 2012 at 11:45
1

No.

There are zip codes split across states, do you plan on just ignoring them and making the UI inconsistent?

What about zip codes with multiple cities/towns? My home zip code includes a chunk of the neighboring town.

1
  • 1
    Yes, I would exclude ZIP codes that match multiple cities/towns and just not pre-fill. I get your point with the inconsistancy. As users are very unlikely signing up twice for this service I wouldn't consider this to be an issue. Commented Mar 12, 2012 at 18:12
1

I would instead use the city/state as a check against the zip code to make sure they correspond with each other. It serves a similar purpose like making the user type in their email address twice - guarding against typos. I realize you're trying to save the user time but accuracy is more paramount. I would validate it after all 3 are entered and flag the boxes with a red background if they don't match.

1
  • +1 Good suggestion, validation is also important and I'll keep this one in mind. Commented Apr 16, 2012 at 15:06
0

Unless you need the data to be reformatted later or have a need for the data to be separated into specific inputs, I suggest using a single textarea for the address field. This solves the issue of internationalization, and also lets users takes care of any edge cases related to their address that you may not have considered.

It also speeds up the input since the users doesn't have to move between several inputs.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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