Toolbars

A strip of graphical interface components that allows convenient access to commonly-used functions. Toolbars typically contain the principle actions provided by an application's graphical interface.

Tags

toolbar, buttons, controls

Status

"Experimental : If you use this pattern, you may have to remove or replace it in a future release of your software to remain consistent with other GNOME applications."

When to Use

Toolbars can be used when there are a limited number of commonly-used operations associated with your application, or to advertise the presence of functionality that is either important or might not be anticipated by users. A toolbar is not always necessary however, and should be considered within the overall design of your interface. gcalctool is a good example of an interface which does not use a toolbar.

Description

Evince Toolbar Screenshot

Epiphany Toolbar Screenshot
  • Most toolbars only contain buttons, but in more complex applications other types of controls, such as dropdown lists, can also be useful.
  • Toolbars should only contain the most important or commonly-used functions. Having too many toolbar controls reduces their efficiency by making them harder to find, and too many rows of toolbars reduces the amount of screen space available to the rest of the application. Avoid populating toolbars with many items.
  • Avoid using multiple toolbars at all costs, since vertical screen space is more valuable than horizontal.
  • When possible, the contents of toolbars should be consistent with existing GNOME applications. Common toolbar items include New, Open, Save, Back, Forward and Stop/Reload. Don't add buttons for Help, Close or Quit, as these are rarely used and the space is better used for more useful controls. Similarly, only provide buttons for Undo, Redo and the standard clipboard functions if there is space on the toolbar to do so without sacrificing more useful, application-specific controls. The first priority in deciding the

  • General principles regarding layout and alignment should be followed in arranging the contents of toolbars.

  • Grouping the contents of a toolbar makes them easier to understand.
    • /!\ Separate groups of toolbar items with spacing rather than separators, since this creates a cleaner interface. Groups can be separated using additional padding or different justification (with some controls on the left and some on the right, for example).

Placement

Totem Toolbar Screenshot
  • /!\ Toolbars are typically placed directly below the main menu bar. This is not always appropriate, however. Since interfaces tend to be 'read' from top to bottom, applications which prioritise content over functionality (such as video and music players) should place their toolbars below the content that is being displayed, typically along the bottom of the window.

  • Toolbars should almost always be horizontally aligned. The eye does not scan vertically as well as it does horizontally, groups of mutually exclusive buttons are less obvious when arranged vertically, and showing button labels is more awkard and less space-efficient. Also, some toolbar controls just cannot be used vertically, such as dropdown lists.
    • Only consider using a vertical toolbar if the size of the application window means there would be a lot of wasted space if a horizontal toolbar was used instead, or your application would otherwise require three or more rows of toolbars to appear below the main menu bar by default. Note however that in this situation, the better alternative is usually to display fewer toolbars by default.

Configurability

  • /!\ The display of main toolbars should not be configurable, since this creates an unnecessary configuration option and introduces the requirement to reproduce the operations available via the toolbar elsewhere in the interface.

  • In some cases, optional toolbars are useful as a means of allowing users to modify which functionality is quickly accessible. Options to control the display of optional toolbars should be available in a View menu or preferences window. Note that the the limitations relating to configuration applies to the use of optional toolbars.

Current Usage

Most GNOME applications: Nautilus, Gedit, Evince, EoG, Totem, etc.

Specification

  • Toolbar buttons are displayed as icons only by default. The most important or potentially unclear menu entries should be set in order to provide a text label as well as an icon.


CategoryUsability

Design/HIG/Planning/Toolbars (last edited 2014-06-19 16:39:10 by AllanDay)