Articles

Form Usability: Getting ‘Address Line 2’ Right

“Address Line 2” form fields — where users add an apartment number, suite, or other “secondary” address information — will often only be used by a minority of users.

While there’s nothing wrong with including “Address Line 2” in the address form, our large-scale Cart & Checkout testing reveals that the “Address Line 2” form field can be a surprisingly difficult hurdle for some users to overcome when filling out their address information.

In fact, our usability testing shows users coming to a halt and puzzling over the field, inputting incorrect information in the field, or simply becoming distracted by the field and staring at it, without ever entering any information into it. For some users, the field is quite frustrating, increasing the chance that they would leave the checkout without completing it.

In this article, we’ll discuss the test findings from our Cart & Checkout usability study related to the “Address Line 2” field. In particular, we’ll discuss:

  • Why “Address Line 2” fields are so distracting for some users
  • How to include “Address Line 2” in the address form to avoid distracting users
  • 3 UX Implementation details to consider for “Address Line 2”

“Address Line 2” — A Surprisingly Distracting Field

It may seem that “Address Line 2” — which likely won’t be used by many users — would simply be ignored by those users who don’t need to input anything in the field.

Yet, during testing, users were often observed to be confused by “Address Line 2” fields, which made 30% of users come to a stop and furthermore made some question if their initial “Address Line 1” input was correct.

During our large-scale eye tracking testing, users were often observed to rely on the location of form fields — and not always read the labels — to determine what fields to complete and how to complete them.

Hence, many users inputting their address information are likely to not read the label “Address Line 2” — instead, they’ll simply continue filling out their address information, only to realize later that they’ve entered information in “Address Line 2” that shouldn’t be there.

Even on forms that more explicitly label the “Address Line 2” field, users still came to a halt during testing. Here, at Crate & Barrel, a user said, “I’m trying to establish an overview over what…Um…I’m thinking. What information is necessary to type next, and is it relevant for me?”.

Furthermore, while “Address Line 2” fields are always optional, we consistently observe that optional inputs presented as open text fields nevertheless demand a disproportionate amount of attention — seen especially in our eye tracking study gaze plot data — as users still have to notice that the field is optional and determine whether the field is relevant for them.

In order to understand whether it’s relevant or not users will need a somewhat good understanding of address formatting and structures, and it was in particular observed that the users without anything to input in the “Address Line 2” field struggled with understanding it.

Besides the high amount of focus, another commonly observed issue with the “Address Line 2” field during testing is field ambiguity, with users often wondering if they should type all street information in “Address Line 1” (street name, number, apartment floor, apartment number, etc.) or divide it into two, following the logic of “Two form fields, two inputs”.

The presence of an “Address Line 2” field can therefore unintentionally confuse users who don’t have any use for it.

During testing, most users were able to solve this issue themselves and the presence of an “Address Line 2” form field will therefore seldomly provoke a direct validation error. Yet it should be noted that users will generally go to great lengths to try and preempt validation errors during the checkout process.

Hence, even though “Address Line 2” may not directly provoke a validation error, testing showed how “Address Line 2” often results in users coming to a complete stop in the typing flow and making mistakes when entering their shipping information — resulting in a needlessly cumbersome typing experience.

How to Include ‘Address Line 2’ in the Address Form

After filling out the “Address Line 1” field at REI a user tabbed through the “+ Add Address line 2” and “+ Add a company name” links. The user was clearly aware that they were there — as evidenced by the eye tracking gaze plot data that show the user staring at the links — but the typing flow isn’t interrupted.

A design pattern that during testing was observed to perform well is to simply hide the “Address Line 2” form field behind a link. By only permanently displaying “Address Line 1”, users are much less likely to second-guess their initial input, as there’s no immediately available option to divide the address in two.

As importantly, on the sites that provided a link to reveal the “Address Line 2” field, our eye tracking testing revealed that all users noted the links before moving on or engaging with them.

This is a crucial detail, as the subset of users who do have a use for “Address Line 2” of course need to be able to spot the link.

Besides reducing ambiguity and speeding up typing, an additional bonus of hiding “Address Line 2” is showing one less form field by default, making the step feel less intimidating.

Note: hiding “Address Line 2” behind a link is naturally only advisable if the majority of site users don’t need it. If a significant amount of users do need “Address Line 2”, it should be permanently visible as a form field. If in doubt, it’s advisable to run a custom analysis of the current order data to gauge the usage, but also analyze the type of usage (i.e., the amount of wrongly submitted “Address Line 2” data).

3 UX Implementation Details for ‘Address Line 2’

Hiding the “Address Line 2” field behind a link is a good first step toward improving the usability of an address form. However, there are three important implementation details to get right when including “Address Line 2”:

1) When collapsed or expanded, the visible address line fields (and all other form fields) should be explicitly denoted as required or optional. On the sites that didn’t explicitly denote both field types, users spent more time filling out the fields and more frequently ran into entirely preventable “Field is required” validation errors.

In fact, when testing mobile checkouts, 75% of the test subjects experienced severe form usability issues on sites that failed to mark both required and optional fields clearly.

2) Links for revealing form fields such as “Address Line 2” should be part of the keyboard tabbing flow, while links for help and tooltips should typically be skipped in the keyboard tabbing sequencing.

During our checkout usability study, 62% of the test subjects used the keyboard tab key to navigate through form fields.

However, secondary links used for tooltips and disclaimers in forms proved disruptive to subjects who were tabbing.

Considering that users who are stuck or in need of help will need to spend several seconds, if not minutes, to find, read, and understand any help, the ability to save around 0.5 seconds by being able to tab and then click “Enter” into the tooltip is relatively small compared to the friction it presents for every single user, who doesn’t need help, and will instead have to tab through the tooltip to progress to the next form field.

Therefore it’s worth considering specifying a custom tab order for tooltips and similar links, thereby “skipping” certain items.

At J.C. Penney, “Address Line 2” is placed immediately after “Address Line 1” and has a “+” icon to indicate it expands when clicked.

3) The link revealing the hidden “Address Line 2” field must be styled so it’s clear it expands into an additional form field. This means placing the link right after the “Address Line 1” field (below or to the right), adding an indicator such as a “+” icon, and using “add” terminology as part of the link text.

Ensure ‘Address Line 2’ Doesn’t Bring Users to a Halt

When testing Amazon, a user completed “Address Line 1” with ease, then tabbed. When the user saw that she was in “Address Line 2”, she came to a full stop, pausing for some time, before finally deciding to move on.

The “Address Line 2” field certainly isn’t that one single thing that will make or break your entire checkout experience. It is, however, one of those 10–20 smaller improvements that it takes to lift a checkout experience from good to great.

Hiding “Address Line 2” behind a link is, for most sites, a simple incremental way to improve the checkout experience without requiring many resources to implement — in other words, low-hanging fruit.

In addition to hiding “Address Line 2” behind a link, it’s important to:

  • explicitly mark the field (and all other form fields in checkout) as “required” or “optional”,
  • include “Address Line 2” as part of the keyboard tabbing flow, while ensuring tooltips and other help links aren’t, and
  • make it clear “Address Line 2” can be expanded by using an icon or text.

Yet only 5% of sites hide “Address Line 2” behind a link.

This article presents the research findings from just 1 of the 600+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” e-commerce user experience.

Authored by Edward Scott on September 4, 2018

Share:
If you have any comments on this article you can leave them on LinkedIn

We first published an article on the topic of “Address Line 2” fields in November 2014, this article have been rewritten entirely with our newest usability test findings.

User Experience Research, Delivered Twice a Month

Join 30,000+ UX professionals and get a new UX article every second week.

A screenshot of the UX article newsletter