Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Small Screen Navigation: ConvergeSE, 2014
Search
Ben Callahan
May 02, 2014
Design
1
630
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
Share
More Decks by Ben Callahan
See All by Ben Callahan
Design System Culture (Smashing Meets, 2022)
bencallahan
3
110
Design System Culture
bencallahan
2
220
Building a Human-Centered Culture
bencallahan
2
1k
Lessons Learned
bencallahan
0
220
Letting Go of Workflow Baggage
bencallahan
5
1.3k
Small Screen Navigation: Front-End Design Conference, Portland, 2014
bencallahan
16
1.2k
Small Screen Navigation: BD Conf: Nashville, 2014
bencallahan
7
670
Workflow on RWD Projects
bencallahan
10
2.3k
Dissecting Design
bencallahan
5
1.4k
Other Decks in Design
See All in Design
Cyber Heart Online Book
hjnasby
0
120
harutaka Vision Deck
zenkigenforrecruit
0
140
AI動画生成ガチャ紹介
piyo7
1
120
株式会社バクタム 会社説明資料
bactum
0
250
“使いやすい”が生産性を変える!業務を効率化するためのUX/UI設計ポイント
ncdc
2
400
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
280
【最新】マズロー安達の弟子実績(1期-4期の26人分)
maslow_akkun
0
320
今日から意識できるアクセシビリティ
fumiko
0
250
BPStudy#213〜ビジネスアナリシスとDDD(ドメイン駆動設計)パネルディスカッション資料 / BPStudy213-panel
haru860
0
420
実践ゼロから作らないデザインシステム SaaS × デザインシステム × プロダクトデザイン / Efficient Design System for SaaS—no need to start from scratch.
kaminashi
2
1.7k
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.3k
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.6k
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Producing Creativity
orderedlist
PRO
346
40k
How STYLIGHT went responsive
nonsquared
100
5.6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Scaling GitHub
holman
459
140k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Speed Design
sergeychernyshev
32
1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Code Reviewing Like a Champion
maltzj
524
40k
Transcript
SMALL SCREEN NAVIGATION @bencallahan
The Maze
amazon.com
amazon.com
amazon.com
amazon.com
amazon.com
amazon.com
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
A Taxonomy ‣ Trigger Indicators ‣ Reveal Patterns ! ‣
Interaction Indicators ‣ Interaction Patterns
Trigger Indicators
What is a Trigger?
Trigger Indicators ‣ Words ‣ menu, main menu ‣ nav,
navigation ‣ site specific (sections, topics, products, etc.) ‣ Icons ‣ plus ‣ hamburger ‣ arrows ‣ “x”
TRIGGER INDICATORS Words
TRIGGER INDICATORS Icons Plus Hamburger Down Arrow
TRIGGER INDICATORS Other & Combinations
Trigger Indicators ‣ Words ‣ menu, main menu ‣ nav,
navigation ‣ site specific (sections, topics, products, etc.) ‣ Icons ‣ plus ‣ hamburger ‣ arrows ‣ “x”
Reveal Patterns
Reveal Patterns ‣ Always Available ‣ Anchor to Footer ‣
Select Element ‣ Make Room ‣ Cover Up ‣ Off Canvas ‣ Priority + ‣ Full Screen Takeover
REVEAL PATTERNS: ALWAYS AVAILABLE
REVEAL PATTERNS: ANCHOR TO FOOTER
REVEAL PATTERNS: SELECT ELEMENT
iOS 7 REVEAL PATTERNS: SELECT ELEMENT
REVEAL PATTERNS: SELECT ELEMENT Chrome on OS X
REVEAL PATTERNS: MAKE ROOM
REVEAL PATTERNS: COVER UP
REVEAL PATTERNS: OFF CANVAS
REVEAL PATTERNS: PRIORITY +
REVEAL PATTERNS: FULL SCREEN TAKEOVER
Reveal Patterns ‣ Always Available ‣ Anchor to Footer ‣
Select Element ‣ Make Room ‣ Cover Up ‣ Off Canvas ‣ Priority + ‣ Full Screen Takeover
Interaction Indicators
INTERACTION INDICATORS Icons
Interaction Indicators ‣ Icons ‣ plus ‣ dash ‣ “x”
‣ various arrows
Interaction Patterns
Interaction Patterns ‣ List ‣ Accordion ‣ Paging
INTERACTION PATTERNS: LIST
INTERACTION PATTERNS: ACCORDION
INTERACTION PATTERNS: PAGING
Interaction Patterns ‣ List ‣ Accordion ‣ Paging
Takeaways
Takeaways ‣ Architecture ‣ Focus ‣ Behavior ‣ JavaScript ‣
Usability ‣ Prioritization
TAKEAWAYS: ARCHITECTURE
TAKEAWAYS: ARCHITECTURE
TAKEAWAYS: FOCUS
TAKEAWAYS: BEHAVIOR Multi Open
TAKEAWAYS: BEHAVIOR Single Open
TAKEAWAYS: BEHAVIOR Single Open
Auto Scroll TAKEAWAYS: BEHAVIOR
Takeaways ‣ JavaScript ‣ Visible by Default ‣ Anchor to
Footer ‣ Single DOM
mediaCheck, by @robtarr
Takeaways ‣ Usability ‣ User Expectations ‣ Plan for the
Worst ‣ Teach Use
Prioritization
Prioritization
Prioritization
Prioritization
Prioritization
Prioritization
If you’re going to make a website, you better make
it easy to get to the content.
THANKS! @bencallahan