Small Screen Navigation: ConvergeSE, 2014

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