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
620
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
97
Design System Culture
bencallahan
2
200
Building a Human-Centered Culture
bencallahan
2
990
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.1k
Small Screen Navigation: BD Conf: Nashville, 2014
bencallahan
7
640
Workflow on RWD Projects
bencallahan
10
2.3k
Dissecting Design
bencallahan
5
1.4k
Other Decks in Design
See All in Design
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
1.6k
マンガで分かるサービスデザインガイドライン
senryakuka
1
640
Tableau曲線表現講座(2024.11.21)
cielo1985
0
260
一人ひとりのポテンシャルを活かしたナレッジマネジメントとは?
atsushihomma
0
360
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
4
3.7k
【デザイン初め新年会2025|01.08】事業貢献するデザイン組織の挑戦 - 2025年、課題解決をリードする。
payatsusan213
0
9.4k
私たちは、世界とデザインの〝次の一歩〟を、どこへ向けるか。
tkhr_kws
2
290
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
390
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜
tak073
0
250
共通言語としてのデザイントークンと Figmaでの運用
kamy0042
0
240
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
1.6k
Дизайн услуги через её визуализацию с Картой процесса-опыта
ashapiro
0
240
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
Agile that works and the tools we love
rasmusluckow
328
21k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
9
500
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Navigating Team Friction
lara
183
15k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
The World Runs on Bad Software
bkeepers
PRO
67
11k
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