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

Small Screen Navigation: ConvergeSE, 2014

Fe8510ee8e06c36d02799dbf8f934b9c?s=47 Ben Callahan
May 02, 2014
Design
1
450

Small Screen Navigation: ConvergeSE, 2014

The deck from my “Small Screen Navigation” presentation at ConvergeSE in Columbia, South Carolina.

Fe8510ee8e06c36d02799dbf8f934b9c?s=128

Ben Callahan

May 02, 2014
Tweet

More Decks by Ben Callahan

See All by Ben Callahan
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
2
540
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
0
120
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
5
790
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
16
660
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
7
280
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
10
1.7k
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
5
910
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
7
570
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
6
1.8k

Other Decks in Design

See All in Design
B896d135180958999cd053869215f3f0?s=48 ohtristanart
0
180
00ff292ab7936a0a4e4c8a76ab5b4d52?s=48 lily2251390
0
230
8ba8bdc8f653a517ed8c300fbec98f15?s=48 drthdan16
0
480
A1f12e862e83260e52dfd82a2b977741?s=48 crovellai
0
150
Dd203d9f98c50d1a9bf8348425f84362?s=48 akariinc
1
300
40baebcd09b478d3e28b5ba81df2b525?s=48 tiagilles
0
210
B896d135180958999cd053869215f3f0?s=48 ohtristanart
0
460
C66a4b0ef3d970bfbe5cc00df63804d8?s=48 polverelli
0
140
6581d0d2debbc8be5e4808cf46b4f104?s=48 kakukoki
0
540
18172da0a6a8157610116f6b2869dc86?s=48 lizbethvic
0
120
07d788425ce835a38da4ab23a537b407?s=48 gavaru
0
260
Fede7efaeed8392fef6a0931f88cc8c6?s=48 harutosuzuki
0
1.3k

Featured

See All Featured
168ccec72eee0530b818d44f3fedaacf?s=48 shlominoach
176
7.4k
7559f6cff1f5efc2d210965febd4d71c?s=48 bermonpainter
342
26k
Ecdea9b9714877b86cee08458f085481?s=48 trallard
13
640
64827b31aef81498662e8af4bd6d5157?s=48 jonrohan
1021
380k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
437
28k
7653c7c449918ff6542880a8c284f5e7?s=48 jponch
103
5k
C86443373fbfe92996aa882d0d7a59f8?s=48 imathis
478
150k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
408
57k
Aff5641764408271f7bc398f2097edd0?s=48 denniskardys
220
120k
91cefdf141106fa10674aae74ce05890?s=48 yeseniaperezcruz
302
31k
48c098b6579220a67a6ba949be6e4b5a?s=48 revolveconf
200
9.6k
F57e2136eb9895eb95ff5dc8a1c02677?s=48 zakiwarfel
88
3.3k

Transcript

  1. SMALL SCREEN NAVIGATION @bencallahan

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

    Interaction Indicators ‣ Interaction Patterns

  11. Trigger Indicators

  12. What is a Trigger?

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

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

  14. TRIGGER INDICATORS Words

  15. TRIGGER INDICATORS Icons Plus Hamburger Down Arrow

  16. TRIGGER INDICATORS Other & Combinations

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

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

  18. Reveal Patterns

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

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

  20. REVEAL PATTERNS: ALWAYS AVAILABLE

  21. REVEAL PATTERNS: ANCHOR TO FOOTER

  22. REVEAL PATTERNS: SELECT ELEMENT

  23. iOS 7 REVEAL PATTERNS: SELECT ELEMENT

  24. REVEAL PATTERNS: SELECT ELEMENT Chrome on OS X

  25. REVEAL PATTERNS: MAKE ROOM

  26. REVEAL PATTERNS: COVER UP

  27. REVEAL PATTERNS: OFF CANVAS

  28. REVEAL PATTERNS: PRIORITY +

  29. REVEAL PATTERNS: FULL SCREEN TAKEOVER

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

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

  31. Interaction Indicators

  32. INTERACTION INDICATORS Icons

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

    ‣ various arrows

  34. Interaction Patterns

  35. Interaction Patterns ‣ List ‣ Accordion ‣ Paging

  36. INTERACTION PATTERNS: LIST

  37. INTERACTION PATTERNS: ACCORDION

  38. INTERACTION PATTERNS: PAGING

  39. Interaction Patterns ‣ List ‣ Accordion ‣ Paging

  40. Takeaways

  41. Takeaways ‣ Architecture ‣ Focus ‣ Behavior ‣ JavaScript ‣

    Usability ‣ Prioritization

  42. TAKEAWAYS: ARCHITECTURE

  43. TAKEAWAYS: ARCHITECTURE

  44. TAKEAWAYS: FOCUS

  45. TAKEAWAYS: BEHAVIOR Multi Open

  46. TAKEAWAYS: BEHAVIOR Single Open

  47. TAKEAWAYS: BEHAVIOR Single Open

  48. Auto Scroll TAKEAWAYS: BEHAVIOR

  49. Takeaways ‣ JavaScript ‣ Visible by Default ‣ Anchor to

    Footer ‣ Single DOM

  50. mediaCheck, by @robtarr

  51. Takeaways ‣ Usability ‣ User Expectations ‣ Plan for the

    Worst ‣ Teach Use

  52. Prioritization

  53. Prioritization

  54. Prioritization

  55. Prioritization

  56. Prioritization

  57. Prioritization

  58. If you’re going to make a website, you better make

    it easy to get to the content.

  59. THANKS! @bencallahan