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
510
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
Building a Human-Centered Culture
bencallahan
2
670
Lessons Learned
bencallahan
0
140
Letting Go of Workflow Baggage
bencallahan
5
940
Small Screen Navigation: Front-End Design Conference, Portland, 2014
bencallahan
16
780
Small Screen Navigation: BD Conf: Nashville, 2014
bencallahan
7
400
Workflow on RWD Projects
bencallahan
10
1.9k
Dissecting Design
bencallahan
5
1.1k
Build Responsively, 2013, Artifact, Providence, RI
bencallahan
7
680
Prototyping Style, 2013, Breaking Development Nashville
bencallahan
6
2k
Other Decks in Design
See All in Design
Детский парк Фили
zapoimu
0
760
CHOKOKU COMPANY DECK ver0.5 0816
naotaka
0
180
認知科学のススメ
takanorip
4
3.1k
Forget-me-not
kackington
1
220
リサーチ文化を組織に埋め込むために実践したこと
hiranotomoki
6
2.2k
サービス設計12箇条で紐解く「サービスデザイン思考」
y150saya
0
610
株式会社アジケのカルチャーデック
shusakuumemoto
0
680
Michelle Ou - Belonging in Design.
uxaustralia
PRO
1
170
2022年Webデザイントレンド総まとめ
satoshi_shimoyama
1
120
視覚障害者と探究するLSPの可能性|LEGO® SERIOUS PLAY® Coffee Chat Japan #09
keitatatakizawa
1
120
プロダクト開発に活きるUXリサーチ - 基礎編 -
shippio
3
2.6k
Nobel Finds a Staryu
innsamity
0
440
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
212
20k
The Illustrated Children's Guide to Kubernetes
chrisshort
18
40k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
151
13k
Build your cross-platform service in a week with App Engine
jlugia
219
17k
From Idea to $5000 a Month in 5 Months
shpigford
373
44k
Navigating Team Friction
lara
175
11k
The Web Native Designer (August 2011)
paulrobertlloyd
75
2k
Rails Girls Zürich Keynote
gr2m
87
12k
Why You Should Never Use an ORM
jnunemaker
PRO
47
7.7k
A Tale of Four Properties
chriscoyier
149
21k
How to train your dragon (web standard)
notwaldorf
60
3.9k
What's new in Ruby 2.0
geeforr
335
30k
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