Die Vor- und Nachteile einer versteckten Navigation

UX-Etiquette: Bereit für den Desktop-Hamburger?
5 Kommentare

Die Elemente einer Webseite einfach und übersichtlich zu gestalten, ist eine wichtige Aufgabe für jeden UX-Designer. Und womöglich kann sie nie vollends zum Abschluss gebracht werden kann: Gerade als man dachte, alles aus Desktop-Anwendungen herausgeholt zu haben, was möglich ist, wurde mobiles Surfen zum Massenphänomen. Seitdem wird mit „Mobile First“ insbesondere ein grafisches Element verbunden: das Hamburger-Icon. Doch taugt das Menü-Symbol auch für Desktop-Anwendungen?

Insbesondere UX-Designern ist daran gelegen, Elemente soweit wie möglich zu vereinfachen. Ziel ist es, eine Webseite so zu gestalten, dass User intuitiv und mit möglichst wenig Aufwand mit ihr interagieren. Durch das mobile Surfen wurde die Latte für ein gutes UX-Design nochmals angehoben. Eingeschränkt durch kleine Bildschirme und geringe Auflösungen mussten die Gestalter passende Lösungen finden, damit sich die Nutzer auch weiterhin auf einfache Art und Weise mit einer Homepage auseinandersetzen konnten. Als größtes Problem entpuppte sich hierbei die Menüführung.

Drei einfache Linien

Wer hätte gedacht, dass drei einfache Linien die Lösung des Problems darstellen würden – die auch noch aus Verlegenheit geboren wurden. Es war nämlich weder besonders sinnvoll noch praktikabel, die umfangreichen Desktop-Menüs eins zu eins auf mobile Geräte zu übertragen. Experimentiert wurde mit verschiedenen ein- und ausklappbaren Navigationen. Herausgekommen ist letzten Endes das, was heute nahezu auf jeder Webseite und App anzutreffen ist: das Hamburger-Icon. Das Symbol fand so bereits auf einer Vielzahl unterschiedlicher mobiler Seiten Verwendung, bevor es sich überhaupt als universales Menü-Symbol durchgesetzt hatte.

Heutzutage geht kaum noch jemand mit seinem PC ins Netz. Die meisten nutzen ihr Smartphone oder ein anderes mobiles Gerät zum Surfen. Weltweit kann mittlerweile nahezu jeder User was mit den drei Linien anfangen. Es braucht daher nicht besonders viel Phantasie, um sich vorzustellen, was in den Köpfen von Designern vorgeht: Wenn jeder das Hamburger-Icon kennt, kann man es dann auch sinnvoll für Desktop-Anwendungen verwenden? Würden sich die Nutzer auf einen solchen Wechsel einlassen?

Es gibt gute Gründe, die für die Übertragung der drei Linien auf den Desktop sprechen – aber auch einige „Contras“.

Pros

Der Clean-Faktor

Für die meisten Designer und Entwickler liegt der Vorteil des Hamburgers-Icons für Desktop-Anwendungen klar auf der Hand: Im Gegensatz zu herkömmlichen Menüs, die in der Regel einen großen Teil des Interface ausmachen und oftmals in eine Vielzahl von Unterkategorien gegliedert sind, zeichnet sich das mobile Pendant durch eine simple Gestaltung aus. Gerade in Zeiten, in denen minimalistische Designs immer mehr an Popularität gewinnen, kann man durch das Hamburger-Icon die eigene Webseite auf seine wesentlichen Elemente reduzieren.

Stellen Sie Ihre Fragen zu diesen oder anderen Themen unseren entwickler.de-Lesern oder beantworten Sie Fragen der anderen Leser.

Hinzu kommt, dass die Navigation einer Homepage in der Regel wenig zum visuellen Gesamteindruck beiträgt. Das Menü durch etwas zu ersetzten, was zugleich zurückhaltend ist und einen hohen Wiedererkennungswert besitzt, wirkt sich positiv auf das Gesamtbild der Seite aus. Am meisten profitieren können hiervon aufgeräumte Internetauftritte mit wenig Seiten und Content.

Visuell versus funktional

Allerdings ist hier auch Vorsicht geboten: Man sollte nicht den Fehler machen, visuelle und funktionale Aspekten zu vertauschen. So haben unterschiedliche Studien und eine Vielzahl von A/B-Tests gezeigt, dass Menü-Icons bis zu 20 Prozent besser funktionieren, wenn sie in einen Button integriert sind. Die drei Linien sollten daher nicht für sich alleine stehen, sondern von einem Rahmen umgeben sein.

Zudem sollte man bei der Desktop-Einbindung des Hamburger-Icons darauf achten, dass es ein visuelles Feedback besitzt, wenn die User mit dem Menü interagieren. Auch der Kontrast, die Größe und die Position des Icons sind wichtig. Die meiste Aufmerksamkeit wird Elementen zuteil, die am oberen linken Bildrand platziert sind. Es ist daher ratsam, die Navigation auf der linken statt auf der rechten Seite zu positionieren. Außerdem sollte das Menü immer am oberen Bildrand fixiert bleiben, wenn die User nach unten scrollen.

Die Power von CTA-Buttons

Eine der größten Herausforderungen für jeden UX-Designer ist es, die verschiedenen Elemente in eine sinnvolle hierarchische Reihenfolge zu bringen. Hierzu müssen manche Seitenaspekte mehr betont werden als andere. Um die Aufmerksamkeit der User auf ein bestimmten Baustein zu lenken, ist es sehr hilfreich, die zumeist klobige Navigation durch drei einfache Linien zu ersetzen.

Aufgrund des hohen Wiedererkennungswerts des Hamburger-Icons wissen die Anwender in der Regel sofort, was für eine Funktion das Element besitzt. Das ist auch der Grund, warum versteckte Menüs am besten mit Call-to-Action-Buttons funktionieren. Mithilfe der drei Linien ist es möglich, die Risiken möglicher Ablenkungspotenziale der User zu minimieren und den Fokus gänzlich auf den CTA-Button zu richten. Am besten funktioniert die Kombination bei Landingpages, auf denen die Informationen klar angeordnet sind und die Nutzer sofort wissen, was sie tun sollen.

Contras

Wiedererkennungswert nicht universell

Auch wenn das Hamburger-Icon den meisten ein Begriff ist, so wissen nicht alle User um seine Bedeutung. Wer ein klassisches Desktop-Menü verwendet, ist daher meistens auf der sichereren Seite. Insbesondere bei der Gestaltung von Webseiten für ältere Anwender sollte man auf den Hamburger verzichten. Für Nutzer, die ihr 65. Lebensjahr überschritten haben, sind die drei Linien kein vertrautes Symbol. Ratsamer ist es hier, die gesamte Navigation offen und frei zugänglich zu gestalten.

Neue Barrieren

Der womöglich größte Nachteil bei der Benutzung des Hamburger-Icons ist der zusätzliche Aufwand, den die User aufbringen müssen, um sich durch das Menü zu navigieren. Im Gegensatz zu klassischen Desktop-Navigationen müssen die Nutzer zunächst das Icon anklicken, um überhaupt die verschiedenen Punkte aufrufen zu können.

Eines der leitenden Prinzipien einer guten UX besagt, dass man so viele Barrieren wie möglich zwischen User und Content abbauen sollte. Auch hier ist abermals Vorsicht geboten, visuelle nicht mit funktionalen Aspekten zu vertauschen. Auf den ersten Blick mag der Extra-Klick kein allzu großes Problem darstellen: Fraglich bleibt, ob ein Nutzer, der ständig mehr klicken muss als er will, dauerhaft eine Webseite besuchen wird.

Aus den Augen, aus dem Sinn

Dass man als User zuerst mit der Navigation interagieren muss, um ihre Inhalte präsentiert zu bekommen, führt zu einem weiteren Problem: Die Nutzer sind nicht in der Lage, zufällig neue oder unbekannte Inhalte zu entdecken, die im Menü integriert sind. Klicken die Anwender nicht auf das Hamburger-Icon, kann es mitunter dazu kommen, dass sie bestimmte inhaltliche Aspekte einer Webseite gar nicht wahrnehmen, weil sie nicht mit ihnen gerechnet haben.

Gerade für Internetauftritte, die darauf angewiesen sind, dass ihre Besucher unbekannte Inhalte auf spontane Weise entdecken, ist daher von der Verwendung des Hamburger-Icons abzuraten. In solchen Fällen sollte darauf geachtet werden, dass Elemente und Inhalte, die zur Steigerung der Conversion beitragen können, standardmäßig und im vollen Umfang angezeigt werden.

Fazit

Wie im Webdesign üblich, gibt es auch die Frage, ob man das Hamburger-Icon für Desktop-Anwendungen verwenden sollte, keine Patentlösung. Von Fall zu Fall müssen die verschiedenen Faktoren von allen Seiten beleuchtet und daraufhin entschieden werden, ob der Zugewinn an Visualität die möglichen UX-Risiken übertrumpft. Wie gesehen, ist das nicht immer der Fall.

Aufmacherbild: Flat hamburger symbol via Shutterstock / Urheberrecht: Hollygraphic

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

5 Kommentare auf "UX-Etiquette: Bereit für den Desktop-Hamburger?"

avatar
400
  Subscribe  
Benachrichtige mich zu:
trackback

[…] dass sie für den Nutzer auf den ersten Blick Sinn ergeben und intuitiv bedient werden können. Das Hamburger-Icon als Menü-Ersatz ist beispielsweise ein Produkt dieses […]

trackback

[…] im Webdesign gewinnen nicht zuletzt deswegen immer mehr an Einfluss. In Kombination mit dem Hamburger-Icon als Menüersatz werden minimalistische Designs in einer Vielzahl symmetrischer Formen und Anordnungen das Netz im […]

trackback

[…] Elemente. Durch den Einsatz des Einkaufswagens auf E-Commerce-Webseiten oder die Verwendung des Hamburger-Icons als Menüersatz fällt dem Anwender die Interaktion mit den Inhalten leichter. Gestalterische Experimente sind […]

trackback

[…] es zunächst wenig aussichtsreich, umfangreiche Desktop-Menüs durch das Hamburger-Icon zu ersetzen, erfreut sich diese Methode immer größerer Beliebtheit. Im Gegensatz zu herkömmlichen […]

trackback

[…] Bei mobilen Applikationen ist es essenziell, dass nur so viele Kategorien integriert werden, wie unbedingt notwendig sind. Weitere Punkte können durch die Einbindung eines Hamburger-Icons eingegliedert werden. Auch dieses Symbol erfreut sich mittlerweile universaler Bekanntheit und wird von Branchengrößen wie Facebook verwendet. Allerdings hat der Einsatz dieser Funktion einen Haken: Angebote, die darauf setzen, dass die Nutzer neue Inhalte selbstständig entdecken, sollten von einer Implementierung absehen. […]

X
- Gib Deinen Standort ein -
- or -