Accordion vs. Tabs
Ein Akkordeon öffnet Bereiche auf einer Seite und lässt oft mehrere offen. Tabs zeigen immer nur einen Bereich im selben Fenster.
Verwenden Sie ein Akkordeon für Fragen oder Abschnitte, die die Leute gemeinsam lesen könnten. Verwenden Sie Tabs für wenige separate Ansichten, wenn nur eine zu einem Zeitpunkt relevant ist.
Sieh, was jedes Muster macht
Probieren Sie jedes Beispiel. Lesen Sie dann über den Job, für den es gemacht ist.
Accordion
Ein Akkordeon stapelt Bereiche. Ihre Überschriften können den eigenen Inhalt öffnen oder schließen.
Accordion
Ein Akkordeon stapelt Bereiche. Ihre Überschriften können den eigenen Inhalt öffnen oder schließen.
Wähle es, wenn
Verwenden Sie es für optionale Abschnitte, die jeweils eine klare, separate Überschrift haben.
Ein FAQ zeigt erst die Fragen. Man kann eine Antwort öffnen, ohne die Seite zu verlassen.
- Verwenden Sie es, wenn
- Verwenden Sie es für optionale Abschnitte, die jeweils eine klare, separate Überschrift haben.
- Nutze es nicht, wenn
- Verstecken Sie niemals kurze, wesentliche Informationen nur, um die Seite ordentlich aussehen zu lassen.
- In Code verwendeter Name
<details><summary>
Registerkarten
Registerkarten verwenden Bezeichnungen, um Inhalte in einem gemeinsamen Bereich zu wechseln. Die Hauptaufgabe bleibt geöffnet.
Übersicht, Aktivitäten und Berechtigungen ändern das darunterliegende Panel, während dasselbe Projekt geöffnet bleibt.
- Verwenden Sie es, wenn
- Verwenden Sie Registerkarten für einige Abschnitte auf derselben Ebene, wenn deren Beschriftungen sichtbar bleiben sollen.
- Nutze es nicht, wenn
- Verwenden Sie niemals Tabs als kleine Links zu Seiten, die nichts miteinander zu tun haben.
- In Code verwendeter Name
role="tablist"
Schneller Vergleich
| UI-Muster | Am besten für | Nicht für | In Code verwendeter Name |
|---|---|---|---|
| AccordionAccordion | Verwenden Sie es für optionale Abschnitte, die jeweils eine klare, separate Überschrift haben. | Verstecken Sie niemals kurze, wesentliche Informationen nur, um die Seite ordentlich aussehen zu lassen. | <details><summary> |
| RegisterkartenTabs | Verwenden Sie Registerkarten für einige Abschnitte auf derselben Ebene, wenn deren Beschriftungen sichtbar bleiben sollen. | Verwenden Sie niemals Tabs als kleine Links zu Seiten, die nichts miteinander zu tun haben. | role="tablist" |
Vor dem Ausliefern
- 01
Schreibe auf, was die Person tun muss.
- 02
Testen Sie Tastatur, Fokus, Berührung, Zoom, Laden, leere und Fehlerzustände.
- 03
Sicherstellen, dass Leute dieselben Informationen ohne Hover oder Bewegung erhalten können.
- 04
Testen Sie mit echtem Inhalt auf kleinen und großen Bildschirmen.
Vergleichsanfrage zum Kopieren
Kopiere das, wenn dein Team Hilfe bei der Wahl zwischen den Mustern braucht.
Wähle das beste Muster aus Accordion (Accordion), Registerkarten (Tabs) für unseren echten Nutzerfluss. Nutze diese Regel: Ein Akkordeon öffnet Bereiche auf einer Seite und lässt oft mehrere offen. Tabs zeigen immer nur einen Bereich im selben Fenster. Schreibe die Aufgabe, die Inhaltsmenge und die Kosten eines Abbruchs auf. Prüfe Tastatur, Touch, Laden, Fehler und das Verhalten bei reduzierter Bewegung. Erkläre deine Wahl und baue dann die kleinste zugängliche Version mit dem Design-System des Projekts.