Last update: 17.10.2023
Platform: Web
Designer: Joy Liu
Intro
The toolbar enables the user trigger an action on the UI. For example, the toolbar allows the user to change views, manipulate data or objects, navigate to another page, perform generic actions, and so on. This chapter gives an overview of what kind of different toolbars exist and when to use which one.
Usage
Toolbars bundle various functions and interactions in the user interfaces. This ensures that a user can always perform an action faster because the trigger points are grouped in a specific location. This simplifies the situation instead of spreading the interaction points across the entire interface. Mouse paths are shortened and interactions are standardized.
In addition to grouping interactions, there should be a fixed order in the toolbar to ensure quick use of the controls. Here too there is a recommendation that is described in the chapter.
Types
A variety of toolbars exist for different use cases (see examples below). The following types are used:
Contains global actions that are important for the whole page
Contains only closing and finalizing actions
Toolbar that is positioned above a chart and contains chart-specific actions
Toolbar that is positioned above a table and contains table-specific actions
Toolbar that appears above a tree or tree table, and is used for actions that impact the entire tree.
• Rich Text Editor
Structure & Components
Toolbars are characterized by a special order that is based on the use cases of the UI elements for which the toolbar is responsible. Within the structure actions can be grouped with separators.
Behavior & Interaction
Overflow: To ensure that all actions can be accessed at any time an overflow behavior should implemented in a toolbar. Buttons are sorted by usage, with the most frequently used action first (on the left) and the most seldom-used action last (on the right). Our general guideline is to use only icon buttons or text buttons. Do not combine an icon and text into one button. Buttons are always right-aligned.
Prioritization: You can also prioritize the actions in the toolbar by applying one of five statuses:
- Always overflow: The action always goes into the overflow.
- Disappear: An action that is not so relevant for the user can disappear if the space is limited (for example, a title).
- Low: Assign the priority “Low” to an action if the user seldom needs it; this action will overflow first.
- High: Actions set to “High” remain visible in the toolbar until all lower-priority actions have moved to the overflow.
- Never overflow: These actions are always visible in the toolbar.
Grouping: Items can overflow together even if they are in different positions. When two or more elements are given the same property value, they belong to the same group and will go into the overflow together. When group elements have different priorities, the priority of the group is defined by the maximum priority of its elements.
Responsiveness & Adaptiveness
To enable responsiveness, use the OverflowToolbar control. The OverflowToolbar control is a container that provides overflow when its content does not fit in the visible area. Only allow important actions to shrink and stay outside the overflow. The app team itself must decide which actions it considers to be sufficiently important.
Application-specific examples
The Rich Text Editor is a specific design of a toolbar with a high number of actions, which are mainly controlled via icon buttons. The order of the controls in the toolbar should allways remain consistent.
Accessibility
Resources
Toolbar Overview: https://experience.sap.com/internal/fiori-design-web/toolbar-overview/
Visual Core Wiki: https://wiki.one.int.sap/wiki/pages/viewpage.action?pageId=2698915944
Specs
Link to example of a table toolbar: https://www.figma.com/file/P6MN9FTiD3J2mWwYpSwm00/Approval-Cockpit-for-Timesheet-2311?type=design&node-id=1526-10279&mode=design&t=xv2C3gO8vfU6ym7t-4