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@webinterface
@webinterface@webinterface Bildnachweis: bradfrost.com
Nutzungszenarien haben sich verändert, Navigationsprinzipien müssen für viele Touchpoints ausgelegt sein.
Heute ist man überall und immer Online.
Bildnachweis: Instragram gingergibson
49% Prozent nutzen ihr Smartphone immer und überall
@webinterface
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
@webinterface Bildnachweis: www.cision.com
Wünsche der Nutzer gehen über einfache Bedienbarkeit hinaus.
gulf of execution (Ausführungskluft)
gulf of evaluation(Auswertungskluft)
Zwei wesentliche Hürden bei der Benutzung.
@webinterface
Usability Probleme?
@webinterface Bildnachweis: datenschutzbeauftragter-info.de
Welche Best Practice haben sich für eine responsive Navigation durchgesetzt?
Gibt es bereits verbindliche Usability-Konventionen?
@webinterface
52%
57,9%
36,4%
Der Nutzer machen mindestens einmal schlechte Erfahrungen.
Websites sind unübersichtlich.
Nicht benutzerfreundlich.
(Quelle: BVDW 2013)
@webinterface
Die Eierlegende Wollmilchsau?
@webinterface
Responsive Navigation Patterns
Bildnachweis: de.wikipedia.org
Navigation?
@webinterface Navigation Modell von: mitsubishi-motors.com.au/
MENU
@webinterface Bildnachweis: cdn.pocket-lint.com
Digitale AvantgardeEarly 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 http://exisweb.net/mobile-menu-abtest
12,9% bessere Conversion bei der Bezeichnung Menü als Hamburger Icon.
@webinterface http://exisweb.net/mobile-menu-abtest
@webinterface
Benutzung folgt erkennen
Mögliche Konflikte zu anderen Systemobjekten
Vorteile/Nachteile von Interaction Pattern:
• 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
@webinterface
Off-Canvas Navigation und „Hamburger Icon“ haben sich als Pattern für eine Navigation konventionalisiert.
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ändlich und Erwartungskonform
Fehlende Abgrenzung
hammer-heimtex.de@webinterface
Bieten Sie eine Schließenfunktion durch drücken oder wischen an. Das gilt insbesondere für die Off-Canvas Navigation.
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 insbesondere für die Drill-down Navigation.
@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>
@webinterface
Breakpoints
Bildnachweis: google.com
Flughafen Düsseldorf@webinterface
Konkurrenz zur Hauptnavigation vermeiden.
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.
Vielen Dank und Merciemail: [email protected]
Peter Rozek@webinterface
Speaker Deck: https://speakerdeck.com/peterrozek
Slideshare: http://de.slideshare.net/peterrozek