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: BD Conf: Nashville, 2014
Search
Ben Callahan
July 30, 2014
Design
7
670
Small Screen Navigation: BD Conf: Nashville, 2014
Deck from my presentation on small screen navigation at BD Conf in Nashville, 2014.
Ben Callahan
July 30, 2014
Tweet
Share
More Decks by Ben Callahan
See All by Ben Callahan
Design System Culture (Smashing Meets, 2022)
bencallahan
3
110
Design System Culture
bencallahan
2
220
Building a Human-Centered Culture
bencallahan
2
1.1k
Lessons Learned
bencallahan
0
230
Letting Go of Workflow Baggage
bencallahan
5
1.3k
Small Screen Navigation: Front-End Design Conference, Portland, 2014
bencallahan
16
1.2k
Small Screen Navigation: ConvergeSE, 2014
bencallahan
1
640
Workflow on RWD Projects
bencallahan
10
2.3k
Dissecting Design
bencallahan
5
1.4k
Other Decks in Design
See All in Design
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
620
生成AIを活用した組み込みSW設計書検索システム開発
licux
7
1.3k
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
lycorptech_jp
PRO
0
330
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
330
【30人中30人が3ヶ月平均180万収入アップ】マズロー安達の弟子、成功事例集
maslow_akkun
0
200
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
360
株式会社バクタム 会社説明資料
bactum
0
280
新卒の目から見たサイボウズのデザイン組織
ryota5884
0
130
PF_濵村ひろみ_202503
maru_design78
0
210
harutaka Vision Deck
zenkigenforrecruit
0
180
AI動画生成ガチャ紹介
piyo7
1
170
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
600
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
GraphQLとの向き合い方2022年版
quramy
49
14k
The Cult of Friendly URLs
andyhume
79
6.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.7k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Automating Front-end Workflow
addyosmani
1370
200k
Scaling GitHub
holman
461
140k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Why Our Code Smells
bkeepers
PRO
337
57k
Transcript
@bencallahan SMALL SCREEN NAVIGATION
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
None
None
None
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: PAGING
Interaction Patterns ‣ List ‣ Accordion ‣ Paging
A Taxonomy ‣ Trigger Indicators ‣ Reveal Patterns ! ‣
Interaction Indicators ‣ Interaction Patterns
So, what can we learn from all of this?
Content
Content
Content First
Make sure you’re building the right navigation
None
Complex Architecture
Complex Architecture
Priority
None
None
None
None
Priority
None
Priority
Priority
Focus
Focus
Behavior
Multi Open
Single Open
Single Open
Auto Scroll
JavaScript
Strive for a single DOM
mediaCheck, by @robtarr
Fallbacks are worth it
Off Canvas with no-js
Usability
Most users don’t expect the trigger
Can you navigate your site, without the navigation?
Teach Use
Familiarity breeds usability
Familiarity breeds usability
Collaborate
None
None
None
I cannot do timeless work on my own
You cannot do timeless work on your own
Our Teams Our Clients Our Users Timeless Work +
Design without testing is guesswork You & Your Client You
& Your Users
You & your client working without your users is guesswork
Design without testing is guesswork
Put your work in front of real users
@bencallahan THANKS! Thanks to Ryann Pierce and Jeremy Loyd for
help with the wireframes used in this presentation.