“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.
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
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.
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
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 710+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” cart and checkout user experience.
We’re hiring a “UXer to be in charge of our Audit Sales & Support” - is this you or someone you know? see the job description. (Deadline: February 3rd. Referral bonus: $1560 of UX research access)
During testing at ASOS, multiple users stopped and were unsure how to correctly fill their street address in the “Address 1” and “Address 2” fields, often clicking and moving parts of the street address back-and-forth, before finally deciding on how to proceed.
At Walmart, another user, after having typed her full street address, tabbed once and started typing her city name — only to notice it was the “Address Line 2” field. She deleted the input and tabbed once more, then typed her city name.
Having provided the street number in “Address Line 1”, this user tabbed to “Address Line 2” (first image), and only then realized that both the street number and street name should be placed in the “Address Line 1” field (second image).
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?”.
At the billing address step at Cabela’s, a user initially types in the address correctly. However, once she spots the second address line she deletes the “2125” part of the already inputted address (first image) and types it in the secondary address field instead (second image). Other users had similar issues; as one said, “I’m really getting goddamn frustrated — that one [“Address Line 2”] has to be for the number”.
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.
At Nordstrom no fields are marked as required or optional, making it difficult for users to know which fields they must complete to check out.
At Adidas, it’s obvious which fields must be completed as they’re explicitly marked as required (red asterisks) or optional — making it much easier and faster for users to complete checkout forms.
At Crate & Barrel, all users during testing who tabbed through the “Shipping Address” form were interrupted, as a “Tips and Carriers” inline link stole keyboard focus as they tried to tab from one field to the next.
At Sears a tooltip link for the phone number field is skipped when tabbing through the form, helping users stay on track with checking out.
At J.C. Penney, “Address Line 2” is placed immediately after “Address Line 1” and has a “+” icon to indicate it expands when clicked.
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.
- Where do rocks and minerals come from
- What are some unusual fruits?no_redirect=1
- What kind of bird is a titmouse
- What are the best drones for beginners
- What do you think of voter fraud
- How successful is PornHub
- Does Amazon purchase books from its sellers
- What is a deceptively simple photography technique
- Do you use draw io
- Is your name unique
- Does writing poetry come naturally
- How are news reporters chosen
- What do scandinavians think of England
- What is the Kenyan word for wheat
- What is a freelance animator
- How did Pittsburgh become a tech hub
- Is the OM symbol sacred
- Which movie character is widely misinterpreted
- What does tsundere mean
- What is a good knock off perfume