In both mobile apps and websites, users rely on navigation menus to help them locate and access content.
It is important that UX designers use techniques, such as conducting sessions or tests to order the contents of the navigation menus and improve the user experience taking into account the results and findings found after usability tests.
What is a navigation menu
A navigation menu is made up of lists of features or categories of content. As a general rule, they are presented as a set of links or icons grouped with a visual style that is different from the rest of the interface design.
Navigation menus are really important, they should help users to locate and access content. Too often, users struggle with menus because they’re confusing, hard to interact with, or hard to find.
Guidelines for navigation menus in User Experience
Broadly speaking, the main guidelines for designing navigation menus would be the following:
- Make the menu visible.
- It communicates through the menu where the user is.
- Coordinate the menus with the specific tasks that the user executes.
- Make it easy to manipulate or interact with.
- Do not complicate yourself with animations that confuse the user.
14 keys to design a navigation menu
Kathryn Whitenton wrote a very interesting article on the Nielsen Norman Group blog on November 29, 2015 regarding how to design a menu correctly with user experience in mind. Below are the most interesting points.
1. Size
No need to use small menus or menu icons on large screens. Menus should not be hidden when we have a lot of space to display them.
2. Location
We will place menus in familiar places for users. Users are used to finding them in natural positions and that they are repeated on all websites such as on the left Aside or at the top horizontally. They must be placed in the positions where users expect to find them.
3. Interaction
Menu links should look like links and interactive. That is, you have to show through the UI that they are clickable or touchable depending on the device.
4. Visual weight
You have to make sure that the menus have enough visual weight. If the menus are placed in their natural position within the structure, they are usually quickly located by users. If, on the other hand, the structure of the interface is somewhat messy and the menus are not in logical positions or hidden, some graphic resource can be used to emphasize it.
Leaving blank spaces around menus can be one of the best solutions to give them visual weight.
5. Contrast
The color of the texts that are links must contrast with the background color. Having good contrasts will make them easily visible to users.
6. Visual bookmarks
It is necessary to tell users “where” the screen they are currently viewing is located within the menu. These kinds of visual markers in menus help users answer the question, “Where am I?”
7. Labels for understandable links
Avoid abstract words or terms, technical or internal language. It is advisable to find out what and how users search. For this, it is advisable to carry out sessions to check if the literals of the categories are adequate.
8. Easy to scan labels
Left-justifying vertical menus can reduce the amount of time users spend reading menus.
9. Dropdown and lower level content
When using mega menus or dropdown menus, it is convenient to divide the content into categories and subcategories that bind the links. Through a dropdown you can show the user all the levels and the content of the web.
10. Visual communication
Images, icons, or colors can help users understand menu options. It is not advisable to overload, it is necessary to make sure that the images are compatible with the user’s tasks and do not hinder their execution.
11. Link size
Link sizes should be large enough to appear clickable or touchable. Links that are too small or too close together are a huge source of frustration for mobile users.
12. Size of dropdowns
You need to make sure that the dropdown menus are neither too small nor too large. Those dropdowns that are activated with the :hover, that is, when hovering the mouse over them, should not disappear too quickly and only when the mouse is no longer inside the container.
13. Sticky or sticky menu
If the page is too long and has a lot of content, using a menu that stays fixed at the top when users scroll is really useful for them.
14. Optimize access
It is recommended to place the common elements near the destination of the link that starts the dropdown menu. This is mostly useful so that the user doesn’t have to move the mouse cursor too far or the user’s finger has to go too far inside the touch screen.
Facebook Comments
Disqus