E-commerce Checkout Design Deep Dive (Part II) — Address Collection
Given the importance of the usability of the checkout form, you’d think that most e-commerce sites would spend the efforts to optimize the UI so that the legit buyer can complete his purchase as easy as possible
What I found surprising is that the sites that process thousands or even million customer have not paid enough attention to the tiny things they can do to help their customers buy things on their own sites. For example, giving the right label for Address Line 2, or auto-format the spaces in the card number field are obvious changes that have clear usability improvements and involves trivial efforts, yet around 50% of the surveyed sites aren’t applying this trick and so opportunities are lost
In Part I, we looked at the common patterns on the credit card collection form. In this Part II we now move on to a burdensome process we all go through when buying things online: giving out your home address to the merchant.
Similar to how we approach credit card, we first formulate a set of criteria
- Is the user allow to select the country of the address? If so, where is the ‘country’ field placed?
- Does the site collect 1 line or 2 lines for address?
- Does the address form provide a descriptive label for a “line 2” such as apt. no or unit? Researches have show that unclear “address line 2 description” leads to user confusions
- For the “state” field, does it use full state name or state code?
- Can it detect that the entered address is valid or not, and inform the user when the address is invalid?
- Does it auto detection the address based on user’s input?
Again, we categorize the the surveyed sites in three groups: Baymard-ranked e-commerce sites, the top Internet e-commerce giants (Google, Amazon, eBay) and payment processors (PayPal), and then a set of hospitality service (Airbnb, Expedia) and Internet upstarts.
Survey Result
In our table below, we also highlight the results with different colors that express a common sense judgment on the feature’s usability:
- Green label denotes the feature that helps improve usability because it reduces the number of fields entered, or has better clarity
- Orange label means that we are not sure if this feature helps or degrade usability
- Red means that this feature hurts usability because it is more ambiguous, or make the flow more cluttered
Baymard Ranking ranked E-commerce sites
I expected that these sites will set the baseline for common patterns in address form treatment. For the most part, my expectations are met. With the exception of Office Depot and Nike (which is ranked much lower than these other sites anyway), these address forms implement patterns that helps the usability.
Address forms from Internet giants and payment processor
The surprising observation is that Amazon, perhaps the biggest online merchant on this planet, actually has … let me put it euphemistically, design that are contrary to patterns that we observe from other merchants:
- The buyer needs to select the country at the bottom.
- There is no meaningful test on the ‘Address Line 2’
- It accepts arbritrary input for the ‘State’ field
- Despite the vast number of address entries it possess, it does not auto detect even the city or state of the address for the user.
Address forms on on several hospitality or service-based merchants
For hospitality or travel sites, there isn’t anything to ship, to address form is generally used for billing address collection.
A pleasant surprise is that both Airbnb.com and Snap Spectable sites have address designs that are on par with the top Baymard-ranked sites. Perhaps it provides a glimpse of why these two business have gone through tremendous growth in their user base —it could be that because the users just find it easier to use these sites compared to other sites.
Observation for common patterns
Treatment for ‘Address Line 2’
While almost all (except Groupon) supports an explicit “Address Line 2” field, surprising only 50% of the surveyed sites have meaningful text for address line 2, e.g. ‘Apt No. Bldg (optional)’.
Given that more than 50% of houses in the US are single-family detached house, we can assume that perhaps half of the site visitor may not bother to fill ‘Address Line 2’. A lot of screen real estates is taken up by a full line for ‘Address Line 2’ though.
Address validation and auto-detection
The most labor intensive in the whole checkout process is likely filling out your address (and why Chrome’s form fill is so useful). However, it makes complete sense why this is so hard though: the merchant needs to make sure that the address is correct, so that the goods can be delivered into the buyer’s house without problem.
Accuracy matters when entering your address. A few merchants have a few delightful tricks:
Take Target.com as an example. When I type in the zip code, it is able to automatically fill in the city and state for me (see below):
Baymard has a great guide about how this can be done: https://baymard.com/blog/zip-code-auto-detection. Only 40% of the sites have this feature.
Baymard suggests a vendor to onboard to an address verification service. However, if you’re a medium/large size merchant, it is likely that you already have thousands of address records at your disposal, and you can easily build an zip/city look-up service on your own.
Nevertheless, the perfect solution would be that the address is filled out for you automatically. Besides Chrome’s form fill, an increasingly number of merchants have integrated Google Address Auto-complete on their websites. Out of all the sites that provides address auto-complete, I believe Staples.com has the most ‘delightful experience:
- Initially, only the ‘Shipping Address’ is shown to the buyer, making this form much less intimidating.
- When the buyer enters his address, auto-complete suggests the address candidates that he/she can choose from.
- Once the buyer selects an address, the form expands and reveals the specific street/city/state/zip fields. The user can still manually edit individual fields.
Interestingly, Google Maps has a virtual monopoly over address auto-complete API. I wonder why the other map API has no similar offering…
Finally thoughts
Although the mobile commerce is gaining a lot of attention , make no mistake — people are still buying from a desktop browser. People might browse the items or add it to their carts on their mobile phone. The final checkout step, however, is most likely happening on their laptop. In that case, offering a smooth, delightful checkout experience on desktop is the least a e-commerce merchant can do to increase its sale.
In particular, there is a real opportunity for merchants that sell niche items or services to retain their buyers who might visit the sites occasionally, or when a specific needs arise. First impression matters. When your customers think about buying shoes, you don’t want them to be reminded of their painful experience about correcting out their credit cards and address info on your websites (and I’m looking at you).
Note: It was fun writing Part I, and in particular I was encouraged by message from old and new friends. Indeed, Medium provides a great way for sharing knowledge and ideas, and each of us, no matter how insignificant we think our job or work is, possess knowledge and thoughts that we can offer through our words. And who knows, maybe someone on the Internet, somewhere, some day, might find what you write valuable!
