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
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 First
47. Content First
48. Make sure you’re building the right navigation
49. Complex Architecture
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
72. mediaCheck, by @robtarr
73. Fallbacks are worth it
74. Off Canvas with no-js
75. Usability
76. Most users don’t expect the trigger
77. Can you navigate your site, without the navigation?
78. Teach Use
79. Familiarity breeds usability
80. Familiarity breeds usability
81. Collaboration
82. You think you’re awesome Others know
 you’re awesome
83. You think you’re awesome Others know
 you’re awesome Collaboration
87. I cannot do timeless
 work on my own
88. You cannot do timeless
 work on your own
89. Design without testing is guesswork You & Your Client You & Your Users
90. You & your client working without
 your users is guesswork Design without testing is guesswork
91. Collaborate
 
 Not just with your client, but also with real users
92. @bencallahan THANKS! Thanks to Ryann Pierce and Jeremy Loyd for help with the wireframes used in this presentation.