Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive Navigation Patterns, UX and Guidelines

1,048 views

Published on

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.

Published in: Design
  • Be the first to comment

Responsive Navigation Patterns, UX and Guidelines

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

×