Responsive Navigation
Patterns
Peter Rozek@webinterface
UX und
GuidelinesWebinale 2015, 07. - 11. Juni 2015
PETER ROZEK
Arbeite bei ecx.io
(Digital Agentur)
Themengebiete:
UX
Usability
Accessibility
Frontend
Peter Rozek@webinterfa...
@webinterface
Navigation ist nicht
mehr auf ein Content,
Context oder
Component bezogen.
@webinterface@webinterface Bildnachweis: bradfrost.com
Nutzungszenarien
haben sich verändert,
Navigationsprinzipien
müssen...
Früher war man in einer gewohnten Umgebung
und Haltung Online.
Lean Forward
@webinterface
Heute ist man überall
und immer Online.
Bildnachweis: Instragram gingergibson
49% Prozent nutzen ihr Smartphone 

immer un...
70% Bahnhof, Haltestellen, Flughafen
92% zu Hause
65% In öffentlichen Verkehrsmitteln
65%
In Geschäften, beim einkaufen
Au...
@webinterface Bildnachweis: www.cision.com
Wünsche der Nutzer gehen über
einfache Bedienbarkeit hinaus.
@webinterface
„Don’t make me think.“
Steve Krug
Kognitive Aspekte
@webinterface
gulf of execution

(Ausführungskluft)
gulf of evaluation

(Auswertungskluft)
Zwei wesentliche Hürden bei der
Benutzung.
@w...
Usability Probleme?
@webinterface Bildnachweis: datenschutzbeauftragter-info.de
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...
52%
57,9%
36,4%
Der Nutzer machen mindestens einmal
schlechte Erfahrungen.
Websites sind unübersichtlich.
Nicht benutzerfr...
@webinterface Bildnachweis: quazoo.com
Kunde
Die Eierlegende Wollmilchsau?
@webinterface
Responsive
Navigation Patterns
Bildnachweis: de.wikipedia.org
@webinterface
Interaction Design Pattern:
Hamburger Icon
Eindeutig ?
@webinterface
Hunger!
@webinterface Bildnachweis: hornochse.koeln/
Navigation?
@webinterface
Navigation?
@webinterface Navigation Modell von: mitsubishi-motors.com.au/
MENU
@webinterface Bildnachweis: cdn.pocket-lint.com
Digitale Avantgarde

Early Adopter
… verstanden!
@webinterface Bildnachweis: taz.de
Digitale Aussenseiter
?
„Do people understand
the „hamburger“ icon used for
mobile navigation menus?“
Luke Wroblewski, @lukew
@webinterface
http://exisweb.net/mobile-menu-abtest
A/B Testing 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ü
@webinterface...
12,9% bessere Conversion 

bei der Bezeichnung Menü 

als Hamburger Icon.
@webinterface http://exisweb.net/mobile-menu-abt...
@webinterface
Benutzung folgt erkennen
Mögliche Konflikte zu anderen
Systemobjekten
Vorteile/Nachteile von 

Interaction P...
Off-Canvas
@webinterface
• Vorteil: Schrittweise Navigation in tiefere
Ebenen ohne die Seite neu zu laden.
• Nachteil: Off-Canvas Navigation sollte...
Off-Canvas +
@webinterface
@webinterface
Off-Canvas Navigation und
„Hamburger Icon“ haben sich als
Pattern für eine Navigation
konventionalisiert.
Guidelines
@webinterface
KEEP
CALM

AND FOLLOW THE
Bildnachweis: huber-verlag.de
Sichtbarkeit
„Erkennen anstatt Erinnern“
@webinterface
citan.mercedes.fr/hbc.com/
Erwartungskonform
Verständlich
Eindeutig
Vertraut
@webinterface
2012.dconstruct.org/ mitsubishi-motors.com.au/
Konkurrenz zu anderen
Navigationsicons vermeiden.
@webinterface
Verständlic...
Flughafen Düsseldorf@webinterface
Suche erkennbar positionieren.
Gut erreichbar
@webinterface
hammer-heimtex.de@webinterface
Bieten Sie eine Schließenfunktion
durch drücken oder wischen an.
Das gilt insbesondere 

fü...
Funktion
„Plattformkonvention, Flexibilität
und Effizienz“
@webinterface
hammer-heimtex.de
Direkten Einstieg in Unterebenen.
@webinterface
hammer-heimtex.de@webinterface
Stellen Sie sicher, dass sich der
Zurück-Button vorhersehbar
verhält. Dies gilt 

insbesond...
Unterschiedlche
Funktionen
Menüpunkte mit nur einer Funktion
belegen.
@webinterface
www.huk24.de
Automatisches Scrollen zu
Unterebenen
@webinterface
Stellen Sie sicher, dass Links leicht
anzuvisieren und zu treffen sind.
@webinterface
@webinterface
Eine Instanz, skalierbar und robust
in der Technik.
<nav class=“mainnav desktop“>…</nav>
<nav class=“mainnav...
@webinterface
Breakpoints
Bildnachweis: google.com
Darstellung
„Übereinstimmung zwischen
System und Wirklichkeit“
@webinterface
@webinterface
Informations Architecture
Erwartungskonform.
huk24.de@webinterface
Klare Symbolik und 

visuelle Hierarchie
@webinterface
Landscape Modus berücksichtigen
Alternative
Einstiege
@webinterface
„Konsistenz aber nicht Konkurrenz“
Flughafen Düsseldorf@webinterface
Konkurrenz zur Hauptnavigation
vermeiden.
@webinterface
Wichtige Themen im sichtbaren
Bereich anordnen.
Orientierungs-

hilfen
„Sichtbarkeit des Systemstatus“
@webinterface
Flughafen Düsseldorf
Informieren Sie den Nutzer
innerhalb der Navigation 

wo er sich befindet.
@webinterface
@webinterface Flughafen Düsseldorf
Breadcrumb zur Orientierung
@webinterface Flughafen Düsseldorf
Überschriften sollen den
Seiteninhalt adressieren.
Resumé
@webinterface
@webinterface
Ermöglichen sie dem
Nutzer eine positive 

UX und Usability bei
der Navigation.
@webinterface
Nutzer erwarten eine
konsistente UX und
Usability bei der
Navigation.
@webinterface
Designing for
Humans
not
Devices.
erstellen
messen
lernenLEAN UX
@webinterface
Vielen Dank
und Merci
email: peter.rozek@ecx.io
Peter Rozek@webinterface
Speaker Deck: https://speakerdeck.com/peterrozek
...
@webinterface
…für meine Ellen
@webinterface
Fragen?
Peter Rozek@webinterface
Responsive Navigation Patterns
UX und Guidelines
Peter Rozek, 08.6.2015 Berlin
Nächste SlideShare
Wird geladen in …5
×

Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)

1.021 Aufrufe

Veröffentlicht am

Talk zum Responsive Design Day auf der Webinale 2015 in Berlin.

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

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.021
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
33
Aktionen
Geteilt
0
Downloads
25
Kommentare
0
Gefällt mir
4
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)

  1. 1. Responsive Navigation Patterns Peter Rozek@webinterface UX und GuidelinesWebinale 2015, 07. - 11. Juni 2015
  2. 2. PETER ROZEK Arbeite bei ecx.io (Digital Agentur) Themengebiete: UX Usability Accessibility Frontend Peter Rozek@webinterface
  3. 3. @webinterface Navigation ist nicht mehr auf ein Content, Context oder Component bezogen.
  4. 4. @webinterface@webinterface Bildnachweis: bradfrost.com Nutzungszenarien haben sich verändert, Navigationsprinzipien müssen für viele Touchpoints ausgelegt sein.
  5. 5. Früher war man in einer gewohnten Umgebung und Haltung Online. Lean Forward @webinterface
  6. 6. Heute ist man überall und immer Online. Bildnachweis: Instragram gingergibson 49% Prozent nutzen ihr Smartphone 
 immer und überall @webinterface
  7. 7. 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 @webinterface
  8. 8. @webinterface Bildnachweis: www.cision.com Wünsche der Nutzer gehen über einfache Bedienbarkeit hinaus.
  9. 9. @webinterface „Don’t make me think.“ Steve Krug
  10. 10. Kognitive Aspekte @webinterface
  11. 11. gulf of execution
 (Ausführungskluft) gulf of evaluation
 (Auswertungskluft) Zwei wesentliche Hürden bei der Benutzung. @webinterface
  12. 12. Usability Probleme? @webinterface Bildnachweis: datenschutzbeauftragter-info.de
  13. 13. Für Desktop Websites haben sich allgemein gültige Usability- Heuristiken etabliert. @webinterface
  14. 14. Welche Best Practice haben sich für eine responsive Navigation durchgesetzt? Gibt es bereits verbindliche Usability-Konventionen? @webinterface
  15. 15. 52% 57,9% 36,4% Der Nutzer machen mindestens einmal schlechte Erfahrungen. Websites sind unübersichtlich. Nicht benutzerfreundlich. (Quelle: BVDW 2013) @webinterface
  16. 16. @webinterface Bildnachweis: quazoo.com Kunde
  17. 17. Die Eierlegende Wollmilchsau? @webinterface Responsive Navigation Patterns Bildnachweis: de.wikipedia.org
  18. 18. @webinterface Interaction Design Pattern: Hamburger Icon
  19. 19. Eindeutig ? @webinterface
  20. 20. Hunger! @webinterface Bildnachweis: hornochse.koeln/
  21. 21. Navigation? @webinterface
  22. 22. Navigation? @webinterface Navigation Modell von: mitsubishi-motors.com.au/ MENU
  23. 23. @webinterface Bildnachweis: cdn.pocket-lint.com Digitale Avantgarde
 Early Adopter … verstanden!
  24. 24. @webinterface Bildnachweis: taz.de Digitale Aussenseiter ?
  25. 25. „Do people understand the „hamburger“ icon used for mobile navigation menus?“ Luke Wroblewski, @lukew @webinterface
  26. 26. http://exisweb.net/mobile-menu-abtest A/B Testing Hamburger Icon @webinterface
  27. 27. 12.684 308 12.660 347 +12,9% 12.900 331 +5,7% 13.017 246 -22.2% Besucher Conversions Ergebnis Menü Menü Menü @webinterface http://exisweb.net/mobile-menu-abtest
  28. 28. 12,9% bessere Conversion 
 bei der Bezeichnung Menü 
 als Hamburger Icon. @webinterface http://exisweb.net/mobile-menu-abtest
  29. 29. @webinterface Benutzung folgt erkennen Mögliche Konflikte zu anderen Systemobjekten Vorteile/Nachteile von 
 Interaction Pattern:
  30. 30. Off-Canvas @webinterface
  31. 31. • 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. @webinterface
  32. 32. Off-Canvas + @webinterface
  33. 33. @webinterface Off-Canvas Navigation und „Hamburger Icon“ haben sich als Pattern für eine Navigation konventionalisiert.
  34. 34. Guidelines @webinterface KEEP CALM
 AND FOLLOW THE Bildnachweis: huber-verlag.de
  35. 35. Sichtbarkeit „Erkennen anstatt Erinnern“ @webinterface
  36. 36. citan.mercedes.fr/hbc.com/ Erwartungskonform Verständlich Eindeutig Vertraut @webinterface
  37. 37. 2012.dconstruct.org/ mitsubishi-motors.com.au/ Konkurrenz zu anderen Navigationsicons vermeiden. @webinterface Verständlich und Erwartungskonform Fehlende Abgrenzung
  38. 38. Flughafen Düsseldorf@webinterface Suche erkennbar positionieren.
  39. 39. Gut erreichbar @webinterface
  40. 40. hammer-heimtex.de@webinterface Bieten Sie eine Schließenfunktion durch drücken oder wischen an. Das gilt insbesondere 
 für die 
 Off-Canvas Navigation.
  41. 41. Funktion „Plattformkonvention, Flexibilität und Effizienz“ @webinterface
  42. 42. hammer-heimtex.de Direkten Einstieg in Unterebenen. @webinterface
  43. 43. 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.
  44. 44. Unterschiedlche Funktionen Menüpunkte mit nur einer Funktion belegen. @webinterface
  45. 45. www.huk24.de Automatisches Scrollen zu Unterebenen @webinterface
  46. 46. Stellen Sie sicher, dass Links leicht anzuvisieren und zu treffen sind. @webinterface
  47. 47. @webinterface Eine Instanz, skalierbar und robust in der Technik. <nav class=“mainnav desktop“>…</nav> <nav class=“mainnav tablet“>…</nav> <nav class=“mainnav mobile“>…</nav> <nav class=“mainnav“>…</nav>
  48. 48. @webinterface Breakpoints Bildnachweis: google.com
  49. 49. Darstellung „Übereinstimmung zwischen System und Wirklichkeit“ @webinterface
  50. 50. @webinterface Informations Architecture Erwartungskonform.
  51. 51. huk24.de@webinterface Klare Symbolik und 
 visuelle Hierarchie
  52. 52. @webinterface Landscape Modus berücksichtigen
  53. 53. Alternative Einstiege @webinterface „Konsistenz aber nicht Konkurrenz“
  54. 54. Flughafen Düsseldorf@webinterface Konkurrenz zur Hauptnavigation vermeiden.
  55. 55. @webinterface Wichtige Themen im sichtbaren Bereich anordnen.
  56. 56. Orientierungs-
 hilfen „Sichtbarkeit des Systemstatus“ @webinterface
  57. 57. Flughafen Düsseldorf Informieren Sie den Nutzer innerhalb der Navigation 
 wo er sich befindet. @webinterface
  58. 58. @webinterface Flughafen Düsseldorf Breadcrumb zur Orientierung
  59. 59. @webinterface Flughafen Düsseldorf Überschriften sollen den Seiteninhalt adressieren.
  60. 60. Resumé @webinterface
  61. 61. @webinterface Ermöglichen sie dem Nutzer eine positive 
 UX und Usability bei der Navigation.
  62. 62. @webinterface Nutzer erwarten eine konsistente UX und Usability bei der Navigation.
  63. 63. @webinterface Designing for Humans not Devices.
  64. 64. erstellen messen lernenLEAN UX @webinterface
  65. 65. Vielen Dank und Merci email: peter.rozek@ecx.io Peter Rozek@webinterface Speaker Deck: https://speakerdeck.com/peterrozek Slideshare: http://de.slideshare.net/peterrozek
  66. 66. @webinterface …für meine Ellen
  67. 67. @webinterface Fragen?
  68. 68. Peter Rozek@webinterface Responsive Navigation Patterns UX und Guidelines Peter Rozek, 08.6.2015 Berlin

×