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
550
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
74
Design System Culture
bencallahan
2
180
Building a Human-Centered Culture
bencallahan
2
860
Lessons Learned
bencallahan
0
180
Letting Go of Workflow Baggage
bencallahan
5
1.2k
Small Screen Navigation: Front-End Design Conference, Portland, 2014
bencallahan
16
1k
Small Screen Navigation: ConvergeSE, 2014
bencallahan
1
600
Workflow on RWD Projects
bencallahan
10
2.2k
Dissecting Design
bencallahan
5
1.3k
Other Decks in Design
See All in Design
デザイナーの帽子をかぶったわたしが、プロダクト開発するうえでスクラムチームに提供したいこと / what I want to provide to Scrum teams when developing products
hiromitsuuuuu
14
5.3k
改正障害者差別解消法の概要説明
securecat
0
110
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
5
25k
ダークテーマとアクセシビリティ の融合したカラートークンの設計
degudegu2510
0
330
生成AIのデザイン活用
asakohs
0
160
良いアプリケーションをデザインするための感覚の持ち方 / Cultivating a Sense for Designing Great Applications
usagimaru
23
8.7k
Shinjuku.rb #91 好きなもの紹介LT大会 "便利"や"役に立つ"とは別方面のRubyをつかったプログラミングがたのしい話
bash0c7
0
110
最速で価値を届けるUXリサーチ
degudegu2510
1
560
速攻で価値検証して無駄なものを作らないプロダクトデザイン
cremacrema
3
200
For My Dad- teaser
pdqsketch
PRO
0
130
デザイナー採用 3社目で学び中のこと / Learnings of Designer Recruitment | Yasuhiro Yokota
yasuhiroyokota
1
1.2k
Product-Writing
aguringo
6
2.9k
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
23
1.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
27
2.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
19
1.7k
Designing Experiences People Love
moore
136
23k
The Invisible Side of Design
smashingmag
294
50k
What’s in a name? Adding method to the madness
productmarketing
PRO
18
2.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
Principles of Awesome APIs and How to Build Them.
keavy
122
16k
Optimizing for Happiness
mojombo
372
69k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
188
16k
Embracing the Ebb and Flow
colly
80
4.2k
Building a Scalable Design System with Sketch
lauravandoore
457
32k
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.