Summary:Contextual menus are displayed on demand and contain a small set of relevant actions,related to a control,a piece of content,a view in an app,or an area of the UI.When manbetx官方网站手机版designed right,they deliver relevant tools for completing tasks without adding clutter to the interface.
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,wewaste timeand 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 upsatisficingwith 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 thatnarrowsthe set of available commands andassociatesthem to relevant tasks is the contextual menu.
What is a Contextual Menu?
Definition: Acontextual menuis 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 usersfind exactly what they need for the task at hand.This menu type also reducesinteraction costandcognitive loadas 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 andmobile 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 manbetx官方网站手机版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.
Ondesktop,the main interactions that reveal contextual menus include:
- Right-clicking on a two-button mouse
- Pressing theControl (Ctrl)button and then clicking
- Two-finger click on a trackpad
Onmobile,the main interactions that reveal contextual menus include:
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 manbetx官方网站手机版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.Likekeyboard 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.Thoughmobile gesturesare 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 byiconsthat could be mistaken for main navigation or appSettings.Avoid using gear icons orhamburger-menuicons to represent contextual menus.Users have come to recognize these as elements that trigger global menus and settings,rather than narrower,task-focusedcommands.
- 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 avoidchoice overloadand 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 aBack,there should also be aForward.If there's aCut,there should also beCopyandPaste.
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 manbetx官方网站手机版designing effective contextual menus,take our full-day courses,Application manbetx官方网站手机版Design for Web and DesktopandMobile User Experience.