Business Is Booming: A Guide to E-commerce UI/UX Design for Older Consumers
As the world’s population ages, retailers hoping to attract and retain customers will have to tailor their e-commerce interfaces to appeal to savvy older consumers.
As the world’s population ages, retailers hoping to attract and retain customers will have to tailor their e-commerce interfaces to appeal to savvy older consumers.
![Laurence Brothers](https://assets.toptal.io/images?url=https%3A%2F%2Fbs-uploads.toptal.io%2Fblackfish-uploads%2Fcomponents%2Fblog_author%2Fcontent%2Fphoto_file%2Fphoto%2F967375%2Flaurencebrothers-186dc3386cfd70baf5110ea2e948d028.jpg&width=768)
Laurence Brothers
Laurence is Toptal’s Senior Writer for Technology and Software. A former analyst at Google and ITA Software and researcher at Bell Communications Research and Verizon Laboratories, he now writes about the intersection of technology, business, and design. Laurence has five patents for AI and internet applications and a master’s degree in computer science from Columbia University.
Expertise
Featured Experts
Previously at Microsoft
Previously at the Qatar Ministry of Education
Previously at IBM
By 2030, more than 20% of the US population is expected to be at least 65 years old. Among this demographic, online shopping is skyrocketing, a trend sharply accelerated by the COVID-19 pandemic: For instance, a 2020 report by Mobiquity found that online grocery ordering among baby boomers increased by 431% in the first months of the pandemic.
Given the growth of this lucrative market, designing digital products that appeal to older customers is more important than ever. This guide will help you do it.
Simplify Navigation
Designers should strive for simplicity regardless of the target age, but it’s even more crucial in designing for older adults. When working on Tamara, a buy now, pay later app for online shopping, UX designer Omar Aly and his team discovered that older users are more willing to abandon a site that’s difficult to navigate. This was important information, since a large number of the app’s users are over 50.
“One of the things that stood out is that seniors are saying, ‘OK, if it’s too complex, I’m out of here,’” Aly says. For instance, when his team changed the location of a repayment feature and caused widespread confusion, an older user expressed frustration and pointed out that they used Tamara because, until that point, it was simpler than the competition.
One way to simplify navigation for older users is to make it doubly clear what text is clickable and what isn’t. This might mean bolding and underlining links, as designers did for the relaunch of Silvernest, a home-sharing app that helps people with spare rooms find housemates. The average age for hosts is 66, while the homeseekers are typically younger. “We made all of our links even more obvious than what is in fashion, and went back to the pattern of underlining links in semibold,” says Christine Ramirez, Silvernest VP of Customer Experience and Design.
![Image from the website for clothing retailer Talbots. On the left is a woman in a red shirt and white pants. On the right is a woman in white pants and a multicolored blouse holding a tan jacket. The middle text reads, "Great style in every size from 0 to 24." Next to that is stacked text that reads, "Shop misses, shop petite, shop plus, shop plus petite." The text is bolded and underlined, a best practice in design for older adults.](https://assets.toptal.io/images?url=https%3A%2F%2Fbs-uploads.toptal.io%2Fblackfish-uploads%2Fpublic-files%2Fimage_0-202fa446418c468f45abe75fd6825760.png)
Placing buttons for completing tasks front and center on the landing page is also crucial. Older users tend to be more hesitant when it comes to trying ways to complete a task; they are more likely to abandon an e-commerce site if they don’t find what they’re looking for, as Aly found when redesigning the Tamara payment app. Although so-called narrow and deep interfaces are favored by expert users, they can be challenging for older people because they increase cognitive burden and risk leading to confusion or loss of context, says UX/UI designer Jeffrey Johnson, a professor at the University of San Francisco and co-author of Designing User Interfaces for an Aging Population.
Aly agrees, and recommends a linear flow to appeal to older users. “It should be fairly obvious as a step 1, step 2, step 3 situation where you see the whole navigation in front of you.” Many customers appreciate linear navigation, not just older adults, says Kara Pernice, Senior Vice President of Nielsen Norman Group. “For anyone with low literacy or vision challenges, using a linear information path, or LIP, is incredibly helpful.” With LIP’s, once a user gets to the end of the content on a screen, a button or link suggests the next likely step, making them ideal for e-commerce checkouts.
![An image of side-by-side mobile screens, each reading "Welcome John Doe." The left screen has the header "Featured Stores" then has headers for eight stores, including Amazon, Best Buy, and Target. Under that are three buttons, labeled Shop, Finances, and Profile. The right screen has those same buttons, along with a box at the top that reads "Merchant" with a payment amount of $75 underneath that is labeled "Second installment."](https://assets.toptal.io/images?url=https%3A%2F%2Fbs-uploads.toptal.io%2Fblackfish-uploads%2Fpublic-files%2Fimage_3-5176807c18a75bf256fa421af2c8f349.png)
Write Simple Copy and Avoid Stereotypes
The goal of e-commerce copy is conversion. By keeping copy simple and eschewing marketing jargon, you can speak to users’ needs and guide them through each step of the e-commerce sales funnel. At Silvernest, this meant writing microcopy to alleviate users’ fears about sharing their personal information online. “UI language really matters, so we invested a lot of time in these adjustments,” Ramirez says.
When talking to older users, it’s also important to avoid stereotyping or condescending to them, says Pernice. While doing research for Nielsen Norman Group’s comprehensive usability study UX Design for Senior Citizens, Pernice and her colleagues found that language for digital products aimed at older users was sometimes patronizing, and that users felt alienated by content that stereotyped seniors as out of touch or helpless.
![A screenshot of a page from Silvernest. The header reads "Your Background Check." Below it is a subhead with the phrase "No background checks performed yet," with a highlighted button that reads "Get a background check for $29.99." The copy above explains what will happen once someone receives a background check. To the right is a column with the header "Why should I get a background check?" with copy that explains the benefit of obtaining a background check.](https://assets.toptal.io/images?url=https%3A%2F%2Fbs-uploads.toptal.io%2Fblackfish-uploads%2Fpublic-files%2Fimage_2-62d4cfb4a8f217399f96acc0d03aa03b.png)
Consider a Zoom-and-filter Information Structure
A zoom-and-filter design provides an overview of relevant information, then allows users to filter out irrelevancies and zero in on a target. This method is an effective way to guide older users through complex tasks that require substantial user input. For instance, Johnson says the travel search engine Kayak introduces choices progressively. “You tell it what you want, but without a lot of detail. Then it gives you … information and you start applying filters. No, I don’t want flights where I have to change planes. No, I can’t afford first class. As you do that, the number of choices diminishes,” he explains.
![A screenshot of the travel website Kayak. On the left are flight options based on destination and travel dates. On the right are three columns that show the options a traveler can input to change the flight options. Examples include whether the traveler plans to check any bags, what airlines they want to travel, and how many stops they wish to make.](https://assets.toptal.io/images?url=https%3A%2F%2Fbs-uploads.toptal.io%2Fblackfish-uploads%2Fpublic-files%2Fimage_4-7b75439fd93671d1a81881547d4e8f35.png)
Show Users Where They’ve Been and Where They’re Going
Providing contextual clues can go a long way toward helping older users return to e-commerce pages they want to revisit. Pernice says to aim for recognition instead of recall by, for instance, changing the color of visited links or showing that a menu has been selected. She also advocates using breadcrumbs, which show users where they are in the site hierarchy. “They went out of fashion for a little while, but breadcrumbs are really helpful to help seniors move around,” she says.
![Screenshot from the online home furnishings store Wayfair. The header shows an example of an e-commerce UI/UX best practice, leaving breadcrumbs that show where the user is in the site hierarchy. The header reads: Bed & Bath/Bedding/Duvet Covers & Sets. Beneath it is a page with thumbnail photographs showing beds with various duvet covers.](https://assets.toptal.io/images?url=https%3A%2F%2Fbs-uploads.toptal.io%2Fblackfish-uploads%2Fpublic-files%2Fimage_5-94c74e42d864b6fa55f100c952e116d0.png)
It’s also important to create a strong information scent, a term coined by researchers who discovered that users search online the way hunter-gatherers sought food—by following a trail. Users pick up and follow clues when they arrive at a page, so designers should make sure that visual cues ultimately steer them toward their goal. Pernice says that when users see a title or image they think, “‘This is all about flights or this is all about travel. So I will scroll.’”
This also means naming links clearly. “I’ll see seniors click a link and then they go to the page and [they say,] ‘Oh, that wasn’t what I thought it was going to be.’ And so we chip away at their confidence,” Pernice says. “A link is a promise and…you should deliver on that. When you reach the page that the link leads to, confirm that they’re in the right place.”
Once users have taken action—added an item to their cart, for instance—the site should acknowledge it immediately, says Toptal designer Daniyal Ahmed Khawaja. “When you press a button or you perform a task [but] don’t get feedback, you don’t have the sense that it’s done,” he says. “So you keep pressing it again and again.” For less confident older users, knowing a site has registered their action can instill trust and make them repeat customers.
Enable Assistance and Collaboration
E-commerce designers should remember that older users may have people assisting them, says UI/UX designer Jenna Law. “It’s incredibly important that their accounts can be accessed by family members,” she says. “[The older person] might be the primary user, but it could be that their son or sister-in-law is the person who is actually using it on their behalf.”
Most access-sharing solutions tend to be for work teams, but designing to share with an older individual requires a different approach. “At the core, it’s really about tiered privileges,” Law says. “What level of privacy does the older adult still require? What access to private data can we give the family member without [interfering with] this privacy? There is often an assumption that the older adult should be comfortable giving full access to family but that isn’t always the case.”
Foster Confidence and Trust
E-commerce sites have to communicate safety and inspire confidence, especially among older users who did not grow up with the internet and are especially vulnerable to scams.
When designing a website that sold supplemental insurance for Medicare users, Law says she had to signal security throughout the product. “There was a need to place the Better Business Bureau Accredited and Norton Secured logo on every single screen, form, and interaction to reassure users this was trustworthy.” This was partly because of a history of scams against older users within the insurance industry, but also, she adds, “There is a level of mistrust inherent in any interaction that does not include a one-on-one with a real person. This is especially true of older adults whose lives have mostly been dominated by real-person experiences.”
Supporting user trust helped spur Silvernest’s website redesign. According to Ramierez, the company solicited feedback and realized users were reluctant to provide their banking information on the site. To address these concerns, her team tailored the UI to promote the features customers cared about most, such as roommate matching and home-sharing support services.
Designing an excellent “help” section is another way to foster trust. Law thinks they’re so important, in fact, that she advocates creating help systems first. “Forget anything else in your product: Help is your number one thing to design,” she says. “I think a lot of people are designing that last or building out their product and then sticking it in. But help is really your starting point with older users. That is what is going to make them reuse your product.” Many online grocery shopping sites realized this early in the pandemic, as older adults unaccustomed to shopping online suddenly found themselves wanting to avoid crowds and public places. Online grocery shopping giant Instacart even created a dedicated help line exclusively for older users.
Involve Older Users in the Research and Testing Process
A key part of accessibility is involving users of all demographics in the research and testing process. “If you’re doing a study with six people, just make sure one of them is 80 years old,” Pernice says. “If you keep doing that every time you do a study, you’re going to build this knowledge with your team. It doesn’t have to be this big event where you ask, ‘How do we make it work for seniors?’ It just becomes part of your development process and your research process.”
Ahmed Khawaja recommends beginning every design process with empathy mapping and card sorting to understand older users’ needs as well as their expectations. “You need to create user personas and then you have to do user journey mapping,” he says. “Most designers skip all these steps and move on directly toward designing the app.”
Experts say that following universal design principles, an approach that aims to provide barrier-free access to as wide a range of users as possible, will ultimately yield digital products that work for older adults as well as for younger users.
Keeping an eye on accessibility and universal design principles often yields unexpected benefits, notes Johnson. “What we’re looking for is the digital equivalent of curb cuts,” he says. “Curb cuts were mandated…by laws saying that people in wheelchairs have to be able to get around the city. Now 98% of the people who use curb cuts are not people in wheelchairs. They’re people pushing roller bags, people pushing strollers, people with shopping carts, kids on skateboards,” he says. “They removed an obstacle for people in wheelchairs, but they also made life better for everyone else.”
Understanding the basics
What is e-commerce UX?
The goal of e-commerce UX design is to make it easy for customers to find and purchase what they need and want. Baby boomers are the fastest-growing group of online shoppers, so designers should strive to make e-commerce sites that attract and retain these customers.
Why is accessibility so important in e-commerce?
Accessibility is essential to e-commerce UI/UX design. In the US, 26% of adults have a disability. Retailers stand to miss out on conversions if they don’t make their sites accessible to older adults and those with disabilities. They also risk damage to brand reputation, which could further hurt sales.
Why is UI/UX important for an e-commerce web design?
UI/UX can have a major effect on whether a customer makes a purchase or abandons a site. Following e-commerce UX best practices for accessibility is especially important for attracting and retaining older adults who may have vision or dexterity issues that make online shopping more challenging.