Tabs Designsystem

Wechseln Sie zwischen Inhaltsbereichen auf derselben Ebene.

7 Prüfpunkte · 3 Inhaltsgruppen

Inhalt der Checkliste

Prüffortschritt

Struktur und Bedeutung

Vergleichen Sie Informationen und Präsentation im Nutzungskontext.

Benennen Sie den Inhalt jeder RegisterkarteVerwenden Sie kurze, unterscheidbare Bezeichnungen und vermeiden Sie generische Namen.Tabs stimmen mit Bereichen mit demselben Kontext überein; Seiten auf verschiedenen Ebenen sollten eine Navigation verwenden.Beispiel Zu den Projektdetails gehören „Übersicht“, „Mitglieder“ und „Aktivitäten“.Zeigt die aktuell ausgewählte Registerkarte anKombinieren Sie eine Markierung oder Akzentlinie mit einer Farbe, um den aktuellen Inhalt zu kennzeichnen.Die aktuell ausgewählte Registerkarte muss deutlich markiert und mit dem aktuell sichtbaren Bereich verknüpft sein. Eine etwas hellere Farbe reicht meist nicht aus.Registerkarte mit Panel verknüpfenGeben Sie die richtige Rolle, den richtigen Namen und den richtigen Status für das Support-Tool an.Nur der Inhalt der aktuellen Registerkarte sollte am Tastaturstream teilnehmen; Die Beschriftung und der Status müssen das richtige Panel widerspiegeln.

Interaktion und Benutzerfreundlichkeit

Probieren Sie den Vorgang aus, ändern Sie den Status und arbeiten Sie weiter.

Verhalten beim Scrollen nach TabsVerwenden Sie die Pfeiltasten zwischen Tab und Tab, um zum Inhalt zu gelangen.Feedback beim Übertragen von InhaltenWenn Sie einen Download durchführen müssen, halten Sie den Tab-Namen und den Wartestatus frei und zeigen Sie alte Tab-Daten nicht als neue Tabs an.Wenn das Laden zwischen Tabs einige Zeit in Anspruch nimmt, geben Sie an, welche Inhalte warten, und verhindern Sie, dass alte Ergebnisse mit neuen Tabs verwechselt werden.Behalten Sie auf schmalen Bildschirmen die Registerkarte „Barrierefreiheit“ beiErmöglicht das Scrollen oder eine andere Auswahl, während geöffnete Tabs weiterhin erkannt werden.Versuchen Sie es mit langen Beschriftungen und vergrößern Sie den Text. Die letzten Tabs benötigen noch eine Möglichkeit, sie zu finden und auszuwählen, ohne den Überblick über den geöffneten Tab zu verlieren.

Vervollständigen Sie das Erlebnis

Achten Sie auf Details, die bei der Verwendung des Designs leicht übersehen werden können.

Verwenden Sie eine sinnvolle und stabile Tab-ReihenfolgeOrdnen Sie Registerkarten nach ihrer Beziehung oder gemeinsamen Verwendung und halten Sie diese Reihenfolge über alle Zustände desselben Bildschirms hinweg stabil.Wenn sich die Reihenfolge ändert, wenn sich die Daten ändern, kann dies dazu führen, dass Benutzer sie versehentlich öffnen. Priorisieren Sie leicht zu merkende Vereinbarungen.

Der Fortschritt wird automatisch in diesem Browser gespeichert.

ANLEITUNG

So prüfen Sie

Benennen Sie den Inhalt jeder Registerkarte

Tabs stimmen mit Bereichen mit demselben Kontext überein; Seiten auf verschiedenen Ebenen sollten eine Navigation verwenden.

BEISPIELE

Anwendungsbeispiele

Benennen Sie den Inhalt jeder Registerkarte

Zu den Projektdetails gehören „Übersicht“, „Mitglieder“ und „Aktivitäten“.

Tabs Designsystem

Struktur und Bedeutung

Interaktion und Benutzerfreundlichkeit

Vervollständigen Sie das Erlebnis

So prüfen Sie

Benennen Sie den Inhalt jeder Registerkarte

Anwendungsbeispiele

Benennen Sie den Inhalt jeder Registerkarte

Ziel und ausgewählte Registerkarte

Inhalte je Registerkarte laden

Fokus, Auswahl und Nichtverfügbarkeit

Checkliste suchen

Keine Checklisten gefunden

Tabs Designsystem

Struktur und Bedeutung

Interaktion und Benutzerfreundlichkeit

Vervollständigen Sie das Erlebnis

So prüfen Sie

Benennen Sie den Inhalt jeder Registerkarte

Anwendungsbeispiele

Benennen Sie den Inhalt jeder Registerkarte

Varianten und Anwendungsfälle

Ziel und ausgewählte Registerkarte

Inhalte je Registerkarte laden

Fokus, Auswahl und Nichtverfügbarkeit