The document discusses navigation design patterns for small screens. It presents a taxonomy of trigger indicators, reveal patterns, interaction indicators, and interaction patterns. Trigger indicators are things like words and icons that indicate navigational options. Reveal patterns describe how navigation appears or is revealed, such as always available, anchor to footer, select element, make room, cover up, off canvas, priority plus, and full screen takeover. Interaction indicators are icons that suggest how users can interact. Interaction patterns include lists, accordions, and paging. The document emphasizes putting content first, prioritizing important navigation, understanding user context, focusing on usability, teaching users, collaborating with clients and real users, and testing designs.

1. @bencallahan
SMALL SCREEN
NAVIGATION

2. The Maze

3. amazon.com

4. amazon.com

5. amazon.com

6. amazon.com

7. amazon.com

8. amazon.com

9. Congratulations!
In celebration of all your hard work
and discipline, as a reward for all the
risk you’ve taken to reach this point,
we’re quite pleased to present you
with…YOUR CONTENT!
Keep up the good work!
~ The Management

11. Your users are not stupid

12. A Taxonomy
‣ Trigger Indicators
‣ Reveal Patterns
‣ Interaction Indicators
‣ Interaction Patterns

13. Trigger Indicators

14. What is a Trigger?

15. Trigger Indicators
‣ Words
‣ menu, main menu
‣ nav, navigation
‣ site specific
(sections, topics,
products, etc.)
‣ Icons
‣ plus
‣ hamburger
‣ arrows
‣ “x”

16. TRIGGER INDICATORS
Words

17. TRIGGER INDICATORS
Icons
Plus Hamburger Down Arrow

18. TRIGGER INDICATORS
Other & Combinations

19. Trigger Indicators
‣ Words
‣ menu, main menu
‣ nav, navigation
‣ site specific
(sections, topics,
products, etc.)
‣ Icons
‣ plus
‣ hamburger
‣ arrows
‣ “x”

20. Reveal Patterns

21. Reveal Patterns
‣ Always Available
‣ Anchor to Footer
‣ Select Element
‣ Make Room
‣ Cover Up
‣ Off Canvas
‣ Priority +
‣ Full Screen Takeover

22. REVEAL PATTERNS: ALWAYS AVAILABLE

23. REVEAL PATTERNS: ANCHOR TO FOOTER

24. REVEAL PATTERNS: SELECT ELEMENT

25. iOS 7/8
REVEAL PATTERNS: SELECT ELEMENT

26. REVEAL PATTERNS: SELECT ELEMENT
Chrome on OS X

27. REVEAL PATTERNS: MAKE ROOM

28. REVEAL PATTERNS: COVER UP

29. REVEAL PATTERNS: OFF CANVAS

30. REVEAL PATTERNS: PRIORITY +

31. REVEAL PATTERNS: PRIORITY +

32. REVEAL PATTERNS: PRIORITY +

33. REVEAL PATTERNS: FULL SCREEN TAKEOVER

34. Reveal Patterns
‣ Always Available
‣ Anchor to Footer
‣ Select Element
‣ Make Room
‣ Cover Up
‣ Off Canvas
‣ Priority +
‣ Full Screen Takeover

35. Interaction Indicators

36. INTERACTION INDICATORS
Icons

37. Interaction Indicators
‣ Icons
‣ plus
‣ dash
‣ “x”
‣ various arrows

38. Interaction Patterns

39. Interaction Patterns
‣ List
‣ Accordion
‣ Paging

40. INTERACTION PATTERNS: LIST

41. INTERACTION PATTERNS: ACCORDION

42. INTERACTION PATTERNS: PAGING

43. INTERACTION PATTERNS: PAGING

44. Interaction Patterns
‣ List
‣ Accordion
‣ Paging

45. A Taxonomy
‣ Trigger Indicators
‣ Reveal Patterns
‣ Interaction Indicators
‣ Interaction Patterns

46. So, what can we learn
from all of this?

47. Content First

48. Content First

49. Make sure you’re building
the right navigation

50. Priority

55. Priority

58. Priority

59. Priority

60. Context

61. Context

62. Context

63. Focus

64. Focus

65. Behavior

66. Multi Open

67. Single Open

68. Single Open

69. Auto Scroll

70. Usability

71. Most users don’t expect the trigger

72. Can you navigate your site,
without the navigation?

73. Teach Use

74. Familiarity breeds usability

75. Familiarity breeds usability

76. Collaboration

79. I cannot do timeless
work on my own

80. Design without testing is guesswork
You & Your Client
You & Your Users

81. You & your client working without
your users is guesswork
Design without testing is guesswork

82. Collaborate
Not just with your client,
but also with real users

83. @bencallahan
THANKS!