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

Fe8510ee8e06c36d02799dbf8f934b9c?s=47 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

Fe8510ee8e06c36d02799dbf8f934b9c?s=128

Ben Callahan

August 22, 2014
Tweet

Transcript

  1. 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
  2. 10.
  3. 11.
  4. 12.
  5. 13.

    A Taxonomy ‣ Trigger Indicators ‣ Reveal Patterns ! ‣

    Interaction Indicators ‣ Interaction Patterns
  6. 16.

    Trigger Indicators ‣ Words ‣ menu, main menu ‣ nav,

    navigation ‣ site specific
 (sections, topics,
 products, etc.) ‣ Icons ‣ plus ‣ hamburger ‣ arrows ‣ “x”
  7. 20.

    Trigger Indicators ‣ Words ‣ menu, main menu ‣ nav,

    navigation ‣ site specific
 (sections, topics,
 products, etc.) ‣ Icons ‣ plus ‣ hamburger ‣ arrows ‣ “x”
  8. 22.

    Reveal Patterns ‣ Always Available ‣ Anchor to Footer ‣

    Select Element ‣ Make Room ‣ Cover Up ‣ Off Canvas ‣ Priority + ‣ Full Screen Takeover
  9. 33.

    Reveal Patterns ‣ Always Available ‣ Anchor to Footer ‣

    Select Element ‣ Make Room ‣ Cover Up ‣ Off Canvas ‣ Priority + ‣ Full Screen Takeover
  10. 44.

    A Taxonomy ‣ Trigger Indicators ‣ Reveal Patterns ! ‣

    Interaction Indicators ‣ Interaction Patterns
  11. 50.
  12. 53.
  13. 54.
  14. 55.
  15. 56.
  16. 57.
  17. 58.
  18. 59.
  19. 60.
  20. 61.
  21. 62.
  22. 63.
  23. 64.
  24. 71.
  25. 75.
  26. 78.
  27. 84.
  28. 85.
  29. 86.
  30. 90.
  31. 92.

    @bencallahan THANKS! Thanks to Ryann Pierce and Jeremy Loyd for

    help with the wireframes used in this presentation.