Small Screen Navigation: ConvergeSE, 2014

The deck from my “Small Screen Navigation” presentation at ConvergeSE in Columbia, South Carolina.

Transcript

1. SMALL SCREEN NAVIGATION @bencallahan
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. A Taxonomy ‣ Trigger Indicators ‣ Reveal Patterns ! ‣ Interaction Indicators ‣ Interaction Patterns
11. Trigger Indicators
12. What is a Trigger?
13. Trigger Indicators ‣ Words ‣ menu, main menu ‣ nav, navigation ‣ site specific
 (sections, topics,
 products, etc.) ‣ Icons ‣ plus ‣ hamburger ‣ arrows ‣ “x”
14. TRIGGER INDICATORS Words
15. TRIGGER INDICATORS Icons Plus Hamburger Down Arrow
16. TRIGGER INDICATORS Other & Combinations
17. Trigger Indicators ‣ Words ‣ menu, main menu ‣ nav, navigation ‣ site specific
 (sections, topics,
 products, etc.) ‣ Icons ‣ plus ‣ hamburger ‣ arrows ‣ “x”
18. Reveal Patterns
19. Reveal Patterns ‣ Always Available ‣ Anchor to Footer ‣ Select Element ‣ Make Room ‣ Cover Up ‣ Off Canvas ‣ Priority + ‣ Full Screen Takeover
20. REVEAL PATTERNS: ALWAYS AVAILABLE
21. REVEAL PATTERNS: ANCHOR TO FOOTER
22. REVEAL PATTERNS: SELECT ELEMENT
23. iOS 7 REVEAL PATTERNS: SELECT ELEMENT
24. REVEAL PATTERNS: SELECT ELEMENT Chrome on OS X
25. REVEAL PATTERNS: MAKE ROOM
26. REVEAL PATTERNS: COVER UP
27. REVEAL PATTERNS: OFF CANVAS
28. REVEAL PATTERNS: PRIORITY +
29. REVEAL PATTERNS: FULL SCREEN TAKEOVER
30. Reveal Patterns ‣ Always Available ‣ Anchor to Footer ‣ Select Element ‣ Make Room ‣ Cover Up ‣ Off Canvas ‣ Priority + ‣ Full Screen Takeover
31. Interaction Indicators
32. INTERACTION INDICATORS Icons
33. Interaction Indicators ‣ Icons ‣ plus ‣ dash ‣ “x” ‣ various arrows
34. Interaction Patterns
35. Interaction Patterns ‣ List ‣ Accordion ‣ Paging
36. INTERACTION PATTERNS: LIST
37. INTERACTION PATTERNS: ACCORDION
38. INTERACTION PATTERNS: PAGING
39. Interaction Patterns ‣ List ‣ Accordion ‣ Paging
40. Takeaways
41. Takeaways ‣ Architecture ‣ Focus ‣ Behavior ‣ JavaScript ‣ Usability ‣ Prioritization
42. TAKEAWAYS: ARCHITECTURE
43. TAKEAWAYS: ARCHITECTURE
44. TAKEAWAYS: FOCUS
45. TAKEAWAYS: BEHAVIOR Multi Open
46. TAKEAWAYS: BEHAVIOR Single Open
47. TAKEAWAYS: BEHAVIOR Single Open
48. Auto Scroll TAKEAWAYS: BEHAVIOR
49. Takeaways ‣ JavaScript ‣ Visible by Default ‣ Anchor to Footer ‣ Single DOM
50. mediaCheck, by @robtarr
51. Takeaways ‣ Usability ‣ User Expectations ‣ Plan for the Worst ‣ Teach Use
52. Prioritization
53. Prioritization
54. Prioritization
55. Prioritization
56. Prioritization
57. Prioritization
58. If you’re going to make a website, you better make it easy to get to the content.
59. THANKS! @bencallahan