Responsive Navigation Patterns, UX and Guidelines

User have a goal and are on a mission. Navigation is one of the core elements of a responsive website. Which navigation principle is the best for the information architecture, usability and user experience? In addition to the scalability for different screen sizes, it is the major challenge to find the balance between completeness and clarity. The presentation explores these questions and formulated guidelines.

Transcript

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