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
110
Design System Culture
bencallahan
2
220
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
670
Workflow on RWD Projects
bencallahan
10
2.3k
Dissecting Design
bencallahan
5
1.4k
Other Decks in Design
See All in Design
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
lycorptech_jp
PRO
0
490
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
2k
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
lycorptech_jp
PRO
0
330
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
360
Liquid Iron
mcduckyart
1
120
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
1.1k
UX & Accessibilité cognitive : et si vous simplifiiez vraiment l’expérience utilisateur ?
marietournelle35
0
110
CursorでAI活用のナレッジベースを構築する
kanzaki
0
500
株式会社Muture_ソーシャル推進事業
muture
PRO
0
130
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
3.1k
mento Design Team Portfolio
mento0fficial
0
500
ポートフォリオ_webデザイナー
nami_webdesigner
0
140
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Optimizing for Happiness
mojombo
379
70k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.4k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Typedesign – Prime Four
hannesfritz
42
2.7k
Six Lessons from altMBA
skipperchong
28
3.9k
What's in a price? How to price your products and services
michaelherold
246
12k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Navigating Team Friction
lara
188
15k
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