Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Small Screen Navigation: ConvergeSE, 2014
Ben Callahan
May 02, 2014
Design
1
530
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
2
26
Design System Culture
bencallahan
1
53
Building a Human-Centered Culture
bencallahan
2
710
Lessons Learned
bencallahan
0
150
Letting Go of Workflow Baggage
bencallahan
5
1k
Small Screen Navigation: Front-End Design Conference, Portland, 2014
bencallahan
16
820
Small Screen Navigation: BD Conf: Nashville, 2014
bencallahan
7
430
Workflow on RWD Projects
bencallahan
10
2k
Dissecting Design
bencallahan
5
1.2k
Other Decks in Design
See All in Design
プロダクトマネジメントと人間中心設計 - デザイナーからPMへのキャリアシフト -
hiromasa_yoshikawa
1
960
Pancharevo Lake
kignato1
0
490
DMMオンラインサロン UI・UXデザイナー採用資料/ for-UI・UX-designers
onlinesalon
0
120
ARコンテンツの考え方 - クリエイターでなくても「おもしろい」ARコンテンツを制作したい!
1901drama
0
330
Cleaning Kimba's Eyes
kignato1
0
500
Kurashiru Brand Guideline
delyinc
0
2.8k
toB SaaS開発におけるUXライティング|あつまるデザナレ2022
aguringo
4
990
i3DESIGN_Culture_Book / for Designer
i3design
0
7.4k
Finnegan Tester Pilot
joehealey
0
350
リサーチの前に詩を描く
hiranotomoki
0
560
Upper Hand
ruthbaraz
PRO
1
840
noteが目指す創作をつづけるためのエモーショナルデザイン
yumatsushita
0
3.6k
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
65
7.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
500
130k
Fireside Chat
paigeccino
16
1.8k
Designing Experiences People Love
moore
130
22k
Facilitating Awesome Meetings
lara
33
4.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
318
19k
Support Driven Design
roundedbygravity
88
8.9k
Code Reviewing Like a Champion
maltzj
508
38k
Thoughts on Productivity
jonyablonski
49
2.7k
Into the Great Unknown - MozCon
thekraken
2
280
Building Your Own Lightsaber
phodgson
96
4.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
6
4.5k
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