Components Tabs Registerkarten

Tabs dienen der Darstellung umfangreicher Informationen und verteilen diese auf mehrere zusammenhängende Seiten. Der Tab-Title kann optional ein Badge (z.B. (11) ) enthalten (s.u.).

Wann Sie diese Komponente verwenden sollten

Tabs können eine hilfreiche Möglichkeit sein, damit Benutzer schnell zwischen verwandten Informationen wechseln können:

  • der erste Abschnitt ist für die meisten Benutzer relevanter als die anderen.
  • Benutzer müssen nicht alle Abschnitte auf einmal ansehen.
  • Ihre Inhalte können sinnvollerweise in klar gekennzeichnete Abschnitte unterteilt werden.

Tabs können gut für Personen funktionieren, die einen Service regelmäßig nutzen, z.B. Benutzer eines Fallarbeitssystems. Ihr Bedarf, Aufgaben schnell auszuführen, kann größer sein als ihr Bedarf an Einfachheit bei der erstmaligen Verwendung.

Wann Sie diese Komponente nicht verwenden sollten

Verwenden Sie die Tabulatorkomponente nicht, wenn die Gesamtmenge des Inhalts, den die Tabs enthalten, das Laden der Seite verzögert.
Verwenden Sie daher die Komponente Tabs nicht als Form der Seitennavigation.
Tabs verbergen Inhalte vor den Benutzern und nicht jeder wird sie bemerken oder verstehen, wie sie funktionieren.

Verwenden Sie keine Registerkarten, wenn es Ihre Benutzer benötigen:

  • den gesamten Inhalt durchlesen, um z.B. einen Schritt-für-Schritt-Prozess zu verstehen.
  • Informationen auf verschiedenen Registerkarten vergleichen - sich die Informationen merken zu müssen sowie rückwärts und vorwärts zu wechseln, kann frustrierend und schwierig sein.

Testen Sie Ihre Inhalte zunächst ohne Tabs. Überlegen Sie, ob es besser ist:

  • Vereinfachung und Reduzierung der Inhaltsmenge
  • den Inhalt auf mehrere Seiten aufteilen
  • den Inhalt auf einer einzigen Seite halten, getrennt durch Überschriften
  • Verwenden Sie ein Inhaltsverzeichnis, damit Benutzer schnell zu bestimmten Inhaltsbereichen navigieren können.

Standard

Home Content

Profile Content

Contact Content




    

        
Home Content

    

    

        
Profile Content

    

    

        
Contact Content

Responsive Tabs

Vorherige Tabs anzeigen
Nächste Tabs anzeigen

Tab 1


    
Vorherige Tabs anzeigen

    
Nächste Tabs anzeigen

    

        
    

    

        

            
Tab 1

OSI Hilfe Dialog