Responsive Navigation Patterns - UX und Guidelines

1.099 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.099
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
37
Aktionen
Geteilt
0
Downloads
14
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

×