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
460

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
580
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
0
130
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
5
810
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
16
680
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
7
290
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
10
1.7k
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
5
950
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
7
590
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
6
1.8k

Other Decks in Design

See All in Design
6fb7917b139f230be10efc1ab096e2f9?s=48 kadeshserpent
1
110
23dd78a6a0b27e29deb81748bf69b715?s=48 vonmuren
0
110
B2b4bfd5f5d18c580b79fc2f9340335b?s=48 joshkgong
0
130
5481f706b4bfeb0569b1f759b528f6e2?s=48 sahinairvin
2
270
D38056617929476906141e6a157e0045?s=48 letsgokoyo
0
280
118c8601b7c0f4077dcf99882dcc1c14?s=48 marilutwin
0
250
2016ba6b977a2e6691811fa66d5f4336?s=48 cyberagentdevelopers
PRO
1
230
04d38bf39f0dd32f92b1e4624b055eec?s=48 lac4
0
130
8ba8bdc8f653a517ed8c300fbec98f15?s=48 drthdan16
0
320
2016ba6b977a2e6691811fa66d5f4336?s=48 cyberagentdevelopers
PRO
0
940
D38056617929476906141e6a157e0045?s=48 letsgokoyo
0
130
C2a16ba70afd34ab38617bcc6663b997?s=48 rachelgreenart
0
200

Featured

See All Featured
9375a9529679f1b42b567a640d775e7d?s=48 schacon
147
6.7k
Be9caeb9d4ef9944d151af909063ed6e?s=48 samlambert
237
10k
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
56
5.5k
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
267
17k
245cee81a9c424266e5e401d844ea881?s=48 lara
591
61k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
780
240k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
499
130k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
683
180k
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
332
16k
A9704266587836f7e784235e5073b93e?s=48 jmmastey
14
800
7c8469ee8c9e594c65c59b919626c08d?s=48 scottboms
252
11k
15f2b8221f247985a27a627d2ece72f0?s=48 pauljervisheath
194
15k

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