Calashock Design Diaries: Menus that work

Ecommerce is a contestant competition, not just against other businesses, but against notifications, calls, and emails, against all of life. You are in constant competition for your customer’s attention. Every second and every detail counts. From menus to buttons, the Calashock Design Diaries will dissect every detail. With our in-house UX design guru Alexandra Anokhina to guide us, these articles will help you master your ecommerce design. One pixel at a time.

In ecommerce, just as in brick-and-mortar stores, seamless navigation is key to enhancing the shopping experience for customers. Whether online or offline, shoppers value easy movement between different sections and categories. When they are searching for specific items or when time is of the essence.

But what factors contribute to this smooth navigation? How can you control it to create the best experience?

“In short – low interaction cost. This means that the user needs the least amount of effort and can make the most minor mistakes in finding the desired information, store section or specific product on the website. ” – Alexandra

To do this, we need to focus on three specific aspects:

• Menu Structure and Interaction

• Menu Navigational Content

• Menu Visual Appearance

In this article, Alexandra will share crucial menu design tips that can help you optimize your ecommerce website’s navigation, ensuring a user-friendly interface that fosters a more enjoyable shopping journey.

1. Menu Structure and Interaction

To begin with, you need to understand the extent of your menu’s complexity. Based on the size of your product catalogue, you can make informed decisions regarding menu interactions.

For a large catalogue, employing progressive disclosure (a drop down menu with further drop down menus inside for each section) can be beneficial. This means presenting each department step by step, preventing users from feeling overwhelmed. Breaking down the menu into smaller, manageable sections spanning 2-3 steps makes the experience less daunting.

If you have a smaller range of products or prefer top-level navigation with fewer categories and subcategories, then displaying these subcategories together within a dropdown menu can save users valuable time.

“Ensure it doesn’t disappear too quickly when the mouse moves away, allowing users to click on menu items comfortably.” – Alexandra

What about a search bar?

“A search bar should solve the problem of low interaction cost, right? But we shouldn’t rely too heavily on the idea that many users are using search automatically. Of course, people are using it, but HOW they use it needs to be considered. Will they search often? What will they search for? These answers will give an understanding of how to display search and how to interact with it.” – Alexandra

Research your customers’ behaviour to find out how they are using your search functionality. A prominent and expanded search bar will help to find a product which belongs to a larger category. But it won’t be necessary if your users are more inclined to explore the shop and make their decisions based on what they come across.

Actionable tips from Alexandra

• Study analytics and key audiences to understand how and why people are searching. What words do they use when they search and how do these correspond to your categories? What categories of goods do they visit most often?
• Tools such as tree testing will give you a deeper understanding of how shoppers might interact with your navigation and what they expect to see in a category.
• Study how the search will work: will users need it often? Are your customers familiar with your product names or do they tend to use descriptive language instead?

2. Menu Navigational Content

Effective content is crucial for enhancing navigation. This entails the labelling of categories and menu items, choosing appropriate words, and using imagery for clarity and relevance.

Wording

“Navigation elements in general, like “home”, “cart”, “account” and so on should follow the pattern which is familiar to the users. Experimenting with unusual word choices is possible but in this case, it is highly recommended to test your choices with the users first.” – Alexandra

Be consistent and clear with your wording. Use the same terms for similar categories or actions to create a seamless and intuitive user experience. Avoid vague labels like “Other” or “More” within product categories, as they can confuse users. Instead, opt for clear and descriptive subcategory names to enhance user comprehension.

Pay attention to users’ search queries and vocabulary. Even if you sell specialized products, be sure to use language that accommodates a range of knowledge levels. You don’t want to alienate potential customers who aren’t subject experts.

Icons and Imagery

“Thinking about menu icons. What to choose for the mobile menu? Hamburger? Three dots? Stars? Unicorn? The endless creativity battle! The boring truth is that your audience determines your iconography choice. The wider your audience, the more boring, yet practical, your approach will have to be. And yes, most likely, it will be a hamburger.” – Alexandra

That may seem boring, after all, everyone uses hamburger menu icons (the set of three horizontal lines in the top corner). But imagine if every country in the world decided to get original and creative with their road signs. Sound exciting? Not really. There is already a degree of variation but broadly speaking, a foreign driver will be able to understand the symbols used to direct traffic based on their existing experience. Same goes for your store, you want first-time visitors to implicitly understand where to go and what to do. Sometimes, being boring is important.

Cart or basket icons, for example, vary in style but mostly stick to a recognisable basket or trolly shape. This means someone new to the store still knows where they need to click without having to think – reducing the interaction cost, remember?

If you are determined to use original or ambiguous icons, bear in mind you can use text to complement the meaning.

When it comes to images, the guidance is similar to wording. Make sure they are relevant and easily understandable. Photos can be a powerful tool to help users navigate your store, speeding up their search for information.

“Note: imagery is a tool to empower text, not replace it. Think twice before using photos in the mobile version. On mobile devices, users scroll more quickly through content due to the screen size and high-res imagery might become an obstacle.” – Alexandra

 

3. Menu Visual Appearance

The visual presentation of your navigation plays a key role in user experience.

Placement

Place the navigation bar prominently at the top of the website, where users expect to find it. Consider using a sticky navigation feature on both desktop and mobile versions for constant, easy access.

“Menu behaviour is also important to highlight: use a semi-transparent background for large menus or shadows for dropdown menus to focus user attention on the navigation.” – Alexandra

Visual Hierarchy

Establish a clear visual hierarchy using size and font weight to differentiate between navigation levels. You can also choose to emphasize important categories or actions to stand out against less significant ones.

Typography and Colors

Choose easily legible fonts, especially at smaller sizes. Tempting as they might be, avoid intricate, decorative fonts. Be mindful of accessibility when it comes to your colour choices. Keep background colours calm and simple and don’t use so many colours it becomes confusing or overwhelming.

User Interaction

Provide visual feedback when users hover over or click on navigation elements. This aids user understanding of their interactions with the website and enhances the overall experience.

Finally, ensure that your menu is accessible via keyboard for a seamless browsing experience.

Conclusion

While your menu may seem like a purely functional tool, its design plays a crucial role in shaping user interaction and satisfaction. By implementing thoughtful strategies for menu structure, content, and appearance, you can create an ecommerce website that not only simplifies navigation but also enhances the overall shopping journey. Remember, a user-friendly interface doesn’t just make browsing easier – it can be a powerful tool to drive conversions and establish lasting customer relationships.

How can Calashock help?

Need help designing your menu? Redesigning your store? Maybe you need a whole new website built from the ground up? We have over 13 years of experience designing and building beautiful and intuitive ecommerce websites that maximise merchants’ ROI. From replatforming to ecommerce strategy, web design to SEO. Talk to our expert team to see how we can help you grow your online business and supercharge your sales.