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
640
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
120
Design System Culture
bencallahan
2
230
Building a Human-Centered Culture
bencallahan
2
1.1k
Lessons Learned
bencallahan
0
230
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
690
Workflow on RWD Projects
bencallahan
10
2.3k
Dissecting Design
bencallahan
5
1.4k
Other Decks in Design
See All in Design
kintone_aroma
kintone
0
250
Correspondence:共に生成していく過程
akiramotomura
0
110
不確実性の時代にみんなで試したFigma × MCP × Cursor ハンズオン
techtekt
PRO
7
1k
組織はみんなでつくる。デザイナーが仕掛ける急拡大する組織のカルチャーづくり
mkasumi
0
620
Yumika Yamada Portfolio
yumii
0
2.1k
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
4.2k
Character Experience AI 〜 AIキャラクターのつくりかた 〜
smartbank
1
380
地理院地図をもっと楽しく!れきちず新機能のご紹介
hjmkth
1
190
1年目デザイナーが実践する、チーム貢献のための2つのアプローチ
kinomidesign
0
120
数理的アプローチで挑むスマホUIのデザイン改善:タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
lycorptech_jp
PRO
0
880
「自分の仕事はどこまで?」と問い続けたら。デザイナーの「視座」を考える
mukai_takeru
0
210
第4回関東Kaggler会LT HCD-Net人間中心設計スペシャリストが語るNotebookメダルの取り方
utm529f
0
1.3k
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
303
21k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
KATA
mclloyd
PRO
32
15k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
A better future with KSS
kneath
239
18k
Making Projects Easy
brettharned
120
6.4k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
The World Runs on Bad Software
bkeepers
PRO
72
11k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Scaling GitHub
holman
463
140k
Typedesign – Prime Four
hannesfritz
42
2.8k
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