Talk auf der Developer Week 2015 in Nürnberg.

1. UX und Guidelines
DWX 2015, 15. - 18. Juni 2015 @webinterface Peter Rozek
Responsive Navigation Patterns

2. UX und Guidelines
DWX 2015, 15. - 18. Juni 2015 @webinterface Peter Rozek
Responsive Navigation Patterns

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

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

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

6. @webinterface
Früher musste die
Navigation für „ein“ GUI
funktionieren.

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

8. @webinterface
Benutzerfreundlich Intuitiv bedienbar

9. @webinterface
Benutzerfreundlich Intuitiv bedienbar
GUI NUI

10. @webinterface
GUI
Methaper
NUI
direkt
Der Weg zum erreichen des Ziels
ist viel kürzer

11. @webinterface
Zeitpensum neuer gewinn bei
dem Wechsel von GUI zu NUI.
Usability und Zeit

12. @webinterface
Schnittmenge
aus GUI und NUI
Responsive Navigation

13. @webinterface
GUI auf NUI übertragen
funktioniert nicht.

14. @webinterface

15. Nutzer sind heute
überall und immer
Online.
Bildnachweis: Instragram gingergibson
49% Prozent nutzen ihr Smartphone
immer und überall
@webinterface

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

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. @webinterface
„Don’t make me think.“
Steve Krug

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

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

22. Kognitive Aspekte
@webinterface
true false

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

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

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

26. @webinterface Bildnachweis: quazoo.com
Kunde

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

28. @webinterface
Interaction Design Pattern:
Hamburger Icon

29. Eindeutig ?
@webinterface

30. Navigation?
@webinterface

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

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

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

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

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

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

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

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

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

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

42. Off-Canvas
@webinterface

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

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

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

47. Sichtbarkeit
„Erkennen anstatt Erinnern“
@webinterface

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

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

50. @webinterface Flughafen Düsseldorf
Suche erwartungskonform und
gut erkennbar positionieren.

51. Gut erreichbar
@webinterface

52. Gut erreichbar
@webinterface

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

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

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

58. www.huk24.de
Unterstützen sie
den Nutzer durch
Automatisches
Scrollen
zu Unterebenen.
@webinterface

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

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

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

63. @webinterface
Informations Architecture
Erwartungskonform.

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

65. @webinterface
Landscape Modus
berücksichtigen

66. @webinterface
Landscape Modus
berücksichtigen

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

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

69. @webinterface
Wichtige Themen im sichtbaren
Bereich anordnen.

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

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

72. @webinterface Flughafen Düsseldorf
Breadcrumb
zur Orientierung

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

74. Resumé
@webinterface

75. Designing for
Humans
not Devices.
@webinterface

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

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

78. erstellen
messen
lernen
@webinterface

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

81. Fragen ?
DWX 2015, 15. - 18. Juni 2015 @webinterface Peter Rozek

82. Fragen ?
DWX 2015, 15. - 18. Juni 2015 @webinterface Peter Rozek