Page 1 Responsive Navigation Patterns
UX and
Guidelines@webinterface
UX Congress 2015
Page 2 PETER ROZEKWork by ecx.io (Digital Agency)
SKILLS: UX
Usability Accessibility
Frontend
@webinterface
Page 3 Users have a goal and are on a mission.
@webinterface
Page 5 @webinterface
Responsive Navigation is more than one Content, Context or Component.
Page 6 Bildnachweis: bradfrost.com@webinterface
Page 7 @webinterface
49% use there Mobilephone everyday and everytime.
Page 8 Paradigm change in the interaction.
@webinterface
Page 9 http://www.digibarn.com/collections/screenshots/xerox-star-8010/@webinterface
Page 11 @webinterface http://www.ubergizmo.com/2007/05/palm-unveils-new-bluetooth-keyboard/
Page 14 Detachment of the GUI with their desktop metaphors.
@webinterface
Page 15 @webinterface
See, point and clickGUI
To intuit usableNUI
Page 16 @webinterface
Desktop metaphorGUI
StraightNUI
Page 17 NUI:
@webinterface
Usability = Time saving
Page 18 @webinterface
Responsive Navigation is the intersection from GUI and NUI.
Page 19 Usability problems?
@webinterface
Page 20 52% Users have a bad experience
57,9% Sites are confusing
36,4% Not usable
(Quelle: BVDW 2013)
@webinterface http://www.bvdw.org/
Page 21 Help your users
@webinterface
love there usersbecause there arepeople
Page 22 @webinterface
Respect
Page 23 Design the Priority
@webinterface
Page 24 „Don’t make me think.“Steve Krug
@webinterface
Page 25 @webinterface
Using follow identify
false
true
Page 26 Responsive Navigation Patterns…… Eierlegende Wollmilchsau?
Bildnachweis: de.wikipedia.org@webinterface
Page 27 Hamburger Icon
@webinterface
Page 29 „Do people understand the hamburger icon used for mobile navigation menus?“Luke Wroblewski, @lukew
@webinterface
Page 30 A/B Testing Hamburger Icon
http://exisweb.net/mobile-menu-abtest@webinterface
Page 31 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
Page 32 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/
Page 33 @webinterface
This is not your grandma’s navigation.
http://onelshortofnormal.com/2013/01/26/grandmas-got-a-sassy-new-hairdo/
Page 34 @webinterface
There is a different between simplicity and readability.
Page 35 Pro and Cons Hamburger Icon
Understanding by age group
@webinterface
Using follow identify
Potential conflicts with other system
objects
Page 36 Off-Canvas Menu
@webinterface
Page 37 Complex pages with many navigation levels.
ConsNot capture the entire
screen
@webinterface
ProNavigation in deeper
levels
Page 38 Guidelines
@webinterface
Page 39 Perceivable
@webinterface
Page 40 To group basic essentials of the navigation conformable, coherent and clear.
@webinterface https://www.otto.de/
Page 41 @webinterface
Position of the search field coherent and clear.
https://www.jab.de/group/
Page 42 @webinterface https://www.jab.de/group/
Page 43 Avoid opposition to another navigation icons.
@webinterface
Page 45 Accounting For Touch
@webinterface
Page 47 Close Button
@webinterface
Page 48 Operable
@webinterface
Page 49 Occupy menu items with only one function.
@webinterface
Page 50 By complex navigation Direct entry into sublevels
@webinterface https://www.otto.de/
Page 52 @webinterface https://www.jab.de/group/
Page 53 Help your users: Auto scroll to sublevels.
@webinterface https://www.otto.de/
Page 54 Offer clear and finger-friendly links.
@webinterface http://www.zeit.de/index
Page 55 Delay
@webinterface
Page 58 Web Accessibility Standards
@webinterface
Keyboard focusable and operable
Clear indication a focus
Works without Javascript
Page 59 @webinterface
UI, Data continuity and Layout Adaptability
Coherence
Page 60 Make sure that the content structure of navigation should be the same and accessible in multiple places.
@webinterface
Page 61 Clear and visual hierarchy
@webinterface https://www.otto.de/
Page 64 Adapt your design to the space available.
@webinterface
Page 65 @webinterface
Some designs works on all screen sizes.
http://www.zeit.de/index
Page 66 Content continuity
Fluidity
@webinterface
Page 67 Prioritize your content
@webinterface
Page 68 Show high priority content at the top.
@webinterface http://www.worldwildlife.org/
Page 69 Guidance notes
„visibility“
@webinterface
Page 70 Focus on the position
@webinterface http://www.zeit.de/index
Page 71 Breadcrumb for quick orientation
@webinterface https://www.jab.de/group/
Page 73 Headings should be clearly, visible and address the content.
@webinterface
Page 74 Future continuity
@webinterface
Page 75 Progressive enhancement
@webinterface
Web Standards
Web Accessibility
Page 76 @webinterface
Resumé
Page 77 The vehicle that takes users where they want to go.
@webinterface
Page 78 @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.“
Page 79 Designing forHumansnot Devices.
@webinterface
Page 80 Design the interaction behaviors not the devices!
@webinterface
Page 81 „Design the Priority not the Layout!“
@webinterface
Ethan Marcotte
Page 82 Meta principle Fluid experience
@webinterface
Page 83 BuildMeasureLearn
@webinterface
Page 84 Thanks
@webinterface
…dear Ellen
Page 85 peter.rozek@ecx.io@webinterface