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

Small Screen Navigation: BD Conf: Nashville, 2014

Fe8510ee8e06c36d02799dbf8f934b9c?s=47 Ben Callahan
July 30, 2014
Design
7
380

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

More Decks by Ben Callahan

See All by Ben Callahan
Building a Human-Centered Culture
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
2
660
Lessons Learned
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
0
140
Letting Go of Workflow Baggage
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
5
920
Small Screen Navigation: Front-End Design Conference, Portland, 2014
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
16
760
Small Screen Navigation: ConvergeSE, 2014
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
1
500
Workflow on RWD Projects
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
10
1.9k
Dissecting Design
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
5
1.1k
Build Responsively, 2013, Artifact, Providence, RI
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
7
660
Prototyping Style, 2013, Breaking Development Nashville
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
6
2k

Other Decks in Design

See All in Design
Nel: A Limbo Odessy
2e1491e2d31d39a7daaf76c62a5305ec?s=48 educe_art
0
150
A_Yajima
F0599a99680784b73c427e0e2df14ae6?s=48 a_yajima
1
4.6k
ujeza_final.pdf
5282a03ca032a1f9e0df70c8ef2ea39c?s=48 ujki
0
680
デザインシステムチームの「身内」を増やす取り組み / Design Study Morning #07
A6679d91db1449741ed55c061f981b02?s=48 numata
0
360
品質向上を目指す開発組織のデザインレビュー / SmartHR
381ea09c5a26fb7d63ddfc3ccb1d746b?s=48 kgsi
3
1.7k
Untitled (Baseball)
3d895659a74acee6d37b3674f6f7b650?s=48 heewon
2
210
やさしいBacklogの使い方
Ff18a27b908029695ca70b144d42e3ba?s=48 wattlaa
2
410
ZENKIGEN Designについて
79f0cb7dbd41a861cfd94dc13ce879e8?s=48 yonekura907
0
610
My Yahoo Refresh Overview
Dc9d3d8370a9655046689bfb5a8c086d?s=48 xuechunwu
0
260
UX Research for Internal Enterprise Tools
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
2
720
ダークモード対応に困ったときの便利な処方箋 / Color scheme for dark mode
6e6c7132d99fd8febb2193fd21809d20?s=48 featherplain
2
460
アンドパッドのデザインシステムの今までとこれから
98616aa6b83a1cd3f1c7d22e2e1ad526?s=48 sizucca
2
1.2k

Featured

See All Featured
The Art of Programming - Codeland 2020
719435d98d452de7ac367c828266cf01?s=48 erikaheidi
31
5.8k
YesSQL, Process and Tooling at Scale
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
157
12k
The Straight Up "How To Draw Better" Workshop
Aff5641764408271f7bc398f2097edd0?s=48 denniskardys
225
120k
The Invisible Side of Design
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
289
48k
Facilitating Awesome Meetings
245cee81a9c424266e5e401d844ea881?s=48 lara
29
3.9k
How GitHub (no longer) Works
78b475797a14c84799063c7cd073962f?s=48 holman
296
140k
VelocityConf: Rendering Performance Case Studies
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
316
22k
JavaScript: Past, Present, and Future - NDC Porto 2020
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
37
3.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
7
1k
What's new in Ruby 2.0
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
336
30k
The Invisible Customer
4262b9cfacfb6b2c77f23e1d0310cd3e?s=48 myddelton
110
11k
Rebuilding a faster, lazier Slack
C0b42577cfc2b321be3474618107e933?s=48 samanthasiow
62
7.2k

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.