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.

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