Smart Menu Items

Example of the Smart Menu Items UX pattern.

Problem

Actions or operations behave differently in different contexts and users may not be able to predict what is going to happen.

Solution

Dynamically update action labels to reflect what will happen if invoked.

Context

Your application has user interface elements (e.g., menu items, action buttons) that behave differently depending on the context such as which type of object is currently selected.

Rationale

The best way to deal with errors is to prevent them from occurring in the first place. Key to this is helping users understand what is likely to happen before any action is taken. Users should not have to think much about what might happen and the clearer the interface the less there is for users to have to think about.

Because many actions change their specific behavior based on the context, it is a good idea to provide users with an indication of what a given action will result in before they try the action. For example, Undo functionality can behave differently depending on what type of action was previously carried out, or what type of object is selected.

Implementation

Every time that an action is taken by a user that modifies the behavior of action elements (e.g., buttons, menu items) accordingly modify the labeling of these related action elements.

For example, every time an action is taken than Undo can be used to reverse, update the label related to the Undo functionality to reflect the result that will occur; e.g., if the user pastes a block of text then the Undo label should say something like “Undo paste.”

Another common example would be Delete functionality. If one or more items are selected and a delete action is performed, those items will be deleted. Using this pattern in this case would at least let users know if multiple objects are selected and will be deleted. For example, if multiple objects are selected, the label for Delete functionality could be changed to something like “Delete selected objects.”

Help Me Get There

Infragistics has some tools that can jumpstart your efforts to implement this pattern. Broken down by technology, they are as follows.

ASP.NET

Smart Menu Items pattern is implemented in the following ASP.NET control: WebDataMenu. Check out the samples browser to see it in action.

Windows Forms

You can use the NetAdvantage for Windows Forms WinToolbarsManager control to implement this pattern.

Examples

The primary example for this pattern comes from Microsoft Word. Rather than a generic Undo, “Undo Paragraph Alignment” provides specific context about what change will occur if Undo is invoked by the user.

http://quince.infragistics.com/11ej

Example of the Smart Menu Items UX Pattern

This example from Adobe Illustrator shows an application of this Smart Menu Items pattern. In this example, the previous action taken by the user was to apply the “Hatch Effects” filter. Therefore the label for the functionality that reapplies the previously applied action (i.e. top menu item in the Filter menu) reads “Apply Hatch Effects” to show that this will be the result of the action.

http://quince.infragistics.com/11dh