Contributors
@andreea-macoveiciuc-content-expert
Business Benefits
Improve website usability and user experience, lower site abandonment rates, and increase conversion rates.
Add auto-complete search fields to long dropdown menus to save users time when searching for specific items.
- Show both anticipated results and most popular related items as users type in their search terms.
- Ask your web developer to create searchable menus that incorporate an auto-complete function.
Use dropdown boxes showing parent categories whenever possible to save space.
Showing all parent and subcategories on your menu may work when you only offer a few options, like Men’s and Women’s, but too many options shown at once can overwhelm users. For example, LEGO’s navigation menu uses expandable dropdown boxes for each product category offered.
Use custom dropdowns over native dropdowns to allow users to visualize all the available options.
Native dropdown menus often do not meet the expectations of ecommerce site users, since they tend to show a fixed number of items at any given time. Ask your web developer to customize your dropdown menus to show all essential items. For example, Sephora uses a custom dropdown menu that helps users narrow down their search when presented with over 500 search results for “Cheek”.
Use a single hit area of at least 10x10mm per menu item to avoid hit areas overlapping - ask your web developer to configure hit area sizes.
Overlapping hit areas could lead to users repeatedly tapping the wrong button, which leads to site abandonment. A MIT Touch Labs study showed that the average finger pad area is 8-10 mm and the average fingertip area is 10-14 mm. Using a hit area of 10x10mm or more per menu item ensures that users don’t accidentally tap the wrong link.
Use a maximum of 3 menu category levels to avoid overwhelming users.
- Avoid going beyond category and subcategory levels. For example, “Shoes > Women’s Shoes”.
- Offer a View All option for categories with more than 5 subcategories, and use filters and sorting to organize your products. For example, the following menu uses two category levels and offers a View All and Discovery option for each to encourage browsing instead of cramming all their subcategories into the menu.
Last edited by @hesh_fekry 2023-11-14T15:40:29Z