Posted by & filed under Content Views.

Simple actions is a pattern that houses actions for the objects in the current view (tile view, list view etc). These actions can apply to all of the objects in the view or a subset of them. Simple actions is often displayed as part of the Data Toolbar.

Requirements

A successful design for this pattern…

Shall:

  • Enable users to perform actions on one or many objects.
  • Contain a list of all possible actions within the current context

Will:

  • Smoothly accommodate multiple window sizes
  • Scale to large numbers of actions without clutter
  • Allow for logical groups of actions

Should:

  • Offer a mobile friendly configuration that does not rely on hovering to function correctly

Conceptual Design + Description

simple actions 1

  1. Primary Action buttons: These buttons contain the most frequently used and most important actions for the current view arranged with the most common actions on the left. When possible, at least one primary action should be visible at all times.
  2. More actions: Less commonly used actions should be placed within this menu. As a window gets smaller, primary actions can be moved into the more actions menu in order to conserve space. The click/touch target for the more actions button must be at least as wide as the icon is tall, even though it might not be visible.

more actions menu

a. Actions in categories are listed individually if there are 15 or fewer items in the list.

b. If the more actions menu holds more than 15 items, categories of actions are collapsed and become flyout menus. The flyout should not require the user to click, and should appear when hovering over the category name.

c. On mobile devices, all actions are collapsed into the menu. Categories become accordions that expand and collapse when tapped.

What’s not covered in the current design

  • Rules pertaining to icon use
  • Rules about action names

Next Steps

After review, this pattern will be moving into the final design phase. High-fidelity visual assets and examples in context will be created, and the revised, polished design will be posted.

Voice your opinion! Comment on this post with thoughts, suggestions, or requirements that we may have overlooked. Any and all feedback is helpful to us as we refine the design in the next stage of the process. Thanks!

Chris

 

Resources  

More actions menu button – fa-ellipsis-v from Font Awesome.

Current angular implementation – http://angular-patternfly.rhcloud.com/#/api/patternfly.views.directive:pfDataToolbar

 

Leave a Reply

(will not be published)