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

Small Screen Navigation: Front-End Design Conference, Portland, 2014

Ben Callahan
August 22, 2014

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

Ben Callahan

August 22, 2014
Tweet

More Decks by Ben Callahan

Other Decks in Design

Transcript

  1. @bencallahan
    SMALL SCREEN

    NAVIGATION

    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: PAGING

    View full-size slide

  33. Interaction Patterns
    ‣ List
    ‣ Accordion
    ‣ Paging

    View full-size slide

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

    View full-size slide

  35. So, what can we learn
    from all of this?

    View full-size slide

  36. Content First

    View full-size slide

  37. Content First

    View full-size slide

  38. Make sure you’re building
    the right navigation

    View full-size slide

  39. Complex Architecture

    View full-size slide

  40. Complex Architecture

    View full-size slide

  41. Complex Architecture

    View full-size slide

  42. Strive for a single DOM

    View full-size slide

  43. mediaCheck, by @robtarr

    View full-size slide

  44. Fallbacks are worth it

    View full-size slide

  45. Off Canvas with no-js

    View full-size slide

  46. Most users don’t expect the trigger

    View full-size slide

  47. Can you navigate your site,
    without the navigation?

    View full-size slide

  48. Familiarity breeds usability

    View full-size slide

  49. Familiarity breeds usability

    View full-size slide

  50. Collaboration

    View full-size slide

  51. You think you’re
    awesome
    Others know

    you’re awesome

    View full-size slide

  52. You think you’re
    awesome
    Others know

    you’re awesome
    Collaboration

    View full-size slide

  53. I cannot do timeless

    work on my own

    View full-size slide

  54. You cannot do timeless

    work on your own

    View full-size slide

  55. Design without testing is guesswork
    You & Your Client
    You & Your Users

    View full-size slide

  56. You & your client working without

    your users is guesswork
    Design without testing is guesswork

    View full-size slide

  57. Collaborate


    Not just with your client,
    but also with real users

    View full-size slide

  58. @bencallahan
    THANKS!
    Thanks to Ryann Pierce and Jeremy Loyd for help with the wireframes used in this presentation.

    View full-size slide