# Toolbars

A toolbar is a strip of controls that allows convenient access to commonly-used functions. Most toolbars only contain graphical buttons, but in more complex applications, other types of controls such as dropdown lists, can also be useful.

## Example toolbar from a simple mail application

Example mail application toolbar

Careful and consistent toolbar design speeds up the user's task by giving direct access to functions that would otherwise be hidden on a menu. Use them only for the most important functions, however. 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.

## Appearance and Content

The effectiveness of toolbars is increased by maintaining a level of consistency between different applications. The toolbar is one of the first parts of your application that a user will see the first time they run it, so by providing a toolbar that looks familiar to them, you can immediately make them feel comfortable about using your application.

As well as following the recommendations and examples given in this section, look at the toolbars in other well-designed GNOME 2.0 applications for guidance when deciding what— and what not— to put on your application's toolbar.

However many toolbars or toolbox windows your application offers, provide one main toolbar by default that contains a representative subset of the application's overall functionality. Many of the buttons on this toolbar will be the same regardless of the type of application.

For example, the main toolbar in an office application will nearly always have New, Open and Save as its first three toolbar buttons. Similarly, the first few buttons in a browser application should always include Back, Forward, Stop and Reload, in that order.

## Guidelines

- Place only the most commonly-used application functions on your toolbars. Don't just add buttons for every menu item.

- By default, have your toolbars appear directly below the main menu bar.

- Allow toolbars to be turned on and off in your application's Preferences dialog and by using the View Toolbar menu item. If there is more than one toolbar, they are turned on and off by individual entries in the View Toolbar submenu.

- All functions that appear on your toolbars must also accessible via the main menu bar, either directly (i.e. an equivalent menu item) or indirectly (e.g. in the Options Settings dialog).

- Arrange toolbar buttons in the same order and groupings as their equivalents on the main menu bar. In particular, always group sets of mutually-exclusive toolbar buttons.

- Don't add buttons for Help, Close or Quit to your toolbar by default, 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.

- Provide options to show toolbar buttons as text, graphics or both— see view-toolbar for the menus to use for controlling toolbar display. Also provide an option to return all toolbars in your application to the control center default for this setting.

- Allow users to configure toolbars to contain their own selection of commands, in whatever order they choose. Provide an option in the configuration dialog to return the toolbars to their default configuration.

- Save your application's toolbar position and contents as part of the application configuration, and restore them when the application is restarted.

### Vertical Toolbars

In general, don't use vertical toolbars. 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 configuration 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.

If you must use a vertical toolbar, ensure the user can configure it to appear horizontally if they prefer.

### Media Player Toolbars

Many applications are able to play sound or video clips. For consistency, always present the buttons that control playback in the same order and with the same stock icons.

### Guidelines

- Show separate Stop and Pause buttons. Do not change Play to Pause while the clip is playing.

## Controlling Display and Appearance

For each toolbar in your application, the user should be able to choose whether or not to show that toolbar, and whether to show its contents as icons only, text only or both.

## Guidelines

- Allow the user to override the control center toolbar defaults for your particular application in the application's Preferences dialog. In particular, ensure that the user can:

  - separately choose to show each toolbar in your application as icons only, text only, or both

  - return the icon/text/both status for all toolbars in your applicaton to the system default

  - choose to show text labels either to the side of some or below all toolbar icons, and to return this setting to the system default

  - return the layout and ordering of all toolbars in your application to the application default

- If your application has a single toolbar, allow the user to turn it on or off with a View Toolbar check box menu item.

- If your application has two or three toolbars, allow the user to turn them on or off individually by placing a menu item for each one on the application's View menu. For example, Main Toolbar, Drawing Toolbar, Formatting Toolbar. Place the items together in a single group on the menu, with Main Toolbar first (if your application has one), followed by the others in alphabetical order.

- If your application has more than three toolbars, allow the user to turn them on or off individually by placing a menu item for each one in a Toolbars sub-menu on the application's View menu. Place the Main Toolbar item first (if your application has one), followed by the others in alphabetical order.

  ### Example View menu fragments for applications with one toolbar (left), two or three toolbars (middle), or four or more toolbars (right)

  Example View menu for application with single toolbar

## Labels and Tooltips

Most controls that appear on your toolbar will require a text label that appears on, below or beside it. Keep this description as short as possible, preferably a single verb. For example, Open or Undo.

Every control that appears on your toolbar should have a tooltip, whether or not that control has an associated text label. The tooltip should be a concise description of the control, but should provide more information than its text label where possible. For example, Open an existing document, or Undo last operation.

## Guidelines

- For buttons that correspond directly to menu items, make the text label the same as the menu item, but without any trailing ellipsis. For example, Open, Save.

- Do not provide access keys for toolbar buttons. Since toolbars are in the same keyboard focus context as the menubar, it would be too difficult to provide unique access keys for every menu title and toolbar control. Toolbars are primarily intended as a shortcut for mouse users, although they are keyboard-navigable for accessibility reasons.

- If your toolbar is configured to show labels below button icons, show a label for every control on the toolbar. For example:

  ### Toolbar with labels under all buttons

  Toolbar showing labels under all controls

- If your toolbar is configured to show labels beside button icons rather than below them (using the "priority text" setting), do not show labels for every button. Show labels only for the buttons that will be most-frequently used. Choose no more than four such icons on any one toolbar, otherwise the effect will be diluted and the toolbar will become very wide. For example:

  ### Toolbar with "priority text" labels beside the first few buttons only

  Toolbar with "priority text" labels beside the first few items only

  If you are unsure which buttons will be most frequently used, choose the first few buttons on your toolbar and provide labels for those only.

- Ensure all toolbar controls have tooltips. The tooltip should be more descriptive than the corresponding menu item, if it has one, but still concise. For example, Create new document for the Open toolbar button. Use sentence capitalization for tooltips—see layout-capitalization for more information.