|
|
| Line 1: |
Line 1: |
| | | {{ Moved To Community | KDE_Visual_Design_Group/HIG/TabControl }} |
| | |
| __NOTOC__
| |
| | |
| == Tabs ==
| |
| A ''tab control'' is a way to present related information on separate pages. Tabs are used for dynamic window surface to increase the surface, to manage multiple documents within a single window, or as view of exclusive options.
| |
| | |
| [[File:Tabs-HIG.png]]
| |
| | |
| Tabs have several advantages: The user can easily access available options or see which forms have been opened. Because foreground tabs are visually differentiated from background tabs the user knows what item is currently in progress. The disadvantage is when dealing with many tabs at once. When a window is tabbed to a certain number that exceeds the available area of the monitor, the tabs clutter up.
| |
| | |
| == General Guidelines ==
| |
| === Is this the right control ===
| |
| * Use tabs
| |
| ** <div id="TABS-1" style="display: inline;font-style: italic;">[[#TABS-1|<span title="HIG-TABS-1">(1)</span>]] </div> for many controls that can be organized within a few categories, like extended configuration settings
| |
| ** {{HIG|TABS-2}} for a variable number of sections, like browser pages
| |
| ** {{HIG|TABS-3}} to manage multiple documents
| |
| | |
| * Do not use tabs
| |
| ** for only one page (but do not hide the tab when more pages are expected, for example in web browser)
| |
| ** for controls that apply to the entire application
| |
| ** for sequential steps, like wizards.
| |
| | |
| == Guidelines for desktop user interfaces ==
| |
| | |
| === Behavior ===
| |
| <div id="Tabs3"></div>
| |
| * Do not abuse other controls to simulate tab behavior.
| |
| <div id="Tabs4"></div>
| |
| * Use horizontal tabs if the window has seven or fewer tabs and all the tabs fit on one row.
| |
| * Do not use vertically stacked tabs. Tabs are drawn above the pages only (QTabWidget::TabPosition = North).
| |
| <font color="blue">
| |
| * Do not use too many tabs. Use a [[../ListView | list view]] with icons and associated pages if there are many pages or if you want to group static pages, e.g. in case of configuration content. This also gives ability to present hierarchy of pages as a tree.
| |
| </font>
| |
| * Do not use multiple rows of tabs because it leads to jumping UI elements, which destroys spatial memory.
| |
| * Do not disable a tab when it doesn't apply to the current context; disable the controls on the page.
| |
| * Do not make the settings on a page dependent on settings on other pages.
| |
| * Do not nest tabs.
| |
| <font color="blue">
| |
| * Make tabs [http://qt-project.org/doc/qt-5/qtabwidget.html#movable-prop movable] (possible to reorder) if their pages contain documents, but not if their pages contain static application's user interface.
| |
| * Make tabs [http://qt-project.org/doc/qt-5/qtabwidget.html#tabsClosable-prop closable] if their pages contain documents, but not if their pages contain application's user interface.
| |
| * Make the tabs [http://qt-project.org/doc/qt-5/qtabwidget.html#usesScrollButtons-prop use scroll buttons] to scroll tabs when there are too many tabs.
| |
| * Provide a context menu on each tab if their pages contain documents. This menu should only include actions for manipulating the tab itself, such as Move Left, Move Right, Move to New Window, Close, Close All, Reload.
| |
| </font>
| |
| <font color="red">
| |
| * Consider to provide 'add new tab' function if their pages contain documents, not for static content. In this case the 'Add Tab' button should be used as a [http://qt-project.org/doc/qt-5/qtabwidget.html#setCornerWidget corner widget] placed on the right hand of the tab bar. Have keyboard shortcuts or menu items for easy access, but do not displayed the 'add tab' function in the application toolbar.
| |
| </font>
| |
| | |
| === Appearance ===
| |
| <div id="Tabs5"></div>
| |
| * If users are likely to start with the last tab displayed, make the tab persist and select it by default. Otherwise, select the first page by default.
| |
| * Do not assign effects to changing tabs; tabs must be accessible in any order.
| |
| * Do not place icons on horizontal tabs since they usually add unnecessary visual clutter and consume screen space.
| |
| * Provide a label with an access key for each tab. Use nouns with [[Projects/Usability/HIG/Capitalization|title capitalization]] to describe the content.
| |
| <font color="blue">
| |
| * Do not expand tabs to use empty space of the widget (see [http://qt-project.org/doc/qt-5/qtabbar.html#expanding-prop expanding] property of the Qt tab bar, unfortunately true by default).
| |
| * Avoid long tab names.
| |
| * Do not use [[Projects/Usability/HIG/Wording|abbreviations]] (acronyms such as HTML are allowed).
| |
| * Do not use [http://qt-project.org/doc/qt-4.8/qtabwidget.html#tabShape-prop triangular shape of tabs].
| |
| </font>
| |
| | |
| == Guidelines for phone user interfaces ==
| |
| | |
| [[File:tabs_in_drawer.png | 400px | thumb | none]]
| |
| | |
| | |
| === Behavior ===
| |
| | |
| * Do not abuse other controls to simulate tab behavior.
| |
| * Do not nest tabs.
| |
| * When the tabs are used to group controls, put them at the top of the screen. Do not use more than three tabs.
| |
| ** Do not disable a tab when it doesn't apply to the current context; disable the controls on the page.
| |
| ** Keep interdependent elements in the same tab.
| |
| * When using tabs to open multiple documents (e.g. websites) in the same instance of an application, show them as a list at the top of the [[../MenuDrawer | Menu Drawer]]
| |
| ** Offer the user the option to choose between "Use tabs" and "Use separate windows", the default of which is specified by the [[../GlobalSettings | gobal setting]] if it is set, otherwise the default is new windows unless users are used to tabs from existing apps of the same type (e.g. for web browsers)
| |
| ** Swiping on a tab away from the screen edge that the menu drawer is attached to (e.g. to the right if the drawer is on the left side) closes the tab
| |
| | |
| === Appearance ===
| |
| | |
| * Use short labels for tabs that group controls
| |
| * Use descriptive names for tabs, e.g. page titles for browser tabs
| |
| ** Put a control to open a new tab below the list of tabs
| |
| | |
| == Implementation ==
| |
| [[Category:Usability]][[Category:Behavior]][[Category:Viewing_and_Navigation]][[Category:Grouping]]
| |
