Small Screen Navigation: Front-End Design Conference, Portland, 2014

The deck from my presentation on small screen navigation at Front-End Design Conference in Portland, OR on August 22, 2014

Transcript

1. @bencallahan
   SMALL SCREEN

   NAVIGATION
   

   View Slide

2. The Maze
   

   View Slide

3. amazon.com
   

   View Slide

4. amazon.com
   

   View Slide

5. amazon.com
   

   View Slide

6. amazon.com
   

   View Slide

7. amazon.com
   

   View Slide

8. amazon.com
   

   View Slide

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
   

   View Slide

10. View Slide

11. View Slide

12. View Slide

13. A Taxonomy
    ‣ Trigger Indicators
    ‣ Reveal Patterns
    !
    ‣ Interaction Indicators
    ‣ Interaction Patterns
    

    View Slide

14. Trigger Indicators
    

    View Slide

15. What is a Trigger?
    

    View Slide

16. Trigger Indicators
    ‣ Words
    ‣ menu, main menu
    ‣ nav, navigation
    ‣ site specific

    (sections, topics,

    products, etc.)
    ‣ Icons
    ‣ plus
    ‣ hamburger
    ‣ arrows
    ‣ “x”
    

    View Slide

17. TRIGGER INDICATORS
    Words
    

    View Slide

18. TRIGGER INDICATORS
    Icons
    Plus Hamburger Down Arrow
    

    View Slide

19. TRIGGER INDICATORS
    Other & Combinations
    

    View Slide

20. Trigger Indicators
    ‣ Words
    ‣ menu, main menu
    ‣ nav, navigation
    ‣ site specific

    (sections, topics,

    products, etc.)
    ‣ Icons
    ‣ plus
    ‣ hamburger
    ‣ arrows
    ‣ “x”
    

    View Slide

21. Reveal Patterns
    

    View Slide

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

    View Slide

23. REVEAL PATTERNS: ALWAYS AVAILABLE
    

    View Slide

24. REVEAL PATTERNS: ANCHOR TO FOOTER
    

    View Slide

25. REVEAL PATTERNS: SELECT ELEMENT
    

    View Slide

26. iOS 7
    REVEAL PATTERNS: SELECT ELEMENT
    

    View Slide

27. REVEAL PATTERNS: SELECT ELEMENT
    Chrome on OS X
    

    View Slide

28. REVEAL PATTERNS: MAKE ROOM
    

    View Slide

29. REVEAL PATTERNS: COVER UP
    

    View Slide

30. REVEAL PATTERNS: OFF CANVAS
    

    View Slide

31. REVEAL PATTERNS: PRIORITY +
    

    View Slide

32. REVEAL PATTERNS: FULL SCREEN TAKEOVER
    

    View Slide

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

    View Slide

34. Interaction Indicators
    

    View Slide

35. INTERACTION INDICATORS
    Icons
    

    View Slide

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

    View Slide

37. Interaction Patterns
    

    View Slide

38. Interaction Patterns
    ‣ List
    ‣ Accordion
    ‣ Paging
    

    View Slide

39. INTERACTION PATTERNS: LIST
    

    View Slide

40. INTERACTION PATTERNS: ACCORDION
    

    View Slide

41. INTERACTION PATTERNS: PAGING
    

    View Slide

42. INTERACTION PATTERNS: PAGING
    

    View Slide

43. Interaction Patterns
    ‣ List
    ‣ Accordion
    ‣ Paging
    

    View Slide

44. A Taxonomy
    ‣ Trigger Indicators
    ‣ Reveal Patterns
    !
    ‣ Interaction Indicators
    ‣ Interaction Patterns
    

    View Slide

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

    View Slide

46. Content First
    

    View Slide

47. Content First
    

    View Slide

48. Make sure you’re building
    the right navigation
    

    View Slide

49. Complex Architecture
    

    View Slide

50. View Slide

51. Complex Architecture
    

    View Slide

52. Complex Architecture
    

    View Slide

53. Priority
    

    View Slide

54. View Slide

55. View Slide

56. View Slide

57. View Slide

58. Priority
    

    View Slide

59. View Slide

60. Priority
    

    View Slide

61. Priority
    

    View Slide

62. Focus
    

    View Slide

63. Focus
    

    View Slide

64. Behavior
    

    View Slide

65. Multi Open
    

    View Slide

66. Single Open
    

    View Slide

67. Single Open
    

    View Slide

68. Auto Scroll
    

    View Slide

69. JavaScript
    

    View Slide

70. Strive for a single DOM
    

    View Slide

71. View Slide

72. mediaCheck, by @robtarr
    

    View Slide

73. Fallbacks are worth it
    

    View Slide

74. Off Canvas with no-js
    

    View Slide

75. Usability
    

    View Slide

76. Most users don’t expect the trigger
    

    View Slide

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

    View Slide

78. Teach Use
    

    View Slide

79. Familiarity breeds usability
    

    View Slide

80. Familiarity breeds usability
    

    View Slide

81. Collaboration
    

    View Slide

82. You think you’re
    awesome
    Others know

    you’re awesome
    

    View Slide

83. You think you’re
    awesome
    Others know

    you’re awesome
    Collaboration
    

    View Slide

84. View Slide

85. View Slide

86. View Slide

87. I cannot do timeless

    work on my own
    

    View Slide

88. You cannot do timeless

    work on your own
    

    View Slide

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

    View Slide

90. You & your client working without

    your users is guesswork
    Design without testing is guesswork
    

    View Slide

91. Collaborate

    

    Not just with your client,
    but also with real users
    

    View Slide

92. @bencallahan
    THANKS!
    Thanks to Ryann Pierce and Jeremy Loyd for help with the wireframes used in this presentation.
    

    View Slide