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
93
Design System Culture
bencallahan
2
200
Building a Human-Centered Culture
bencallahan
2
950
Lessons Learned
bencallahan
0
210
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
620
Workflow on RWD Projects
bencallahan
10
2.3k
Dissecting Design
bencallahan
5
1.4k
Other Decks in Design
See All in Design
Slip N Slime - Character Design Ideation
thebogheart
0
340
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 移動・不動産領域の取り組み
tmtgtkhs
0
170
Where to Start with a Design System Across Different Frontend Frameworks | SpectrumTokyoMeetup#15
tararira
0
100
デザイナーのマネジメント職、 身構えずにやっていこう
fumink7
0
610
一人ひとりのポテンシャルを活かしたナレッジマネジメントとは?
atsushihomma
0
320
1年目のクリエイターがつくりあげた!採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
410
PMとデザイナーはニコイチ! メリットと具体的なアクション10選
mosmos_noki
2
1.3k
Yahoo Newsletter Clicker Template
xuechunwu
0
300
Goodpatch Tour💙 / We are hiring!
goodpatch
31
780k
プロダクトデザイナー視点から見た チームでの意思決定の難しさと 重要ポイント3点
kei141
0
540
Managing Design Systems (Smashing NY 2024)
nathanacurtis
2
350
ピクシブにおける「ビジョン」の取り扱われ方 #pixivdevmeetup / 20240920
minamitary
1
1.7k
Featured
See All Featured
Building Applications with DynamoDB
mza
92
6.1k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Documentation Writing (for coders)
carmenintech
67
4.5k
Designing on Purpose - Digital PM Summit 2013
jponch
116
7k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
How to Ace a Technical Interview
jacobian
276
23k
YesSQL, Process and Tooling at Scale
rocio
170
14k
How GitHub (no longer) Works
holman
312
140k
Statistics for Hackers
jakevdp
796
220k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3.1k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Adopting Sorbet at Scale
ufuk
74
9.1k
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