SlideShare ist ein Scribd-Unternehmen logo
1 von 66
Downloaden Sie, um offline zu lesen
Responsive Navigation
Patterns
UX und Guidelines
MobileTech Conference 2015
@webinterface Peter Rozek
Speaker
Peter Rozek
@webinterface
Arbeite bei ecx.io
(Digital Agentur)
Themengebiete:
UX,
Usability,
Accessibility
Frontend
twitter: @webinterface
Wer bin ich
@webinterface Peter Rozek
Jede 3 responsive
Navigation ist nicht
benutzerfreundlich.
@webinterface
Navigation ist nicht mehr
auf ein Content, Context
oder Component bezogen.
@webinterface
Nutzungszenarien haben
sich verändert,
Navigationsprinzipien
müssen für viele
Touchpoints ausgelegt sein.
@webinterface
Früher musste die
Navigation für ein GUI
(stationäre Webseiten)
funktionieren.
@webinterface
Lean Forward

Früher war man in einer gewohnten Umgebung
und Haltung Online.
@webinterface
Heute ist man überall und
immer Online.
@webinterface 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
Nutzer erwarten daher eine
konsistente UX und
Usability bei der Navigation.
@webinterface
Das gilt für alle Touchpoints (GUI, NUI).
Vom eindimensionalen 
Bildschirm zum
Multiscreen Experience.
@webinterface
Konsistenz ist der
Schlüssel.
@webinterface
@webinterface
Nutzer haben genaue
Anforderungen und
Erwartungen.
Die Navigation sollte grundsätzlich erkennbar,
übersichtlich, leicht erlernbar und
benutzerfreundlich sein.
@webinterface
Wünsche der Nutzer gehen über einfache
Bedienbarkeit hinaus.
@webinterface
Nutzer haben eine Repräsentation von
Navigationsmodellen und Funktionsweisen als
mentales Modell für sich abgespeichert.
„Benutzung folgt erkennen“
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
Welche Probleme haben
Nutzer bei der
Navigation auf
responsiven Webseiten?
52%
57,9%
36,4%
Der Nutzer machen mindestens einmal
schlechte Erfahrungen.
Websites sind unübersichtlich.
Nicht benutzerfreundlich.
(Quelle: BVDW 2013)
@webinterface
@webinterface
Responsive
Navigations Pattern
Interaction Design Pattern: Hamburger Icon
@webinterface
„Do people understand the „hamburger“ icon
used for mobile navigation menus?“
Luke Wroblewski, @lukew
@webinterface
@webinterface
Eindeutig ?
@webinterface
• Erkennbarkeit und Verständlichkeit nicht bei
allen Nutzern gegeben.
• Steht im Konflikt mit anderen Icons.
• Unterschiedliche Ergebnisse bei iPhone und
Androide Nutzer.
Hamburger Icon:
A/B Testing
Hamburger Icon
@webinterface
@webinterface http://exisweb.net/mobile-menu-abtest
@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ü
http://exisweb.net/mobile-menu-abtest
12,9% bessere Conversion
bei der Bezeichnung Menü
als Hamburger Icon.
@webinterface
Off-Canvas
@webinterface
@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.
Off-Canvas
@webinterface
+
Populäre Lösung aber nicht unbedingt Effizient.
Off-Canvas Navigation und
„Hamburger Icon“ haben
sich als Pattern für eine
Navigation
konventionalisiert.
@webinterface
@webinterface
„Trampelpfad Prozesse“
Christian Stetter, emeritierter Professor für Sprach- und
Kommunikationswissenschaft
Drilldown Menü
@webinterface
@webinterface
• Vorteil: Schrittweise Navigation in tiefere
Ebenen ohne die Seite neu zu laden.
• Nachteil: Schwächen In der
Rückwärtsbewegung.
Drilldown Menü für Komplexe Seiten mit vielen
Navigationsebenen.
@webinterface
Best Practice *
Menü statt Hamburger Icon
Off-Canvas Navigation
Drill-Down Navigation
* Bei komplexen Navigationen
@webinterface
Guidelines
@webinterface
Sichtbarkeit
1
„Erkennen anstatt Erinnern“
Reduzieren Sie das visuelle Rauschen. Gruppieren
Sie Navigationselemente erwartungskonform,
verständlich und eindeutig.
@webinterface citan.mercedes.fr/hbc.com/
@webinterface
Positionieren Sie die Suche erwartungskonform
und gut erkennbar. Besucher nutzen die Suche
als schnellen Einstieg.
Flughafen Düsseldorf
@webinterface
Die Navigation soll für den Benutzer gut
erreichbar sein.
@webinterface gigaom.com/2012.dconstruct.org/
Fehlende
Abgrenzung
Verständlich
und eindeutig
Die Navigation soll in Form und Sprache für den
Benutzer vertraut sein und nicht mit
Systemkonkurierenden Icons in Konflikt stehen.
mitsubishi-motors.com.au/
@webinterface
Bieten Sie eine Schließenfunktion durch drücken
oder wischen an. Das gilt insbesondere für die
Off-Canvas Navigation.
hammer-heimtex.de
@webinterface
Funktion
2
„Plattformkonvention und Nutzererwartung“
@webinterface
Bei komplexen Navigationen den direkten
Einstieg in Unterebenen anbieten.
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.
hammer-heimtex.de
@webinterface
Direkten Einstieg in Oberkategorien ermöglichen.
Menüpunkte mit nur einer Funktion zu belegen.
Unterschiedlche
Funktionen
Vermeiden Sie es unbedingt
einen Menüpunkt mit mehreren
Funktionen zu belegen.
@webinterface
Helfen Sie den Benutzer beim navigieren durch
automatisches Scrollen zu Unterebenen.
www.huk24.de
@webinterface
Stellen Sie sicher, dass Links leicht anzuvisieren
und zu treffen sind.
@webinterface
Darstellung
3
„Coherence“
@webinterface
Stellen Sie sicher das die Inhaltliche Struktur der
Navigation, Geräteübergreifend sichtbar,
verständlich und nachvollziehbar ist.
@webinterface
Zeigen Sie dem Nutzer durch eine klare Symbolik
und visuelle Hierarchie ob es sich um
Oberkategorien oder Unterpunkte handelt.
huk24.de
@webinterface
Berücksichtigen Sie bei Darstellung der
Navigation auch den Landscape Modus.
@webinterface
Alternative Einstiege
4
@webinterface
Schnelleinstiege anbieten, Nutzer wollen nicht
immer den gesamten Navigationsbaum durch
gehen.
Flughafen Düsseldorf
@webinterface
Orientierungshilfen
5
„Sichtbarkeit des Systemstatus“
@webinterface
Informieren Sie den Nutzer innerhalb der
Navigation wo er sich befindet.
Flughafen Düsseldorf
@webinterface
Zeigen sie dem Nutzer mit der Breadcrumb wo er
sich befindet.
Flughafen Düsseldorf
@webinterface
Überschriften sollen eindeutig erkennbar sein
und den Seiteninhalt adressieren.
Flughafen Düsseldorf
@webinterface
Resumé
erstellen - messen - lernen
@webinterface
Vielen Dank und Merci…
@webinterface Peter Rozek
email: peter.rozek@ecx.io
Noch Fragen…
?
@webinterface Peter Rozek
@webinterface
…für meine Ellen
@webinterface@webinterface Peter Rozek
Responsive Navigation Patterns
UX und Guidelines
Peter Rozek, 24.03.2015 München

Weitere ähnliche Inhalte

Ähnlich wie Responsive Navigation Patterns - UX und Guidelines

01-2015 - Java aktuell - Mandy Goram - Entwicklung mobiler Anwendungen für Bl...
01-2015 - Java aktuell - Mandy Goram - Entwicklung mobiler Anwendungen für Bl...01-2015 - Java aktuell - Mandy Goram - Entwicklung mobiler Anwendungen für Bl...
01-2015 - Java aktuell - Mandy Goram - Entwicklung mobiler Anwendungen für Bl...
Mandy Goram
 
Ergosign-Responsive-Design-2013
Ergosign-Responsive-Design-2013Ergosign-Responsive-Design-2013
Ergosign-Responsive-Design-2013
Ergosign GmbH
 
Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011
Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011
Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011
Patrick Lauke
 
Smart Clients - Interaction Paradigms in Web Context
Smart Clients - Interaction Paradigms in Web ContextSmart Clients - Interaction Paradigms in Web Context
Smart Clients - Interaction Paradigms in Web Context
JanGroenefeld
 

Ähnlich wie Responsive Navigation Patterns - UX und Guidelines (20)

Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)
Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)
Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)
 
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
datenwerk Kochbuch: Webdesign- Trends 2014  (de)datenwerk Kochbuch: Webdesign- Trends 2014  (de)
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
 
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
 
Navigationsoptimierung - Wichtige SEO, UX & Usability DOs and DONTs - SEO Cam...
Navigationsoptimierung - Wichtige SEO, UX & Usability DOs and DONTs - SEO Cam...Navigationsoptimierung - Wichtige SEO, UX & Usability DOs and DONTs - SEO Cam...
Navigationsoptimierung - Wichtige SEO, UX & Usability DOs and DONTs - SEO Cam...
 
Multiscreen Markenerlebnis Deutsche Post
Multiscreen Markenerlebnis Deutsche PostMultiscreen Markenerlebnis Deutsche Post
Multiscreen Markenerlebnis Deutsche Post
 
01-2015 - Java aktuell - Mandy Goram - Entwicklung mobiler Anwendungen für Bl...
01-2015 - Java aktuell - Mandy Goram - Entwicklung mobiler Anwendungen für Bl...01-2015 - Java aktuell - Mandy Goram - Entwicklung mobiler Anwendungen für Bl...
01-2015 - Java aktuell - Mandy Goram - Entwicklung mobiler Anwendungen für Bl...
 
Device Agnostic: Geräteunabhängiges Design als UX Grundlage
Device Agnostic: Geräteunabhängiges Design als UX GrundlageDevice Agnostic: Geräteunabhängiges Design als UX Grundlage
Device Agnostic: Geräteunabhängiges Design als UX Grundlage
 
What about Accessibility of Next Generation User Interfaces for People with D...
What about Accessibility of Next Generation User Interfaces for People with D...What about Accessibility of Next Generation User Interfaces for People with D...
What about Accessibility of Next Generation User Interfaces for People with D...
 
IA Konferenz München 2011
IA Konferenz München 2011IA Konferenz München 2011
IA Konferenz München 2011
 
Ergosign-Responsive-Design-2013
Ergosign-Responsive-Design-2013Ergosign-Responsive-Design-2013
Ergosign-Responsive-Design-2013
 
Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.
 
Apple iOS - GUI Entwicklung
Apple iOS - GUI EntwicklungApple iOS - GUI Entwicklung
Apple iOS - GUI Entwicklung
 
Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011
Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011
Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011
 
design
designdesign
design
 
Web Design Trends 2011
Web Design Trends 2011Web Design Trends 2011
Web Design Trends 2011
 
Comundus liferay 6.2
Comundus liferay 6.2Comundus liferay 6.2
Comundus liferay 6.2
 
Mobile web #bch11
Mobile web #bch11Mobile web #bch11
Mobile web #bch11
 
Webinar: Responsive Design
Webinar: Responsive DesignWebinar: Responsive Design
Webinar: Responsive Design
 
German Web Usability Training
German Web Usability TrainingGerman Web Usability Training
German Web Usability Training
 
Smart Clients - Interaction Paradigms in Web Context
Smart Clients - Interaction Paradigms in Web ContextSmart Clients - Interaction Paradigms in Web Context
Smart Clients - Interaction Paradigms in Web Context
 

Mehr von Peter Rozek

Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-...
Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-...Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-...
Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-...
Peter Rozek
 

Mehr von Peter Rozek (20)

How to win Stakeholders, Design needs Leadership
How to win Stakeholders, Design needs Leadership How to win Stakeholders, Design needs Leadership
How to win Stakeholders, Design needs Leadership
 
Persona driven agile development
Persona driven agile developmentPersona driven agile development
Persona driven agile development
 
Cross Device Experience with HTML Prototyping
Cross Device Experience with HTML PrototypingCross Device Experience with HTML Prototyping
Cross Device Experience with HTML Prototyping
 
Create User Centric UI-Animations
Create User Centric UI-AnimationsCreate User Centric UI-Animations
Create User Centric UI-Animations
 
Responsive Experience und das Continuum of Screens
Responsive Experience und das Continuum of ScreensResponsive Experience und das Continuum of Screens
Responsive Experience und das Continuum of Screens
 
Responsive Content Experience
Responsive Content ExperienceResponsive Content Experience
Responsive Content Experience
 
Search Experience Optimization, Nutzerfokus statt Silodenken
Search Experience Optimization, Nutzerfokus statt SilodenkenSearch Experience Optimization, Nutzerfokus statt Silodenken
Search Experience Optimization, Nutzerfokus statt Silodenken
 
THE UX OF DATA - VISUALIZATION RESPONSIVE
THE UX OF DATA - VISUALIZATION RESPONSIVETHE UX OF DATA - VISUALIZATION RESPONSIVE
THE UX OF DATA - VISUALIZATION RESPONSIVE
 
Designing the Priority, Performance ist User Experience
Designing the Priority, Performance ist User ExperienceDesigning the Priority, Performance ist User Experience
Designing the Priority, Performance ist User Experience
 
Hassliebe Onlineformulare, Enhance your Form for better UX
Hassliebe Onlineformulare, Enhance your Form for better UXHassliebe Onlineformulare, Enhance your Form for better UX
Hassliebe Onlineformulare, Enhance your Form for better UX
 
DESIGN THE PRIORITY, PERFORMANCE 
AND UX
DESIGN THE PRIORITY, PERFORMANCE 
AND UXDESIGN THE PRIORITY, PERFORMANCE 
AND UX
DESIGN THE PRIORITY, PERFORMANCE 
AND UX
 
The UX of DATA: Responsive Datenvisualisierung mit jQuery
The UX of DATA: Responsive Datenvisualisierung mit jQueryThe UX of DATA: Responsive Datenvisualisierung mit jQuery
The UX of DATA: Responsive Datenvisualisierung mit jQuery
 
jQuery: Accessibility, Mobile und Responsive
jQuery: Accessibility, Mobile und ResponsivejQuery: Accessibility, Mobile und Responsive
jQuery: Accessibility, Mobile und Responsive
 
Performance and UX
Performance and UXPerformance and UX
Performance and UX
 
Responsive Navigation Patterns, UX and Guidelines
Responsive Navigation Patterns, UX and GuidelinesResponsive Navigation Patterns, UX and Guidelines
Responsive Navigation Patterns, UX and Guidelines
 
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
 
Online / Offline
Online / OfflineOnline / Offline
Online / Offline
 
Hightway to Hell - Responsive Webdesign Testen
Hightway to Hell - Responsive Webdesign TestenHightway to Hell - Responsive Webdesign Testen
Hightway to Hell - Responsive Webdesign Testen
 
Responsive Workflow, Break the rules or die
Responsive Workflow, Break the rules or dieResponsive Workflow, Break the rules or die
Responsive Workflow, Break the rules or die
 
Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-...
Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-...Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-...
Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-...
 

Responsive Navigation Patterns - UX und Guidelines