Navigation ist nicht mehr auf ein Content, Context oder Component bezogen. Die Navigation ist eines der Kernelemente einer responsiven Website. Welches Navigationsprinzip ist für die Informationsarchitektur, Bedienbarkeit und User Experience am besten geeignet? Neben der Skalierbarkeit für unterschiedliche Bildschirmgrößen ist die größte Herausforderung, die Balance zwischen Vollständigkeit und Klarheit zu finden. Content First und Mobile First impliziert, die Navigation zu überdenken. User Research und authentische User Journeys liefern valide Entscheidungsgrundlagen für die Priorisierung des Navigationsmodells. Je nach Komplexität sind Navigation Patterns erprobte Modelle, die man einsetzen kann. Ob Off-Canvas, Slidedown oder Hamburger-Icon, welche Vor- und Nachteile diese haben, muss sorgfältig evaluiert werden. Der Vortrag geht diesen Fragen nach und formuliert Guidelines für die Praxis.

1. Responsive Navigation
Patterns
UX und Guidelines
MobileTech Conference 2015
@webinterface Peter Rozek

2. Speaker
Peter Rozek
@webinterface

3. Arbeite bei ecx.io
(Digital Agentur)
Themengebiete:
UX,
Usability,
Accessibility
Frontend
twitter: @webinterface
Wer bin ich
@webinterface Peter Rozek

4. Jede 3 responsive
Navigation ist nicht
benutzerfreundlich.
@webinterface

5. Navigation ist nicht mehr
auf ein Content, Context
oder Component bezogen.
@webinterface

6. Nutzungszenarien haben
sich verändert,
Navigationsprinzipien
müssen für viele
Touchpoints ausgelegt sein.
@webinterface

7. Früher musste die
Navigation für ein GUI
(stationäre Webseiten)
funktionieren.
@webinterface

8. Lean Forward
Früher war man in einer gewohnten Umgebung
und Haltung Online.
@webinterface

9. Heute ist man überall und
immer Online.
@webinterface Bildnachweis: Instragram gingergibson
49% Prozent nutzen ihr Smartphone
immer und überall

10. @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

11. Nutzer erwarten daher eine
konsistente UX und
Usability bei der Navigation.
@webinterface
Das gilt für alle Touchpoints (GUI, NUI).

12. Vom eindimensionalen
Bildschirm zum
Multiscreen Experience.
@webinterface

13. Konsistenz ist der
Schlüssel.
@webinterface

14. @webinterface
Nutzer haben genaue
Anforderungen und
Erwartungen.

15. Die Navigation sollte grundsätzlich erkennbar,
übersichtlich, leicht erlernbar und
benutzerfreundlich sein.
@webinterface
Wünsche der Nutzer gehen über einfache
Bedienbarkeit hinaus.

16. @webinterface
Nutzer haben eine Repräsentation von
Navigationsmodellen und Funktionsweisen als
mentales Modell für sich abgespeichert.
„Benutzung folgt erkennen“

17. Für Desktop Websites haben sich allgemein
gültige Usability-Heuristiken etabliert.
@webinterface

18. Welche Best Practice haben sich für eine
responsive Navigation durchgesetzt? Gibt es
bereits verbindliche Usability-Konventionen?
@webinterface

19. @webinterface
Welche Probleme haben
Nutzer bei der
Navigation auf
responsiven Webseiten?

20. 52%
57,9%
36,4%
Der Nutzer machen mindestens einmal
schlechte Erfahrungen.
Websites sind unübersichtlich.
Nicht benutzerfreundlich.
(Quelle: BVDW 2013)
@webinterface

21. @webinterface
Responsive
Navigations Pattern

22. Interaction Design Pattern: Hamburger Icon
@webinterface

23. „Do people understand the „hamburger“ icon
used for mobile navigation menus?“
Luke Wroblewski, @lukew
@webinterface

24. @webinterface
Eindeutig ?

25. @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:

26. A/B Testing
Hamburger Icon
@webinterface

27. @webinterface http://exisweb.net/mobile-menu-abtest

28. @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

29. 12,9% bessere Conversion
bei der Bezeichnung Menü
als Hamburger Icon.
@webinterface

30. Off-Canvas
@webinterface

31. @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.

32. Off-Canvas
@webinterface
+
Populäre Lösung aber nicht unbedingt Effizient.

33. Off-Canvas Navigation und
„Hamburger Icon“ haben
sich als Pattern für eine
Navigation
konventionalisiert.
@webinterface

34. @webinterface
„Trampelpfad Prozesse“
Christian Stetter, emeritierter Professor für Sprach- und
Kommunikationswissenschaft

35. Drilldown Menü
@webinterface

36. @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.

37. @webinterface
Best Practice *
Menü statt Hamburger Icon
Off-Canvas Navigation
Drill-Down Navigation
* Bei komplexen Navigationen

38. @webinterface
Guidelines

39. @webinterface
Sichtbarkeit
1
„Erkennen anstatt Erinnern“

40. Reduzieren Sie das visuelle Rauschen. Gruppieren
Sie Navigationselemente erwartungskonform,
verständlich und eindeutig.
@webinterface citan.mercedes.fr/hbc.com/

41. @webinterface
Positionieren Sie die Suche erwartungskonform
und gut erkennbar. Besucher nutzen die Suche
als schnellen Einstieg.
Flughafen Düsseldorf

42. @webinterface
Die Navigation soll für den Benutzer gut
erreichbar sein.

43. @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/

44. @webinterface
Bieten Sie eine Schließenfunktion durch drücken
oder wischen an. Das gilt insbesondere für die
Off-Canvas Navigation.
hammer-heimtex.de

45. @webinterface
Funktion
2
„Plattformkonvention und Nutzererwartung“

46. @webinterface
Bei komplexen Navigationen den direkten
Einstieg in Unterebenen anbieten.
hammer-heimtex.de

47. @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

48. @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.

49. @webinterface
Helfen Sie den Benutzer beim navigieren durch
automatisches Scrollen zu Unterebenen.
www.huk24.de

50. @webinterface
Stellen Sie sicher, dass Links leicht anzuvisieren
und zu treffen sind.

51. @webinterface
Darstellung
3
„Coherence“

52. @webinterface
Stellen Sie sicher das die Inhaltliche Struktur der
Navigation, Geräteübergreifend sichtbar,
verständlich und nachvollziehbar ist.

53. @webinterface
Zeigen Sie dem Nutzer durch eine klare Symbolik
und visuelle Hierarchie ob es sich um
Oberkategorien oder Unterpunkte handelt.
huk24.de

54. @webinterface
Berücksichtigen Sie bei Darstellung der
Navigation auch den Landscape Modus.

55. @webinterface
Alternative Einstiege
4

56. @webinterface
Schnelleinstiege anbieten, Nutzer wollen nicht
immer den gesamten Navigationsbaum durch
gehen.
Flughafen Düsseldorf

57. @webinterface
Orientierungshilfen
5
„Sichtbarkeit des Systemstatus“

58. @webinterface
Informieren Sie den Nutzer innerhalb der
Navigation wo er sich befindet.
Flughafen Düsseldorf

59. @webinterface
Zeigen sie dem Nutzer mit der Breadcrumb wo er
sich befindet.
Flughafen Düsseldorf

60. @webinterface
Überschriften sollen eindeutig erkennbar sein
und den Seiteninhalt adressieren.
Flughafen Düsseldorf

61. @webinterface
Resumé

62. erstellen - messen - lernen
@webinterface

63. Vielen Dank und Merci…
@webinterface Peter Rozek
email: peter.rozek@ecx.io

64. Noch Fragen…
?
@webinterface Peter Rozek

65. @webinterface
…für meine Ellen

66. @webinterface@webinterface Peter Rozek
Responsive Navigation Patterns
UX und Guidelines
Peter Rozek, 24.03.2015 München