Navigation
Eine Navigation ist ein zentrales Element jeder Benutzeroberfläche. Sie hilft Usern, Inhalte zu finden, sich zu orientieren und zwischen Bereichen zu wechseln. Je nach Struktur und Komplexität einer Oberfläche werden unterschiedliche Components eingesetzt, die häufig sinnvoll kombiniert werden können.
Navigationsstrukturen
Eine Navigation kann durch unterschiedliche Components umgesetzt werden und besteht in der Regel aus dem Zusammenspiel mehrerer Elemente. Eine HeaderNavigation ermöglicht den Zugriff auf die zentralen Navigationsbereiche. Ähnlich wie die Navigation, die im mStudio auf der linken Seite platziert ist und eine Primary- und Secondary-Navigation abbildet. Ergänzend sollte der Content durch Breadcrumbs und Tabs sinnvoll strukturiert und vervollständigt werden.
Menü-Navigation
Es gibt zwei grundlegende Navigationsvarianten: vertikal und horizontal. Welche eingesetzt wird, hängt vom Layout und der Komplexität der Inhalte ab. Beachte hierbei die Best practices der Navigationen. Durch den Einsatz einer Suche, Headings oder Buttons kann eine Navigation sinnvoll ergänzt werden. Zur besseren visuellen Abhebung kann die Navigation zudem in einer Layout Card platziert werden.
Vertikal
Die Navigation ist Vertikal angeordnet und eignet sich besonders für Seitenlayouts mit viel Platz in der Breite oder für Anwendungen mit komplexeren oder hierarchischen Strukturen. Im mStudio wird diese für eine Primary- und Secondary Naviagtion genutzt.
Horizontal
Die HeaderNavigation, befindet sich im oberen Bereich der Seite und eignet sich ideal für Hauptnavigationen mit flacher Struktur. Sie wird vor allem mit übersichtlicher Informationsarchitektur verwendet.
Content-Navigation
Die Navigations-Components Breadcrumb und Tabs unterstützen die Orientierung innerhalb des Contents und ermöglichen den schnellen Wechsel zwischen zusammengehörenden Ebenen oder Ansichten.
mail@meinprojekt.de
Breadcrumb
Die Breadcrumb zeigt den aktuellen Pfad innerhalb einer hierarchischen Struktur an. Sie unterstützt die Orientierung, indem sie den Usern jederzeit verdeutlicht, wo sie sich befinden. Gleichzeitig ermöglicht sie den schnellen Wechsel zu übergeordneten Ebenen und erleichtert so die Navigation innerhalb.
Tabs
Tabs ermöglichen den schnellen Wechsel zwischen Ansichten, die auf der gleichen Hierarchieebene liegen. Sie strukturieren verwandte Informationen in klar abgegrenzte Bereiche, ohne dass eine neue Seite geladen wird. Durch ihre permanente Sichtbarkeit unterstützen die Tabs den Usern dabei, Inhalte schnell zu erfassen und zwischen ihnen zu wechseln.