responsive navigation patterns, ux und guidelines (webdeveloper week 2015)
Post on 08-Aug-2015
331 Views
Preview:
TRANSCRIPT
UX und GuidelinesDWX 2015, 15. - 18. Juni 2015 @webinterface Peter Rozek
Responsive Navigation Patterns
UX und GuidelinesDWX 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@webinterface
@webinterface Bildnachweis: bradfrost.com
Nutzungszenarien haben sich verändert, Navigationen müssen für viele Touchpoints ausgelegt sein.
@webinterface Bildnachweis: bradfrost.com
Nutzer sind heute ü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.
@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.“
Usability Probleme?
@webinterface Bildnachweis: datenschutzbeauftragter-info.de
52%
57,9%
36,4%
Der Nutzer machen mindestens einmal schlechte Erfahrungen.
Websites sind unübersichtlich.
Nicht benutzerfreundlich.
(Quelle: BVDW 2013)
@webinterface
gulf of execution (Ausführungskluft)
gulf of evaluation(Auswertungskluft)
Zwei wesentliche Hürden bei der Benutzung.
@webinterface
Welche Best Practice haben sich für eine responsive Navigation durchgesetzt?
Gibt es bereits verbindliche Usability-Konventionen?
@webinterface
Die Eierlegende Wollmilchsau?
@webinterface
Responsive Navigation Patterns
Bildnachweis: de.wikipedia.org
@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 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
@webinterface Flughafen Düsseldorf
Suche erwartungskonform und gut erkennbar positionieren.
@webinterface hammer-heimtex.de
Bieten Sie eine Schließenfunktion durch drücken oder wischen an.Das gilt insbesondere für die Off-Canvas Navigation.
@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 insbesondere für die Drill-down Navigation.
www.huk24.de
Unterstützen sie den Nutzer durch Automatisches Scrollen zu Unterebenen.
@webinterface
@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 wo er sich in der Navigation befindet.
@webinterface
@webinterface Flughafen Düsseldorf
Breadcrumb zur Orientierung
@webinterface Flughafen Düsseldorf
Überschriften sollen den Seiteninhalt adressieren.
Vielen Dank und Merciemail: peter.rozek@ecx.io
Peter Rozek@webinterface
Speaker Deck: https://speakerdeck.com/peterrozek
Slideshare: http://de.slideshare.net/peterrozek
top related