Contextual actions

The user wants to operate on the data at hand without having to navigate to a different screen.

Problem

The user wants to operate on the data at hand without having to navigate to a different screen.

Solution

Contextual actions are usually shown for list items or on button clicks presenting a list of actions related to a specific content on the page.

Show the most relevant actions applicable to the item in focus. These could be most commonly used or situationally relevant actions that can be applied to the data.

Use icons or images and text for the action items. If possible use text along with the icons or images for a better description of the choices. When no text is shown, always choose icons that are obvious to the user.

Use this to provide quick access to common actions and reduce the number of taps the user has to make to get things done.

Showing 3 live examples
Action sheet
Action sheet
Action grid
Action grid
Action menu
Action menu
This example should be experienced in full screen
View in full screen

Problem

The user wants to operate on the data at hand without having to navigate to a different screen.

Solution

Contextual actions are usually shown for list items or on button clicks presenting a list of actions related to a specific content on the page.

Show the most relevant actions applicable to the item in focus. These could be most commonly used or situationally relevant actions that can be applied to the data.

Use icons or images and text for the action items. If possible use text along with the icons or images for a better description of the choices. When no text is shown, always choose icons that are obvious to the user.

Use this to provide quick access to common actions and reduce the number of taps the user has to make to get things done.

Share in SMS
  • SMS
  • Email