What are the features that define user-friendly navigation, efficient checkouts and streamlined product filters?
How can we make e-commerce websites more effective by using user experience (UX) design to increase conversions?
Here are the key e-commerce elements that can benefit from better UX design:
The most important – and obvious – thing in user experience design is to remember that you are always designing for the user, not yourself.
The user journey through your e-commerce website starts with your website visitors using a device to get there. It is essential to understand what devices your users will be using and whether you prepared to handle both mobile and desktop users.
Even though responsiveness has received a lot of attention over the past few years, there are still too many stores who are clearly designed desktop-first. This basically means that the business owners and designers focused on creating an experience best viewed on desktop and then threw together a version of the website for mobile (if that).
In 2017, when most users use their cellphones to browse and get information, you can not afford to not make the mobile version of your website a priority.
Moreover, conversion rates on smartphones are quickly catching up to traditional devices, so there is no reason to assume visitors don’t buy on their phones when it was always poor UX (both in terms of usability and security) that kept them from doing so in the past.
Firebox does a great job of delivering a beautiful desktop experience but just as delightful a mobile experience.
Images and Videos
A great visual experience is, of course, vital to your brand positioning. However, any images and videos (or other multimedia) should be used strategically based on different user scenarios.
One important thing to note is that you can not think of this in isolation. You might love your sleek new advertising video and want to have it start playing automatically when users visit your website. However, that might not be the most optimal solution for those viewing your website on mobile. Consider restricting that to only the desktop-version of your website. The mobile version could have a play button that the visitor could tap if they wish to do so.
Instead of pushing all your advertising assets, think about what’s the most direct and simple way to communicate what you offer (your product) and who are you offering it to (your target audience). The visuals and text you choose to communicate this could mean the difference between your visitor continuing on their user journey or clicking the little cross button and moving on to a competitor.
Farmdrop uses hand-drawn illustrations on its homepage to not only add visual interest (try hovering on them!) but also represent its offering in a simple easy-to-understand manner.
It’s always a great investment to get your own beautiful product and campaign photography done by professionals. A great user experience is built on originality and authenticity, and bad or cliche visuals can easily take away from it.
Even if you are on a budget, you may still want to avoid overused stock imagery. Check out Burst for free and relatively newer images you can use on your e-commerce website.
Navigation & Search (product filter)
It’s definitely worthwhile to feature your newest and most popular products on the homepage. But that’s only really serving users who want to browse, look around and, perhaps, be tempted to buy something.
What about the ones who are looking for a specific product or style? They could be looking for just leather boots or summer tops or blue pants they saw a friend wear. You want to make it just as easy for them to find what they are looking for.
Nordstrom has one of the best filtering systems online. Products are filter-able by almost every attribute that is important to most users. And, the system allows searching using a combination of filters, such as dress length, style and material for our selection above.
My suggestion: why not ask the user themselves instead of assuming? The very first thing your website asks could be “Do you want to look around or search for a specific product?”. Based on the user’s selection, you can lead them to your homepage or a beautifully designer search/filter page. And, of course, have options to go back and forth between the two modes easily.
One easy way you can ask your users this is through a pop-up which brings us to the next point.
To Pop-up or Not to Pop-up
Pop-ups make giving and receiving information easy for businesses interested in knowing more about their customers, and they can be really useful for certain users. However, the general consensus is that they are annoying to most online visitors. Ever tried getting rid of a big pop-up on a mobile device? It’s quite the hurdle and not exactly great UX.
My rule of thumb is to avoid pop-ups if your user is visiting from a mobile device. And use very sparingly even in the desktop version.
Cute+Broke – which boasts excellent UX design throughout its website, in everything from its clean aesthetic to clutter free checkout— makes good use of the pop-up by turning it into an opportunity for providing their visitors with a digital assistant.
Depending on your brand’s personality, you may not want to push your social icons all the way down to the bottom of your website, accessible only through a complete scroll.
If your users are mostly millennials, they want to see how your brand is visible on social media and, especially for fashion and apparel, who’s wearing it and how!
Leveraging your beautiful Instagram feed on your website can bring it a level of aliveness and engagement that your website may otherwise lack.
Modern users want to feel like they are purchasing from a brand created by humans for humans. There is no better way to show that than through a lively and frequently updated social media feed. One that not only has a human voice to its posts but also occasional authentic images of your team and customers creating and enjoying your products respectively.
Vertty has a unique lifestyle product that it uses its Instagram to showcase in a variety of use cases.
If you are selling a product like books or electronics, it can still benefit you to have a vibrant social media presence and active communication with your customers, but you may not need to push your Instagram or Facebook feed in front of every visitor to your website.
Understand what your user wants from your product and e-commerce experience, and don’t underwhelm or overwhelm them!
Checkout, quite simply, need to be a hassle-free process.
From a clear and easy-to-access “Buy” button to the receipt, you want to make the whole process as simple and quick as possible.
One-click checkouts should be an industry standard by now but, unfortunately, we still have too many e-commerce websites that make customers go through five pages of form filling before wrapping things up!
Brands get greedy at this point for customer information thinking they have already converted them and can glean more details about them.
The entire point of delivering great UX is so that your customers have a pleasurable experience and will want to return in the future as well.
A buggy and broken checkout process can easily be a deal breaker but a checkout that has way too many demands -“create an account”, “required information” that can easily be made optional – can just as easily leave a bad taste in your customer’s mouth.
If your visitor only ever wants to buy once from you, there is no point in requiring them to make an account. They will never use it anyway beyond that purchase. So, whenever possible, allow for guest checkout.
Cute+Broke has one of the cleanest, easiest checkouts on the web.
You can definitely add suggestions for other complementary products when your customer is visiting their cart.
It makes sense to add website hosting or email when you’re buying a domain, for instance, but it is advisable to think through your strategy of suggested products instead of randomly showing other products.
Remember, great UX is not about what would you think would benefit you directly. It’s about what would benefit the user so that it can benefit you indirectly.
Warby Parker has a very clean cart view and allows customers to keep shopping or sign up through non-intrusive prompts.
It’s also generally useful to have a gift option. And, if you have a system to add a note (or more), that can only elevate the user experience.
The current average shipping cart abandonment rate is around 70%. That means e-commerce businesses are losing over two-thirds of potential customers. An intuitive and efficient checkout and cart system can at least ensure that the ones abandoning aren’t doing it because of the way your website is designed!
eMailing (when it’s user-friendly and when it’s unwarranted)
Only email the user if they have made an account with you, subscribed to your list or to send them a receipt/confirmation/followup after they’ve placed an order.
Even if they have purchased from you, it does not naturally follow that they want to receive updates from you. Don’t take their (or anyone’s!) consent for granted.
Kohezi sent its customers a beautifully designed simple email showcasing its new product variation that smartly times the release date in time for Christmas shopping.
How well is your website optimized for differently-abled people?
It’s not just a matter of good design but increasingly a legal issue.
It is not very hard to make special accommodations, but they can go a long way in providing a fulfilling experience to users who may be interested in purchasing your products but just require a little assistance.
LeaVerou’s GitHub can help you check your website’s contrast-ratio to make it more amenable to the color-blind.
You can, for instance, use alt tags for all your images so that screen readers are able to read out the contents of an image for the visually impaired. You can also consider keeping your copy simple and direct to help those who have reading disabilities.
When it comes to user experience design for e-commerce, you want to maximize utility, usability, desirability and accessibility. If you are doing well on these metrics, you can be confident that your user experience is not only not hindering conversions, but actively increasing them!
How does your e-commerce website stack up in terms of UX design? Let us know in the comments below.
Latest posts by Babar Suleman (see all)
- Conversion Wireframing: A Revenue Oriented Design Process - June 1, 2018
- Designing for Subscription: 6 UX Musts for Increasing Sign Ups - January 9, 2018
- Are You Losing Money Due to Poor UX? Fix These Nine Mistakes and Profit - November 2, 2017