Using address finders in web formsPosted March 17th, 2009 by David Hamill
Nobody likes filling out web forms, so a good form is one that can be completed quickly and easily. One feature that helps people do this, is the address finder that pre-populates the address fields using a postcode. If you do it well, adding an address finder will improve the user experience of your forms.
Positioning and appearance
Your ‘Find Address’ button will be overlooked if you don’tÂ position it well and give it a prominent appearance. To start with, don’t put the button to the right-hand-side of the postcode field.
When we’re completing forms, most of our attention is devoted to the top or left-hand-side of form fields. We scan between the form field and the label. So we often don’t see things that are placed to the right of the form field. The example below shows a web form that makes this mistake.
Another problem with this example is that the button itself doesn’t really stand out. I’d have reversed these colours so that the background was purple and the text white.
Here’s another example below.
This one doesn’t even use a button (buttons are good for indicating an action) so it’s even more likely to be overlooked than the first example.
The previous examples are missed opportunities to help the user. The next example from Travelodge Hotels is likely to just antagonise them. Check it out below.
Loads of people will see this button and think “Oh great, now you tell me”. They’ll have entered their address already. So the button actually harms the user experience. There’s a whole world of validation pain that follows this bit, but I won’t go into that.
An example of good positioning
I don’t like to moan on too long about what you shouldn’t do, so here’s a good example. It’s from the John Lewis website.
The postcode field is the last input field on this form and the ‘Find address’ button is immediately below it. The ‘Find address’ button is essentially the ‘Continue’ button. I like this approach for its simplicity. There are no fields to potentially distract the user and the button is nicely aligned with the postcode field.
Assist, don’t enforce
Imagine you’re in a furniture store buying a new bed. You tell the sales assistant your address so the bed can be delivered and he says “Sorry that’s not a valid address, choose one from this list”. It wouldn’t happen, would it? So why do websites do this?
I know my address better than a stupid database. I mean, I live there for pete’s sake.
Your address look-up should exist to help users, not shackle them. Lots of people have problems receiving deliveries when they use the standard address provided in these address finders. So they need to change the address a little.
Allow some flexibility when providing an address lookup . There are 2 main ways of doing this:
- Don’t use the look-up to populate the house name/number
- Provide a list of addresses for the user to select from, but also provide a ‘my address isn’t here’ option
Which ever you use, make sure the address can be manually amended.
Also be careful about how you validate the form. Only exclude characters you know for a fact do not appear in any addresses. It’s best not to bother. If you’ve prepopulated most of it, there is little need to validate the fields again.
But I’m protecting data quality
You might argue that by enforcing the use of your address database, your form is guaranteeing that valid data has been entered.
But this is a purely programmatic view of valid data. Your data doesn’t validate because it agrees with your address database. Instead it truly validates when your customer receives their delivery without hassle.
There’s little benefit of the data validating with your database when doing so dooms the delivery to failure.
An example of the wrong approach
I was once trying to buy insurance from an old client of mine. I entered my postcode, chose my address from the list and hit the ‘continue’ button. The form validation barked at me to provide a valid address, despite having put the address in itself.
The address was correct. But, the full stop in ‘St.’ (to respresent the word saint) was not accepted by the validation. I couldn’t change the wording manually because the form didn’t let me edit the address fields. Needless to say I left and bought my insurance elsewhere.
I wanted to see the extent of the problem on my clients business. So I went to Streetmap and did a search for all of the streets in the UK with the word Saint abbreviated as ‘St.’ in them. Either Streetmap or my computer couldn’t handle the results and my browser crashed. By this time, well over 1000 results had been returned. That’s a lot of people who can’t buy insurance from your company.
Enjoy this post?
If you enjoyed this post you might also want to read:
You can also subscribe to me RSS feed if you haven’t already.