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

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

@webinterface

@webinterface Bildnachweis: bradfrost.com

Nutzungszenarien haben sich verändert, Navigationen müssen für viele Touchpoints ausgelegt sein.

@webinterface Bildnachweis: bradfrost.com

@webinterface

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

Früher war man in einer gewohnten Umgebung und Haltung Online.

Lean Forward

@webinterface

@webinterface

Benutzerfreundlich Intuitiv bedienbar

@webinterface

Benutzerfreundlich Intuitiv bedienbarGUI NUI

@webinterface

GUIMethaper

NUIdirekt

Der Weg zum erreichen des Ziels ist viel kürzer

@webinterface

Zeitpensum neuer gewinn bei dem Wechsel von GUI zu NUI.

Usability und Zeit

@webinterface

Schnittmenge aus GUI und NUI

Responsive Navigation

@webinterface

GUI auf NUI übertragen funktioniert nicht.

@webinterface

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.“

@webinterface

„Don’t make me think.“Steve Krug

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

Kognitive Aspekte

@webinterface

true false

gulf of execution (Ausführungskluft)

gulf of evaluation(Auswertungskluft)

Zwei wesentliche Hürden bei der Benutzung.

@webinterface

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-Konventionen?

@webinterface

@webinterface Bildnachweis: quazoo.com

Kunde

Die Eierlegende Wollmilchsau?

@webinterface

Responsive Navigation Patterns

Bildnachweis: de.wikipedia.org

@webinterface

Interaction Design Pattern: Hamburger Icon

Eindeutig ?

@webinterface

Navigation?

@webinterface

@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:

Off-Canvas

@webinterface

• 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

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ändlich und Erwartungskonform

Fehlende Abgrenzung

@webinterface Flughafen Düsseldorf

Suche erwartungskonform und gut erkennbar positionieren.

Gut erreichbar

@webinterface

Gut erreichbar

@webinterface

@webinterface hammer-heimtex.de

Bieten Sie eine Schließenfunktion durch drücken oder wischen an.Das gilt insbesondere für die Off-Canvas Navigation.

Funktion„Plattformkonvention, Flexibilität und Effizienz“

@webinterface

@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.

Unterschiedlche Funktionen

Menüpunkte mit nur einer Funktion belegen.

@webinterface

www.huk24.de

Unterstützen sie den Nutzer durch 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 tablet“>…</nav> <nav class=“mainnav mobile“>…</nav>

<nav class=“mainnav“>…</nav>

@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

@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 wo er sich in der Navigation befindet.

@webinterface

@webinterface Flughafen Düsseldorf

Breadcrumb zur Orientierung

@webinterface Flughafen Düsseldorf

Überschriften sollen den Seiteninhalt adressieren.

Resumé

@webinterface

Designing for Humans not Devices.

@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

erstellen messen lernen

@webinterface

Vielen Dank und Merciemail: peter.rozek@ecx.io

Peter Rozek@webinterface

Speaker Deck: https://speakerdeck.com/peterrozek

Slideshare: http://de.slideshare.net/peterrozek

@webinterface

…für meine Ellen

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

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