5 kluge Alternativen zum Hamburger Menü
Bildschirmfläche ist eine wertvolle Ressource auf Mobilgeräten. Um die Herausforderung kleiner Bildschirme zu meistern und dennoch die Navigation zugänglich zu machen, verlassen sich Designer häufig darauf, die Navigation hinter dem Hamburger-Icon zu verstecken, ein Paradebeispiel für versteckte Navigation. In diesem Artikel werden wir sehen, warum die versteckte Navigation schlechtes UX erzeugt und welche Alternativen für Designer verfügbar sind.
Warum ist das Hamburger Menü schlecht für UX?
Auf Mobilgeräten wird die sichtbare Navigation 1,5 Mal mehr als bei Hamburgern verwendet
Wenn Sie an digitalen Produkten arbeiten, haben Sie wahrscheinlich bereits Dutzende von Artikeln gelesen, in denen beschrieben wird, wie das Hamburger-Menü auf Mobilgeräten UX-Metriken verletzt. Der Hauptnachteil ist seine geringe Auffindbarkeit, und dies wird durch tatsächliche Zahlen unterstützt. In qualitativen Studien NNGroup gefunden Diese versteckte Navigation ist weniger sichtbar als die sichtbare oder teilweise sichtbare Navigation. Dies bedeutet, dass Benutzer die Navigation seltener verwenden, wenn die Navigation ausgeblendet ist. Hamburger Menüs führen zu Engagement, verlangsamen die Erkundung und verwirren die Menschen.
Was sollten wir stattdessen verwenden?
Zwar gibt es keine feste Regel für mobile Apps und Websites, aber eine allgemeine Empfehlung lautet entweder "sichtbar" - die Hauptnavigationsoptionen werden in einer sichtbaren Navigationsleiste angezeigt - oder die kombinierte Navigation , bei der einige der Hauptnavigationsoptionen sichtbar sind und einige sind unter einem interaktiven Element versteckt.
1. Tabulatorleiste
Wenn Sie auf Ihrer Website oder in Ihrer App eine begrenzte Anzahl von Zielen auf oberster Ebene haben, kann eine Navigation mit Tabs die Lösung sein. Wenn ein Menü oben oder unten angezeigt wird, ist es im Grunde Werbung, dass eine Navigation vorhanden ist und die Benutzer die Navigationsoptionen von Anfang an sehen können.
Registerkarten scheinen das einfachste Navigationsmuster zu sein. Bei der Gestaltung dieser Art von Navigation sollten jedoch einige Dinge berücksichtigt werden:
- Die Tab-Leiste ermöglicht die Anzeige von 5 oder weniger Navigationsoptionen.
- Eine der Optionen sollte immer aktiv sein und z. B. mit einer Kontrastfarbe optisch hervorgehoben werden.
- Die erste Registerkarte muss die Startseite sein und die Reihenfolge der Registerkarten sollte sich auf ihre Priorität oder logische Reihenfolge im Benutzerfluss beziehen.
- Es ist besser, für jede Navigationsoption Symbole zusammen mit Beschriftungen zu verwenden. Symbole ohne Labels funktionieren nur für allgemeine Aktionen, wie ein Lupensymbol für die Suche und für Schnittstellen, die die Benutzer häufig verwenden (z. B. Instagram).
Tipp: Um Platz auf dem Bildschirm zu sparen, kann die Navigationsleiste beim Abwärts- und Aufwärtsscrolling ausgeblendet werden.
2. Tab-Leiste mit der Option "Mehr"
Wenn Sie mehr als fünf Top-Level-Ziele haben, kann eine praktische Lösung darin bestehen, die vier priorisierten Abschnitte anzuzeigen und ein fünftes Element als Liste der verbleibenden Optionen zu verwenden.
Die Designprinzipien für diese Lösung sind im Wesentlichen die gleichen wie für die Tab-Leiste. Es gibt nur eine Ausnahme: Das letzte Element ist das "mehr" Element.
Der "mehr" -Eintrag kann als Dropdown-Menü oder sogar als Link zu einer separaten Navigationsseite mit den verbleibenden Abschnitten fungieren. Auf den ersten Blick ist diese Lösung nicht viel besser als das Hamburger-Menü, da es auch Inhalte versteckt und sein Etikett nicht viel über das, was sich dahinter verbirgt, sagt. Wenn Sie die Navigationsoptionen jedoch richtig priorisieren, hat die Mehrheit Ihrer Benutzer ständig vier oder fünf sichtbare Navigationsoptionen mit der höchsten Priorität auf dem Bildschirm, so dass die Navigationserfahrung für sie verbessert wird.
3. Progressiv kollabierendes Menü
Das progressiv kollabierende Menü, auch "Priority +" -Muster genannt, ist ein Menü, das sich an die Bildschirmbreite anpasst. Es zeigt so viel wie möglich von der Navigation und setzt alles andere unter einen "mehr" -Button. Im Grunde handelt es sich bei diesem Muster um eine ausgefeilte Version der Navigation "Tab bar + more", bei der die Anzahl der Navigationsoptionen, die sich hinter dem Menü "more" verbergen, vom verfügbaren Bildschirmbereich abhängt. Die Flexibilität dieser Lösung bietet eine bessere Benutzererfahrung als eine 'statische' 'Tab-Leiste + mehr'.
4. Scrollbare Navigation
Ähnlich wie bei den vorherigen zwei Mustern ist dies ein anderer Ansatz für längere Listen. Wenn Sie mehrere Navigationsoptionen ohne große Prioritätenunterschiede haben, z. B. Musikgenres, können Sie alle Elemente in einer bildlauffähigen Ansicht auflisten. Wenn Sie die Liste scrollbar machen, können Sie sich von Seite zu Seite bewegen.
Der Nachteil dieser Lösung ist, dass immer noch nur die ersten wenigen Elemente ohne Scrollen sichtbar sind und alle anderen außer Sichtweite sind. Dies ist jedoch eine akzeptable Lösung, wenn von den Benutzern erwartet wird, dass sie den Inhalt erkunden, beispielsweise Nachrichtenkategorien, Musikkategorien oder in einem Online-Shop.
5. Vollbildnavigation
Während bei anderen in diesem Artikel erwähnten Mustern der Kampf darin besteht, den Platz zu minimieren, den die Navigationssysteme einnehmen, nimmt das Vollbildmuster den genau entgegengesetzten Ansatz. Bei diesem Ansatz wird die Startseite normalerweise ausschließlich der Navigation zugeordnet. Benutzer tippen oder wischen inkrementell, um beim Scrollen nach oben und unten zusätzliche Menüoptionen anzuzeigen.
Dieses Muster funktioniert gut in aufgabenbasierten und richtungsbasierten Websites und Apps, insbesondere wenn sich Benutzer während einer einzelnen Sitzung auf nur einen Zweig der Navigationshierarchie beschränken. Wenn Nutzer von großen Übersichtsseiten auf Detailseiten geleitet werden, können sie sich auf das konzentrieren, wonach sie suchen, und sich auf Inhalte innerhalb eines einzelnen Abschnitts konzentrieren.
Vollbildnavigation bei Yelp
Mithilfe der Vollbildnavigation können Designer große Informationsbrocken auf kohärente Weise organisieren und Informationen offenlegen, ohne den Benutzer zu überfordern. Sobald der Benutzer seine Entscheidung getroffen hat, wohin er gehen soll, können Sie den gesamten Bildschirmbereich dem Inhalt widmen.
Fazit
Mit Navigationsmustern für Mobilgeräte gibt es keine einheitliche Lösung; Es hängt immer von Ihrem Produkt, Ihren Benutzern und dem Kontext ab. Grundlage jeder gut durchdachten Navigation ist jedoch die Informationsarchitektur: klare Struktur, Prioritäten und Beschriftungen, die auf den Bedürfnissen Ihrer Benutzer basieren. Die Navigation der Benutzer sollte für jeden App-Designer oberste Priorität haben. Sowohl Erstanwender als auch wiederkehrende Nutzer sollten in der Lage sein, herauszufinden, wie sie sich mit Leichtigkeit durch Ihre App bewegen können.