How to make the browsing and buying process so much easier.
Attention to detail can make a big difference to the user experience. These little details can even go unnoticed sometimes, until you come across a site that does things differently.
As an example, we’re so used to retailers automatically offering to copy delivery address details over to billing information that it would feel like a very unnecessary effort to type the address twice.
In this post I’ll look at examples of design and copy touches that help to improve the user experience and make the browsing and buying process much easier.
Airbnb’s success has been built on excellent UX, and it took a few years for many online travel brands to learn from them and adapt their user experience.
There’s a lot to pick out here, but I like the map search function, something which makes it far easier to help travel shoppers understand their destination and browse more easily.
You can easily see the location of hotels in relation to the beach, local bars and restaurants, train stations and more. The killer feature here is the option to ‘search as I move the map’ which allows customers to roam around the area outside the original search without re-entering details.
Stock checkers are useful for people browsing with a view to buying in a local store, but many retailers make their stock check tools hard to find, or wait until customers reach checkout before they can see stock levels.
Next shows its stock check tool on its product pages and adds useful extras like allowing people to show only stores where they can collect that day. It simplifies the process and routes them straight to checkout if they choose to reserve items.
Here, Monsoon provides the numeric mobile keyboard for card number entry.
It’s a little detail, but defaulting to the most appropriate keyboard format for the form field helps users and saves them time when completing checkout forms.
Great visual presentation of key information makes it easier to understand important features of products in a much faster and easier way then text alone could do.
Describing the cooking space in terms of ‘number of hamburgers’ is a fun and very useful idea.
Animations can be overdone but, for some products, animated effects can help to show products effectively.
Here, Nixon shows the different colour and watch design combinations as customers mouseover on category pages, so users can quickly see what’s available.
The speed of product search from homepage is impressive here, and saves users plenty of time.
It’s a simple piece of product filtering, but by placing this prominently it gets people into product search and selection nice and quickly.
The filter selection is streamlined here to the most obvious options, but users can go into more detail on the next page.
For fashion retailers online, finding the right size and fit for customers is a challenge. Some sites use fitting tools to help improve the user experience, but it can also be about sharing useful size information.
Here, Modcloth shows useful review information around size and fit, and matches the reviewer’s measurements to the shopper’ profile, so they can make an informed decision.
Waitrose recognises that grocery shoppers are looking for lots of items at once, and has adapted its site search to cater for this.
Using its multi-search tool, shoppers can search for lots of items at a time, so that people can enter their entire shopping list rather than having to search separately for each individual item. This means a faster, and better user experience for users.
Curry’s has some relatively long product pages for products like TVs, as there’s a lot of information to convey to customers, from technical specification to user reviews.
As customers scroll up and down the page, the call to action and the information around it (price, delivery etc) remain visible.
This means shoppers can see the call to action whenever they’re ready to buy, without having to do any work to find it.
From a conversion perspective, this should help to increase add to cart rates, while it’s helpful for shoppers to be able to instantly review price and delivery options.
Voucher codes are a key part of the marketing strategy for brands like Domino’s, and it understands how customers use its mobile sites and apps.
Here, the app understands that voucher codes are normally capitalised, so presents the keyboard defaulted to uppercase. It saves uses fiddling around when entering each character and makes it more likely they’ll complete their order.
Entering passport details can be a fiddly job when booking travel, especially on a mobile phone.
EasyJet gets around this problem with a passport scanner, which scans and populates the form fields in a matter of seconds, thereby removing one point of friction from the process.
Another point of friction in checkout and booking processes is address entry. It’s fiddly work for customers, and an area where mistakes can often be made.
Postcode lookup tools, as used by Hotels.de and others, suggest addresses as users type, which minimises user effort and eliminates potential errors.