Small Screen Navigation: BD Conf: Nashville, 2014

Small Screen Navigation: BD Conf: Nashville, 2014

Deck from my presentation on small screen navigation at BD Conf in Nashville, 2014.

Fe8510ee8e06c36d02799dbf8f934b9c?s=128

Ben Callahan

July 30, 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

  47. Content

  48. Content First

  49. Make sure you’re building the right navigation

  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. mediaCheck, by @robtarr

  72. Fallbacks are worth it

  73. Off Canvas with no-js

  74. Usability

  75. Most users don’t expect the trigger

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

  77. Teach Use

  78. Familiarity breeds usability

  79. Familiarity breeds usability

  80. Collaborate

  81. None
  82. None
  83. None
  84. I cannot do timeless
 work on my own

  85. You cannot do timeless
 work on your own

  86. Our Teams
 Our Clients
 Our Users 
 Timeless Work +

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

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

    Design without testing is guesswork
  89. Put your work in front of real users

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

    help with the wireframes used in this presentation.