Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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.125 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Design
  • Als Erste(r) kommentieren

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

×