Drucken
  • Facebook
  • Google+
  • Twitter
  • XING
18.08.2015

Mobile Navigation trotz Hamburger-Icon unterstützen

Mobile Websites, die ein Hamburger-Menü verwenden, sollten die Navigation über die gesamte Website hinweg sicherstellen, falls Nutzer die Hauptnavigation der Site nicht finden oder verwenden.

© alphaspirit

 

by Amy Schade (deutsche Übersetzung) - 16.08.2015

 

In mobilen Designs ist das Hamburger-Menü bzw. die Drei-Linien-Navigation ein beliebtes Instrument, um das Problem des geringen Platzangebots für die Navigation auf einem kleinen Bildschirm zu lösen. Indem man die Navigation hinter einem Menü platziert, bleibt sie verfügbar, nimmt aber keinen Platz weg – so dass Nutzer auf die Navigation zugreifen können, wenn sie sie brauchen. 

Anmerkung der Übersetzung: Folgende Icons bezeichnet man als Hamburger-Menü, Hamburger-Icon, bzw. Drei-Linien-Icon. Klickt der Nutzer auf das Icon, öffnet sich die Hauptnavigation der Site.

Hamburger-Icon

Allerdings ist der Grund, der das Hamburger-Menü nützlich macht, auch derjenige, der mitunter den Geschäftszielen einer Website schaden kann. Wenn die Navigation auf einer Site sichtbar ist, steht sie immer zur Verfügung. Nutzer erhalten dadurch nicht nur schnellen Zugriff auf die Navigation, sondern auch einen schnellen Überblick über das Angebot der Website.

Liegt dieselbe Navigation in einem mobilen Design hinter einem Hamburger-Menü - oder sogar hinter dem Wort „Menü“ -, sind die Interaktionskosten, um an Informationen zu gelangen, höher. Der Nutzer muss zuerst über die Navigation nachdenken und sie danach finden und öffnen, um ihren Inhalt zu sehen. Falls ein Nutzer die Navigation nicht findet oder öffnet, wird seine Interaktion mit der Website eingeschränkt. Die Verwendung des Hamburger-Menüs kann deshalb die Wahrscheinlichkeit reduzieren, dass Nutzer durch die Website klicken.

 

Screenshot ProPublica

Die Navigation ist auf ProPublica.com sichtbar, anstatt hinter einem Hamburger-Menü verborgen. Deshalb es für den Nutzer einfacher ist, sich auf der Website zu bewegen.

 

Nicht jede Website kann ihre Navigationspunkte auf eine Anzahl reduzieren, die problemlos in einer sichtbaren Navigationsleiste auf einem mobilen Gerät angezeigt werden kann. Deshalb greifen viele Designer trotz der potenziellen Nachteile auf ein Hamburger-Menü zurück. Was kann eine Website also tun, um die potenziell negativen Auswirkungen eines Hamburger-Menüs zu reduzieren?

Um den Effekt einer verborgenen Navigation zu minimieren, besteht die Möglichkeit, bestimmte Aufgaben auch ohne Navigation zu ermöglichen. Stellen Sie sich vor, dass ein Nutzer auf Ihre Website kommt und die Hauptnavigation nicht findet oder verwendet. Wie viele der wichtigsten Aufgaben ihrer Website könnte er dennoch erledigen?

 

Auf der Startseite

Eine Startseite sollte natürlich die wichtigsten Inhalte und Funktionen der Website enthalten. So wissen Nutzer, dass sie auf der richtigen Seite gelandet sind, und werden darüber informiert, was die Website (oder das Unternehmen dahinter) macht.

Websites können Direktlinks zu den Hauptaufgaben enthalten, die Nutzer normalerweise auf der Website erledigen, was eine schnelle Navigation zu diesen Hauptaufgaben ermöglicht. Schneller Zugriff auf diese Aufgaben bedeutet aber nicht, einfach alle Navigationslinks auf der Startseite aufzulisten. Mobile Startseiten können die Hauptaufgaben beschreiben, indem sie über Links und Inhalte auf diese Aufgaben verweisen, welche Nutzer danach zu den gesuchten wichtigen Bereichen führen.

 

Screenshot Bill & Melinda Gates Foundation Website

Die Website der Bill & Melinda Gates Foundation enthält auf der Startseite Links zu wichtigen Bereiche der Website, was es ermöglicht, gängige Aufgaben schnell zu erledigen.

 

Inhalte oder Artikel aus verschiedenen Inhaltsbereichen der Website anzuzeigen, bietet Nutzer ebenfalls schnellen Zugriff auf verschiedene Unterbereiche der Seite, ohne auf die Navigation zugreifen zu müssen.

Screenshot Bleacher Report Homepage

Die Bleacher Report Startseite enthält Artikel aus verschiedenen Inhaltsbereichen, welche auch ohne Seitennavigation schnellen Zugriff auf die einzelnen Bereiche bieten.

 

Auf Unterseiten

Auch Unterseiten können Navigationsmöglichkeiten enthalten, die das Hamburger-Hauptmenü unterstützen und Nutzer auf zusätzliche oder weiterführende Ressourcen bzw. wichtige Inhalte führen.

Inline-Links, bzw. Links, die im Text erscheinen, können Nutzer auf ergänzende oder weiterführende Informationen weiterleiten. Listen mit weiterführenden Links im oder neben dem Inhalt unterstützen die Navigation, ohne dass der Nutzer auf das Hamburger-Menü zugreifen muss. Solche Links können Nutzer auch auf andere Arten von Inhalten, wie weiterführende Slideshows, Videoclips oder Blogs, verweisen.

 

 Screenshot American Academy of Allergy, Asthma and Immunology Website

Ein Artikel auf der Website der „American Academy of Allergy, Asthma and Immunology“ enthält viele Inline-Links, die Nutzer auf weiterführende Informationen weiterleiten.

 

Screenshot American Society of Association Executives’ site

Auf der Website der „American Society of Association Executives“ wurden die weiterführenden Links am Ende des Artikels platziert. Sie leiten Nutzer auf andere Artikel, die von Lesern angesehen wurden, sowie auf empfohlene Inhalte weiter.

 

Screenshot Graceland USA Network 

Auf Informationen über den Cast der Show „Graceland“ folgen auf der Website „USA Network“ eine Video-Zusammenfassung und ein Link zu allen Folgen der Show.

 

Eine weitere Möglichkeit ist die Verwendung eines sehr auffälligen Suchfeldes. Falls die Suchmaschine effektiv genug ist, kann sie von Nutzern als Alternative zur Navigation verwendet werden, sofern sie an auffälligen Stellen im Design platziert wird. (Die Suche sollte aber nicht die einzige Lösung für Probleme sein, die Nutzer mit der Auffindbarkeit von Inhalten haben.)

 Screenshot Loft.com

Loft.com platzierte auf allen Unterseiten der Website ein auffälliges Suchfeld, das es Nutzern ermöglicht, schnell einen Suchbegriff einzugeben und gesuchte Artikel zu finden.

 

Unterer Bereich der Seite

Falls alle anderen Strategien fehlschlagen, können Links auch im oder in der Nähe des Footers platziert werden. Dort bieten sie Nutzern, die bis zum Ende der Seite scrollen, Zugriff auf wichtige Inhalte. Die Hauptnavigation der Website im Footer zu wiederholen, ermöglicht es Nutzern, die das Ende der Seite erreichen, schneller auf die Navigation zuzugreifen – außerdem sehen Nutzer, die das Hamburger-Menü nicht geöffnet haben, auf diese Weise die Seitennavigation.

Screenshot Lumina Foundation

Die Lumina Foundation platziert Links auf wichtige Bereiche, wie Was können Sie tun, Was muss verändert werden und Fakten & Zahlen im unteren Bereich der Seite.

 

 Screenshot Samsung.com

Samsung.com wiederholt die Hauptnavigation der Website im Footer der Seite.

 

Die Navigation unterstützen

Keine dieser Methoden gilt nur für das mobile Design oder ist ein komplett neuer Aspekt des Webdesigns. Sie unterstützen einfach die Art und Weise, auf die die meisten Nutzer Inhalte und Funktionen verwenden. Im Falle von mobilen Designs, in denen die Navigation in einem Hamburger-Menü versteckt wird, unterstützen sie allerdings auch Nutzer, die die Hauptnavigation der Seite nicht finden oder verwenden. 

 

© Deutsche Version. Institut für Software-Ergonomie und Usability AG. Alle Rechte vorbehalten.

Kommentare auf diesen Beitrag

    Keine Kommentare

Kommentar hinzufügen

Die mit * gekenzeichneten Felder sind zwingend auszufüllen