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
510

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
Building a Human-Centered Culture
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
2
670
Lessons Learned
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
0
140
Letting Go of Workflow Baggage
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
5
940
Small Screen Navigation: Front-End Design Conference, Portland, 2014
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
16
780
Small Screen Navigation: BD Conf: Nashville, 2014
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
7
400
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
680
Prototyping Style, 2013, Breaking Development Nashville
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
6
2k

Other Decks in Design

See All in Design
Детский парк Фили
E56b3a9f8228a4274e30ae739ecca06c?s=48 zapoimu
0
760
CHOKOKU COMPANY DECK ver0.5 0816
9a9ba4a3d2391b3030e421d1f31d42d8?s=48 naotaka
0
180
認知科学のススメ
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
4
3.1k
Forget-me-not
B9f1579b53c0fd588aa685f98d97076d?s=48 kackington
1
220
リサーチ文化を組織に埋め込むために実践したこと
0c6fc884dd8b5a4e584feb6a1b615a47?s=48 hiranotomoki
6
2.2k
サービス設計12箇条で紐解く「サービスデザイン思考」
40638b9e3a098313234f358d35103735?s=48 y150saya
0
610
株式会社アジケのカルチャーデック
8faccdf30052156930edee47f9aa18db?s=48 shusakuumemoto
0
680
Michelle Ou - Belonging in Design.
Bff39f7d4e25a30fb4d28a9005de7363?s=48 uxaustralia
PRO
1
170
2022年Webデザイントレンド総まとめ
292e6e6063ab997fee2c9439dfb5de42?s=48 satoshi_shimoyama
1
120
視覚障害者と探究するLSPの可能性｜LEGO® SERIOUS PLAY® Coffee Chat Japan #09
038f436d8d55e8736cd991bf044afe6a?s=48 keitatatakizawa
1
120
プロダクト開発に活きるUXリサーチ - 基礎編 -
3bb2326963c24027cdf173579290bd6d?s=48 shippio
3
2.6k
Nobel Finds a Staryu
A2b28582eb2007b9efe661942bb29a94?s=48 innsamity
0
440

Featured

See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
212
20k
The Illustrated Children's Guide to Kubernetes
0438ae60cde4c7add6f9da48f28c15cc?s=48 chrisshort
18
40k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
5b9fe87ec1faa67a4599782930f45ec9?s=48 sstephenson
151
13k
Build your cross-platform service in a week with App Engine
5f83ef806155b403c3393160ce51f955?s=48 jlugia
219
17k
From Idea to $5000 a Month in 5 Months
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
373
44k
Navigating Team Friction
245cee81a9c424266e5e401d844ea881?s=48 lara
175
11k
The Web Native Designer (August 2011)
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
75
2k
Rails Girls Zürich Keynote
24fc194843a71f10949be18d5a692682?s=48 gr2m
87
12k
Why You Should Never Use an ORM
88bc30284c6a424b63a92aad27d0ba36?s=48 jnunemaker
PRO
47
7.7k
A Tale of Four Properties
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
149
21k
How to train your dragon (web standard)
053e75a5b48b44d6dd0612795dfb326d?s=48 notwaldorf
60
3.9k
What's new in Ruby 2.0
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
335
30k

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