How Supermarkets Can Inspire Website UX
User experience is far from a new trend. You only have to look at industries that are consumer facing and well established to find aspects of UX everywhere. A supermarket is a perfect example of this, being built with such precision and planning to maximise efficiency and profit.
Everyone has walked into a supermarket for bread and milk and left with a bag full of other items. Everyone has given into the bombardment of snacks presented to them at the checkout. Everyone has looked for just one item and found it within minutes.
This isn’t you making a decision. This is the supermarket being meticulously constructed and fine-tuned to give you a positive experience while squeezing out every last penny.
Direction
Supermarkets sell thousands of products. With everything from flowers, to chocolate milk, to portable barbecues available, they can’t throw everything in a big warehouse and expect shoppers to find what they need. They will leave and visit another supermarket rather than spend hours finding the few items they arrived for.
Therefore, supermarkets use sections, aisles, shelves, and signs to sort items and direct shoppers. Do you need chocolate milk? Great, it’s in the dairy aisle next to the cheese and yoghurts. Portable barbecue? In the home and outdoors section. Signs help shoppers find what they’re looking for in a matter of minutes, while sections and aisles make the store predictable and navigable.
Websites use a similar method of sorting and direction — Navigation. The majority of websites have multiple pages, while some have thousands. Consider these pages like a product in a supermarket. This is easy to imagine for eCommerce sites such as Amazon, but it’s true to most other websites too. Visitors arrive looking for something specific, whether it be contact details, the answer to a question, an article, or a plentitude of other options that can all be considered products of the website.
Taking inspiration from a supermarket, websites segment, sort, and provide direction to help users quickly find what they’re looking for. The main navigation includes a few descriptive and encompassing categories, such as Products, Resources and About Us. Further pages will fall within these, as sub navigation or drop downs, or be linked to on the page.
The aim is to direct any new user or shopper to the product in a straight-forward manner, to prevent them becoming lost and leaving the website or store. Navigation items should explain and encompass everything within, and not overcomplicate the process. The fewer clicks it takes for a user to navigate around a site, the better. Search is useful here, and it is important it’s fully tested to ensure common user queries bring up the correct pages.
Expectation
You may notice when you walk into a new supermarket, you already have an idea of where things are. The fruit and vegetables are near the front, the alcohol in the back corner, and fresh fish and meat counters on the back wall. This follows on from how a supermarket directs you around the store — instead this time, they rely on you to direct yourself based on previous experience. This adds efficiency to each shopper’s visit, makes building a new supermarket a templated affair, and has plenty of dark patterns to make the shopper spend more, such as placing common items far from each other so the shopper will be tempted by items on the way.
Users of websites have similar expectations, and a good UX designer will play to these. While website design trends are constantly changing and many websites seek to subvert these trends, the majority conform, creating an experience that is similar across the internet.
In basic terms, websites will have a header and a footer. The header will contain the navigation, the footer may also. You’ll be able to find key pages in the navigation, and lesser visited pages such as legal and logistical information in the footer. The homepage is a starting point for any website, explaining what the website is and providing initial navigation. The ‘About Us’ page will give more detailed information, and the ‘Contact Us’ page will display methods to get in touch.
Where these expectations get more interesting is in precise placements of different elements, and what happens when those elements are somewhere else. Imagine a website you visit often and answer these questions:
- Where’s the navigation?
- Where’s the search function?
- Where’s the link to log in?
Think of another website. Think of two more. Can you think of any websites where they aren’t all in the header?
Now imagine visiting site you haven’t been to before and looking for these elements. You’ll automatically look where you expect them to be. If they’re not there, you won’t know where to look next and if you can’t find them, what is keeping you on the site?
This goes for other elements of the interface as well: Buttons should look and function like buttons. The search bar should let the user see what they’re typing, and find what they’re after. Zooming in should enlarge the text for those who need it to. The list goes on.
Websites trying to do something new might disregard these trends and if enough do the same, new trends are formed. However, the key to user experience is simplification. Don’t make it difficult for a user to find what they’re looking for by placing it somewhere they won’t expect. Think of users like shoppers — if you hide the milk away in the clothes section, they’ll never be able to find it, and you’ll sell less milk.
Up-selling
You’ve filled your basket, ticked everything off the shopping list and are making your way to the checkout. However, the shopping experience is not over and you’re confronted by yet more products. Tempting nibbles, chocolate bars, and chewing gum. “Treat yourself”, or “they’re only 60p” you tell yourself as you take one and place it on the conveyor.
This is up-selling, and supermarkets do it everywhere. Apart from snacks, you’ll often find special offers, magazines, cold drinks, and gift cards, all between you and the till. These are small and cheap items placed there to harvest every possible penny from you before you leave.
They’re still not done once you leave the store. If you’ve got a supermarket membership card, or shop from them online, you’ll likely receive newsletters and special offers designed to tempt you back. Even your receipt probably has a ‘win a free shop if you hand us over your data’ type competition on the back.
Websites are guilty of these tactics too. While you expect eCommerce sites to encourage you to add extra items to your basket, up-selling is present on other sites in the form of call to actions, related pages, and links. They entail to keep you on the website, even after you’ve found what you’re looking for. Web designers know the longer a user stays on a website, the more likely they are to click on adverts, purchase something, or return to the site in the future.
A section after a blog post suggesting related articles can be seen as a shopper arriving at the checkout, only to be bombarded with more products. A call to action asking the user to sign up to the newsletter is like a cashier asking shoppers to join the store’s loyalty scheme. And a landing page requesting data in exchange for a download is similar to that pesky receipt competition.
The key for designing these up-sell elements is to keep them subtle, unobtrusive, and beneficial to the user. That’s why putting related articles after a blog post is much more effective than random ones — the user is already interested in the topic and may want to find out more. Supermarkets do this by putting their best offers near the tills. Shoppers find benefit in thinking they’re getting a bargain, but the supermarket still comes out on top.
Completion
After you’ve given in or waded through the final checkout challenge, you place your items on the conveyor or scan them through self service tills. Either option you take, the task is simple and fast. The product’s barcode is scanned and added to your bill, and you have multiple options to pay, some as simple as tapping a card on a reader.
This process, like the rest of the supermarket, is designed to be as easy for the shopper as possible. Any complications can damage your experience and opinion of the shop, while also slowing down sales.
eCommerce websites have caught on to this rapidly. For example, Amazon’s one-click buy function means users can literally buy items within seconds. Checkout processes have become smoother by removing unnecessary options or navigation, designing better forms, and offering to save data such as card details and addresses.
Other websites can find inspiration from supermarkets by making their products easily discoverable. Pages shouldn’t hide key information away; they should follow how news is written by placing all important information, imagery and additional navigation at the top, with further information lower down the page as it becomes less relevant. If you want a user to focus on something, remove distractions and make sure it stands out on the page.
Websites, like supermarkets, must be built by putting customers first. They arrive to fulfil a need and should be given every opportunity to complete their journey quickly and efficiently. By all means, they can be directed around in a way that is in the interest of the site or supermarket, but their experience must remain smooth, pleasurable and beneficial if they want the user to keep shopping.
It’s always worth thinking about established practices when creating a new website, and those practices don’t just have to be other websites. Next time you’re struggling to design something new, why not look at something old?
