Alta Mobile Contextual Actions Pattern

I created the visual design of the images below for the Alta Mobile Contextual Actions Pattern.

The Contextual Actions Pattern describes how a user can perform actions on an object or item. There are three common approaches to displaying a contextual action.

 

iOS Popup

01_Contextual Actions PopUp.png

Popup: The action is displayed as an icon or button in a popup, dialog, menu or sheet.

 

iOS Action Sheet

02_Contextual Actions Action Sheet.png

Sheet: The action is displayed as an icon or button in a popup, dialog, menu or sheet.

 

iOS Menu

03_Contextual Menu.png

Menu: The action is displayed as an icon or button in a popup, dialog, menu or sheet.

 

iOS Card Flip

Master_Detail Card_Flip.gif

Reveal: The action is revealed after a swipe or a tap. For example a list item is revealed or a card is flipped.

 

iOS FAB (Floating Action Button)

05_Contextual Reveal Edit With A FAB.jpg

Page: The action is available directly on a page, like an icon or a button

 

iOS FAB Toolbar

06_Contextual Reveal With A ToolBar.jpg

Page: The action is available directly on a page, like an icon or button.

 

Contextual actions are often used to share, create, or communicate. Contextual actions that are frenquently performed, such as calling a contact’s phone number, should be easily accessible and immediately visible in the interface. Actions that are only occasionally executed may be accessed by gestures or an icon that opens a list of actions.