Small Screen Navigation: BD Conf: Nashville, 2014

Deck from my presentation on small screen navigation at BD Conf in 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
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
51. Complex Architecture
52. Complex Architecture
53. Priority
58. Priority
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
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.