8

I'm trying to design the best way for an existing customer to confirm their street address and these are the two designs I have come up with.

Method A

I like this because it's easy to read and they can breeze on through. If it is their address then they don't see the form. If they select "no" the form appears and they fill it out. I guess I could prefill the inputs and they wouldn't have to fill out the entire box, but that could possibly be confusing.

Method B

This seems to be the more common way but why? It seems harder to process the information and the user has to go farther down to hit continue. I guess it might be easier to make a street change since it's prefilled but that's the only benefit I see from it.

But which would actually make their lives easier?I have already flipped through Luke Wroblewski's Web Form Design with no luck on a solid answer.

Method C (Brought up in comments below by Crissov)

Very similar to A (as he said). This method does address the problem that the question and the address are separated (a problem brought up below by dan1111) but the person has to read the address in a format that is slightly less familiar for forms. It also has the same issue with Method A where it might be a problem to "concatenate the address in a format that makes sense to the user" (Matt). I do like how concise it is though.

enter image description here enter image description here

Improve this question
8
  • 1
    I tend to prefer approach A, but in a way that the displayed address becomes editable if a user selects No. By the way, ZIP code unambiguously determines state and city in the US and most other countries. So you should always put that simple numeric field first and auto-fill the rest, despite the preferred address format of the local postal service. (Actually, I like unrestricted multi-line inputs with smart parsing for addresses – that’s the same input that electronic letter envelope scanners have to deal with every day millions of times.)
    – Crissov
    Commented Oct 22, 2014 at 16:03
  • @Crissov ZIP code does not unambiguously determine city and state in the US. However, I share your sentiment for the single, combined address field. It just requires a good address parser. (Shameless plug, SmartyStreets does this.)
    – Matt
    Commented Oct 22, 2014 at 16:04
  • @Matt Indeed, there seem to be some border cases [pun intended]. My quick read-up suggests that these are few enough to warrant auto-filling with the ability to correct state and city afterwards.
    – Crissov
    Commented Oct 22, 2014 at 16:11
  • 1
    I have to add that some services request street name and street number separately, which can lead to problems in international environments (switched order of number & street name) or named houses (Big Mansion Main St). If you have to connect with any of service which requests them separately, I'd separate the fields even if it is a slight inconvenience to users. You may also want to offer the possibility of multiple addresses for a single user.
    – SBoss
    Commented Oct 23, 2014 at 6:31
  • @SBoss: Not to forget systems that insist that a street number can only be numerical, when your street number is actually something like 9b.
    – O. R. Mapper
    Commented Oct 23, 2014 at 7:06

4 Answers 4

Reset to default
8

Ultimately, it's a trade-off: Method A has the advantage of being concise, but Method B has the advantage of being consistent.

(I'm the UX guy at SmartyStreets where we deal with addresses a lot.)

I like Method B better, and here's why:

  1. The address is displayed in a familiar format that the user can quickly scan for correctness.

  2. The user does not have to make the extra, deliberate choice of whether to change the address. Instead of an active choice, it becomes a passive choice.

However, the prompt before the form on Method B is a little confusing. Saying "Edit the address for ..." makes it seem like you are requiring the user to change the address. Rephrase it to be something like "Confirm the address for..." or just a title, "John Johnson's address."

I don't like Method A because you have to concatenate the address in a format that makes sense to the user depending on their country, which can be complicated. Even if you're dealing just with US addresses, combining the address into one line isn't always easy because of the various different formats described in USPS Publication 28 (and that only applies if you're standardizing the addresses). And then you still have to present the user with another choice: whether to update the address or not. Chances are you don't want to interrupt the user's flow and force them to make another choice before continuing.

I think if you just rephrase the prompt on Method B, that'll be sufficient.

Improve this answer
2
  • 1
    The claim that the address is "in a familiar format" in the edit boxes, while it "[has to be] concatenate[d] in a format that makes sense to the user depending on their country" seems contradictory to me. Based on my own country's conventions, I find writing the ZIP code after the city name highly unfamiliar, let alone the question for the state, which is of no postal significance in my place. Thus, method B doesn't appear to be formatted in a more familiar way to me than what might be shown in method A.
    – O. R. Mapper
    Commented Oct 22, 2014 at 18:28
  • @O.R.Mapper I agree. Ideally, the fields that are displayed on the form (and the order in which they are displayed) should be determined by the country that the user selects. Where multiple countries are accepted, we recommend putting the Country field first. Whether using Method A or Method B, the address still has to be formatted according to country.
    – Matt
    Commented Oct 22, 2014 at 18:33
7

The fact that Option B forces the user to review the address is a feature, not a bug.

Getting the address wrong is usually quite costly to both the user and the website owner--something is going to get shipped the wrong place, mail will not get received, or at least a credit card will be denied. Hence it is important that the user checks that the address is correct. Option B does this in several ways:

  • The address is prominently featured on the screen. The form draws the user's eyes to the elements.
  • The individual elements are clearly labeled and in an instantly recognizable structure.
  • The user must scroll to the bottom, seeing the entire thing.

In contrast, in option A, the address is not highlighted enough. It would be possible to miss it completely, or at least not notice a mistake. It is also necessary to read the sentence to understand what is being asked.

Personally, I also find the format in option B easier to comprehend. Everything is in a predictable location and format, while in option A I have to parse everything crammed into a single line.

Improve this answer
2

This is an A/B test waiting for the 'test'. You have a use case, prototype and now talk to some users, even if its UserTesting.com. I recommend having the user speak aloud as they walk through the three or four views.

Concurrent Think Aloud (CTA) is used to understand participants’ thoughts as they interact with a product by having them think aloud while they work. The goal is to encourage participants to keep a running stream of consciousness as they work.

You only need about 5 users to show you the way. This can be knocked out pretty quickly. Now go and put the 'U' in 'UX'.

Good luck, Ken

Improve this answer
1
  • ...you may just discover there are other areas that need attention like validation routines or button labels/placement ;)
    – Ken
    Commented Oct 22, 2014 at 21:11
2

You may need to handle multiple addresses at some later point in time; Typically shipping- and invoice address.

Solution A scales nicely to two or more addresses by showing all at once, each with a button "Edit" (instead of the radio buttons for yes and no). "Edit" would load the address into the form.

Solution B does not scale very much - it may work for two addresses, but the two forms would be too noisy already.

So, if it's not really sure it will stay a single address, that's a good reason to choose A.

Improve this answer
2
  • I wouldn't have to scale in this particular instance, but that is a good point for that type of scenario.
    – Fletchling
    Commented Oct 23, 2014 at 14:46
  • @Fletchling Half jokingliy: almost everybody thought it will not be needed, until it was needed ;)
    – Volker Siegel
    Commented Oct 23, 2014 at 15:47

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.