UX Pro tips to improve your menu and labels’ design

User experience, or UX, is fundamentally about creating an experience that fits the needs of your visitors. It aligns with conversion-focused e-commerce optimization and improves the quality of the customer journey.

If your online store’s UX is not done properly, it’s a win-win situation for the competitors. Users will simply leave the page and resume shopping elsewhere. Would you waste your time and struggle with a slow or complicated interface and UX? Probably not. 

Understanding your target audience’s behavior and expectations are the main key to optimizing UX. It will help you to make accurate UX decisions and improve their interaction with a site.

Together with our Invertus’ UX team, we are sharing our top tips on how you could improve your menu and labels the design of e-shop. 

Let’s get started!

The number of elements in the navigation bar

Speaking about menu design, there is no official rule carved in stone that could be applied to each store’s needs by default. However, based on our clients’ experience we would recommend creating a main menu that consists of 5 to 7 menu items. 

What should you do if you have more? Take a look below into our few suggestions on how you could reduce the number of elements in the menu bar. 

• Is it possible to remove the ‘Home’ item from the menu because buyers can come back to the homepage by clicking on the shop logo?
• Do you have an ‘About Us’ item that can be moved to the bottom of the page?
• Is there a ‘Contacts’ item that could be moved from the main menu to the top page and shown as an icon? Maybe ‘Contacts’ item is not that important in your online store so it can be moved to the footer. 

We suggest critically checking every item in your store’s navigation bar and think about what is really important for the buyers. Having structured and easy-to-understand information on your online store will help to cut customers’ decision-buying time. 

Below you will find an example of one of our clients’ shop with Invertus system analyst Simon comments:

Source: NewCrush website

Newcrush website has a three-level menu.

• The first level is at the top of the page, the background blue and white color. What does it say to us as customers? It might be not important to the whole shopping experience, but the merchants want it to be easy to find. What information does the merchant put here? Contacts. If your customers need reassurance or contact info it’s easy-to-find in a blink. However, if your customers are only interested in shopping, this bar can be easily ignored without giving a thought. 

• In the second row you see the logo of the company, search bar and the four icons. It’s also called a menu but it’s a different type. These are the items you expect in every shop: customer profile, wish list, shopping cart, language. The style is simple and the merchant uses the icons that are very easy to understand. This is also not intrusive, however, we can say that this part is more important than the first line as it takes more space. There is a white space around this element in order for other items to not encroach its territory. 

• The third level is the main menu in the shop. However, when you look at the online store the first thing you notice is a banner. It means that the merchant doesn't expect buyers to browse the menu. Probably the merchant expects that most of the users will click on the banner or will scroll down to the new product block. 

Things to keep in mind about the drop-down menu 

We suggest using no more than 6x6 elements on the drop-down menu: “I believe 6x6 rule should be applied in every online store. Sometimes I can see plenty of examples online when a square box is fully-packed with many items. Many elements take a large part of the screen and therefore it’s harder to not get lost in the information.” - says Simon, Invertus system analyst.

Moreover, he adds that the drop-down menu on the desktop might lose its usability: “Based on our clients’ experience having up to three elements on the menu bar will drive better conversions in comparison with a drop-down menu. Of course, there are different rules that apply to a mobile design.” He also suggests having a side-bar menu on mobile devices as it has better conversions as well as usability than desktop. 

Seven seconds customer rule

Paulius, Invertus project manager, follows golden UX rule: “It takes about 7 seconds for users to visually separate menu from the rest of the page. Imagine that your featured banner dominant color is orange while your menu consists of a darker orange shade.  That might take way more time for users to notice and visually quickly separate the menu from the rest of the page.” 

We believe that using clear colors that create a well-defined contrast should help users to quickly understand where the navigation bar is and to speed up the shopping process. 

Minimize the number of labels on your product

Sometimes it might feel necessary to include a couple of labels on one product photo. It’s new, it’s cheap and it’s popular in the market. Do you feel an urge to put as many labels as possible to show off the product? Few here, few there and voila - with all the labels it’s hard to notice the main product photo. 

To avoid these mistakes, Paulius proposes using a maximum of two labels on each product photo: “I recommend putting up to two labels on each photo otherwise it might look cluttered and it will be hard to see the main product.” 

Luckily in PrestaShop you have only two labels that could be put on the photos: ‘new’ and ‘discount’ labels. Together with our team members, we gathered some labels’ ideas that might help you to increase your sales based on our clients’ reviews. 

• Recommended. We suggest using the “recommended” label as it reassures customers that others liked it and now recommend to other buyers. 
• Best-choice. This is usually used when the price, quality, and shipping are summed and it’s shown as a best-choice speaking about these three options. 

The visual side of labels

Above we spoke about the more practical side of the labels and now we would like to discuss the visual importance of labels. Based on various online shops’ creation experience, here are a couple of ways on how you could improve your icons’ design. 

• Icon and text. Although it’s not the best option if you have a multi-store, it’s really helpful if you have a niche online store that doesn’t show commonly-used icons’ design. There is some well-known icon design that is widely-recognizable and could be used without additional text. Although, sometimes it’s better if you put the text next to the icon to make it more understandable.

• Colors. Colors should be chosen wisely and for the best-case make a contrast to the product photo. 

• Animation. Sometimes icon pulsation helps to attract customers’ attention rather than simply shining labels. 

To avoid design mistakes, Simon suggests putting labels further from the text information: color attributes, description, price etc. It will make hard for users to separate what is important and not.

Speaking about the menu and labels UX improvements, as we mentioned above there is no rule that fits all. We suggest making UX improvements from starting to understand your customers and their customer journey. After that, it will be easier to see which UX changes should be made.

We believe that the best results improving your user experience can be reached by using a well-structured approach and a good UX strategy that considers your existing strategies and boundaries.