Designelemente: Reiter und Register

Kein Beitragsbild

Dirk Metzmacher

Dirk Metzmacher ist der Herausgegeber des Photoshop-Weblogs, sowie Fachjournalist und Photoshop-Profi, dessen...

In einem Aktenordner übernehmen Reiter die Organisation und helfen das Gesucht schnell aufzuschlagen. Was Software oder GUI-Design schon länger kennt, hat sich auch im Web durchgesetzt.

Registerkarten dienen dazu, Informationen auf mehreren, hintereinander liegenden Dialogfeldern anzuordnen. Dabei befindet sich immer ein Dialogfeld im Vordergrund. Durch Anklicken des entsprechenden Reiters kann man eine andere Registerkarte in den Vordergrund holen.

Das Internet-Kaufhaus Amazon ist zwar nicht der Erfinder, hat sie jedoch bekannt gemacht und damit ein oft kopiertes Vorbild für zahlreiche Shops geliefert.

Screenshot
Ein gewohntes Bild – Ein Stück Amazon

Klickt man einen der Reiter an, zeigt ein Untermenü weitere Optionen. Verstärkt wird diese Unterteilung der einzelnen Bereiche durch eine farbliche Kennzeichnung, bei der jede Kategorie seine eigene Farbe zugeteilt bekommen hat. Das Design selbst ist auf schnelle Ladezeiten ausgelegt.

Die Kinderwelt MyToys scheint das Menü von Amazon eins zu eins zu kopieren – und ist damit bei weitem nicht der Einzige. Nicht nur die Grundform der Registerkarten wurde übernommen, sondern auch die Aufteilung der Untermenüs.

Screenshot
Alles nur geklaut?

Screenshot
Verspieltes Design für Kinder

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

gezeigt

Screenshot
GMX-Kategorien unterscheiden sich auch in der Farbe

Screenshot
Apple im beliebten Auqa-Stil

Screenshot
Aqua-Reiter eines Stadtportals

Eher technisch präsentiert sich 1&1 seinen Kunden. Hier zeigt sich, wie das Problem mit den Unterpunkten gelöst werden kann. Klickt man das Hauptthema Produkte an, verwandelt sich die darunter liegende Fläche in ein Untermenü. Wählt man daraus einen Punkt aus, nimmt nicht nur dieser eine neue Farbe an, zahlreiche andere Elemente der Seite machen die Verwandlung ebenfalls mit.

Screenshot
1&1 – Mit leichter 3D-Struktur

Screenshot
Wikipedia nutzt ein Registerkartendesign

Das Menü der Homepage der Stadt Berlin wirkt zwar wie ein Registerkartendesign, es ähnelt der Wikipedia, nutzt aber keinen der Vorteile. Weder erfolgt eine farbliche Unterteilung, noch das sich eine Karte vom Rest abhebt, wenn man den Menüpunkt angeklickt hat.

Screenshot
Dürftiges Beispiel – Die Stadt Berlin

Einfach strukturiert ist die Variante der AXA Versicherungen. Da bildet ein “Sondermenü” aus Registerkarten ein ergänzendes Menü, welches die Themen Kontakt, Inhalt und Lexikon zusammenfasst.

Screenshot
Einfacher geht es auch – wie bei AXA

Bei Mattel verursacht ein Klick das Erscheinen eines Untermenüs im gleichen Stil, wobei jeweils die angeklickten Menüpunkte hervorgehoben werden. Erst so bekommt das Menü seine Funktion. Die Unterteilung durch verschiedene Farben für die Bereiche “Über uns”, “Unsere Marken”, “Presseinformationen” und “Service” könnte die Website verständlicher machen.

Screenshot
Eine farbliche Unterteilung könnte unterstützen

Wie im Firmenlogo gibt es beim Template Monster grundsätzlich eine Aufteilung in den Farben Blau und Rot, so auch beim Registerkartenmenü. Dadurch wirken die Seiten homogen und in sich geschlossen. Gelungen ist auch die Hervorhebung des aktivierten Menüpunktes, bei der ein “Eselsohr” entsteht.

Screenshot
Kreatives Design mit “Eselsohr”

Die Ecke taucht auch im nächsten Beispiel auf. KEO ist eine Website aus Südafrika zum Thema Rugby.

Screenshot
“Eselsohr” bei KEO

So etwas wie ein umgedrehtes Registerkartenmenü bietet die offizielle Website des Galliers Asterix – auch das ist also möglich. Hier wird das Menü, allen Regeln der Usability zum Trotz, am Seitenende platziert. Nach dem Anklicken bekommt der Menüpunkt die Farbe des Hintergrundes der aufgerufenen Seite, wobei jede Kategorie eine eigene Farbe erhält.

Screenshot
Registerkarten auf den Kopf gestellt

Erstveröffentlichung 26.02.2005

Dirk Metzmacher

Dirk Metzmacher ist der Herausgegeber des Photoshop-Weblogs, sowie Fachjournalist und Photoshop-Profi, dessen Tutorials seit über 12 Jahren Leser von Fachpublikationen wie Galileo Press, DigitalPhoto, Dr.Web, Print24, PSD-Tutorials oder Noupe von den Grundlagen zum Thema Photoshop bis hin zu professionellen Arbeitsweisen begleitet haben. Sein Twitter-Account und seine Facebookseite.