Guidelines:Tabs

From KDE-HIG_Wiki

Introduction text.

Tabs

Tab Widgets

Tab Widgets are a way to group options along their context of use. As tab widgets present a set of stable options, their number remains stable and they never have a close button.


Guidelines

General

  • Group the actions along their context of use, not along technical relations. For each category, provide a tab.
  • Don't put more than 5 or 6 tabs into a tab widget. If you need more tabs, use pages instead.
  • Tabs on tab widgets are arranged horizontally.
  • Never present tabs in more than one row.


Labels

  • Assign a descriptive label to each tab.
  • Avoid labels that are longer than two words.
  • Use Book Title Capitalization for the labels.


Interaction

  • Options on one tab should not affect the status of options on another tab. If they are related, they most likely belong to the same group and should be on presented on one tab.
  • If a control affects only one tab, place it on that tab. If it affects every tab in the tabbed pane, place it outside, for example beside the dialog's OK and Cancel buttons.


Rationale

Implementation Suggestions

Accessibility Notes

See Also

Related To



Pages

Pages are similar to tabs on a tabbed pane, but allow you to present a higher number of categories to the user.


General Categorize the options along their context of use. For each category, provide a page. Make sure not to group them along technical relations. The list of pages is usually layed out vertically. If you do not have more than 5 or 6 categories, you can use tabs. In configuration dialogs where you have icons for each category, you may also align your pages horizontally in this case. Never use a tree structure to present categories in the list of pages.

Labels Assign a descriptive label to each tab. Avoid labels that are longer than two words. Use header capitalization for the labels. Do not assign accelerator keys to the labels.

Interaction Options on one page should not affect the status of options on another page. If they are related, put them on the same tab.


Tabs in Tabbed Document Interfaces

General The number of tabs is determined by the user. Provide an option to add new tabs. Tabs in Tabbed Document Interfaces may be layed out horizontally, or vertically in the shape of Pages.

Horizontal layout Choose a horizontal layout of tabs when the number of tabs is not likely to grow too high, or the document itself may contain a vertically layed out navigator. Provide a means to easily navigate a high number of tabs. You may choose one of the two schemes: Present new tabs in a additional rows when the first row is full. However, make sure the tab sequence is not changed when a user clicks a tab. Offer a button on the left and the right of the tab bar to reach tabs which are not currently visible. Additonally, present all documents in a pull-down menu on the right end of the tab bar.

Vertical layout Choose a vertical layout to present tabs when you expect a large number of documents to be open in one window, the list of documents does not interfere with a list of pages within a document, and there is enough horizontal space to add a list of pages to one side. A vertical, page-like layout allows you to provide a thumbnail preview of the documents.

Interaction Provide option to move, detach and close tabs. Moving and detaching tabs should be possible by direct interaction (drag and drop). Additionally, provide a context menu with the following options: New Tab Detach Tab Move to the left Move to the right Close