31Ten > Research > UX/UI > E-Commerce Design Tactics (That Actually Work) | Part 2 – Seamless Navigation

E-Commerce Design Tactics (That Actually Work) | Part 2 – Seamless Navigation

  • Posted by: Vladimir

This is part 2 of our series about E-commerce user experience design best practices. You can read the part 1 here: A Killer Product Search Experience

“Never let your campaigns write cheques that your E-commerce platform can’t cash.”

70% of online shoppers abandon their carts and leave E-commerce sites without purchasing anything. Window shoppers aside, a lot of this comes down to site owners’ negligence of the user experience (UX) as a key part of their strategy.

Poor clarity on full pricing, clunky search, lengthy forms, and not taking into account local habits (for multinational websites) are the most common sales killers, but each of these issues can be solved with smartly designed adjustments.

Need to fix your E-commerce performance, or benchmark your online retail project?

Here is the second section of an incredibly convenient checklist of 250+ tactics, straight from an upcoming easy-to-browse 31Ten eBook on best E-commerce UX practices.

Together with the search function (covered in part 1), the main navigation is one of the most common entry points to the E-commerce buyer journey. According to this eye tracking study, visitors cumulatively spend 23% of their attention time on the header section of your website, which commonly hosts the main navigation features.

Watch out for the following icons showing the platform where to test each tactic:

Navigation bars / menus

1. Make your primary navigation tool prominent and easy to use, with a maximum number of choices in the 5-9 range

Vlad’s take: “According to the famous psychology paper published by George Miller in 1956,the center-top position is standard placement for E-commerce navigation bars,  against the traditional upper-right corner position.”

2. If using navigation icons, it’s best to label them to avoid guesswork, especially if serving an international population, or low digital-savvy segments

Vlad’s take: “This is especially true if you have a website facing Western and Chinese visitors. For example, the shopping cart icon is typically an actual cart in the West, and a ‘happy bag’ in China.”

Read more here

3. Highlight the most important navigation item for your turnover or conversion rates

4. Use sentence casing if your categories are descriptive; if they are expressed as simple stand-alone words,  prefer title casing instead

Read more here

5. Use mega-menus on the desktop platform, if you have a significant number of categories

Vlad’s take: “Mega-menus allow to show everything at a glance, which favors the process of recognition over recall, especially if you use icons or symbols for your categories.”
Read more here and here

6. Consider full-page panes for your mega menus on mobile

Vlad’s take: “Definitely a Chinese standard, you can see it used on all major e-tailers such as Tmall, JD, etc.”

7. Group subcategories into chunks of 5-7

Vlad’s take: “By visually emphasizing relationships among items, you have the chance to guide users in their choices. And again, it follows Miller’s law.”

8. Consider a left vertical category bar with mega menus expanding on the right

Vlad’s take: “Especially useful for wide ranges of products, it’s a common practice in Chinese UX design, and it’s employed by most big retailers.”

9. Apply a 0.5 seconds delay before you display a mega-menu on a mouse hover, to account for different user intents

Vlad’s take: “0.5 seconds is Nielsen’s official recommendation: ‘keep showing your menu until the pointer has been outside both the navbar item and the drop-down arrow for 0.5 seconds. Then, remove it in less than 0.1 seconds’.”
Read more

10. Avoid the “diagonal problem”: the drop-down menu should not disappear when the user is moving to point to something inside of the menu

Vlad’s take: “I’m sure you all have experienced the frustration of the menu disappearing while it shouldn’t. To solve this issue, either keep showing the menu for 0.5 seconds (see point above), or enlarge the interactive area triggering the menu, to cover all the potential diagonals.”
Read more

11. Avoid scrolling in mega-menus

Vlad’s take: “It doesn’t offer a comprehensive picture of your categories, and scrolling adds a whole collection of usability issues, such as compatibility with mouses and touchpad scrolls.”

12. Display a counter for the number of entries under each subcategory

Vlad’s take: “It should be obvious, but don’t display empty categories.”

13. Consider having products and subcategories showing under multiple parent categories

14. Do make the sub-header navigation clickable, so that the user can easily be directed to the broader category

15. Use symbols, icons, and drawings to help users navigate between product types within a category

Positioning: communicating the current location

16. Show where the user is on the website by highlighting the current category in the navigation menu

17. Do put navigation breadcrumbs at the top of the page rather at the bottom

18. Show the whole navigation path, using the Home Page as the starting point

Vlad’s take: “It gives users context. Trails work best when they show the whole journey, from one end to the other.”

19. Use attribute-based breadcrumbs to help the visitor to understand the level of filtering he is currently using

20. Make attribute-based breadcrumbs directly actionable

Vlad’s take: “It can be very frustrating to see the filters applied on display and not being able to manipulate them on the fly when unhappy with the filtering results.”

21. Allow users to switch categories directly through breadcrumb trails

Vlad’s take: “Often seen on Chinese websites, it could be successfully applied to many Western websites as well.”

22. Mix history-based and location-based breadcrumbs to reassure and keep the visitor in the conversion funnel

Vlad’s take: “(Specifically for the product page or the filtered listings) A ‘back to results’ is often a lot more trusted than the back button on the browser, which can yield unpredictable results (e.g. on WeChat).”

23. Highlight the last item (current page) to tell the user ‘this is where you are currently’

24. Don’t make the last item in the breadcrumb trail (current user’s location) clickable

25. Prefer “>” separators in your breadcrumbs

Vlad’s take: “It is the official recommendation of Nielsen, mostly because it conveys a meaning of hierarchy.”

26. Use the scheme markup for breadcrumbs to communicate your structure to search engines platforms more effectively. Use the opportunity of extra links in the search results to give you more chances of a click-through.

Read more here

We are passio- no, obsessed with creating the very best, up-to-date online user experiences that translate into more checkouts and a higher percentage of repeat customers.

Want to improve your E-commerce platform’s usage, retention, sales and conversion rates?

Follow us on WeChat (thirty-one-ten), LinkedIn, or leave us your email address below to be notified first when the eBook is published!

Authors

10y+ experience UX-UI designer and partner at digital agency 31Ten. Vladimir writes about design and user experience best practices in China and shares key case studies from his work helping startups and multinationals alike build fantastic digital products that customers love to use.

Vladimir writes about design and user experience best practices in China and shares case studies. Previous posts include:

 

Joan is a UX-UI Designer working at 31Ten since 2017. She has more than 2 years of experience in mobile apps,H5, graphic and web design. She has the end-to-end design process experience including user flows, wireframes, mockups, and prototypes.

Author: Vladimir
I’m Vlad, a passionate UX-UI Creative based in Shanghai, China. I help companies committed to digital transformation to create memorable experiences through user centered design..