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 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. View Slide

  11. View Slide

  12. View Slide

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

    View Slide

  14. Trigger Indicators

    View Slide

  15. What is a Trigger?

    View Slide

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

    (sections, topics,

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

    View Slide

  17. TRIGGER INDICATORS
    Words

    View Slide

  18. TRIGGER INDICATORS
    Icons
    Plus Hamburger Down Arrow

    View Slide

  19. TRIGGER INDICATORS
    Other & Combinations

    View Slide

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

    (sections, topics,

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

    View Slide

  21. Reveal Patterns

    View Slide

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

    View Slide

  23. REVEAL PATTERNS: ALWAYS AVAILABLE

    View Slide

  24. REVEAL PATTERNS: ANCHOR TO FOOTER

    View Slide

  25. REVEAL PATTERNS: SELECT ELEMENT

    View Slide

  26. iOS 7
    REVEAL PATTERNS: SELECT ELEMENT

    View Slide

  27. REVEAL PATTERNS: SELECT ELEMENT
    Chrome on OS X

    View Slide

  28. REVEAL PATTERNS: MAKE ROOM

    View Slide

  29. REVEAL PATTERNS: COVER UP

    View Slide

  30. REVEAL PATTERNS: OFF CANVAS

    View Slide

  31. REVEAL PATTERNS: PRIORITY +

    View Slide

  32. REVEAL PATTERNS: FULL SCREEN TAKEOVER

    View Slide

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

    View Slide

  34. Interaction Indicators

    View Slide

  35. INTERACTION INDICATORS
    Icons

    View Slide

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

    View Slide

  37. Interaction Patterns

    View Slide

  38. Interaction Patterns
    ‣ List
    ‣ Accordion
    ‣ Paging

    View Slide

  39. INTERACTION PATTERNS: LIST

    View Slide

  40. INTERACTION PATTERNS: ACCORDION

    View Slide

  41. INTERACTION PATTERNS: PAGING

    View Slide

  42. INTERACTION PATTERNS: PAGING

    View Slide

  43. Interaction Patterns
    ‣ List
    ‣ Accordion
    ‣ Paging

    View Slide

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

    View Slide

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

    View Slide

  46. Content First

    View Slide

  47. Content First

    View Slide

  48. Make sure you’re building
    the right navigation

    View Slide

  49. Complex Architecture

    View Slide

  50. View Slide

  51. Complex Architecture

    View Slide

  52. Complex Architecture

    View Slide

  53. Priority

    View Slide

  54. View Slide

  55. View Slide

  56. View Slide

  57. View Slide

  58. Priority

    View Slide

  59. View Slide

  60. Priority

    View Slide

  61. Priority

    View Slide

  62. Focus

    View Slide

  63. Focus

    View Slide

  64. Behavior

    View Slide

  65. Multi Open

    View Slide

  66. Single Open

    View Slide

  67. Single Open

    View Slide

  68. Auto Scroll

    View Slide

  69. JavaScript

    View Slide

  70. Strive for a single DOM

    View Slide

  71. View Slide

  72. mediaCheck, by @robtarr

    View Slide

  73. Fallbacks are worth it

    View Slide

  74. Off Canvas with no-js

    View Slide

  75. Usability

    View Slide

  76. Most users don’t expect the trigger

    View Slide

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

    View Slide

  78. Teach Use

    View Slide

  79. Familiarity breeds usability

    View Slide

  80. Familiarity breeds usability

    View Slide

  81. Collaboration

    View Slide

  82. You think you’re
    awesome
    Others know

    you’re awesome

    View Slide

  83. You think you’re
    awesome
    Others know

    you’re awesome
    Collaboration

    View Slide

  84. View Slide

  85. View Slide

  86. View Slide

  87. I cannot do timeless

    work on my own

    View Slide

  88. You cannot do timeless

    work on your own

    View Slide

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

    View Slide

  90. You & your client working without

    your users is guesswork
    Design without testing is guesswork

    View Slide

  91. Collaborate


    Not just with your client,
    but also with real users

    View Slide

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

    View Slide