Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)

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

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

@webinterface@webinterface Bildnachweis: bradfrost.com

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

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

Lean Forward

@webinterface

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.

@webinterface

„Don’t make me think.“Steve Krug

Kognitive Aspekte

@webinterface

gulf of execution (Ausführungskluft)

gulf of evaluation(Auswertungskluft)

Zwei wesentliche Hürden bei der Benutzung.

@webinterface

Usability Probleme?

@webinterface Bildnachweis: datenschutzbeauftragter-info.de

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

52%

57,9%

36,4%

Der Nutzer machen mindestens einmal schlechte Erfahrungen.

Websites sind unübersichtlich.

Nicht benutzerfreundlich.

(Quelle: BVDW 2013)

@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

Hunger!

@webinterface Bildnachweis: hornochse.koeln/

Navigation?

@webinterface

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:

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

Flughafen Düsseldorf@webinterface

Suche erkennbar positionieren.

Gut erreichbar

@webinterface

hammer-heimtex.de@webinterface

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

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.

Unterschiedlche Funktionen

Menüpunkte mit nur einer Funktion belegen.

@webinterface

www.huk24.de

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

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

@webinterface

@webinterface Flughafen Düsseldorf

Breadcrumb zur Orientierung

@webinterface Flughafen Düsseldorf

Überschriften sollen den Seiteninhalt adressieren.

Resumé

@webinterface

@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

Designing for

Humans not Devices.

erstellenmessenlernenLEAN UX

@webinterface

Vielen Dank und Merciemail: [email protected]

Peter Rozek@webinterface

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

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

@webinterface

…für meine Ellen

@webinterface

Fragen?

Peter Rozek@webinterface

Responsive Navigation Patterns UX und Guidelines

Peter Rozek, 08.6.2015 Berlin