Small Screen Navigation: BD Conf: Nashville, 2014

Transcript

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
10. None
11. None
12. None

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

    Interaction Indicators ‣ Interaction Patterns

14. Trigger Indicators

15. What is a Trigger?

16. Trigger Indicators ‣ Words ‣ menu, main menu ‣ nav,

    navigation ‣ site specific
 (sections, topics,
 products, etc.) ‣ Icons ‣ plus ‣ hamburger ‣ arrows ‣ “x”

17. TRIGGER INDICATORS Words

18. TRIGGER INDICATORS Icons Plus Hamburger Down Arrow

19. TRIGGER INDICATORS Other & Combinations

20. Trigger Indicators ‣ Words ‣ menu, main menu ‣ nav,

    navigation ‣ site specific
 (sections, topics,
 products, etc.) ‣ Icons ‣ plus ‣ hamburger ‣ arrows ‣ “x”

21. Reveal Patterns

22. Reveal Patterns ‣ Always Available ‣ Anchor to Footer ‣

    Select Element ‣ Make Room ‣ Cover Up ‣ Off Canvas ‣ Priority + ‣ Full Screen Takeover

23. REVEAL PATTERNS: ALWAYS AVAILABLE

24. REVEAL PATTERNS: ANCHOR TO FOOTER

25. REVEAL PATTERNS: SELECT ELEMENT

26. iOS 7 REVEAL PATTERNS: SELECT ELEMENT

27. REVEAL PATTERNS: SELECT ELEMENT Chrome on OS X

28. REVEAL PATTERNS: MAKE ROOM

29. REVEAL PATTERNS: COVER UP

30. REVEAL PATTERNS: OFF CANVAS

31. REVEAL PATTERNS: PRIORITY +

32. REVEAL PATTERNS: FULL SCREEN TAKEOVER

33. Reveal Patterns ‣ Always Available ‣ Anchor to Footer ‣

    Select Element ‣ Make Room ‣ Cover Up ‣ Off Canvas ‣ Priority + ‣ Full Screen Takeover

34. Interaction Indicators

35. INTERACTION INDICATORS Icons

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

    ‣ various arrows

37. Interaction Patterns

38. Interaction Patterns ‣ List ‣ Accordion ‣ Paging

39. INTERACTION PATTERNS: LIST

40. INTERACTION PATTERNS: ACCORDION

41. INTERACTION PATTERNS: PAGING

42. INTERACTION PATTERNS: PAGING

43. Interaction Patterns ‣ List ‣ Accordion ‣ Paging

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

    Interaction Indicators ‣ Interaction Patterns

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

46. Content

47. Content

48. Content First

49. Make sure you’re building the right navigation

50. None

51. Complex Architecture

52. Complex Architecture

53. Priority

54. None
55. None
56. None
57. None

58. Priority

59. None

60. Priority

61. Priority

62. Focus

63. Focus

64. Behavior

65. Multi Open

66. Single Open

67. Single Open

68. Auto Scroll

69. JavaScript

70. Strive for a single DOM

71. mediaCheck, by @robtarr

72. Fallbacks are worth it

73. Off Canvas with no-js

74. Usability

75. Most users don’t expect the trigger

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

77. Teach Use

78. Familiarity breeds usability

79. Familiarity breeds usability

80. Collaborate

81. None
82. None
83. None

84. I cannot do timeless
 work on my own

85. You cannot do timeless
 work on your own

86. Our Teams
 Our Clients
 Our Users 
 Timeless Work +

87. Design without testing is guesswork You & Your Client You

    & Your Users

88. You & your client working without
 your users is guesswork

    Design without testing is guesswork

89. Put your work in front of real users

90. @bencallahan THANKS! Thanks to Ryann Pierce and Jeremy Loyd for

    help with the wireframes used in this presentation.