responsive navigation patterns - ux und guidelines
TRANSCRIPT
Responsive Navigation Patterns
UX und GuidelinesMobileTech Conference 2015
@webinterface Peter Rozek
SpeakerPeter Rozek
@webinterface
Arbeite bei ecx.io (Digital Agentur)
Themengebiete: UX,
Usability, Accessibility
Frontend
twitter: @webinterface
Wer bin ich
@webinterface Peter Rozek
Jede 3 responsive Navigation ist nicht benutzerfreundlich.
@webinterface
Navigation ist nicht mehr auf ein Content, Context
oder Component bezogen.
@webinterface
Nutzungszenarien haben sich verändert,
Navigationsprinzipien müssen für viele
Touchpoints ausgelegt sein.
@webinterface
Früher musste die Navigation für ein GUI
(stationäre Webseiten) funktionieren.
@webinterface
Lean ForwardFrüher war man in einer gewohnten Umgebung
und Haltung Online.
@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).
Vom eindimensionalen Bildschirm zum
Multiscreen Experience.
@webinterface
Konsistenz ist der Schlüssel.
@webinterface
@webinterface
Nutzer haben genaue Anforderungen und
Erwartungen.
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“
Für Desktop Websites haben sich allgemein gültige Usability-Heuristiken etabliert.
@webinterface
Welche Best Practice haben sich für eine responsive Navigation durchgesetzt? Gibt es bereits verbindliche Usability-Konventionen?
@webinterface
@webinterface
Welche Probleme haben Nutzer bei der Navigation auf
responsiven Webseiten?
52%
57,9%
36,4%
Der Nutzer machen mindestens einmal schlechte Erfahrungen.
Websites sind unübersichtlich.
Nicht benutzerfreundlich.
(Quelle: BVDW 2013)
@webinterface
@webinterface
Responsive Navigations Pattern
Interaction Design Pattern: Hamburger Icon
@webinterface
„Do people understand the „hamburger“ icon used for mobile navigation menus?“
Luke Wroblewski, @lukew
@webinterface
@webinterface
Eindeutig ?
@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:
A/B Testing Hamburger Icon
@webinterface
@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
12,9% bessere Conversion bei der Bezeichnung Menü
als Hamburger Icon.
@webinterface
Off-Canvas
@webinterface
@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
@webinterface
+
Populäre Lösung aber nicht unbedingt Effizient.
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
Drilldown Menü
@webinterface
@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
@webinterface
Guidelines
@webinterface
Sichtbarkeit
1
„Erkennen anstatt Erinnern“
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
Die Navigation soll für den Benutzer gut erreichbar sein.
@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
Funktion
2
„Plattformkonvention und Nutzererwartung“
@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, dass Links leicht anzuvisieren und zu treffen sind.
@webinterface
Darstellung
3
„Coherence“
@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
Berücksichtigen Sie bei Darstellung der Navigation auch den Landscape Modus.
@webinterface
Alternative Einstiege
4
@webinterface
Schnelleinstiege anbieten, Nutzer wollen nicht immer den gesamten Navigationsbaum durch
gehen.
Flughafen Düsseldorf
@webinterface
Orientierungshilfen
5
„Sichtbarkeit des Systemstatus“
@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
@webinterface
Resumé
erstellen - messen - lernen
@webinterface
Noch Fragen…
?
@webinterface Peter Rozek
@webinterface
…für meine Ellen
@webinterface@webinterface Peter Rozek
Responsive Navigation Patterns UX und Guidelines
Peter Rozek, 24.03.2015 München