Having the right tools available in any given situation makes all the difference, especially when it comes to correctly and efficiently getting things done. Without the relevant tools, we waste time and are left feeling frustrated, lost, and confused. Just as bad: when there are too many tools around, we waste time looking for the right one or end up satisficing with a suboptimal tool, instead.
The digital space is no different; in any given application, there’s an abundance of tools to use, tasks to complete, menu options to explore, and commands to execute. As such, an important user-interface element that narrows the set of available commands and associates them to relevant tasks is the contextual menu.
What is a Contextual Menu?
Definition: A contextual menu is a type of menu that appears on demand and contains a small set of relevant actions related to a control, an area of the interface, a piece of data in the application, or a view of the application. Usually, this context is given by the current selection or has otherwise been specified by the user before invoking the contextual menu.
Offering a small subset of relevant actions in contextual menus helps users find exactly what they need for the task at hand. This menu type also reduces interaction cost and cognitive load as users don’t have to parse through long lists of main-menu items to find what they need, nor do they have to continually return to the toolbar every time they wish to use certain commands.
Contextual menus exist across all operating systems, in both desktop and mobile applications. However, there are important usability considerations to keep in mind for each device type and system. In this article, we’ll introduce several examples of contextual menus and discuss the interaction and visual factors to keep in mind when designing them.
Triggers for Revealing Contextual Menus
Contextual menus usually aren’t triggered by a consistent UI element, gesture, or interaction. They appear next to where the user clicks, taps, presses, or swipes, and the resulting actions vary based on the tap target. Options presented to users in contextual menus should be the same, regardless of how users interact with the system to reveal these menus.
On desktop, the main interactions that reveal contextual menus include:
- Right-clicking on a two-button mouse
- Pressing the Control (Ctrl) button and then clicking
- Two-finger click on a trackpad
On mobile, the main interactions that reveal contextual menus include:
- Tapping an icon or visual element
- Horizontal swipe
- Long press (tap and hold)
- 3D Touch (iOS)
Tips for Effective Contextual Menus
To determine if you need a contextual menu in your application, ask yourself if you can identify a small set of options or tools that are related to a particular task, selected element, or app screen. In addition to answering that basic question, here are a few more tips for designing effective contextual menus:
- Only include a focused set of actions and common options related to the task at hand. Items inside of contextual menus should directly relate to the tasks the user needs to complete or the element in the interface that’s selected or clicked.
- Make sure the commands in contextual menus are also available from the application’s main menu. Like keyboard shortcuts, contextual menus give users another way to execute actions and select options. Because the default view of a contextual menu is usually hidden, users may not know it is available, or how to access it. There should always be an additional way to find and use the actions found in contextual menus in main navigation menus.
- Include visual elements in the UI to indicate that a contextual menu is available. Advanced users may understand that right-clicking, control-clicking, swiping, or long-pressing will reveal a contextual menu, but not all users will know this. Common visual signifiers for contextual menus include vertical or horizontal ellipsis and down-pointing arrows.
- For hidden contextual menus, (1) include tips to create awareness and (2) allow users to perform the same actions another way. For example, on mobile, often contextual menus will be accessed through special gestures such as 3D touch or swipe. Though mobile gestures are becoming more and more familiar to users, these gestures are not discoverable and have still not become standard. Make sure to include other ways to perform the actions, that don’t rely on gestures. For example, swipe is not always discoverable for contextual actions, so provide assistive clues to help users find your menus. Even if your app uses an initial tip to disclose gestures such as swipe-triggered actions, it is unlikely that people will naturally remember to use it later on in the app. Thus, the contextual actions may be never discovered.
- Contextual menus should not be triggered by icons that could be mistaken for main navigation or app Settings. Avoid using gear icons or hamburger-menu icons to represent contextual menus. Users have come to recognize these as elements that trigger global menus and settings, rather than narrower, task-focused commands.
- Limit the use of submenus within contextual menus. Submenus triggered from contextual menus can easily disappear if the cursor moves away from the primary list item or if the user accidentally clicks outside of the contextual menu. If a submenu is needed, make sure that none of its options open yet another level of submenus and don’t overload it with obscure commands to the point that it becomes cluttered, confusing, and difficult to use.
- List commands in in frequency-of-use order. Don’t make users scan through a long list of disorganized commands. To help users focus on the most relevant options, place the ones used most often at the top. Because people scan lists from top to bottom, place seldomly used commands low down in the menu. Let users decide which option best meets their needs and, if none of the available options fits, no resulting action should take place when the menu is closed.
- Show keyboard shortcuts in contextual menus. To help users save time and learn keyboard shortcuts, include them in contextual menus. Seeing these shortcuts repeatedly will help users memorize task-specific commands and become efficient.
- Limit the number of items within a contextual menu. Don’t overwhelm users with expansive lists of options in contextual menus. Keep the list length manageable by including fewer than 10–12 items, to avoid choice overload and ensure that all of the contextual options are visible, without having to scroll.
- Disable items that aren’t relevant to the user’s context. Rather than hiding irrelevant actions, disable them so that users won’t have to try to find where menu items disappeared, nor will they have to determine how to get the system back in the proper context to reveal a specific command. Also, make sure that you include all options (instead of just one) in a family of related commands. For example, if there is a Back, there should also be a Forward. If there's a Cut, there should also be Copy and Paste.
Though there are many ways to trigger and present contextual menus, at their core, these UI elements aim to provide users with the most important commands and relevant tools they need to complete tasks easily within their given context. For more on designing effective contextual menus, take our full-day courses, Application Design for Web and Desktop and Mobile User Experience.
Share this article: