Peter Rozecks Präsentation zu responsiven Navigationsmustern diskutiert die Veränderungen in der Nutzererfahrung aufgrund mobiler Nutzung und die Notwendigkeit, Navigationsprinzipien für unterschiedliche Touchpoints zu optimieren. Er hebt die Bedeutung von Usability-Heuristiken hervor und betont die Herausforderungen wie die 'Gulf of Execution' und 'Gulf of Evaluation' bei der Navigation. Zudem werden Best Practices und gängige Patterns wie das Hamburger-Icon sowie Off-Canvas-Navigation vorgestellt, um eine konsistente Nutzererfahrung zu gewährleisten.

1. Responsive Navigation
Patterns
Peter Rozek@webinterface
UX und
GuidelinesWebinale 2015, 07. - 11. Juni 2015

2. PETER ROZEK
Arbeite bei ecx.io
(Digital Agentur)
Themengebiete:
UX
Usability
Accessibility
Frontend
Peter Rozek@webinterface

3. @webinterface
Navigation ist nicht
mehr auf ein Content,
Context oder
Component bezogen.

4. @webinterface@webinterface Bildnachweis: bradfrost.com
Nutzungszenarien
haben sich verändert,
Navigationsprinzipien
müssen für viele
Touchpoints ausgelegt
sein.

5. Früher war man in einer gewohnten Umgebung
und Haltung Online.
Lean Forward
@webinterface

6. Heute ist man überall
und immer Online.
Bildnachweis: Instragram gingergibson
49% Prozent nutzen ihr Smartphone
immer und überall
@webinterface

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. @webinterface Bildnachweis: www.cision.com
Wünsche der Nutzer gehen über
einfache Bedienbarkeit hinaus.

9. @webinterface
„Don’t make me think.“
Steve Krug

10. Kognitive Aspekte
@webinterface

11. gulf of execution
(Ausführungskluft)
gulf of evaluation
(Auswertungskluft)
Zwei wesentliche Hürden bei der
Benutzung.
@webinterface

12. Usability Probleme?
@webinterface Bildnachweis: datenschutzbeauftragter-info.de

13. Für Desktop Websites haben sich
allgemein gültige Usability-
Heuristiken etabliert.
@webinterface

14. Welche Best Practice haben sich
für eine responsive Navigation
durchgesetzt?
Gibt es bereits verbindliche
Usability-Konventionen?
@webinterface

15. 52%
57,9%
36,4%
Der Nutzer machen mindestens einmal
schlechte Erfahrungen.
Websites sind unübersichtlich.
Nicht benutzerfreundlich.
(Quelle: BVDW 2013)
@webinterface

16. @webinterface Bildnachweis: quazoo.com
Kunde

17. Die Eierlegende Wollmilchsau?
@webinterface
Responsive
Navigation Patterns
Bildnachweis: de.wikipedia.org

18. @webinterface
Interaction Design Pattern:
Hamburger Icon

19. Eindeutig ?
@webinterface

20. Hunger!
@webinterface Bildnachweis: hornochse.koeln/

21. Navigation?
@webinterface

22. Navigation?
@webinterface Navigation Modell von: mitsubishi-motors.com.au/
MENU

23. @webinterface Bildnachweis: cdn.pocket-lint.com
Digitale Avantgarde
Early Adopter
… verstanden!

24. @webinterface Bildnachweis: taz.de
Digitale Aussenseiter
?

25. „Do people understand
the „hamburger“ icon used for
mobile navigation menus?“
Luke Wroblewski, @lukew
@webinterface

26. http://exisweb.net/mobile-menu-abtest
A/B Testing Hamburger Icon
@webinterface

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. 12,9% bessere Conversion
bei der Bezeichnung Menü
als Hamburger Icon.
@webinterface http://exisweb.net/mobile-menu-abtest

29. @webinterface
Benutzung folgt erkennen
Mögliche Konflikte zu anderen
Systemobjekten
Vorteile/Nachteile von
Interaction Pattern:

30. Off-Canvas
@webinterface

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. Off-Canvas +
@webinterface

33. @webinterface
Off-Canvas Navigation und
„Hamburger Icon“ haben sich als
Pattern für eine Navigation
konventionalisiert.

34. Guidelines
@webinterface
KEEP
CALM
AND FOLLOW THE
Bildnachweis: huber-verlag.de

35. Sichtbarkeit
„Erkennen anstatt Erinnern“
@webinterface

36. citan.mercedes.fr/hbc.com/
Erwartungskonform
Verständlich
Eindeutig
Vertraut
@webinterface

37. 2012.dconstruct.org/ mitsubishi-motors.com.au/
Konkurrenz zu anderen
Navigationsicons vermeiden.
@webinterface
Verständlich und
Erwartungskonform
Fehlende
Abgrenzung

38. Flughafen Düsseldorf@webinterface
Suche erkennbar positionieren.

39. Gut erreichbar
@webinterface

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. Funktion
„Plattformkonvention, Flexibilität
und Effizienz“
@webinterface

42. hammer-heimtex.de
Direkten Einstieg in Unterebenen.
@webinterface

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. Unterschiedlche
Funktionen
Menüpunkte mit nur einer Funktion
belegen.
@webinterface

45. www.huk24.de
Automatisches Scrollen zu
Unterebenen
@webinterface

46. Stellen Sie sicher, dass Links leicht
anzuvisieren und zu treffen sind.
@webinterface

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. @webinterface
Breakpoints
Bildnachweis: google.com

49. Darstellung
„Übereinstimmung zwischen
System und Wirklichkeit“
@webinterface

50. @webinterface
Informations Architecture
Erwartungskonform.

51. huk24.de@webinterface
Klare Symbolik und
visuelle Hierarchie

52. @webinterface
Landscape Modus berücksichtigen

53. Alternative
Einstiege
@webinterface
„Konsistenz aber nicht Konkurrenz“

54. Flughafen Düsseldorf@webinterface
Konkurrenz zur Hauptnavigation
vermeiden.

55. @webinterface
Wichtige Themen im sichtbaren
Bereich anordnen.

56. Orientierungs-
hilfen
„Sichtbarkeit des Systemstatus“
@webinterface

57. Flughafen Düsseldorf
Informieren Sie den Nutzer
innerhalb der Navigation
wo er sich befindet.
@webinterface

58. @webinterface Flughafen Düsseldorf
Breadcrumb zur Orientierung

59. @webinterface Flughafen Düsseldorf
Überschriften sollen den
Seiteninhalt adressieren.

60. Resumé
@webinterface

61. @webinterface
Ermöglichen sie dem
Nutzer eine positive
UX und Usability bei
der Navigation.

62. @webinterface
Nutzer erwarten eine
konsistente UX und
Usability bei der
Navigation.

63. @webinterface
Designing for
Humans
not
Devices.

64. erstellen
messen
lernenLEAN UX
@webinterface

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. @webinterface
…für meine Ellen

67. @webinterface
Fragen?

68. Peter Rozek@webinterface
Responsive Navigation Patterns
UX und Guidelines
Peter Rozek, 08.6.2015 Berlin