Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Small Screen Navigation: ConvergeSE, 2014

Small Screen Navigation: ConvergeSE, 2014

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

Ben Callahan

May 02, 2014
Tweet

More Decks by Ben Callahan

Other Decks in Design

Transcript

  1. SMALL SCREEN
    NAVIGATION
    @bencallahan

    View full-size slide

  2. 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 full-size slide

  3. A Taxonomy
    ‣ Trigger Indicators
    ‣ Reveal Patterns
    !
    ‣ Interaction Indicators
    ‣ Interaction Patterns

    View full-size slide

  4. Trigger Indicators

    View full-size slide

  5. What is a Trigger?

    View full-size slide

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

    (sections, topics,

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

    View full-size slide

  7. TRIGGER INDICATORS
    Words

    View full-size slide

  8. TRIGGER INDICATORS
    Icons
    Plus Hamburger Down Arrow

    View full-size slide

  9. TRIGGER INDICATORS
    Other & Combinations

    View full-size slide

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

    (sections, topics,

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

    View full-size slide

  11. Reveal Patterns

    View full-size slide

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

    View full-size slide

  13. REVEAL PATTERNS: ALWAYS AVAILABLE

    View full-size slide

  14. REVEAL PATTERNS: ANCHOR TO FOOTER

    View full-size slide

  15. REVEAL PATTERNS: SELECT ELEMENT

    View full-size slide

  16. iOS 7
    REVEAL PATTERNS: SELECT ELEMENT

    View full-size slide

  17. REVEAL PATTERNS: SELECT ELEMENT
    Chrome on OS X

    View full-size slide

  18. REVEAL PATTERNS: MAKE ROOM

    View full-size slide

  19. REVEAL PATTERNS: COVER UP

    View full-size slide

  20. REVEAL PATTERNS: OFF CANVAS

    View full-size slide

  21. REVEAL PATTERNS: PRIORITY +

    View full-size slide

  22. REVEAL PATTERNS: FULL SCREEN TAKEOVER

    View full-size slide

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

    View full-size slide

  24. Interaction Indicators

    View full-size slide

  25. INTERACTION INDICATORS
    Icons

    View full-size slide

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

    View full-size slide

  27. Interaction Patterns

    View full-size slide

  28. Interaction Patterns
    ‣ List
    ‣ Accordion
    ‣ Paging

    View full-size slide

  29. INTERACTION PATTERNS: LIST

    View full-size slide

  30. INTERACTION PATTERNS: ACCORDION

    View full-size slide

  31. INTERACTION PATTERNS: PAGING

    View full-size slide

  32. Interaction Patterns
    ‣ List
    ‣ Accordion
    ‣ Paging

    View full-size slide

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

    View full-size slide

  34. TAKEAWAYS: ARCHITECTURE

    View full-size slide

  35. TAKEAWAYS: ARCHITECTURE

    View full-size slide

  36. TAKEAWAYS: FOCUS

    View full-size slide

  37. TAKEAWAYS: BEHAVIOR
    Multi Open

    View full-size slide

  38. TAKEAWAYS: BEHAVIOR
    Single Open

    View full-size slide

  39. TAKEAWAYS: BEHAVIOR
    Single Open

    View full-size slide

  40. Auto Scroll
    TAKEAWAYS: BEHAVIOR

    View full-size slide

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

    View full-size slide

  42. mediaCheck, by @robtarr

    View full-size slide

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

    View full-size slide

  44. Prioritization

    View full-size slide

  45. Prioritization

    View full-size slide

  46. Prioritization

    View full-size slide

  47. Prioritization

    View full-size slide

  48. Prioritization

    View full-size slide

  49. Prioritization

    View full-size slide

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

    View full-size slide

  51. THANKS!
    @bencallahan

    View full-size slide