Feature Wiki

Information about planned and released features

Tabs

KS-Entry: Tab

Page Overview

[Hide]

1 Guideline

  • DOM, LESS, JS / Screenshot*: (Abstract)
  • PHP Class:
  • PHP Example:
  • External Library:
  • Status of Entry: To be revised
  • Status of Implementation: to be implemented
  • Description*:
    • Purpose: Tabs are a navigational control to switch between different aspects of an object or sub-item or administration node in the Titled Content Section. Tabs are modeled after traditional card tabs inserted in paper files for browsing convenience.  
    • Composition: Tabs allow multiple panels to be stacked on one screen. composed of a list of Links arranged horizontally.
    • Effect: Selecting a Tab changes the view displayed underneath the Tab.
    • Rival Elements: Dropdown Menu: Dropdown Menus if composed of multiple dropdowns (e.g. Main Menu) look similar to tabs. They are used if each entry might contain more sub-entries in a single Dropdown Menu.
  • Background: Tiddwell recommends to use Tabs if there is “lot of heterogeneous content to show on the page, possibly including text blocks, lists, buttons, form controls, or images. You don’t have room for everything”, reasoning that “in general, grouping and hiding chunks of content can be a very effective technique for decluttering an interface”. She further describes that there should be no more than 10 tabs best no more than 5 and that they should not change frequently.
  • Feature Wiki Reference:
  • Context*:
  • Rules:
    • Composition:
      1. There MUST NOT be more than 10 Tabs.
      2. There SHOULD NOT be more than 5 Tabs.
    • Interaction:
      1. After creating a new object users SHOULD directed to the Settings-tab. There are exceptions like  Poll, Wikis, Blogs, Exercise, Portfolios.
    • Wording:
      1. Tabs SHOULD NOT contain more than 2 words.
      2. Every word except articles, coordinating conjunctions and prepositions of four or fewer letters MUST be capitalized.
      3. Nouns rather than verbs SHOULD be used to label Tabs, for example Content or Settings.
      4. Tab Labels SHOULD be of similar length.
    • Style:
      1. The Tab currently opened/active MUST visually differ from the others.
      2. The width of each Tab SHOULD be proportional to the width of its label.
    • Ordering:
      1. Tabs to change the Mode of the Object presented (e.g. to “Preview”) MUST be placed on the very right and be followed by a Next-Glyph
    • Responsiveness:
      1. If there are more tabs that can be displayed by the available length, the Tabs not fitting on the right MUST be moved into a Dropdown Menu labeled with “...” and a Glyph Down.
    • Accessibility:
      1. The complete list of tabs MUST carry  the role “tablist”.
      2. The individual Tabs MUST carry the role “tab”.
      3. All Tabs MUST be accessible by keyboard.
  • Relations:
    • Is A: Menu
    • Must Use: Link
    • May Use:
 
 

2 Status

  • Effective from release: { not approved yet | x.y }
  • Approved by Jour Fixe at: { link to Jour Fixe agenda }
  • Implementation status: { implemented completely | partly implemented | needs implementation }
  • Funding for streamlining existing features: { name of organisation }
  • Implementation of guideline: { all developers | name of responsible developer }

3 Components that are not compliant with the Guideline

  • …

4 Discussion

...

Last edited: 23. May 2016, 10:01, Amstutz, Timon [amstutz]