Action Bar

Interaction Specs

Interaction Specs: 

1. Placement and maximum number of actions

Display the Action Bar across the top of the page to make it easy for users to access, and provide a personalized experience based on user needs and roles.

2. Display total number of the item

Indicate the total number of a particular item, such as Total Alerts, Total Users, etc. on a red circle.

3. Hover state

When the user hovers over each action box, it is highlighted.

Visual Specs

Visual Specs: 

Pattern Summary

Pattern Summary (Unity): 

Why Use This Pattern?

  • To help users access the action choices at a glance.
  • To help them quickly choose the specific actions they want to use, depending on their permissions.
  • The easy- to- access navigation encourages users to take action.

What is the Solution?

  • Always display the Action Bar across the top of the page to make it easy for users to access their choices immediately upon login.
  • When the user hovers over each action box, it is highlighted.

When to Use This Pattern?

  • To allow the user to see most of the important actions that are available for those who have the permissions to perform those actions.
  • Provide a personalized experience based on user needs and roles.

Restrictions

  • Only display the Action Bar across the top of the page.

Do Not Use This Pattern When

  • When the user needs a step-by-step process to complete one task at a time. In this case, it is better to use the Progress Indicator/Wizard flow to show one task or action at a time.

GUI Kit

GUI Kit contains all Unity Light theme patterns in vector format

Adobe Illustrator Download 2.1 MB
Vector PDF Download 2.7 MB

Updated November 2015