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

Small Screen Navigation: ConvergeSE, 2014

Ben Callahan
May 02, 2014
Design
1
530

Small Screen Navigation: ConvergeSE, 2014

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

Ben Callahan

May 02, 2014
Tweet

More Decks by Ben Callahan

See All by Ben Callahan
Design System Culture (Smashing Meets, 2022)
bencallahan
2
26
Design System Culture
bencallahan
1
53
Building a Human-Centered Culture
bencallahan
2
710
Lessons Learned
bencallahan
0
150
Letting Go of Workflow Baggage
bencallahan
5
1k
Small Screen Navigation: Front-End Design Conference, Portland, 2014
bencallahan
16
820
Small Screen Navigation: BD Conf: Nashville, 2014
bencallahan
7
430
Workflow on RWD Projects
bencallahan
10
2k
Dissecting Design
bencallahan
5
1.2k

Other Decks in Design

See All in Design
プロダクトマネジメントと人間中心設計 - デザイナーからPMへのキャリアシフト -
hiromasa_yoshikawa
1
960
Pancharevo Lake
kignato1
0
490
DMMオンラインサロン UI･UXデザイナー採用資料/ for-UI･UX-designers
onlinesalon
0
120
ARコンテンツの考え方 - クリエイターでなくても「おもしろい」ARコンテンツを制作したい！
1901drama
0
330
Cleaning Kimba's Eyes
kignato1
0
500
Kurashiru Brand Guideline
delyinc
0
2.8k
toB SaaS開発におけるUXライティング｜あつまるデザナレ2022
aguringo
4
990
i3DESIGN_Culture_Book / for Designer
i3design
0
7.4k
Finnegan Tester Pilot
joehealey
0
350
リサーチの前に詩を描く
hiranotomoki
0
560
Upper Hand
ruthbaraz
PRO
1
840
noteが目指す創作をつづけるためのエモーショナルデザイン
yumatsushita
0
3.6k

Featured

See All Featured
Adopting Sorbet at Scale
ufuk
65
7.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
500
130k
Fireside Chat
paigeccino
16
1.8k
Designing Experiences People Love
moore
130
22k
Facilitating Awesome Meetings
lara
33
4.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
318
19k
Support Driven Design
roundedbygravity
88
8.9k
Code Reviewing Like a Champion
maltzj
508
38k
Thoughts on Productivity
jonyablonski
49
2.7k
Into the Great Unknown - MozCon
thekraken
2
280
Building Your Own Lightsaber
phodgson
96
4.9k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
6
4.5k

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