Intro to Menus in UI
Menus are an essential element of product navigation and interaction. They are crucial in content-rich products as they help save space or even create a minimalistic look.
Menu design dramatically affects user experience. When creating user-friendly menus, keep in mind things like labels, icons, and different states.
To choose the best menu type for the project, consider its objective. When and where will it appear, and what will it help users achieve? Correctly chosen menus are self-explanatory and easy to find and manipulate.
Basic dropdown
Pro Tip! If the menu is close to the edge of the screen, align it vertically to keep all menu items visible.
Cascading menus are an excellent choice for categorized content. They include a parent element and its children. The children usually unfold when users select or hover over an option.
This type of menu is useful when some options contain multiple sub-options. For example, the item New often includes the types of new documents users can create.
Avoid adding too many options to the children
Pro Tip! Cascading menus should never be used on mobile.
Contextual
Contextual menus appear next to where users click. Their list of options can vary based on the click target — for example, it can be different for text and images.
Usually, contextual menus contain frequently used actions related to the current context. For example, right-clicking on text in Google Docs reveals a contextual menu with text-specific actions like Copy, Paste, Delete.[2]
Pro Tip! Contextual menus are hidden by default, and users may not know they exist. That's why it's important to also make these actions accessible from a visible place, like the menu bar.
Single-select
Single-select menus need to include a selection indicator to make the user's choice. Commonly it's a checkmark, bold text, or color overlay.
Single-select menus are great for selection, especially when filtering. However, avoid using this menu type to activate modal windows, dialog boxes, or dynamic controls.[3]
Multiselect
- Utilize hotkeys such as Shift, Command, or Control in conjunction with mouse clicks
- Use checkboxes to mark desired options
- Implement a tagging system, where clicked items appear as tags at the top
To simplify decision-making, make selected items prominently visible, thereby reducing cognitive load. However, it's worth noting that multiselect menus can be challenging to implement effectively on mobile platforms due to space constraints.
Pro Tip! Make sure users have a way to deselect all items if they change their minds.
Search
By integrating a search function into a lengthy menu, you're essentially streamlining the
The size of the screen limits the number of
If the number of options is too big, scrolling can become tedious. In this case, adding
How many options are too many? We say a couple of scroll wheel turns, but use common sense to determine that.
Leading
Place leading icons before the label, or to the left in left-to-right writing systems, so users see them first. Make sure to choose commonly used icons with universal meaning — unfamiliar leading icons will only confuse users.
Pro Tip! If you doubt whether icons are self-explanatory enough, test them on your users with open-ended questions like: "What do you think this icon means?"
You can include keyboard shortcuts in the
There's no need to create shortcuts for all possible actions and menu items. Add them for the most common actions like copying, cutting, and pasting.
Keep in mind that only advanced users routinely use keyboard shortcuts, so make sure they're not the primary way — or the only one — to complete a task.
References
- Material Design | Material Design
- Listboxes vs. Dropdown Lists | Nielsen Norman Group