Registerkartennavigation: Wann Sie sie verwenden und wie Sie sie optimieren können

Eines meiner liebsten UX-Zitate stammt von Chikezie Ejiasi, Head of Studio and Design Systems bei Google.

Er schrieb: „Das Leben ist Konversation. Webdesign sollte genauso sein. Im Internet sprechen Sie mit jemandem, den Sie wahrscheinlich noch nie getroffen haben – daher ist es wichtig, klar und präzise zu sein. Eine gut strukturierte Navigation und Inhaltsorganisation gehen daher Hand in Hand mit einem guten Gespräch.“

Kann die Tab-Navigation klar und präzise sein? Natürlich kann es das, was es zu einer gültigen Form der Navigation und Organisation von Inhalten macht.

Was zählt, ist, wie bei den meisten Dingen im Zusammenhang mit UX, wie Sie es implementieren und wie Sie es optimieren.

Was ist Tab-Navigation?

Registerkartennavigation ist ein Navigations- und UI-Stil, bei dem Informationen in Registerkarten organisiert sind, die den Inhalt in verschiedene Abschnitte unterteilen.

Wenn Sie sich Registerkartennavigationen ansehen, werden Sie im Allgemeinen einige gemeinsame Merkmale bemerken:

1. Abgerundete Tab-Ecken;
2. Trennung von Tabulatoren, egal ob es sich um Leerzeichen oder eine einzelne Zeile handelt;
3. Hover-Effekte auf Registerkarten;
4. Farbverlauf, um den Registerkarten Tiefe und Dimension zu verleihen.

Die Registerkarten-Navigation basiert auf der Ordner-Metapher, mit der jeder vertraut sein sollte, der im Büro arbeitet oder fernsieht. Genau wie Mifsud von UsabilityGeek erklärt…

Justin Mifsud, Usability-Geek :

„In der UI-Terminologie sind Metaphern Ideen oder Objekte, die verwendet werden, um die Vertrautheit zwischen dem Benutzer und der Anwendung zu erleichtern.

Die Verwendung von Registerkarten in der Benutzeroberfläche ist eine hervorragende Metapher, da sie wie echte Registerkartenunterteilungen in Dateien oder Registerkarten auf Ordnern in einer Aktenschublade aussehen.

Daher ist es für Benutzer intuitiver zu wissen, dass diese Registerkarten Inhalte in Abschnitte unterteilen, und wie im wirklichen Leben wird beim Greifen nach der Registerkarte (im Web durch Klicken auf eine Registerkarte emuliert) der jeweilige Inhalt angezeigt.“ (über UsabilityGeek)

Da die Metapher so verbreitet ist, ist es wichtig, dass Sie bei der Implementierung vorsichtig sind. Registerkartennavigationen haben einen starken Prototyp, daher müssen sie genau so aussehen und funktionieren, wie sie erwartet werden.

Wie bei jedem guten Navigationssystem können Sie mit Registerkarten:

• Inhalt sinnvoll in verschiedene Abschnitte unterteilen;
• Zeigen Sie den Leuten, welche Inhalte ihnen zur Verfügung stehen und wie sie zu diesen Inhalten gelangen können;
• Zeigen Sie Personen visuell, wo sie sich auf Ihrer Website befinden.

Wann ist es eine gute Idee, die Tabbed-Navigation zu verwenden?

Im Allgemeinen ist es eine gute Idee, die Tab-Navigation zu verwenden, wenn …

• Sie haben zwischen zwei und neun verschiedene Inhaltskategorien.
• Kategorienamen sind relativ kurz und vorhersagbar, sowohl was die Position als auch den Text betrifft (dh sie entsprechen dem Prototyp).
• Es ist unwahrscheinlich, dass sich die Anzahl der Kategorien regelmäßig ändert.
• Die Kategorien sind ähnlicher Natur; Es macht logisch Sinn, dass sie zusammen tabbed sind.
• Die Kategorien passen in eine einzelne Zeile.

Wie Jakob Nielsen von der Nielsen Norman Group erklärt, treten Probleme auf, wenn die Registerkartennavigation so komplex wird, dass sie mehrere Zeilen erfordert …

Jakob Nielsen, Nielsen Norman Gruppe :

„Mehrere Zeilen erzeugen springende UI-Elemente, die das räumliche Gedächtnis zerstören und es dem Benutzer somit unmöglich machen, sich zu merken, welche Registerkarten er bereits besucht hat.

Außerdem sind mehrere Zeilen ein sicheres Symptom für übermäßige Komplexität: Wenn Sie mehr Registerkarten benötigen, als in eine einzelne Zeile passen, müssen Sie Ihr Design vereinfachen.“ (über NN/g)

Mehrere Zeilen führen auch zu Problemen mit der visuellen Hierarchie. Wenn eine zweite Zeile vorhanden ist, kann dies dem Benutzer signalisieren, dass die Registerkarten in der zweiten Zeile Unterkategorien oder zumindest weniger wichtig als die Registerkarten in der ersten Zeile sind.

Im Allgemeinen ist es keine gute Idee, die Tab-Navigation zu verwenden, wenn:

• Sie möchten, dass die Leute Inhalte gleichzeitig vergleichen. Dies belastet das Gedächtnis und erhöht die kognitive Belastung erheblich.
• Sie erwägen, einen Link im „Mehr…“-Stil hinzuzufügen.

Natürlich sind dies nur grundlegende Richtlinien. Sie könnten mit allen „Sie sollten es verwenden“-Regeln übereinstimmen und feststellen, dass es für Ihr Publikum nicht funktioniert. Es ist letztendlich etwas, das Sie testen müssen.

Denken Sie daran, dass Sie Ihre digitale Analyse verwenden können, um herauszufinden, ob Ihre Navigation mit Registerkarten Probleme für Ihre Besucher verursacht. Von dort aus können Sie entweder Änderungen vornehmen, um die Probleme zu beheben, oder mit einer neuen Art der Navigation experimentieren.

Die Kontroverse

Während moderne Designpraktiken viele Websites haben, die so aussehen …

…einige Leute verwenden die Registerkarten-Navigation als Hauptnavigation.

Wie Luke Wroblewski von Google vor Jahren feststellte, hat Amazon wirklich Pionierarbeit bei diesem Trend geleistet…

Lukas Wroblewski, Google :

„1998 hatte die Seite zwei Top-Level-Kategorien: Bücher und Musik.

Als zusätzliche Kategorien hinzugefügt wurden (z. B. Videos und Geschenke), ließ sich das horizontale Registerkartensystem recht gut skalieren und schuf eine schöne Möglichkeit, Produktkategorien durch Farbe zu differenzieren.“ (über LukeW)

Hier ist ein Blick darauf, wie Amazon früher die Tabbed-Navigation verwendet hat…

Als die Website immer beliebter wurde, wuchs auch die Anzahl der Tabs, die Amazon benötigte…

1999 nannte Jakob dies „ein schlechtes Design und einen Missbrauch der Tab-Metapher“:

Ich behaupte, dass Tabs besser zum Wechseln zwischen alternativen (aber verwandten) Ansichten verwendet werden würden, als zum Navigieren zu nicht verwandten Orten.

Sie sollten Registerkarten verwenden, um zwischen Ansichten innerhalb desselben Kontexts zu wechseln, und nicht, um zu verschiedenen Bereichen zu navigieren. Dies ist der wichtigste Punkt, denn das Festhalten an Ort und Stelle beim Wechseln der Ansichten ist der Grund, warum wir überhaupt Tabs haben

Jakob Nielsen

Dennoch folgten viele Websites dem Beispiel von Amazon und die Definition der Navigation mit Registerkarten begann sich von Nielsens „Wechsel zwischen alternativen Ansichten“ zu verlagern.

Obwohl die Verwendung der Registerkartennavigation als Hauptnavigationssystem etwas aus der Mode gekommen ist, kann sie funktionieren. Wie bei den meisten Dingen sollte Ihr Hauptanliegen nicht sein, was Nielsen über die Registerkartennavigation sagt, sondern was Ihr Publikum sagt.

Finden sie es schwierig, es zu benutzen? Navigieren sie richtig auf Ihrer Website? Können sie die wichtigsten Elemente Ihrer Website finden? Führen Sie Usability-Tests durch, um sicherzugehen.

So implementieren Sie die Tabbed-Navigation

Air Canada nutzt zusammen mit den meisten großen Fluggesellschaften die Registerkartennavigation gut …

Wenn Sie die Registerkartennavigation (auf jeder Ebene) selbst implementieren, sollten Sie Folgendes beachten:

• Entwerfen Sie zunächst die Informationsarchitektur (IA) Ihrer Website, damit Sie intelligentere Entscheidungen in Bezug auf Registerkarten treffen können.
• Die gesamte Registerkarte sollte anklickbar sein, nicht nur der Kategoriename (Text).
• Verwenden Sie keinen „Home“-Tab, selbst wenn Sie für Ihre gesamte Website eine Tab-Navigation verwenden. Lassen Sie Besucher stattdessen mit Ihrem Logo auf die Startseite leiten.
• Die Registerkarte sollte mit dem Inhaltsbereich verbunden sein, den sie steuert, damit der Umfang der Registerkarte klar ist.
• Kategorienamen sollten ein oder zwei Wörter lang und in einfachem Englisch geschrieben sein. Vermeiden Sie die Verwendung von Großbuchstaben, da dies die Tabulatoren schwerer lesbar macht.
• Stapeln Sie nicht mehrere Reihen von Registerkarten. Verwenden Sie stattdessen gegebenenfalls Unterkategorien (z. B. einen zweiten horizontalen Balken unter den Registerkarten). Wenn Sie Unterkategorien verwenden, stellen Sie sicher, dass eine visuelle Verbindung zwischen der ausgewählten Registerkarte und der Leiste der Unterkategorien darunter besteht. Stellen Sie sicher, dass die Anzahl der Unterkategorien, die Sie verwenden, nicht überwältigend ist; verdichten und vereinfachen.
• Die ausgewählte Registerkarte sollte deutlich markiert sein, um den aktuellen Standort anzuzeigen. Nicht ausgewählte Tabs sollten jedoch nicht so stumm geschaltet werden, dass sie vergessen oder übersehen werden.
• Eine konsistente Tab-Reihenfolge sollte von Seite zu Seite beibehalten werden, damit der Benutzer vollständig versteht, wie die Tabs zueinander in Beziehung stehen.

Jakob erklärt, warum diese Konsistenz wichtig ist…

1. Erkennbarkeit. Wenn etwas immer gleich aussieht, wissen Sie, wonach Sie suchen müssen, und Sie wissen, was es ist, wenn Sie es finden.

2. Vorhersagbarkeit. Wenn etwas immer gleich funktioniert, wissen Sie, was passiert, wenn Sie danach handeln.

3. Ermächtigung. Wenn Sie sich auf Ihr bisheriges Wissen über alle verfügbaren Funktionen verlassen können, können Sie ganz einfach eine Reihe von Aktionen zusammenstellen, um Ihr Ziel zu erreichen.

4. Effizienz. Sie müssen keine Zeit damit verbringen, etwas Neues zu lernen oder sich Gedanken über die Auswirkungen inkonsistenter Funktionen zu machen.

Jakob Nielsen

Beispiele für die richtige Navigation mit Registerkarten

Der beste Weg, um die Tabbed-Navigation zu verstehen, vor allem, weil sie auf so viele verschiedene Arten verwendet werden kann, ist, sich einige Beispiele anzusehen.

1. Albumkunstsammlung

Die Album Art Collection ist ein ziemlich beliebtes Beispiel für die Navigation mit Registerkarten …

Zwei Dinge sind hier interessant…

1. Die Navigation ist vertikal, nicht horizontal.
2. Die Navigation enthält Symbole.

In der Regel finden Sie Registerkarten-Navigationen, die horizontal dargestellt werden. Dies ist zum Teil auf Design-Prototypen zurückzuführen. Da es üblich ist, suchen Menschen nach Navigationen im horizontalen Bereich unter dem Logo.

Das bedeutet natürlich nicht, dass Sie diesen Bereich nur für die Navigation verwenden müssen. Stellen Sie einfach sicher, dass Sie Benutzertests verwenden. Sie möchten Ihre Navigation nicht aus stilistischen Gründen verschieben, um die Benutzerfreundlichkeit Ihrer Website zu beeinträchtigen.

Beachten Sie, dass Album Art Collection zwar Navigationssymbole verwendet, aber textbasierte Beschreibungen nicht aufgibt. Das Testen der Benutzerfreundlichkeit von Symbolen ist ein eigener Artikel, aber in den meisten Fällen sind textbasierte Beschreibungen brauchbarer als Symbole allein. Jacob Gube von Six Revisions erklärt…

Jacob Gube, Sechs Revisionen :

„Vermeiden Sie die Verwendung von Symbolen als Ersatz für den Text der Registerkartensteuerung, da Symbole für verschiedene Personen unterschiedliche Bedeutungen haben können – am sichersten ist die Verwendung von reinem Text zur Beschreibung von Bereichsinformationen.“ (über Smashing Magazine)

2. Der Rechnungsautomat

Der Rechnungsautomat ist Ihre grundlegende Tab-Navigation als Beispiel für die Hauptnavigation…

Sie enthalten jedoch eine Registerkarte „Home“, die überflüssig ist. Beachten Sie, wie die ausgewählte Registerkarte nach vorne gebracht wird und die Registerkarten mit dem Inhaltsbereich verbunden sind.

3. Puffer

Buffer war eines meiner Lieblingsbeispiele für die Tabbed-Navigation. In der Vergangenheit hatten sie ein Angebot für Privatpersonen und ein Angebot für Unternehmen, also verwenden sie Tabs, um ihre Inhalte unterhalb der Falte zu trennen.

Hier war der Anfang der Inhalte für Einzelpersonen…

Und hier war der Anfang der Inhalte für Unternehmen…

Dies ermöglichte es ihnen, mit zwei verschiedenen Zielgruppen zu sprechen, ohne eine völlig separate Website oder Erfahrung zu erstellen.

Später wurde die Produktseite von Buffer tiefgreifend verändert, unter anderem mit Veröffentlichen, Antworten und Analysieren (alle ziemlich selbsterklärend). Hier ist die Tab-Navigation, die sie für ihre Seiten verwendet haben:

Abgesehen von unterschiedlichen Preisplänen zeigten diese produktbasierten Registerkarten ein anderes Testimonial, das für das Produkt auf der Registerkarte relevant ist:

Wie David Leggett von UX Booth erklärt, ist die Registerkartennavigation über die primäre und sekundäre Navigationsebene hinaus relevant. Sie können sogar unterhalb der Falte verwendet werden, wie im Fall von Buffer …

David Leggett, UX-Stand :

„Tabs müssen nicht auf die primäre und sekundäre Navigationsebene beschränkt sein. Wenn sie einem Benutzer die Möglichkeit geben, zwischen Bereichen desselben Inhalts hin- und herzuwechseln, können sie sich als sehr nützlich erweisen.

In Kombination mit einer Technologie, die den Inhalt wechselt, ohne eine Seite neu zu laden, kann dem Endbenutzer ein greifbares Gefühl beim Navigieren auf der Seite vermittelt werden.“ (über UX Booth)

3 Best Practices, die Sie sich merken sollten

Bevor Sie mit der Registerkartennavigation experimentieren oder entscheiden, dass sie für Sie nicht funktioniert, sollten Sie diese drei Faktoren berücksichtigen: Zugänglichkeit, Chunking und Geschwindigkeit.

1. Barrierefreiheit ist wichtig

Sie möchten, dass Ihre Website für Menschen mit Behinderungen oder Einschränkungen zugänglich ist. Um dies mit der Tabbed-Navigation zu tun, müssen Sie …

• Ermöglichen Sie Benutzern, mithilfe der „Tabulator“-Taste auf ihrer Tastatur durch Registerkarten zu navigieren.
• Ermöglichen Sie Benutzern die Auswahl eines Tabs mit der „Enter“-Taste auf ihrer Tastatur.
• Geben Sie mit einer alternativen Methode an, welche Registerkarte ausgewählt ist. Sie können beispielsweise ein Titelattribut mit dem Wort „aktiv“ einfügen.

Wenn Sie Ihre Website für mehr Menschen benutzerfreundlicher machen, wird dies niemals den Conversions schaden.

2. Chunking ist wichtig

Bei der Tabbed-Navigation ist es unglaublich wichtig, wie Sie Ihre Inhalte organisieren und aufteilen. Aus diesem Grund bezog sich meine erste Implementierungsempfehlung oben auf die Informationsarchitektur Ihrer Website.

Justin erklärt, warum eine gute Organisation so wichtig ist…

Justin Mifsud, Usability-Geek :

„Tabs unterteilen Inhalte in sinnvolle Abschnitte, die weniger Platz auf dem Bildschirm einnehmen. In dieser Hinsicht können Benutzer leicht auf die Inhalte zugreifen, an denen sie interessiert sind (anstatt den gesamten Inhalt in Absätzen zu haben).“ (über UsabilityGeek)

Berücksichtigen Sie alle Inhalte, die Sie auf Ihrer Website haben möchten. Gruppieren Sie diese Inhalte dann in vier bis fünf Buckets. Wahrscheinlich können Sie diese Übung wiederholen und am Ende zwei oder drei verschiedene Eimer haben. Das ist gut. Führen Sie Benutzertests durch, um zu sehen, welche Personen besser reagieren und besser navigieren.

Vor allem möchten Sie sicherstellen, dass…

1. Ihre Inhalte werden auf logische, erwartete und für Besucher verständliche Weise aufgeteilt.
2. Die Reihenfolge Ihrer Tabs ist sinnvoll und logisch.
3. Ihre Tabs folgen bestehenden Prototypen. Beispielsweise werden SaaS-Sites oft auf eine bestimmte Weise aufgeteilt, während E-Commerce-Sites oft auf eine andere Weise aufgeteilt werden.

3. Geschwindigkeit zählt

Wir haben immer wieder über die Bedeutung von Geschwindigkeit geschrieben. Daher sollte es nicht überraschen, dass die Geschwindigkeit auch eine Rolle bei der Effektivität der Registerkartennavigation spielt.

Jacob erklärt es ganz gut…

Jacob Gube, Sechs Revisionen :

„Ein Zweck für die Verwendung von Modulregisterkarten ist die schnelle und interaktive Präsentation von Inhalten. Zu diesem Zweck sollten Sie versuchen, den Inhalt des inaktiven Bereichs inline in das HTML-Dokument zu schreiben, und dann CSS und JavaScript verwenden, um den Bereich visuell zu formatieren und auszublenden, was schneller ist, als ein Neuladen der Seite oder das Anfordern von Remote-Source-Daten.

Vermeiden Sie das Neuladen der Seite beim Wechseln zwischen den Fenstern, da dies die Navigation zwischen den Fenstern erheblich verzögert. Aus der Ferne geladene Inhalte mit Ajax können eine Option für dynamische und aus der Ferne lokalisierte Bereichsinformationen sein, stellen jedoch eine Herausforderung für Benutzer von Bildschirmleseprogrammen dar, die möglicherweise asynchrone DOM-eingefügte Knoten in der Dokumentstruktur nicht kennen.“ (über Smashing Magazine)

Dieser Rat gilt nicht für diejenigen, die die Registerkarten-Navigation als Hauptnavigation verwenden, aber diejenigen, die die Registerkarten-Navigation wie Air Canada und Buffer verwenden, sollten dies beachten.

Abschluss

Tabbed-Navigation kann absolut zu „einem guten Gespräch“ mit Ihren Besuchern führen. Bei richtiger Implementierung ist es klar und präzise genug, um Ihren Besuchern mitzuteilen: wo genau sie sich befinden, was ihnen genau zur Verfügung steht und wie sie genau auf das zugreifen können, was ihnen zur Verfügung steht.

Mit Hilfe von Usability-Tests und -Optimierungen verbessert sich diese Konversation noch mehr.

Wie bei allem sollten Sie jedoch Ihre Recherchen durchführen (in diesem Fall Ihre Recherchen zur Informationsarchitektur) und testen, testen, testen.

In Summe…

1. Die Tabbed-Navigation kann als Hauptnavigationssystem sowie über die primäre oder sekundäre Navigationsebene hinaus verwendet werden.
2. Probieren Sie die Tab-Navigation aus, wenn Sie zwei bis neun solide, ähnliche Kategorien mit kurzen Namen haben, die in eine einzelne Zeile passen.
3. Versuchen Sie nicht, mit Registerkarten zu navigieren, wenn Sie möchten, dass die Leute Inhalte vergleichen, oder wenn Sie darüber nachdenken, einen „Mehr…“-Link hinzuzufügen.
4. Sie können Best Practices für die Implementierung befolgen, aber…
5. Was zählt, sind Ihre Daten. Fällt es Ihren Besuchern schwer, mit der Tabbed-Navigation auf Ihrer Website zu navigieren? Führen Sie Usability-Tests durch, um dies herauszufinden.
6. Beheben Sie die Probleme, die auftauchen. Oder, wenn es viele kostspielige Probleme gibt, ziehen Sie ein anderes Navigationssystem in Betracht.
7. Zugänglichkeit, Chunking und Geschwindigkeit sind alle wichtig, wenn es um die Registerkartennavigation geht, also achten Sie genau darauf.

Arbeiten Sie an etwas in diesem Zusammenhang? Hinterlassen Sie einen Kommentar in der CXL-Community !