responsive navigation patterns - ux und guidelines
TRANSCRIPT
Responsive Navigation Patterns
UX und GuidelinesMobileTech Conference 2015
@webinterface Peter Rozek
Arbeite bei ecx.io (Digital Agentur)
Themengebiete: UX,
Usability, Accessibility
Frontend
twitter: @webinterface
Wer bin ich
@webinterface Peter Rozek
Nutzungszenarien haben sich verändert,
Navigationsprinzipien müssen für viele
Touchpoints ausgelegt sein.
@webinterface
Heute ist man überall und immer Online.
@webinterface Bildnachweis: Instragram gingergibson
49% Prozent nutzen ihr Smartphone immer und überall
@webinterface
70% Bahnhof, Haltestellen, Flughafen
92% zu Hause
65% In öffentlichen Verkehrsmitteln
65%
In Geschäften, beim einkaufen
Auszug: http://de.statista.com/infografik/1083/app--internet-nutzung-von-smartphones/
60%
Im Restaurant/Cafe
Nutzer erwarten daher eine konsistente UX und
Usability bei der Navigation.
@webinterface
Das gilt für alle Touchpoints (GUI, NUI).
Die Navigation sollte grundsätzlich erkennbar, übersichtlich, leicht erlernbar und
benutzerfreundlich sein.
@webinterface
Wünsche der Nutzer gehen über einfache Bedienbarkeit hinaus.
@webinterface
Nutzer haben eine Repräsentation von Navigationsmodellen und Funktionsweisen als
mentales Modell für sich abgespeichert.
„Benutzung folgt erkennen“
Welche Best Practice haben sich für eine responsive Navigation durchgesetzt? Gibt es bereits verbindliche Usability-Konventionen?
@webinterface
52%
57,9%
36,4%
Der Nutzer machen mindestens einmal schlechte Erfahrungen.
Websites sind unübersichtlich.
Nicht benutzerfreundlich.
(Quelle: BVDW 2013)
@webinterface
„Do people understand the „hamburger“ icon used for mobile navigation menus?“
Luke Wroblewski, @lukew
@webinterface
@webinterface
• Erkennbarkeit und Verständlichkeit nicht bei allen Nutzern gegeben.
• Steht im Konflikt mit anderen Icons.
• Unterschiedliche Ergebnisse bei iPhone und Androide Nutzer.
Hamburger Icon:
@webinterface
12.684 308
12.660 347 +12,9%
12.900 331 +5,7%
13.017 246 -22.2%
Besucher Conversions Ergebnis
Menü
Menü
Menü
http://exisweb.net/mobile-menu-abtest
@webinterface
• Vorteil: Schrittweise Navigation in tiefere Ebenen ohne die Seite neu zu laden.
• Nachteil: Off-Canvas Navigation sollte nicht den gesamten Bildschirm einnehmen.
Off-Canvas Menü für Komplexe Seiten mit vielen Navigationsebenen.
Off-Canvas Navigation und „Hamburger Icon“ haben sich als Pattern für eine
Navigation konventionalisiert.
@webinterface
@webinterface
„Trampelpfad Prozesse“
Christian Stetter, emeritierter Professor für Sprach- und Kommunikationswissenschaft
@webinterface
• Vorteil: Schrittweise Navigation in tiefere Ebenen ohne die Seite neu zu laden.
• Nachteil: Schwächen In der Rückwärtsbewegung.
Drilldown Menü für Komplexe Seiten mit vielen Navigationsebenen.
@webinterface
Best Practice *Menü statt Hamburger Icon
Off-Canvas Navigation
Drill-Down Navigation
* Bei komplexen Navigationen
Reduzieren Sie das visuelle Rauschen. Gruppieren Sie Navigationselemente erwartungskonform,
verständlich und eindeutig.
@webinterface citan.mercedes.fr/hbc.com/
@webinterface
Positionieren Sie die Suche erwartungskonform und gut erkennbar. Besucher nutzen die Suche
als schnellen Einstieg.
Flughafen Düsseldorf
@webinterface gigaom.com/2012.dconstruct.org/
Fehlende Abgrenzung
Verständlich und eindeutig
Die Navigation soll in Form und Sprache für den Benutzer vertraut sein und nicht mit
Systemkonkurierenden Icons in Konflikt stehen.
mitsubishi-motors.com.au/
@webinterface
Bieten Sie eine Schließenfunktion durch drücken oder wischen an. Das gilt insbesondere für die
Off-Canvas Navigation.
hammer-heimtex.de
@webinterface
Bei komplexen Navigationen den direkten Einstieg in Unterebenen anbieten.
hammer-heimtex.de
@webinterface
Stellen Sie sicher, dass sich der Zurück-Button vorhersehbar verhält. Dies gilt insbesondere für
die Drill-down Navigation.
hammer-heimtex.de
@webinterface
Direkten Einstieg in Oberkategorien ermöglichen. Menüpunkte mit nur einer Funktion zu belegen.
Unterschiedlche Funktionen
Vermeiden Sie es unbedingt einen Menüpunkt mit mehreren Funktionen zu belegen.
@webinterface
Helfen Sie den Benutzer beim navigieren durch automatisches Scrollen zu Unterebenen.
www.huk24.de
@webinterface
Stellen Sie sicher das die Inhaltliche Struktur der Navigation, Geräteübergreifend sichtbar,
verständlich und nachvollziehbar ist.
@webinterface
Zeigen Sie dem Nutzer durch eine klare Symbolik und visuelle Hierarchie ob es sich um
Oberkategorien oder Unterpunkte handelt.
huk24.de
@webinterface
Schnelleinstiege anbieten, Nutzer wollen nicht immer den gesamten Navigationsbaum durch
gehen.
Flughafen Düsseldorf
@webinterface
Informieren Sie den Nutzer innerhalb der Navigation wo er sich befindet.
Flughafen Düsseldorf
@webinterface
Zeigen sie dem Nutzer mit der Breadcrumb wo er sich befindet.
Flughafen Düsseldorf
@webinterface
Überschriften sollen eindeutig erkennbar sein und den Seiteninhalt adressieren.
Flughafen Düsseldorf