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
490

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
640
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
0
140
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
5
890
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
16
740
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
7
360
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
10
1.8k
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
5
1k
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
7
650
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
6
1.9k

Other Decks in Design

See All in Design
96eec0ca2206d54f7a814b1f6359ff11?s=48 fourdigit
0
7.3k
A7c2eb7bf9bb7b9cf095bab633be58fd?s=48 chostett
0
1.5k
Cdf97a1b1b132c56582773c3ba09a3a6?s=48 rakus_dev
0
3.4k
5282a03ca032a1f9e0df70c8ef2ea39c?s=48 ujki
0
120
Cdf97a1b1b132c56582773c3ba09a3a6?s=48 rakus_dev
0
3.8k
2099cf992a688f610cf865083e50cd9d?s=48 tadaking
1
17k
9347fe838093bda2909399174501f24a?s=48 shotakugawa_meijin
0
150
B703da7cc05ce9718d63f9b2c6028ff7?s=48 visional_design
2
330
3073b37b7235574c23961dd85a519242?s=48 widsley
0
150
Eb3f099a0ad1b2f8ff9180432ab10d72?s=48 mollysart
1
310
88447dbb966c62206c23f5ffd402af3b?s=48 chuckn0risk
2
310
333282932dc4bbc5b3bef9cd172d0e8f?s=48 anilkumar
1
150

Featured

See All Featured
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
688
180k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
1352
200k
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
68
4.6k
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
405
20k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
195
9.1k
5f83ef806155b403c3393160ce51f955?s=48 jlugia
219
16k
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
11
1.3k
C1daf20e5c49ff910745198ef9869ac2?s=48 hatefulcrawdad
259
17k
5b9fe87ec1faa67a4599782930f45ec9?s=48 sstephenson
149
12k
A16eb159db895e3b01d3dc95767ad595?s=48 jonyablonski
40
2k
4394ceb8b277f35ee3da7030384efb5d?s=48 davidbonilla
75
3.8k
2f5463832ccb768ccb4a1ca3607c27ef?s=48 jacobian
263
20k

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