it-swarm.com.de

Elegante, einfache und offensichtliche Unterregisterkarten?

Ich habe ein einfaches Navigationssetup, das Registerkarten und Unterregisterkarten erfordert. Ich habe die Hauptregisterkarten bereit:

Main tabs

Aber ich weiß nicht, wie ich die Unterregisterkarten anpassen und trotzdem benutzerfreundlich sein soll. Was ist ein guter Weg, um damit umzugehen?

15
Ry-

Einfach:

Zunächst einmal finden Sie möglicherweise diese Frage zu Best Practices für Registerkarten interessant, wobei facettierte Navigation als Alternative für verschachtelte Registerkarten vorgeschlagen wird. Wie in den Kommentaren hervorgehoben, kann es sich um ein tiefer verwurzeltes Problem der Informationsarchitektur handeln, und durch dessen Behebung können Sie möglicherweise keine verschachtelten Registerkarten erstellen.

Außerdem untersucht diese Frage zu mehreren Registerkarten die Registerkartenmetapher und schlägt einige andere Alternativen vor.

Das heißt, Sites mit einer hohen Menge an Informationen sind normalerweise in einem striktes Hierarchiemuster strukturiert, was in der Benutzeroberfläche in der Verwendung übersetzt wird mehrstufige Menüs , Navigationsregisterkarten oder Brotkrumen .

Beispiele für Websites mit einer großen Menge an Informationen, die mehrstufige Registerkarten verwenden, sind Nachrichtenseiten.

enter image description here

enter image description here

Beachten Sie, dass diese Navigationsmenüs die Metapher tab nicht wirklich verwenden, obwohl sie als solche funktionieren.

Offensichtlich:

Wir haben kürzlich mit mehrstufigen Registerkarten gearbeitet und der Designer hat einige Designideen durchgearbeitet, um herauszufinden, welche besser funktioniert.

enter image description hereenter image description hereenter image description hereenter image description here

Wir haben festgestellt, dass Benutzer diejenigen mit weniger Kontrast nicht bemerkten und Schwierigkeiten hatten, Unterabschnitte zu finden. Sie können auch die Verwendung von " Pillen " als Alternative zu Registerkarten sehen, um eine Metapher von Registerkarten innerhalb von Registerkarten (verschachtelte Registerkarten) zu vermeiden.

Wir haben die letzte Alternative aus folgenden Gründen verwendet:

  • Hoher Kontrast: leicht auf einer informationsreichen Site zu erkennen.
  • Erschwinglichkeit: Die explizite Verwendung von UI-Registerkarten gibt die richtige Meldung: Sie sind für die Navigation vorgesehen. Die anderen Beispiele haben keinen Tab und können mit regulären Links oder Werbung verwechselt werden.
  • Integration: Durch Verwendung der vom Vater ausgewählten Farbe als Hintergrund für die verschachtelten Registerkarten wird deutlich, dass Unterregisterkarten Navigation sind innerhalb die ausgewählte Menüoption.

Elegant:

Eleganz ist eher subjektiv. Meine Meinung ist, dass Eleganz mit Einfachheit und Liebe zum Detail Hand in Hand geht. Als Bonus eine Smashing Magazine-Neuauflage von elegant sites (Ich liebe diesen Blog).

15
Naoise Golden

Ich mag diese mehrstufige Oberfläche mit Registerkarten, obwohl ich nicht sicher bin, ob sie Ihren Anforderungen entspricht: tabbed interface

Ursprünglich hier gefunden: Designmodo Futurico UI Pro

Dieses UI-Muster wird auch auf Github verwendet: Github's fancy pants tab navigation

12
ScottK

http://uxmovement.com/navigation/why-hover-menus-do-users-more-harm-than-good/ macht einige gute Punkte. Wenn es um horizontale Untermenüs geht, stimme ich definitiv zu, sie sind viel weniger verwendbar. Eine Anwendung, an der ich gerade arbeite, enthält eine, und ich fluche jedes Mal, wenn ich sie verwende.

Zumindest bei einem vertikalen Dropdown ist der Schwebetunnel viel größer und erfordert nicht die gleiche Genauigkeit bei Ihren Mausbewegungen/-klicks.

5
Jeff Woodard