(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Action Placement

Overview

Actions trigger functions, such as saving or deleting a business object. They can also trigger navigation to another dashboard, where the action can be executed, described in detail, or checked further. Actions are displayed in the form of action icons or buttons.

To make actions easier to organise and find, they are usually placed in toolbars. Depending on the content that is affected by the action, different toolbars are available. Within the toolbars, some actions are usually more important than others. Refer to the arrangements in the below examples for better understanding.

Actions are always distinguished from pure navigation. Navigation functions are always on the left, such as Home or Breadcrumbs, while actions in toolbars are aligned on the right.

Anatomy

Actions can be categorized into three groups: Toolbar Actions, Footerbar Actions, and Content Actions. More information on each can be found in their respective pages.

Toolbar actions

Toolbar actions control functions of the content as well as the container. They are represented by action icons or icon-only buttons. If more than the allowed number is needed, they are grouped in an overflow menu with the “more” icon. The allowed number is dependent on the context.

Toolbars appear in different organisms and follow placement-specific rules.

For more information, please go to Toolbar Actions.

Footerbar actions

The footerbar controls the workflow of the organism they is placed in, usually a boardlet. Actions related to the workflow are always at the bottom of the organism.

The footerbar has a fixed height and must never be multiline. Use only allowed combinations:

• Tabs only. Tabs are arranged side by side. There is no default number of tabs. Exeptions: Vertical tabs are placed below each other.
• Tabs with buttons. Use this when the boardlet has multilayer content and a content action. If an action exists only in one tab, show it disabled in all other tabs to avoid visual jumping. The number of possible actions is limited to a maximum of two buttons.
• Buttons only. Use this when an action is required in the boardlet. The number of possible actions is limited to a maximum of two buttons.
• Tabs with actionbar. Use this as a secondary display option. It can be used in kiosk mode to control tab rotation and timing.

For more information, please go to Footerbar Actions.

Content actions

Content actions are placed directly in freely selectable content. They can appear in the content area of a boardlet, dialog, modal, or free-standing content.

Content actions exist in three categories.

• Inline actions. The action molecule or organism is not enclosed by a body. The action is always on the left inside the molecule or organism.
• Actions. These actions also have no enclosing body. The action is always on the left inside the molecule or organism.
• Table Actions. They are placed inside an action column inside a table. Each row has the same actions. Actions effect the entire row.

For more information, please go to Content Actions.

Best practices

Place and alignment

Place actions as close as possible to the content they affect. For example, if an action only effects one items inside a boardlet, consider putting it into a content action rather than a toolbar action.

Keep alignemnt and order of actions inside organisms and toolbars consistent across the application. The same action should be found at the same place across boardlets and dashboards.

Choose the right pattern

Use a Toolbar action when the function controls the content or its container. This includes boardlets, cards, dialogs, or a whole table row.

Use a Footerbar action when the function advances or finalizes the workflow of the organism. Keep to the allowed combinations and the fixed single-line height.

Use a Content action when the function belongs inline to a specific field, record, or piece of content.

Action order and emphasis

Follow this order in the Header toolbar: Place business actions first and then content management actions. Place layout management actions next and then generic actions. It is recommended to place the action most important for your business context on the very left within its group.

For the Footer toolbar, place the primary workflow or finalizing action on the rightmost position. Going right to left, place secondary actions next and then the negative path. When choosing buttons, only use one primary action button per organism, and if possible also page.

Toolbar capacity and grouping

Do not place more than four actions and never more than three icon actions per boardlet toolbar . Group additional actions under the More action.

Hierachy of Action Buttons

The buttons follow a hierarchical order. It is important to create a visual hierarchy between the buttons in the user interface to guide the user’s attention towards the desired user flow.

Foundational Concepts

In the western world, users tend to engage with a dashboard from left to right, top to bottom. Keep this in mind while arranging actions. For example, a finishing action like “Save” should be placed towards the right and bottom of the page if possible. This ensures that the user completes the process of the dashboard bevor naturally ending up at the final action.

[IMAGE PLACEHOLDER]

This reading flow can intentionally change with the help of visual emphasis. One of the most effective ways to do that is color. Attention tends to gravitate towards bright colors and high contrast. In Inspire, this could be the bright yellow of a primary action or the contrast-heavy black of a secondary action. This effect diminishes exponentially the more color is used within a dashboard. It therefore should be used in regulation.

[IMAGE PLACEHOLDER]

Implementation in Practice

Inspire Design has three types of buttons:

Primary Action

A dashboard can only ever have one primary action but also might have no primary action at all. The primary action should guide the user forward in the primary user flow. This flow is the main task the user is trying to achieve within a combination of dashboards. This could be among others:

• Creating a new element within the system.
• Completing a multi-step process across multiple dashboards.
• Navigating to the main workplace a user might use.

Secondary Action

A dashboard can have multiple secondary actions. These actions highlight secondary user flows within the dashboard. These flows are optional additions to the primary user flow or entire user flows of their own.

Layout

Depending on the context, a group of buttons can have two layouts: horizontal and vertical. Avoid conbining the two within one dashboard. The order for buttons is as follows:

• Horizontal - From left to right, place ghost buttons first, than secondary buttons and last if existing a primary button.
• Verical - From top to bottom, place the primary button first, than secondary buttons and ghost buttons at the bottom.

Avoid placing more than three buttons in a button group for visual clarity.