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
   

   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. A Taxonomy
    ‣ Trigger Indicators
    ‣ Reveal Patterns
    !
    ‣ Interaction Indicators
    ‣ Interaction Patterns
    

    View Slide

11. Trigger Indicators
    

    View Slide

12. What is a Trigger?
    

    View Slide

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

    (sections, topics,

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

    View Slide

14. TRIGGER INDICATORS
    Words
    

    View Slide

15. TRIGGER INDICATORS
    Icons
    Plus Hamburger Down Arrow
    

    View Slide

16. TRIGGER INDICATORS
    Other & Combinations
    

    View Slide

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

    (sections, topics,

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

    View Slide

18. Reveal Patterns
    

    View Slide

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

    View Slide

20. REVEAL PATTERNS: ALWAYS AVAILABLE
    

    View Slide

21. REVEAL PATTERNS: ANCHOR TO FOOTER
    

    View Slide

22. REVEAL PATTERNS: SELECT ELEMENT
    

    View Slide

23. iOS 7
    REVEAL PATTERNS: SELECT ELEMENT
    

    View Slide

24. REVEAL PATTERNS: SELECT ELEMENT
    Chrome on OS X
    

    View Slide

25. REVEAL PATTERNS: MAKE ROOM
    

    View Slide

26. REVEAL PATTERNS: COVER UP
    

    View Slide

27. REVEAL PATTERNS: OFF CANVAS
    

    View Slide

28. REVEAL PATTERNS: PRIORITY +
    

    View Slide

29. REVEAL PATTERNS: FULL SCREEN TAKEOVER
    

    View Slide

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

    View Slide

31. Interaction Indicators
    

    View Slide

32. INTERACTION INDICATORS
    Icons
    

    View Slide

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

    View Slide

34. Interaction Patterns
    

    View Slide

35. Interaction Patterns
    ‣ List
    ‣ Accordion
    ‣ Paging
    

    View Slide

36. INTERACTION PATTERNS: LIST
    

    View Slide

37. INTERACTION PATTERNS: ACCORDION
    

    View Slide

38. INTERACTION PATTERNS: PAGING
    

    View Slide

39. Interaction Patterns
    ‣ List
    ‣ Accordion
    ‣ Paging
    

    View Slide

40. Takeaways
    

    View Slide

41. Takeaways
    ‣ Architecture
    ‣ Focus
    ‣ Behavior
    ‣ JavaScript
    ‣ Usability
    ‣ Prioritization
    

    View Slide

42. TAKEAWAYS: ARCHITECTURE
    

    View Slide

43. TAKEAWAYS: ARCHITECTURE
    

    View Slide

44. TAKEAWAYS: FOCUS
    

    View Slide

45. TAKEAWAYS: BEHAVIOR
    Multi Open
    

    View Slide

46. TAKEAWAYS: BEHAVIOR
    Single Open
    

    View Slide

47. TAKEAWAYS: BEHAVIOR
    Single Open
    

    View Slide

48. Auto Scroll
    TAKEAWAYS: BEHAVIOR
    

    View Slide

49. Takeaways
    ‣ JavaScript
    ‣ Visible by Default
    ‣ Anchor to Footer
    ‣ Single DOM
    

    View Slide

50. mediaCheck, by @robtarr
    

    View Slide

51. Takeaways
    ‣ Usability
    ‣ User Expectations
    ‣ Plan for the Worst
    ‣ Teach Use
    

    View Slide

52. Prioritization
    

    View Slide

53. Prioritization
    

    View Slide

54. Prioritization
    

    View Slide

55. Prioritization
    

    View Slide

56. Prioritization
    

    View Slide

57. Prioritization
    

    View Slide

58. If you’re going to make a
    website, you better make it easy
    to get to the content.
    

    View Slide

59. THANKS!
    @bencallahan
    

    View Slide