At the most basic level, your ecommerce site should be designed to give a broad set of shoppers a positive experience. But a good user experience (UX) isn’t just functional—it’s also intuitive. Key elements of intuitive design include simple navigation, well-organized product categories and descriptions, a structured information architecture, and clear calls to action (CTAs) that lead visitors down the path to conversion. These elements not only lean into the diverse needs of users, but can also help with SEO.
Once you have the basic elements in place, the next step is to start exploring ways to optimize your site and reduce friction points that can result in checkout abandonment. It’s also critical to remove obstacles in your customer journey that could be causing friction. Consider implementing frameworks like Nielsen heuristics and user testing to ensure your shopper experience is optimal.
There are many design territories to consider when setting up or optimizing an ecommerce site, but you have to be careful not to create a clunky or confusing UX in the process. With the help of Buy with Prime UX Designer Marisa Glick, we explore some uncommon, but very important design elements that you should consider for creating the best experience on your ecommerce site.
#1 Don’t add a checkout CTA to an empty cart
One thing Marisa often sees in the online stores of small and midsize ecommerce merchants is a checkout CTA or button in a cart that doesn’t actually have anything to check out. “The inclusion of a checkout CTA on an empty cart can confuse shoppers, and even risks increasing cart abandonment rates,” she says, “because displaying a checkout CTA on an empty cart basically sends shoppers to a dead end.”
Instead, if shoppers land in their empty cart, Marisa recommends a CTA button or messaging that might help encourage them to shop. Consider redirecting them to a dedicated page for your best-sellers, current promotions, new arrivals, or Buy with Prime collection.
“It’s an opportunity to steer the shopper toward discovery,” she explains, which can help them fill that cart. “So when you have an empty cart, make sure you’re hiding or deactivating that checkout CTA and seizing the opportunity to point to your revenue drivers.”
#2 Avoid inactive buttons
To remedy faux pas number-one, you might think deactivating the checkout button is a viable solution. Although it might be intuitive for the average user, inactivate buttons aren’t accessible to people who use screen readers. “The software on most ecommerce sites can’t read inactive buttons out loud,” Marisa explains. “So from an accessibility standpoint, it’s really important to have audio prompts on the back end to notify shoppers that checking out is not an option on this page.”
This goes for checkout buttons and any buttons that you don’t want users to click (yet). Either don’t display a button until you’re ready for the user to take an action, or make the button accessible to screen readers with alt text and audio prompts. Shoppers want to move fast. Inactive buttons are dead ends that lead to frustration and abandoned carts.
#3 Don’t hide required fields or checkboxes
Required fields that aren’t identifiable or opt-in checkboxes on web forms, like acceptance of legal terms and conditions, can further confuse shoppers. For instance, if there’s a requirement somewhere on the page to check a box in order to submit a form, but the shopper missed it, then the submission button doesn’t appear. This puts the onus on the shopper to find the issue that’s not allowing them to move forward.
This issue further complicates scenarios with inactive buttons. “In scenarios where the checkout button is grayed out or dependent on another element on the page, you risk seeing a drop in conversions,” Marisa says. “Some shoppers may think the button is broken, and many won’t take the time to investigate the cause; they’ll just leave.”
Best practice is to avoid inactive buttons, as mentioned previously, and provide more context for required fields or elements. Including “Required” or “Optional” next to fields can help any users understand where inputs are needed. You should also include additional feedback after a user tries to click a CTA before all required inputs are provided. For example, error messaging should display around the input fields that the shopper missed.
“For any interaction where there’s an opt-in requirement that could prevent the user from moving forward, at the very least provide feedback that makes it clear why they can’t proceed,” Marisa says. “If there are legal terms, make sure they’re displayed for anyone who relies on audio prompts. Ideally, instead of a checkbox, your opt-in process should activate automatically when the user clicks through to the next step.”
#4 Avoid robotic error pages
If your site or a page goes down, whether for network issues or maintenance updates, shoppers typically see an error page, or 404 message. These pages present an opportunity to keep shoppers engaged, and potentially get them to come back. One easy tactic to make your 404 pages more compelling is to inject a human element—or even some humor—into the message on the page. “When things go wrong or are temporarily broken on your site, knowing there’s a human on the other end can help put you shoppers at ease,” Marisa says. It can also help them be more understanding, which can reduce the risk that they drop off from your brand’s site completely.
Marisa points to Broadway.com’s approach as a great example. “The headline on the error page is ‘We’re sorry for the unexpected intermission,’” Marisa notes. “So they’re acknowledging that it’s annoying and inconvenient, but they’re also doing it in a delightful and relatable way. It’s a light moment of surprise for shoppers buying Broadway tickets.”
Another option for your 404 pages is to point the user to your social media channels or an app where they can still make purchases or get the information they need.
#5 Don’t assume everyone has speedy internet
For a number of geographic or economic factors, some shoppers may be visiting your site on slow internet connections, so it’s important to build a site that works for a broad audience. “This is particularly important regarding load times,” Marisa says. “Be mindful of image and video sizes and the overall weight of a page, and design them so they load faster for people with slower internet speeds.”
Make sure to design your pages and assets for everyone—whether rural and remote communities, those in lower income brackets, or neighborhoods that simply don’t have fiber-optic internet yet. “We always try to account for mobile and network access and broadband infrastructure in lower-income and less-developed parts of the world, as well as remote, rural, and even urban areas of the US where access is an issue,” Marisa says.
As you invest in some of the basics of website design to improve your site so that no shopper is left behind, remember that the technology powering your website is constantly evolving—as is shopper behavior. It’s important to stay in tune to the ways your specific audiences shop and ecommerce technologies available, so you can keep your site up to date and continue to provide a positive user experience.
As you optimize your site design for usability—and ultimately conversions—learn how Buy with Prime can help your business grow.