Difference between revisions of "Projects/Usability/HIG/TabControl"

< Projects‎ | Usability‎ | HIG
Jump to: navigation, search
m (Htietze verschob Seite Projects/Usability/TabControl nach Projects/Usability/HIG/TabControl: erroneously not placed in HIG)
 
Line 20: Line 20:
 
* Do not abuse other controls to simulate tab behavior.
 
* Do not abuse other controls to simulate tab behavior.
 
* Use horizontal tabs if the window has seven or fewer tabs and all the tabs fit on one row.  
 
* Use horizontal tabs if the window has seven or fewer tabs and all the tabs fit on one row.  
* Use vertical tabs for less than five options with static content. Prefer vertical tabs for configuration content.
+
* Do not use vertically stacked tabs. Tabs are drawn above the pages only (QTabWidget::TabPosition = North). If you want to group static pages, e.g. in case of configuration content, use a list view with icons.
 
* Do not use multiple rows of tabs because it leads to jumping UI elements, which destroys spatial memory.
 
* 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 disable a tab when it doesn't apply to the current context; disable the controls on the page.  
Line 30: Line 30:
 
* Do not assign effects to changing tabs; tabs must be accessible in any order.
 
* 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.
 
* Do not place icons on horizontal tabs since they usually add unnecessary visual clutter and consume screen space.
* Always add icons of 48x48px to vertical tabs.
 
 
* Provide a label with an access key for each tab. Use nouns to describe the content.
 
* Provide a label with an access key for each tab. Use nouns to describe the content.
 
== Implementation ==
 
== Implementation ==
 
[[Category:Usability]][[Category:Behavior]][[Category:Viewing_and_Navigation]][[Category:Grouping]]
 
[[Category:Usability]][[Category:Behavior]][[Category:Viewing_and_Navigation]][[Category:Grouping]]

Latest revision as of 09:03, 25 October 2013


[edit] Purpose

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.

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.

[edit] Example

[edit] Guidelines

[edit] Is this the right control

  • Use tabs for
    • many controls that can be organized within a few categories, like extended configuration settings
    • for a variable number of sections, like browser pages
    • to manage multiple documents
  • Do not use tabs
    • for only one page (but do not hide the tab when more pages are expected)
    • for controls that apply to the entire application
    • for sequential steps, like wizards.

[edit] Behavior

  • Do not abuse other controls to simulate tab behavior.
  • 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). If you want to group static pages, e.g. in case of configuration content, use a list view with icons.
  • 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.

[edit] Appearance

  • 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 to describe the content.

[edit] Implementation


This page was last modified on 25 October 2013, at 09:03. This page has been accessed 594 times. Content is available under Creative Commons License SA 3.0 as well as the GNU Free Documentation License 1.2.
KDE® and the K Desktop Environment® logo are registered trademarks of KDE e.V.Legal