Sunday, 20 March 2011

UI Design Pattern - Quick Actions



Quick action menu is a pop-up-like context menu that presents actions that can be performed on an object on screen. The menu includes container with an arrow indicator and scrollable list of action item icons.

Check out Google I/O 2010 conference presentation Android UI design patterns for a conference presentation about UI design patterns. It features the quick action pattern.

[Android UI Pattern Index now contains this pattern too]
More details after the jump...


Pattern card

Problem

User can often perform more than one action on objects on screen. Presenting these actions to user on small touch-screen displays can be difficult. Simple pop-up menus usually cover relevant parts of the screen and cause user to lose context of his or her action. 


Solution

Quick action menu provides a unified way to present actions that can be performed on an object. It consists of three components. 1) Click target that user can identify as the object that he or she can interact with. Taping this target will open the quick menu pop-up menu. A very good example of this is the contact icon in various default Android apps. 2) Pop-up action container that also indicates which screen object the presented actions are related to. This container should not cover the screen object in question. 3) Action icons representing all available actions. Only actions that make sense on the current object should be presented. If not all actions fit the screen he action bar can be scrolled by dragging.


Consequences 
  1. User can easily perform relevant actions on a screen object.
  2. This solution saves a lot of screen real estate compared to presenting these actions on-screen.
  3. User doesn't lose context when this pop-up is opened.