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
600
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
79
Design System Culture
bencallahan
2
180
Building a Human-Centered Culture
bencallahan
2
880
Lessons Learned
bencallahan
0
190
Letting Go of Workflow Baggage
bencallahan
5
1.2k
Small Screen Navigation: Front-End Design Conference, Portland, 2014
bencallahan
16
1k
Small Screen Navigation: BD Conf: Nashville, 2014
bencallahan
7
560
Workflow on RWD Projects
bencallahan
10
2.2k
Dissecting Design
bencallahan
5
1.4k
Other Decks in Design
See All in Design
みんなでブラッシュアップするDesign Sprint_BASE BANKチームの場合
base
PRO
3
330
アクセシビリティのはじめかた デザイナー編
tokimari
2
750
Ubie Vitalsの取り組み紹介
8845musign
0
590
ダークテーマとアクセシビリティ の融合したカラートークンの設計
degudegu2510
0
370
速攻で価値検証して無駄なものを作らないプロダクトデザイン
cremacrema
3
320
Mitra Manual
nnidhz
0
140
User Experience Design für Entwickler
joergneumann
4
910
興味関心と組織とリサーチ #ResearchConf / 20240419
minamitary
1
130
アクセシビリティって何だろう? -アクセシビリティの概念、そして向き合い方まで-
securecat
5
930
IPの世界観に寄り添う、マルチブランドなカラーシステム設計
jirosh1998
1
9.6k
Information Architects: The Missing Link in Design Systems
soysaucechin
0
190
Another works Brand Guidelines
designdoor
0
100
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
24
1.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
360
22k
How to train your dragon (web standard)
notwaldorf
79
5.5k
How GitHub Uses GitHub to Build GitHub
holman
471
290k
Navigating Team Friction
lara
181
13k
The Illustrated Children's Guide to Kubernetes
chrisshort
39
47k
RailsConf 2023
tenderlove
16
720
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
16
1.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
262
13k
Unsuck your backbone
ammeep
666
57k
Facilitating Awesome Meetings
lara
46
5.8k
Thoughts on Productivity
jonyablonski
64
4.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