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

Small Screen Navigation: ConvergeSE, 2014

Avatar for Ben Callahan Ben Callahan
May 02, 2014
Design
1
660

Small Screen Navigation: ConvergeSE, 2014

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

Avatar for Ben Callahan

Ben Callahan

May 02, 2014
Tweet

More Decks by Ben Callahan

See All by Ben Callahan
Design System Culture (Smashing Meets, 2022)
Avatar for Ben Callahan bencallahan
3
130
Design System Culture
Avatar for Ben Callahan bencallahan
2
250
Building a Human-Centered Culture
Avatar for Ben Callahan bencallahan
2
1.2k
Lessons Learned
Avatar for Ben Callahan bencallahan
0
250
Letting Go of Workflow Baggage
Avatar for Ben Callahan bencallahan
5
1.4k
Small Screen Navigation: Front-End Design Conference, Portland, 2014
Avatar for Ben Callahan bencallahan
16
1.2k
Small Screen Navigation: BD Conf: Nashville, 2014
Avatar for Ben Callahan bencallahan
7
740
Workflow on RWD Projects
Avatar for Ben Callahan bencallahan
10
2.4k
Dissecting Design
Avatar for Ben Callahan bencallahan
5
1.5k

Other Decks in Design

See All in Design
Goodpatch Tour💙 / We are hiring!
Avatar for Goodpatch Inc. goodpatch
31
1M
AIネイティブスタートアップにおけるプロダクト開発の新常識 / Product Development Tips in AI-Native Startups
Avatar for Jumpei Sakatsu saka2jp
2
1k
AIスライドデザインを生成する仕組みを社内共有する
Avatar for 太田賢一 kenichiota0711
5
4.7k
Figmaレクチャー会Part1 基本のき編＠千株式会社 社内勉強会
Avatar for ぽん designer_no_pon
2
260
2026年、デザイナーはなにに賭ける？
Avatar for Kazuhiro Tobita 0b1tk
0
510
Diverse Design Team Deck
Avatar for Diverse diverse
0
830
decksh object reference
Avatar for Anthony Starks ajstarks
2
1.5k
root COMPANY DECK / We are hiring！
Avatar for 株式会社ルート root_recruit
2
26k
チームをデザイン対象にする / Design for your team
Avatar for 株式会社カミナシ kaminashi
1
750
CREATIVE CLASS受講課題｜無印良品を題材としたブランド再構築について
Avatar for satoshi kobayashi happy_ferret153
0
670
Spacemarket Brand Guide
Avatar for Spacemarket spacemarket
2
220
AI時代に必要な アイデアの形
Avatar for ux-man uxman
0
120

Featured

See All Featured
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
610
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.3k
Visualization
Avatar for Eitan Lees eitanlees
150
17k
The Illustrated Guide to Node.js - THAT Conference 2024
Avatar for David Neal reverentgeek
1
280
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
370
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1k
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
5k
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
470
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
140
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.9k
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
3
2.6k

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