UX und Guidelines
DWX 2015, 15. - 18. Juni 2015 @webinterface Peter Rozek
Responsive Navigation Patterns
UX und Guidelines
DWX 2015, 15. - 18. Juni 2015 @webinterface Peter Rozek
Responsive Navigation Patterns
PETER ROZEK
Arbeite bei ecx.io
(Digital Agentur)
Themengebiete:
UX
Usability
Accessibility
Frontend
Peter Rozek@webinterfa...
Navigation ist nicht
mehr auf ein Content,
Context oder
Component bezogen.
@webinterface
@webinterface Bildnachweis: bradfrost.com
Nutzungszenarien haben sich verändert,
Navigationen müssen für viele Touchpoints...
@webinterface
Früher musste die
Navigation für „ein“ GUI
funktionieren.
Früher war man in einer gewohnten Umgebung
und Haltung Online.
Lean Forward
@webinterface
@webinterface
Benutzerfreundlich Intuitiv bedienbar
@webinterface
Benutzerfreundlich Intuitiv bedienbar
GUI NUI
@webinterface
GUI

Methaper
NUI

direkt
Der Weg zum erreichen des Ziels 

ist viel kürzer
@webinterface
Zeitpensum neuer gewinn bei
dem Wechsel von GUI zu NUI.
Usability und Zeit
@webinterface
Schnittmenge 

aus GUI und NUI

Responsive Navigation
@webinterface
GUI auf NUI übertragen
funktioniert nicht.
@webinterface
Nutzer sind heute
überall und immer
Online.
Bildnachweis: Instragram gingergibson
49% Prozent nutzen ihr Smartphone 

imme...
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
„Auf der mobilen Website möchte ich
alle Inhalte erreichen können, die ich
auch am PC bekomme.“
„Man muss er...
@webinterface
„Don’t make me think.“
Steve Krug
Usability
Probleme?
@webinterface Bildnachweis: datenschutzbeauftragter-info.de
52%
57,9%
36,4%
Der Nutzer machen mindestens
einmal schlechte Erfahrungen.
Websites sind unübersichtlich.
Nicht benutzerfr...
Kognitive Aspekte
@webinterface
true false
gulf of execution

(Ausführungskluft)
gulf of evaluation

(Auswertungskluft)
Zwei wesentliche Hürden bei der
Benutzung.
@w...
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 Bildnachweis: quazoo.com
Kunde
Die Eierlegende Wollmilchsau?
@webinterface
Responsive
Navigation Patterns
Bildnachweis: de.wikipedia.org
@webinterface
Interaction Design Pattern:
Hamburger Icon
Eindeutig ?
@webinterface
Navigation?
@webinterface
@webinterface Navigation Modell von: mitsubishi-motors.com.au/
Navigation?
?
@webinterface Navigation Modell von: mitsubishi-motors.com.au/
Navigation?
?
@webinterface Navigation Modell von: mitsubishi-motors.com.au/
Navigation?
?
@webinterface Navigation Modell von: mitsubishi-motors.com.au/
Navigation?
?
@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...
@webinterface Flughafen Düsseldorf
Suche erwartungskonform und
gut erkennbar positionieren.
Gut erreichbar
@webinterface
Gut erreichbar
@webinterface
@webinterface hammer-heimtex.de
Bieten Sie eine Schließenfunktion
durch drücken oder wischen an.
Das gilt insbesondere 

f...
Funktion
„Plattformkonvention, Flexibilität
und Effizienz“
@webinterface
@webinterface hammer-heimtex.de
Direkten Einstieg 

in Unterebenen.
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
Unterstützen sie
den Nutzer durch
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
@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 wo er
sich in der Navigation befindet.
@webinterface
@webinterface Flughafen Düsseldorf
Breadcrumb 

zur Orientierung
@webinterface Flughafen Düsseldorf
Überschriften sollen den
Seiteninhalt adressieren.
Resumé
@webinterface
Designing for
Humans
not Devices.
@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
erstellen
messen
lernen
@webinterface
Vielen Dank
und Merci
email: peter.rozek@ecx.io
Peter Rozek@webinterface
Speaker Deck: https://speakerdeck.com/peterrozek
...
@webinterface
…für meine Ellen
Fragen ?
DWX 2015, 15. - 18. Juni 2015 @webinterface Peter Rozek
Fragen ?
DWX 2015, 15. - 18. Juni 2015 @webinterface Peter Rozek
Nächste SlideShare
Wird geladen in …5
×

Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)

1.033 Aufrufe

Veröffentlicht am

Talk auf der Developer Week 2015 in Nürnberg.

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

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.033
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
61
Aktionen
Geteilt
0
Downloads
26
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)

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

×