Responsive Navigation
Patterns
UX und Guidelines
MobileTech Conference 2015
@webinterface Peter Rozek
Speaker
Peter Rozek
@webinterface
Arbeite bei ecx.io
(Digital Agentur)
Themengebiete:
UX,
Usability,
Accessibility
Frontend
twitter: @webinterface
Wer bin i...
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 Forward

Frü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 Smartph...
@webinterface
70% Bahnhof, Haltestellen, Flughafen
92% zu Hause
65% In öffentlichen Verkehrsmitteln
65%
In Geschäften, bei...
Nutzer erwarten daher eine
konsistente UX und
Usability bei der Navigation.
@webinterface
Das gilt für alle Touchpoints (G...
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
...
@webinterface
Nutzer haben eine Repräsentation von
Navigationsmodellen und Funktionsweisen als
mentales Modell für sich ab...
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-Konven...
@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 benutzerfr...
@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....
A/B Testing
Hamburger Icon
@webinterface
@webinterface http://exisweb.net/mobile-menu-abtest
@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ü...
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 Nav...
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 d...
@webinterface
Best Practice *
Menü statt Hamburger Icon
Off-Canvas Navigation
Drill-Down Navigation
* Bei komplexen Naviga...
@webinterface
Guidelines
@webinterface
Sichtbarkeit
1
„Erkennen anstatt Erinnern“
Reduzieren Sie das visuelle Rauschen. Gruppieren
Sie Navigationselemente erwartungskonform,
verständlich und eindeutig.
@w...
@webinterface
Positionieren Sie die Suche erwartungskonform
und gut erkennbar. Besucher nutzen die Suche
als schnellen Ein...
@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 u...
@webinterface
Bieten Sie eine Schließenfunktion durch drücken
oder wischen an. Das gilt insbesondere für die
Off-Canvas Na...
@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-d...
@webinterface
Direkten Einstieg in Oberkategorien ermöglichen.
Menüpunkte mit nur einer Funktion zu belegen.
Unterschiedlc...
@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 un...
@webinterface
Zeigen Sie dem Nutzer durch eine klare Symbolik
und visuelle Hierarchie ob es sich um
Oberkategorien oder Un...
@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üs...
@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
Vielen Dank und Merci…
@webinterface Peter Rozek
email: peter.rozek@ecx.io
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
Nächste SlideShare
Wird geladen in …5
×

Responsive Navigation Patterns - UX und Guidelines

1.269 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Design
0 Kommentare
2 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.269
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
37
Aktionen
Geteilt
0
Downloads
15
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Responsive Navigation Patterns - UX und Guidelines

  1. 1. Responsive Navigation Patterns UX und Guidelines MobileTech Conference 2015 @webinterface Peter Rozek
  2. 2. Speaker Peter Rozek @webinterface
  3. 3. Arbeite bei ecx.io (Digital Agentur) Themengebiete: UX, Usability, Accessibility Frontend twitter: @webinterface Wer bin ich @webinterface Peter Rozek
  4. 4. Jede 3 responsive Navigation ist nicht benutzerfreundlich. @webinterface
  5. 5. Navigation ist nicht mehr auf ein Content, Context oder Component bezogen. @webinterface
  6. 6. Nutzungszenarien haben sich verändert, Navigationsprinzipien müssen für viele Touchpoints ausgelegt sein. @webinterface
  7. 7. Früher musste die Navigation für ein GUI (stationäre Webseiten) funktionieren. @webinterface
  8. 8. Lean Forward
 Früher war man in einer gewohnten Umgebung und Haltung Online. @webinterface
  9. 9. Heute ist man überall und immer Online. @webinterface Bildnachweis: Instragram gingergibson 49% Prozent nutzen ihr Smartphone 
 immer und überall
  10. 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. 11. Nutzer erwarten daher eine konsistente UX und Usability bei der Navigation. @webinterface Das gilt für alle Touchpoints (GUI, NUI).
  12. 12. Vom eindimensionalen  Bildschirm zum Multiscreen Experience. @webinterface
  13. 13. Konsistenz ist der Schlüssel. @webinterface
  14. 14. @webinterface Nutzer haben genaue Anforderungen und Erwartungen.
  15. 15. Die Navigation sollte grundsätzlich erkennbar, übersichtlich, leicht erlernbar und benutzerfreundlich sein. @webinterface Wünsche der Nutzer gehen über einfache Bedienbarkeit hinaus.
  16. 16. @webinterface Nutzer haben eine Repräsentation von Navigationsmodellen und Funktionsweisen als mentales Modell für sich abgespeichert. „Benutzung folgt erkennen“
  17. 17. Für Desktop Websites haben sich allgemein gültige Usability-Heuristiken etabliert. @webinterface
  18. 18. Welche Best Practice haben sich für eine responsive Navigation durchgesetzt? Gibt es bereits verbindliche Usability-Konventionen? @webinterface
  19. 19. @webinterface Welche Probleme haben Nutzer bei der Navigation auf responsiven Webseiten?
  20. 20. 52% 57,9% 36,4% Der Nutzer machen mindestens einmal schlechte Erfahrungen. Websites sind unübersichtlich. Nicht benutzerfreundlich. (Quelle: BVDW 2013) @webinterface
  21. 21. @webinterface Responsive Navigations Pattern
  22. 22. Interaction Design Pattern: Hamburger Icon @webinterface
  23. 23. „Do people understand the „hamburger“ icon used for mobile navigation menus?“ Luke Wroblewski, @lukew @webinterface
  24. 24. @webinterface Eindeutig ?
  25. 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. 26. A/B Testing Hamburger Icon @webinterface
  27. 27. @webinterface http://exisweb.net/mobile-menu-abtest
  28. 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. 29. 12,9% bessere Conversion bei der Bezeichnung Menü als Hamburger Icon. @webinterface
  30. 30. Off-Canvas @webinterface
  31. 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. 32. Off-Canvas @webinterface + Populäre Lösung aber nicht unbedingt Effizient.
  33. 33. Off-Canvas Navigation und „Hamburger Icon“ haben sich als Pattern für eine Navigation konventionalisiert. @webinterface
  34. 34. @webinterface „Trampelpfad Prozesse“ Christian Stetter, emeritierter Professor für Sprach- und Kommunikationswissenschaft
  35. 35. Drilldown Menü @webinterface
  36. 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. 37. @webinterface Best Practice * Menü statt Hamburger Icon Off-Canvas Navigation Drill-Down Navigation * Bei komplexen Navigationen
  38. 38. @webinterface Guidelines
  39. 39. @webinterface Sichtbarkeit 1 „Erkennen anstatt Erinnern“
  40. 40. Reduzieren Sie das visuelle Rauschen. Gruppieren Sie Navigationselemente erwartungskonform, verständlich und eindeutig. @webinterface citan.mercedes.fr/hbc.com/
  41. 41. @webinterface Positionieren Sie die Suche erwartungskonform und gut erkennbar. Besucher nutzen die Suche als schnellen Einstieg. Flughafen Düsseldorf
  42. 42. @webinterface Die Navigation soll für den Benutzer gut erreichbar sein.
  43. 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. 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. 45. @webinterface Funktion 2 „Plattformkonvention und Nutzererwartung“
  46. 46. @webinterface Bei komplexen Navigationen den direkten Einstieg in Unterebenen anbieten. hammer-heimtex.de
  47. 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. 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. 49. @webinterface Helfen Sie den Benutzer beim navigieren durch automatisches Scrollen zu Unterebenen. www.huk24.de
  50. 50. @webinterface Stellen Sie sicher, dass Links leicht anzuvisieren und zu treffen sind.
  51. 51. @webinterface Darstellung 3 „Coherence“
  52. 52. @webinterface Stellen Sie sicher das die Inhaltliche Struktur der Navigation, Geräteübergreifend sichtbar, verständlich und nachvollziehbar ist.
  53. 53. @webinterface Zeigen Sie dem Nutzer durch eine klare Symbolik und visuelle Hierarchie ob es sich um Oberkategorien oder Unterpunkte handelt. huk24.de
  54. 54. @webinterface Berücksichtigen Sie bei Darstellung der Navigation auch den Landscape Modus.
  55. 55. @webinterface Alternative Einstiege 4
  56. 56. @webinterface Schnelleinstiege anbieten, Nutzer wollen nicht immer den gesamten Navigationsbaum durch gehen. Flughafen Düsseldorf
  57. 57. @webinterface Orientierungshilfen 5 „Sichtbarkeit des Systemstatus“
  58. 58. @webinterface Informieren Sie den Nutzer innerhalb der Navigation wo er sich befindet. Flughafen Düsseldorf
  59. 59. @webinterface Zeigen sie dem Nutzer mit der Breadcrumb wo er sich befindet. Flughafen Düsseldorf
  60. 60. @webinterface Überschriften sollen eindeutig erkennbar sein und den Seiteninhalt adressieren. Flughafen Düsseldorf
  61. 61. @webinterface Resumé
  62. 62. erstellen - messen - lernen @webinterface
  63. 63. Vielen Dank und Merci… @webinterface Peter Rozek email: peter.rozek@ecx.io
  64. 64. Noch Fragen… ? @webinterface Peter Rozek
  65. 65. @webinterface …für meine Ellen
  66. 66. @webinterface@webinterface Peter Rozek Responsive Navigation Patterns UX und Guidelines Peter Rozek, 24.03.2015 München

×