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. @bencallahan SMALL SCREEN
 NAVIGATION

  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. None
  11. None
  12. None
  13. A Taxonomy ‣ Trigger Indicators ‣ Reveal Patterns ! ‣

    Interaction Indicators ‣ Interaction Patterns
  14. Trigger Indicators

  15. What is a Trigger?

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

    navigation ‣ site specific
 (sections, topics,
 products, etc.) ‣ Icons ‣ plus ‣ hamburger ‣ arrows ‣ “x”
  17. TRIGGER INDICATORS Words

  18. TRIGGER INDICATORS Icons Plus Hamburger Down Arrow

  19. TRIGGER INDICATORS Other & Combinations

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

    navigation ‣ site specific
 (sections, topics,
 products, etc.) ‣ Icons ‣ plus ‣ hamburger ‣ arrows ‣ “x”
  21. Reveal Patterns

  22. Reveal Patterns ‣ Always Available ‣ Anchor to Footer ‣

    Select Element ‣ Make Room ‣ Cover Up ‣ Off Canvas ‣ Priority + ‣ Full Screen Takeover
  23. REVEAL PATTERNS: ALWAYS AVAILABLE

  24. REVEAL PATTERNS: ANCHOR TO FOOTER

  25. REVEAL PATTERNS: SELECT ELEMENT

  26. iOS 7 REVEAL PATTERNS: SELECT ELEMENT

  27. REVEAL PATTERNS: SELECT ELEMENT Chrome on OS X

  28. REVEAL PATTERNS: MAKE ROOM

  29. REVEAL PATTERNS: COVER UP

  30. REVEAL PATTERNS: OFF CANVAS

  31. REVEAL PATTERNS: PRIORITY +

  32. REVEAL PATTERNS: FULL SCREEN TAKEOVER

  33. Reveal Patterns ‣ Always Available ‣ Anchor to Footer ‣

    Select Element ‣ Make Room ‣ Cover Up ‣ Off Canvas ‣ Priority + ‣ Full Screen Takeover
  34. Interaction Indicators

  35. INTERACTION INDICATORS Icons

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

    ‣ various arrows
  37. Interaction Patterns

  38. Interaction Patterns ‣ List ‣ Accordion ‣ Paging

  39. INTERACTION PATTERNS: LIST

  40. INTERACTION PATTERNS: ACCORDION

  41. INTERACTION PATTERNS: PAGING

  42. INTERACTION PATTERNS: PAGING

  43. Interaction Patterns ‣ List ‣ Accordion ‣ Paging

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

    Interaction Indicators ‣ Interaction Patterns
  45. So, what can we learn from all of this?

  46. Content First

  47. Content First

  48. Make sure you’re building the right navigation

  49. Complex Architecture

  50. None
  51. Complex Architecture

  52. Complex Architecture

  53. Priority

  54. None
  55. None
  56. None
  57. None
  58. Priority

  59. None
  60. Priority

  61. Priority

  62. Focus

  63. Focus

  64. Behavior

  65. Multi Open

  66. Single Open

  67. Single Open

  68. Auto Scroll

  69. JavaScript

  70. Strive for a single DOM

  71. None
  72. mediaCheck, by @robtarr

  73. Fallbacks are worth it

  74. Off Canvas with no-js

  75. Usability

  76. Most users don’t expect the trigger

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

  78. Teach Use

  79. Familiarity breeds usability

  80. Familiarity breeds usability

  81. Collaboration

  82. You think you’re awesome Others know
 you’re awesome

  83. You think you’re awesome Others know
 you’re awesome Collaboration

  84. None
  85. None
  86. None
  87. I cannot do timeless
 work on my own

  88. You cannot do timeless
 work on your own

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

    & Your Users
  90. You & your client working without
 your users is guesswork

    Design without testing is guesswork
  91. Collaborate
 
 Not just with your client, but also with

    real users
  92. @bencallahan THANKS! Thanks to Ryann Pierce and Jeremy Loyd for

    help with the wireframes used in this presentation.