Commit bcbdd4ed authored by Fabian Riethmayer's avatar Fabian Riethmayer

Added content for responsive and embeded toolbar

Summary: Added content for tool bar embeded in other components and on responsive behavior of the toolbar.

Reviewers: #kde_human_interface_guidelines, ngraham

Reviewed By: #kde_human_interface_guidelines, ngraham

Subscribers: ngraham, mart

Tags: #kde_human_interface_guidelines

Differential Revision: https://phabricator.kde.org/D16230
parent 4b5c2312
Tool bar
========
Toolbar
=======
.. figure:: /img/Actionbutton3.png
:figclass: border
......@@ -10,52 +10,84 @@ Tool bar
Purpose
-------
A *tool bar* is a graphical presentation of commands optimized for fast
access. Typically, a toolbar contains buttons that correspond to items
in an application's menu, providing direct access to application's most
frequently used functions.
A *toolbar* is a graphical presentation of commands optimized for fast
access. A toolbar can be either be defined for a whole application or as
part of another component.
As an application toolbar it contains buttons that correspond to items
in the application's menu, providing direct access to application's most
frequently used functions.
A good menu bar is a comprehensive catalog of all the available
top-level commands, whereas a good tool bar gives quick, convenient
top-level commands, whereas a good toolbar gives quick, convenient
access to frequently used commands.
Guidelines
----------
As part of another component, like a card or an inline mesage, it is used
to allow quick access to the most important commands for a single, focused
content item.
Guidelines for application
--------------------------
Is this the right control
~~~~~~~~~~~~~~~~~~~~~~~~~
- For standard applications, apply a tool bar by default.
- Provide a tool bar in addition to the menu bar, but do not replace
the menu bar.
- For standard applications, show a toolbar by default.
- Provide a toolbar in addition to the menu bar, but do not replace
the menu bar.
Behavior
~~~~~~~~
- A tool bar should contain only a few, frequently used operations. If
- A toolbar should contain only a few, frequently used operations. If
the number of operations is above 5 they have to be grouped with
separators. Not more than 3 of those sections should be implemented.
- Do not abuse the tool bar to expose application's features. Only the
most frequently functions should be add to the tool bar.
- Execute operations immediately; do not require additional input from
user.
- Do not use :doc:`menu buttons <pushbutton>` in tool bars.
They do not fit well the concept of fast access.
- Do not abuse the toolbar to expose application's features. Only the
most frequently functions should be add to the toolbar.
- Execute operations immediately; do not require additional input.
- Try to avoid using :doc:`split buttons <pushbutton>`
or :doc:`toggle buttons <../editing/togglebutton>` in order to
keep the interaction with all buttons in the tool bar consistent.
- Do not hide tool bars by default. If configurable, users should
easily be able to make the tool bar viewable again.
keep the interaction with all buttons in the toolbar consistent.
- Do not hide toolbars by default. If configurable, users should
easily be able to make the toolbar viewable again.
- Disable buttons that do not apply to the current context.
- Consider to provide customization for tool bars in respect to
- Consider to provide customization for toolbars in respect to
position and content.
Guidelines for components
-------------------------
Is this the right control
~~~~~~~~~~~~~~~~~~~~~~~~~
- Use a toolbar only if an item has few actions or few frequently used
actions.
- Embed a toolbar only in another control that is clearly visually seperated
like a card or an inline message.
Behavior
~~~~~~~~
- A toolbar should contain only a few, frequently used operations.
The number of operations should not exceed 3.
- Do not group with separators.
- Execute operations immediately; do not require additional input.
- Do not hide toolbars or make them configurable.
- Toolbars can be responsive. If there is not enough space to display all
the buttons, an overflow menu is shown instead.
.. raw:: html
<video src="https://cdn.kde.org/hig/video/20180620-1/CardLayout1.webm" loop="true" playsinline="true" width="536" controls="true" onended="this.play()" class="border"></video>
Appearance
~~~~~~~~~~
----------
- Do not change the button style (QToolbar::toolButtonStyle) from the
default. The default is currently text beside icons.
- Use and design tool bar icons with special care. Users remember
- Do not change the button style from the default, which is
:doc:`text beside icons </content/iconandtext>`.
- Use and design toolbar icons with special care. Users remember
location of an object but rely as well on icon properties.
- A distinct association between the underlying function and its visual
depiction is crucial. Follow the advices for :doc:`icon design </style/icon>`.
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment