KEMBAR78
Responsive Navigation Patterns, UX and Guidelines | PDF
Responsive Navigation Patterns 

UX and
Guidelines
@webinterface
UX Congress 2015
PETER ROZEK
Work by ecx.io (Digital Agency)
SKILLS:
UX
Usability
Accessibility
Frontend
@webinterface
Users have a goal and
are on a mission.
@webinterface
Focus
@webinterface
@webinterface
Responsive Navigation
is more than one
Content, Context or
Component.
Bildnachweis: bradfrost.com@webinterface
@webinterface
49% use there Mobilephone
everyday and everytime.
Paradigm change 

in the interaction.
@webinterface
http://www.digibarn.com/collections/screenshots/xerox-star-8010/@webinterface
@webinterface
@webinterface http://www.ubergizmo.com/2007/05/palm-unveils-new-bluetooth-keyboard/
@webinterface
2007
@webinterface
2010
Detachment of the GUI
with their desktop
metaphors.
@webinterface
@webinterface
See, point and click
GUI
To intuit usable
NUI
@webinterface
Desktop metaphor
GUI
Straight
NUI
NUI:
@webinterface
Usability = Time saving
@webinterface
Responsive Navigation 

is the intersection 

from GUI and NUI.
Usability
problems?
@webinterface
52% Users have a bad experience
57,9% Sites are confusing
36,4% Not usable
(Quelle: BVDW 2013)
@webinterface http://www.bvdw.org/
Help your users
@webinterface
love there users
because there are
people
@webinterface
Respect
Design the Priority
@webinterface
„Don’t make me think.“
Steve Krug
@webinterface
@webinterface
Using follow identify
false
true
Responsive Navigation
Patterns…
… Eierlegende Wollmilchsau?
Bildnachweis: de.wikipedia.org@webinterface
Hamburger Icon
@webinterface
@webinterface
„Do people
understand the
hamburger icon
used for mobile
navigation menus?“
Luke Wroblewski, @lukew
@webinterface
A/B Testing Hamburger Icon
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%
Visitors Conversions Results
Menu
Menu
Menu
http://exisweb.net/mobile-menu-abtest@webinterface
Understood Did not understand
@webinterface
80,6 % 19,4 %
52,4 % 47,6 %
18-44
45-62
Understanding by age group
http://www.catalystnyc.com/2015/02/navigating-mobile-hamburger-menu-anyone-get/
@webinterface
This is not your grandma’s
navigation.
http://onelshortofnormal.com/2013/01/26/grandmas-got-a-sassy-new-hairdo/
@webinterface
There is a different
between simplicity and
readability.
Pro and Cons Hamburger Icon
Understanding
by age group
@webinterface
Using follow
identify
Potential
conflicts with
other system
objects
Off-Canvas Menu
@webinterface
Complex pages with many
navigation levels.
Cons

Not capture the entire
screen
@webinterface
Pro

Navigation in deeper
levels
Guidelines
@webinterface
Perceivable
@webinterface
To group basic
essentials of the
navigation
conformable, 

coherent and clear.
@webinterface https://www.otto.de/
@webinterface
Position of the 

search field

coherent and clear.
https://www.jab.de/group/
@webinterface https://www.jab.de/group/
Avoid opposition to
another navigation icons.
@webinterface
@webinterface
Accounting For Touch
@webinterface
@webinterface
Close Button
@webinterface
Operable
@webinterface
Occupy menu items with only one
function.
@webinterface
By complex
navigation
Direct entry
into sublevels
@webinterface https://www.otto.de/
@webinterface
@webinterface https://www.jab.de/group/
Help your
users:
Auto scroll to
sublevels.
@webinterface https://www.otto.de/
Offer clear and 

finger-friendly links.
@webinterface http://www.zeit.de/index
Delay
@webinterface
@webinterface
@webinterface
Web Accessibility Standards
@webinterface
Keyboard focusable and operable
Clear indication a focus
Works without Javascript
@webinterface
UI, Data continuity and Layout
Adaptability
Coherence
Make sure that the content
structure of navigation should be
the same and accessible in
multiple places.
@webinterface
Clear and visual
hierarchy
@webinterface https://www.otto.de/
@webinterface
@webinterface
Adapt your design to the space
available.
@webinterface
@webinterface
Some designs works 

on all screen sizes.
http://www.zeit.de/index
Content continuity
@webinterface
Prioritize your content
@webinterface
Show high priority
content at the top.
@webinterface http://www.worldwildlife.org/
Guidance notes
@webinterface
Focus on the position
@webinterface http://www.zeit.de/index
Breadcrumb for
quick orientation
@webinterface https://www.jab.de/group/
@webinterface
Headings should be clearly, visible
and address the content.
@webinterface
Future continuity
@webinterface
Progressive enhancement
@webinterface
Web Standards
Web Accessibility
@webinterface
Resumé
The vehicle that takes
users where they want
to go.
@webinterface
@webinterface
Brad Frost
https://www.youtube.com/watch?v=nE0CRMm59BY
„Your visitors don’t give a shit if your
site is responsive. They don’t care if
it’s a separate mobile site. They don’t
care if it’s just a plain ol’ desktop site.
They do give a shit if they can’t get
done what they need to get done.“
Designing for

Humans

not Devices.
@webinterface
Design the interaction
behaviors 

not the devices!
@webinterface
„Design the Priority 

not the Layout!“
@webinterface
Ethan Marcotte
Meta principle 

Fluid experience
@webinterface
Build

Measure

Learn
@webinterface
Thanks
@webinterface
…dear Ellen
peter.rozek@ecx.io
@webinterface

Responsive Navigation Patterns, UX and Guidelines