SlideShare a Scribd company logo
1 of 74
Download to read offline
1
Design for Fingers,
Touch and People
How people really hold and touch their
mobile devices
@shoobe01 #mLearnCon
2
We are outnumbered.
3
More mobiles than computers.
4
80% growth in 2013.
5
Users prefer mobile.
6
Design for mobile.
7
8
What we used to know:What we used to know:
44 px
9
But now we know for real.
10
11
1,333
19
120,626,225
651
12
13
Touch is not about
• Finger size
• Reach
• No-go corners
• Pinpoint accuracy
14
151515
161616
171717
62%
24%
9%
18
19
20
21
(3438)(l
)d
=V
22
6 pt 8 pt
23
Make your targets work.
24
• Attract the eye
• Afford action
• Readable
• The right size
25
26
Touch
27
28
29
CEP R95
29
30
31
Avoid the edges.
32
33
34
Design by zones.
35
36
FingersFingers
get in the way.
3737
3838
39
Don’t obscure your
information or functions.
40
Work at scale.
4141
42
Check at scale.
4343
4444
4545
46
10 design guidelines for fingers,
touch and people
47
1 Your users are not like you.
49%
26% 10%36%
48
2 Move content
and controls
toward the
middle.
49
4 Don’t obscure
information
50
3 Make room
for scrolling.
50
51
5 Account for distance by adjusting
size.
2.5”
3.5”
5”
7-10”
In Stand
4 pt
6 pt
7 pt
8 pt
10 pt
52
6 Whole rows,
larger touch
targets.
53
6 Whole rows,
larger touch
targets.
54
7 Design
by zones.
55
8 Make taps affordable.
56
9 Respect edges
and bezels
56
5757
10 Design, test and
demo at scale.
58
Steven Hoober
steven@4ourth.com
+1 816 210 0455
@shoobe01
shoobe01:
www.4ourth.com
59
60
4ourth.com/tppt
4ourth.com/tvid
61
Read more on design for touch,
mobile and people:
4ourth.com/wrtg
62
Appendix:
Touch technology, additonal
data, and other stuff
63
• Orientation: 60% Landscape, 40% portrait,
but… which device did you mean?
• 84% touch with the right hand.
• Age, sex, region? No perceptible changes
but…
6464
65
66
6767
68
69
Capacitive Touch
Screen
70
Proximity
Accelerometer
Gryosensor
Light color
Gesture
Cover sensor
Light level
Capacitive Touch
Screen
71
72
Programming Touch Events
7373
74
Contact me for consulting, design, to
follow up on this deck, or just to talk:
Steven Hoober
steven@4ourth.com
+1 816 210 0455
@shoobe01
shoobe01 on:
www.4ourth.com

More Related Content

What's hot

24 Design Tips from Real Designers
24 Design Tips from Real Designers24 Design Tips from Real Designers
24 Design Tips from Real DesignersEdahn Small
 
Go Viral on the Social Web: The Definitive How-To guide!
Go Viral on the Social Web: The Definitive How-To guide!Go Viral on the Social Web: The Definitive How-To guide!
Go Viral on the Social Web: The Definitive How-To guide!XPLAIN
 
How to Craft Your Company's Storytelling Voice by Ann Handley of MarketingProfs
How to Craft Your Company's Storytelling Voice by Ann Handley of MarketingProfsHow to Craft Your Company's Storytelling Voice by Ann Handley of MarketingProfs
How to Craft Your Company's Storytelling Voice by Ann Handley of MarketingProfsMarketingProfs
 
25 Need-to-Know Marketing Stats
25 Need-to-Know Marketing Stats25 Need-to-Know Marketing Stats
25 Need-to-Know Marketing Statscontently
 
Work Hacks : Body Language
Work Hacks : Body LanguageWork Hacks : Body Language
Work Hacks : Body LanguageInterQuest Group
 
The Other C Word: What makes great content marketing great
The Other C Word: What makes great content marketing greatThe Other C Word: What makes great content marketing great
The Other C Word: What makes great content marketing greatVelocity Partners
 
How I got 2.5 Million views on Slideshare (by @nickdemey - Board of Innovation)
How I got 2.5 Million views on Slideshare (by @nickdemey - Board of Innovation)How I got 2.5 Million views on Slideshare (by @nickdemey - Board of Innovation)
How I got 2.5 Million views on Slideshare (by @nickdemey - Board of Innovation)Board of Innovation
 
5 tools for an awesome presentation-By Samid Razzak
5 tools for an awesome presentation-By Samid Razzak5 tools for an awesome presentation-By Samid Razzak
5 tools for an awesome presentation-By Samid RazzakMd. Samid Razzak
 
50 Essential Content Marketing Hacks (Content Marketing World)
50 Essential Content Marketing Hacks (Content Marketing World)50 Essential Content Marketing Hacks (Content Marketing World)
50 Essential Content Marketing Hacks (Content Marketing World)Heinz Marketing Inc
 
Pitching Ideas: How to sell your ideas to others
Pitching Ideas: How to sell your ideas to othersPitching Ideas: How to sell your ideas to others
Pitching Ideas: How to sell your ideas to othersJeroen van Geel
 
Five Killer Ways to Design The Same Slide
Five Killer Ways to Design The Same SlideFive Killer Ways to Design The Same Slide
Five Killer Ways to Design The Same SlideCrispy Presentations
 
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and FriendsThe Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and FriendsStacy Kvernmo
 
The battle for attention
The battle for attentionThe battle for attention
The battle for attentionNewsworks
 
LinkedIn Influencers: How I Hire
LinkedIn Influencers: How I HireLinkedIn Influencers: How I Hire
LinkedIn Influencers: How I HireLinkedIn
 
Benefits of drinking water
Benefits of drinking waterBenefits of drinking water
Benefits of drinking waterEason Chan
 
Making Sense of Analytics
Making Sense of AnalyticsMaking Sense of Analytics
Making Sense of AnalyticsDana DiTomaso
 
10 Engagement Lessons Learned From 1 Million Survey Answers
10 Engagement Lessons Learned From 1 Million Survey Answers10 Engagement Lessons Learned From 1 Million Survey Answers
10 Engagement Lessons Learned From 1 Million Survey AnswersD B
 
[Infographic] How will Internet of Things (IoT) change the world as we know it?
[Infographic] How will Internet of Things (IoT) change the world as we know it?[Infographic] How will Internet of Things (IoT) change the world as we know it?
[Infographic] How will Internet of Things (IoT) change the world as we know it?InterQuest Group
 
WTF - Why the Future Is Up to Us - pptx version
WTF - Why the Future Is Up to Us - pptx versionWTF - Why the Future Is Up to Us - pptx version
WTF - Why the Future Is Up to Us - pptx versionTim O'Reilly
 
Why Marketing should care about Entertainment
Why Marketing should care about EntertainmentWhy Marketing should care about Entertainment
Why Marketing should care about EntertainmentWAKSTER Limited
 

What's hot (20)

24 Design Tips from Real Designers
24 Design Tips from Real Designers24 Design Tips from Real Designers
24 Design Tips from Real Designers
 
Go Viral on the Social Web: The Definitive How-To guide!
Go Viral on the Social Web: The Definitive How-To guide!Go Viral on the Social Web: The Definitive How-To guide!
Go Viral on the Social Web: The Definitive How-To guide!
 
How to Craft Your Company's Storytelling Voice by Ann Handley of MarketingProfs
How to Craft Your Company's Storytelling Voice by Ann Handley of MarketingProfsHow to Craft Your Company's Storytelling Voice by Ann Handley of MarketingProfs
How to Craft Your Company's Storytelling Voice by Ann Handley of MarketingProfs
 
25 Need-to-Know Marketing Stats
25 Need-to-Know Marketing Stats25 Need-to-Know Marketing Stats
25 Need-to-Know Marketing Stats
 
Work Hacks : Body Language
Work Hacks : Body LanguageWork Hacks : Body Language
Work Hacks : Body Language
 
The Other C Word: What makes great content marketing great
The Other C Word: What makes great content marketing greatThe Other C Word: What makes great content marketing great
The Other C Word: What makes great content marketing great
 
How I got 2.5 Million views on Slideshare (by @nickdemey - Board of Innovation)
How I got 2.5 Million views on Slideshare (by @nickdemey - Board of Innovation)How I got 2.5 Million views on Slideshare (by @nickdemey - Board of Innovation)
How I got 2.5 Million views on Slideshare (by @nickdemey - Board of Innovation)
 
5 tools for an awesome presentation-By Samid Razzak
5 tools for an awesome presentation-By Samid Razzak5 tools for an awesome presentation-By Samid Razzak
5 tools for an awesome presentation-By Samid Razzak
 
50 Essential Content Marketing Hacks (Content Marketing World)
50 Essential Content Marketing Hacks (Content Marketing World)50 Essential Content Marketing Hacks (Content Marketing World)
50 Essential Content Marketing Hacks (Content Marketing World)
 
Pitching Ideas: How to sell your ideas to others
Pitching Ideas: How to sell your ideas to othersPitching Ideas: How to sell your ideas to others
Pitching Ideas: How to sell your ideas to others
 
Five Killer Ways to Design The Same Slide
Five Killer Ways to Design The Same SlideFive Killer Ways to Design The Same Slide
Five Killer Ways to Design The Same Slide
 
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and FriendsThe Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
 
The battle for attention
The battle for attentionThe battle for attention
The battle for attention
 
LinkedIn Influencers: How I Hire
LinkedIn Influencers: How I HireLinkedIn Influencers: How I Hire
LinkedIn Influencers: How I Hire
 
Benefits of drinking water
Benefits of drinking waterBenefits of drinking water
Benefits of drinking water
 
Making Sense of Analytics
Making Sense of AnalyticsMaking Sense of Analytics
Making Sense of Analytics
 
10 Engagement Lessons Learned From 1 Million Survey Answers
10 Engagement Lessons Learned From 1 Million Survey Answers10 Engagement Lessons Learned From 1 Million Survey Answers
10 Engagement Lessons Learned From 1 Million Survey Answers
 
[Infographic] How will Internet of Things (IoT) change the world as we know it?
[Infographic] How will Internet of Things (IoT) change the world as we know it?[Infographic] How will Internet of Things (IoT) change the world as we know it?
[Infographic] How will Internet of Things (IoT) change the world as we know it?
 
WTF - Why the Future Is Up to Us - pptx version
WTF - Why the Future Is Up to Us - pptx versionWTF - Why the Future Is Up to Us - pptx version
WTF - Why the Future Is Up to Us - pptx version
 
Why Marketing should care about Entertainment
Why Marketing should care about EntertainmentWhy Marketing should care about Entertainment
Why Marketing should care about Entertainment
 

Viewers also liked

Upworthy: 10 Ways To Win The Internets
Upworthy: 10 Ways To Win The InternetsUpworthy: 10 Ways To Win The Internets
Upworthy: 10 Ways To Win The InternetsUpworthy
 
What 33 Successful Entrepreneurs Learned From Failure
What 33 Successful Entrepreneurs Learned From FailureWhat 33 Successful Entrepreneurs Learned From Failure
What 33 Successful Entrepreneurs Learned From FailureReferralCandy
 
Digital Strategy 101
Digital Strategy 101Digital Strategy 101
Digital Strategy 101Bud Caddell
 
The History of SEO
The History of SEOThe History of SEO
The History of SEOHubSpot
 
The Seven Deadly Social Media Sins
The Seven Deadly Social Media SinsThe Seven Deadly Social Media Sins
The Seven Deadly Social Media SinsXPLAIN
 
The What If Technique presented by Motivate Design
The What If Technique presented by Motivate DesignThe What If Technique presented by Motivate Design
The What If Technique presented by Motivate DesignMotivate Design
 
How To (Really) Get Into Marketing
How To (Really) Get Into MarketingHow To (Really) Get Into Marketing
How To (Really) Get Into MarketingEd Fry
 
The Search for Meaning in B2B Marketing
The Search for Meaning in B2B MarketingThe Search for Meaning in B2B Marketing
The Search for Meaning in B2B MarketingVelocity Partners
 
What Would Steve Do? 10 Lessons from the World's Most Captivating Presenters
What Would Steve Do? 10 Lessons from the World's Most Captivating PresentersWhat Would Steve Do? 10 Lessons from the World's Most Captivating Presenters
What Would Steve Do? 10 Lessons from the World's Most Captivating PresentersHubSpot
 
10 Powerful Body Language Tips for your next Presentation
10 Powerful Body Language Tips for your next Presentation10 Powerful Body Language Tips for your next Presentation
10 Powerful Body Language Tips for your next PresentationSOAP Presentations
 
Why Content Marketing Fails
Why Content Marketing FailsWhy Content Marketing Fails
Why Content Marketing FailsRand Fishkin
 
A-Z Culture Glossary 2017
A-Z Culture Glossary 2017A-Z Culture Glossary 2017
A-Z Culture Glossary 2017sparks & honey
 
All About Beer
All About Beer All About Beer
All About Beer Ethos3
 
SMOKE - The Convenient Truth [1st place Worlds Best Presentation Contest] by ...
SMOKE - The Convenient Truth [1st place Worlds Best Presentation Contest] by ...SMOKE - The Convenient Truth [1st place Worlds Best Presentation Contest] by ...
SMOKE - The Convenient Truth [1st place Worlds Best Presentation Contest] by ...Empowered Presentations
 
Pixar's 22 Rules to Phenomenal Storytelling
Pixar's 22 Rules to Phenomenal StorytellingPixar's 22 Rules to Phenomenal Storytelling
Pixar's 22 Rules to Phenomenal StorytellingGavin McMahon
 
Healthcare Napkins All
Healthcare Napkins AllHealthcare Napkins All
Healthcare Napkins AllDan Roam
 

Viewers also liked (20)

Upworthy: 10 Ways To Win The Internets
Upworthy: 10 Ways To Win The InternetsUpworthy: 10 Ways To Win The Internets
Upworthy: 10 Ways To Win The Internets
 
The Minimum Loveable Product
The Minimum Loveable ProductThe Minimum Loveable Product
The Minimum Loveable Product
 
What 33 Successful Entrepreneurs Learned From Failure
What 33 Successful Entrepreneurs Learned From FailureWhat 33 Successful Entrepreneurs Learned From Failure
What 33 Successful Entrepreneurs Learned From Failure
 
Digital Strategy 101
Digital Strategy 101Digital Strategy 101
Digital Strategy 101
 
The History of SEO
The History of SEOThe History of SEO
The History of SEO
 
The Seven Deadly Social Media Sins
The Seven Deadly Social Media SinsThe Seven Deadly Social Media Sins
The Seven Deadly Social Media Sins
 
The What If Technique presented by Motivate Design
The What If Technique presented by Motivate DesignThe What If Technique presented by Motivate Design
The What If Technique presented by Motivate Design
 
How To (Really) Get Into Marketing
How To (Really) Get Into MarketingHow To (Really) Get Into Marketing
How To (Really) Get Into Marketing
 
Displaying Data
Displaying DataDisplaying Data
Displaying Data
 
The Search for Meaning in B2B Marketing
The Search for Meaning in B2B MarketingThe Search for Meaning in B2B Marketing
The Search for Meaning in B2B Marketing
 
What Would Steve Do? 10 Lessons from the World's Most Captivating Presenters
What Would Steve Do? 10 Lessons from the World's Most Captivating PresentersWhat Would Steve Do? 10 Lessons from the World's Most Captivating Presenters
What Would Steve Do? 10 Lessons from the World's Most Captivating Presenters
 
10 Powerful Body Language Tips for your next Presentation
10 Powerful Body Language Tips for your next Presentation10 Powerful Body Language Tips for your next Presentation
10 Powerful Body Language Tips for your next Presentation
 
How Google Works
How Google WorksHow Google Works
How Google Works
 
Why Content Marketing Fails
Why Content Marketing FailsWhy Content Marketing Fails
Why Content Marketing Fails
 
A-Z Culture Glossary 2017
A-Z Culture Glossary 2017A-Z Culture Glossary 2017
A-Z Culture Glossary 2017
 
All About Beer
All About Beer All About Beer
All About Beer
 
SMOKE - The Convenient Truth [1st place Worlds Best Presentation Contest] by ...
SMOKE - The Convenient Truth [1st place Worlds Best Presentation Contest] by ...SMOKE - The Convenient Truth [1st place Worlds Best Presentation Contest] by ...
SMOKE - The Convenient Truth [1st place Worlds Best Presentation Contest] by ...
 
Pixar's 22 Rules to Phenomenal Storytelling
Pixar's 22 Rules to Phenomenal StorytellingPixar's 22 Rules to Phenomenal Storytelling
Pixar's 22 Rules to Phenomenal Storytelling
 
Healthcare Napkins All
Healthcare Napkins AllHealthcare Napkins All
Healthcare Napkins All
 
You Suck At PowerPoint! by @jessedee
You Suck At PowerPoint! by @jessedeeYou Suck At PowerPoint! by @jessedee
You Suck At PowerPoint! by @jessedee
 

Similar to How People Really Hold and Touch (their Phones)

Fingers, Thumbs & People: Designing for the way your users really hold and t...
Fingers, Thumbs & People: Designing for the way your users really hold and t...Fingers, Thumbs & People: Designing for the way your users really hold and t...
Fingers, Thumbs & People: Designing for the way your users really hold and t...Steven Hoober
 
Fingers, Thumbs & People - 15 minute version
Fingers, Thumbs & People - 15 minute versionFingers, Thumbs & People - 15 minute version
Fingers, Thumbs & People - 15 minute versionSteven Hoober
 
Design for Fingers, Thumbs & People
Design for Fingers, Thumbs & PeopleDesign for Fingers, Thumbs & People
Design for Fingers, Thumbs & PeopleSteven Hoober
 
touchless touchscreen technology abstract
touchless touchscreen technology abstracttouchless touchscreen technology abstract
touchless touchscreen technology abstract14SYITVaishnaviDamar
 
How People Really Hold & Touch (their phones)
How People Really Hold & Touch (their phones)How People Really Hold & Touch (their phones)
How People Really Hold & Touch (their phones)Steven Hoober
 
Designing beyond the screen
Designing beyond the screenDesigning beyond the screen
Designing beyond the screenIn The Pocket
 
Design Do's and Don'ts for Great AR
Design Do's and Don'ts for Great ARDesign Do's and Don'ts for Great AR
Design Do's and Don'ts for Great AREvelina Deleanu
 
Designing for Mobile
Designing for MobileDesigning for Mobile
Designing for MobileTony Wang
 
Touchscreen UX Design Workshop
Touchscreen UX Design WorkshopTouchscreen UX Design Workshop
Touchscreen UX Design WorkshopKirsten Miller
 
Mobile Day - Fingers, thumbs and people
Mobile Day - Fingers, thumbs and peopleMobile Day - Fingers, thumbs and people
Mobile Day - Fingers, thumbs and peopleSoftware Guru
 
Web and mobile trends 2013
Web and mobile trends 2013Web and mobile trends 2013
Web and mobile trends 2013Jessie Doan
 
Web and-mobile-trends-2013
Web and-mobile-trends-2013Web and-mobile-trends-2013
Web and-mobile-trends-2013boypotay
 

Similar to How People Really Hold and Touch (their Phones) (20)

Fingers, Thumbs & People: Designing for the way your users really hold and t...
Fingers, Thumbs & People: Designing for the way your users really hold and t...Fingers, Thumbs & People: Designing for the way your users really hold and t...
Fingers, Thumbs & People: Designing for the way your users really hold and t...
 
Fingers, Thumbs & People - 15 minute version
Fingers, Thumbs & People - 15 minute versionFingers, Thumbs & People - 15 minute version
Fingers, Thumbs & People - 15 minute version
 
Design for Fingers, Thumbs & People
Design for Fingers, Thumbs & PeopleDesign for Fingers, Thumbs & People
Design for Fingers, Thumbs & People
 
touchless touchscreen technology abstract
touchless touchscreen technology abstracttouchless touchscreen technology abstract
touchless touchscreen technology abstract
 
How People Really Hold & Touch (their phones)
How People Really Hold & Touch (their phones)How People Really Hold & Touch (their phones)
How People Really Hold & Touch (their phones)
 
Designing beyond the screen
Designing beyond the screenDesigning beyond the screen
Designing beyond the screen
 
Invisible ui seminar_short2
Invisible ui seminar_short2Invisible ui seminar_short2
Invisible ui seminar_short2
 
Less interaction
Less interactionLess interaction
Less interaction
 
Gesture control
Gesture controlGesture control
Gesture control
 
Design Do's and Don'ts for Great AR
Design Do's and Don'ts for Great ARDesign Do's and Don'ts for Great AR
Design Do's and Don'ts for Great AR
 
final ppt.pptx
final ppt.pptxfinal ppt.pptx
final ppt.pptx
 
Designing for Mobile
Designing for MobileDesigning for Mobile
Designing for Mobile
 
Screenless display
Screenless displayScreenless display
Screenless display
 
project Soli ppt
project Soli pptproject Soli ppt
project Soli ppt
 
Touchscreen UX Design Workshop
Touchscreen UX Design WorkshopTouchscreen UX Design Workshop
Touchscreen UX Design Workshop
 
Mobile Day - Fingers, thumbs and people
Mobile Day - Fingers, thumbs and peopleMobile Day - Fingers, thumbs and people
Mobile Day - Fingers, thumbs and people
 
Web and mobile trends 2013
Web and mobile trends 2013Web and mobile trends 2013
Web and mobile trends 2013
 
Web and-mobile-trends-2013
Web and-mobile-trends-2013Web and-mobile-trends-2013
Web and-mobile-trends-2013
 
Sixth sense technology
Sixth sense technologySixth sense technology
Sixth sense technology
 
Virtual Mouse
Virtual MouseVirtual Mouse
Virtual Mouse
 

More from Steven Hoober

Mobile Usability and User Experience
Mobile Usability and User ExperienceMobile Usability and User Experience
Mobile Usability and User ExperienceSteven Hoober
 
1, 2, 3 for Better Mobile Design
1, 2, 3 for Better Mobile Design1, 2, 3 for Better Mobile Design
1, 2, 3 for Better Mobile DesignSteven Hoober
 
1, 2, 3 for Better Mobile Design
1, 2, 3 for Better Mobile Design1, 2, 3 for Better Mobile Design
1, 2, 3 for Better Mobile DesignSteven Hoober
 
UX for Mobile with Steven Hoober at Pointworks Academy
UX for Mobile with Steven Hoober at Pointworks AcademyUX for Mobile with Steven Hoober at Pointworks Academy
UX for Mobile with Steven Hoober at Pointworks AcademySteven Hoober
 
Designing Ecosystems, Not Just Apps
Designing Ecosystems, Not Just AppsDesigning Ecosystems, Not Just Apps
Designing Ecosystems, Not Just AppsSteven Hoober
 
Flatly Authentic Digital Design
Flatly Authentic Digital DesignFlatly Authentic Digital Design
Flatly Authentic Digital DesignSteven Hoober
 
Phones Aren’t Flat: Designing for People, Data & Ecosystems
Phones Aren’t Flat: Designing for People, Data & EcosystemsPhones Aren’t Flat: Designing for People, Data & Ecosystems
Phones Aren’t Flat: Designing for People, Data & EcosystemsSteven Hoober
 
Designing Ecosystems, Not Just Apps
Designing Ecosystems, Not Just AppsDesigning Ecosystems, Not Just Apps
Designing Ecosystems, Not Just AppsSteven Hoober
 
API First: Creating ecosystems instead of products
API First: Creating ecosystems instead of productsAPI First: Creating ecosystems instead of products
API First: Creating ecosystems instead of productsSteven Hoober
 
Physical, Digital, Human: Designing Experiences for Mobile and the Internet o...
Physical, Digital, Human: Designing Experiences for Mobile and the Internet o...Physical, Digital, Human: Designing Experiences for Mobile and the Internet o...
Physical, Digital, Human: Designing Experiences for Mobile and the Internet o...Steven Hoober
 
Tools for Mobile UX Design
Tools for Mobile UX DesignTools for Mobile UX Design
Tools for Mobile UX DesignSteven Hoober
 
Getting Good UX Into Mobile
Getting Good UX Into MobileGetting Good UX Into Mobile
Getting Good UX Into MobileSteven Hoober
 
Entrepreneurial User Experience: Improving your products on a shoestring
Entrepreneurial User Experience: Improving your products on a shoestringEntrepreneurial User Experience: Improving your products on a shoestring
Entrepreneurial User Experience: Improving your products on a shoestringSteven Hoober
 
Mobile Design: Adding Mobile to Your Learning Ecosystem
Mobile Design: Adding Mobile to Your Learning EcosystemMobile Design: Adding Mobile to Your Learning Ecosystem
Mobile Design: Adding Mobile to Your Learning EcosystemSteven Hoober
 
The Trouble with All Those Boxes: Designing for Ecosystems Instead of Screens
The Trouble with All Those Boxes: Designing for Ecosystems Instead of ScreensThe Trouble with All Those Boxes: Designing for Ecosystems Instead of Screens
The Trouble with All Those Boxes: Designing for Ecosystems Instead of ScreensSteven Hoober
 
Turning Boxes into Ecosystems: Successful multi-channel, multi-platform, mult...
Turning Boxes into Ecosystems: Successful multi-channel, multi-platform, mult...Turning Boxes into Ecosystems: Successful multi-channel, multi-platform, mult...
Turning Boxes into Ecosystems: Successful multi-channel, multi-platform, mult...Steven Hoober
 
Designing for ecosystems and people instead of screens and pages
Designing for ecosystems and people instead of screens and pages Designing for ecosystems and people instead of screens and pages
Designing for ecosystems and people instead of screens and pages Steven Hoober
 
Introduction to Mobile for (Web) Designers
Introduction to Mobile for (Web) DesignersIntroduction to Mobile for (Web) Designers
Introduction to Mobile for (Web) DesignersSteven Hoober
 
Executing for Every Screen: Build, launch and sustain products for your custo...
Executing for Every Screen: Build, launch and sustain products for your custo...Executing for Every Screen: Build, launch and sustain products for your custo...
Executing for Every Screen: Build, launch and sustain products for your custo...Steven Hoober
 
Responsive principles
Responsive principlesResponsive principles
Responsive principlesSteven Hoober
 

More from Steven Hoober (20)

Mobile Usability and User Experience
Mobile Usability and User ExperienceMobile Usability and User Experience
Mobile Usability and User Experience
 
1, 2, 3 for Better Mobile Design
1, 2, 3 for Better Mobile Design1, 2, 3 for Better Mobile Design
1, 2, 3 for Better Mobile Design
 
1, 2, 3 for Better Mobile Design
1, 2, 3 for Better Mobile Design1, 2, 3 for Better Mobile Design
1, 2, 3 for Better Mobile Design
 
UX for Mobile with Steven Hoober at Pointworks Academy
UX for Mobile with Steven Hoober at Pointworks AcademyUX for Mobile with Steven Hoober at Pointworks Academy
UX for Mobile with Steven Hoober at Pointworks Academy
 
Designing Ecosystems, Not Just Apps
Designing Ecosystems, Not Just AppsDesigning Ecosystems, Not Just Apps
Designing Ecosystems, Not Just Apps
 
Flatly Authentic Digital Design
Flatly Authentic Digital DesignFlatly Authentic Digital Design
Flatly Authentic Digital Design
 
Phones Aren’t Flat: Designing for People, Data & Ecosystems
Phones Aren’t Flat: Designing for People, Data & EcosystemsPhones Aren’t Flat: Designing for People, Data & Ecosystems
Phones Aren’t Flat: Designing for People, Data & Ecosystems
 
Designing Ecosystems, Not Just Apps
Designing Ecosystems, Not Just AppsDesigning Ecosystems, Not Just Apps
Designing Ecosystems, Not Just Apps
 
API First: Creating ecosystems instead of products
API First: Creating ecosystems instead of productsAPI First: Creating ecosystems instead of products
API First: Creating ecosystems instead of products
 
Physical, Digital, Human: Designing Experiences for Mobile and the Internet o...
Physical, Digital, Human: Designing Experiences for Mobile and the Internet o...Physical, Digital, Human: Designing Experiences for Mobile and the Internet o...
Physical, Digital, Human: Designing Experiences for Mobile and the Internet o...
 
Tools for Mobile UX Design
Tools for Mobile UX DesignTools for Mobile UX Design
Tools for Mobile UX Design
 
Getting Good UX Into Mobile
Getting Good UX Into MobileGetting Good UX Into Mobile
Getting Good UX Into Mobile
 
Entrepreneurial User Experience: Improving your products on a shoestring
Entrepreneurial User Experience: Improving your products on a shoestringEntrepreneurial User Experience: Improving your products on a shoestring
Entrepreneurial User Experience: Improving your products on a shoestring
 
Mobile Design: Adding Mobile to Your Learning Ecosystem
Mobile Design: Adding Mobile to Your Learning EcosystemMobile Design: Adding Mobile to Your Learning Ecosystem
Mobile Design: Adding Mobile to Your Learning Ecosystem
 
The Trouble with All Those Boxes: Designing for Ecosystems Instead of Screens
The Trouble with All Those Boxes: Designing for Ecosystems Instead of ScreensThe Trouble with All Those Boxes: Designing for Ecosystems Instead of Screens
The Trouble with All Those Boxes: Designing for Ecosystems Instead of Screens
 
Turning Boxes into Ecosystems: Successful multi-channel, multi-platform, mult...
Turning Boxes into Ecosystems: Successful multi-channel, multi-platform, mult...Turning Boxes into Ecosystems: Successful multi-channel, multi-platform, mult...
Turning Boxes into Ecosystems: Successful multi-channel, multi-platform, mult...
 
Designing for ecosystems and people instead of screens and pages
Designing for ecosystems and people instead of screens and pages Designing for ecosystems and people instead of screens and pages
Designing for ecosystems and people instead of screens and pages
 
Introduction to Mobile for (Web) Designers
Introduction to Mobile for (Web) DesignersIntroduction to Mobile for (Web) Designers
Introduction to Mobile for (Web) Designers
 
Executing for Every Screen: Build, launch and sustain products for your custo...
Executing for Every Screen: Build, launch and sustain products for your custo...Executing for Every Screen: Build, launch and sustain products for your custo...
Executing for Every Screen: Build, launch and sustain products for your custo...
 
Responsive principles
Responsive principlesResponsive principles
Responsive principles
 

How People Really Hold and Touch (their Phones)

Editor's Notes

  1. As a mostly-mobile guy, I have to remind myself that even at a mobile specific event not everyone knows how big and important it is. So first, a brief overview of why this presentation matters…
  2. There are more mobile devices than humans. Yes, over 7 billion devices in use.
  3. Computer sales are plummeting. PC sales dropped 95% in 2013. Mobiles continue to grow, and for several years now have outsold desktops and laptops. If you heard that iPad sales are flattening, remember that’s just one device by one maker. There will be more tablets sold in 2014 than desktops and laptops combined.
  4. Even with all this scale in place, mobile use rates continues to grow, rapidly. Mobile traffic grew 80% in 2013.
  5. Which I believe. Depending on the survey, as many as 2/3rd the people in the US only have a mobile internet device, or prefer to use their mobile over a desktop or laptop—even when one is available in front of them or in the next room—to access the internet. You won’t be surprised that the rates in places like Kenya, where connectivity is generally mobile, are over 90%. Almost half of ALL the data transferred over the internet (in the US) this most recent Christmas Day came from mobile devices.
  6. So, design for mobile, adaptively, as you design your solutions on every platform.
  7. And that means most of the time we’re going to design for touch. Which should be a snap. I mean, touch is so natural. [CLICK] Anyone can design a touch-based system without risk of users hitting the wrong target or anything. Oh, you have problems? Everyone does. Because touch is still fairly new. We are still developing patterns of interaction. And we don’t really, in general, understand how touchscreens even work. More of these at DamnYouAutocorrect.com
  8. What we we used to know about touch was… [CLICK] …what Apple told us, the 44 pixel target.
  9. But that was based on some convenience of that platform’s design, and pixel sizes. It’s not based on the real world.
  10. Now we know how to design for people. And for the many devices that people use, not just iPhones and iPads. We know how to design for hands, fingers and thumbs. (Image is cover page from http://www.amazon.com/Fingers-Thumb-Bright-Early-Board/dp/0679890483)
  11. We know this from — 1,333 original observations on how people hold and touch their phones — At least 19 serious, academic studies (by others) which I referenced and analyzed — Including one with some 91,731 users and over 120 million touch events. — 651 new observations done in coordination with the eLearning Guild, on how people also use phablets and tablets in offices, classrooms and the home — And I am currently doing some additional research to get info on gesture and context. I’m sharing some of that preliminary data with you here today, but more is coming over the next few months.
  12. Now we know that people hold phones… in multiple ways. (See http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php for more information on grasping methods.)
  13. We know that this diagram is wrong (and you can tell anyone who repeats it). -- We know touch accuracy has nothing to do with finger or thumb size. -- We know it has no direct relationship to reach. -- There are not “no go” areas in the corner of the screen to avoid or put dangerous controls, just areas of more and less accuracy, which we can easily account for in design. -- No one, and no design solution, will yield pinpoint accuracy so you can use tiny targets. Biomechanics are more complex than this. But more important, while some people use the phone with one hand…
  14. … they then change, regularly shifting their grip. To reach other areas with another finger, to type with two thumbs… To cradle the device for more reach… (Video from Luke Wroblewski, who gathered it on a plane sometime in 2013.)
  15. The more I watch people, the more I am amazed at how variable their interactions are. How they are comfortable changing their hand position. how they touch the screen in different ways to do different things with their devices, as they change tasks and context. (Video from recent set of user interviews I did. Teenager with her Galaxy Tab.)
  16. Phablets, the largest things you’d consider “phones,” are used a little more when sitting down, than normal sized phones …
  17. And tablets are used almost 2/3rd of the time in a stand [CLICK] or set down on tables. Large tablets, like the 10” iPads, are used about ¼ of the time with physical keyboards [CLICK] And almost 10% [CLICK] with pen styluses. Yeah, that’s a pen hiding under the case.
  18. In general, as devices get larger, they are used less and less held in the hand. Distance from the eye can be surmised by device class.
  19. And the smaller the device is, the more it is used on the move. On the move doesn’t mean in busses or on trains, but can just mean when you walk around the house or office. Instead of finding time to stop and use that tablet on the table, or sit and type on a computer at your desk.
  20. Because different devices are held (or placed on the table) further from the eye than other devices, you need to make text different sizes. (For more on this, and the math from the next slide, start with http://4ourth.com/wiki/Human%20Factors%20%26%20Physiology)
  21. That’s because we don’t view anything based on size, but on resolution at our eyeballs. And the relationship between this and that is called angular resolution. This is actually the simple version of this formula. To get the 3438 number requires knowing the size of the sensors in your eyeball, and so forth. Don’t take a picture of this formula. I’ve done the math for you. Visual Angle (minutes of arc) = (3438) * (length of the object perpendicular to the line of sight) / (distance from the front of the eye to the object)
  22. And that tells me very small phones (which are not all featurephones) can get away with tiny 4 point type, for most smartphones, 6 point, for large tablets held in the hand use 8 pt, and for tablets used on surfaces or in stands use 10 pt. These are MINIMUMS. At least 2 pt larger for almost all actual uses like body copy. Even larger for more readability, for active environments, and for older populations. The smallest sizes are okay for things like labels under icons, though.
  23. A key use for text and icons is to label touch targets. As much as no-affordance interfaces and secret gestures are a trendy way to insist you are making delightfully surprising experiences, making sure your simple actions just work is a much more sure bet. Make your targets work for your users.
  24. Visual targets are important. As much as no-affordance interfaces and secret gestures are a trendy way to insist you are making delightfully surprising experiences, making sure your simple actions just work is a much more sure bet.
  25. Visual targets must: — Attract the user's eye.— Be drawn so that the user understands that they are actionable elements.— Bereadable, so the user understands what action they will perform.— Be large and clear enough the user is confident that he can easily tap them.
  26. A word on size. People use different devices in different ways. Just one is distance, and ways of holding. Tablets, for example, are held (or placed on the table) further from the eye than phone-sized devices, so you need to make text different sizes. (For more on this, and the math from the next slide, start with http://4ourth.com/wiki/Human%20Factors%20%26%20Physiology)
  27. Angular resolution is what matters instead of absolute size, and that’s calculated based on the distance between the screen and the viewer’s eyeballs. This is actually the simple version of this formula. To get the 3438 number requires knowing the size of the sensors in your eyeball, and so forth. Visual Angle (minutes of arc) = (3438) * (length of the object perpendicular to the line of sight) / (distance from the front of the eye to the object)
  28. So, very small phones (which are not all featurephones as I show) can get away with tiny 4 point type, for most smartphones, 6 point, and for large tablets, 8 point. Extrapolate or do the math for other size devices. These are minimums. Larger for more readability, for active environments, and for older populations.
  29. Clickable items need to not just afford their action (making it clear what it does) but do so consistently. Someone tell me why my calendar name, attendance and the participants are selectable rows, but the location is a link and I have to click exactly where the link is. Be consistent, and make whole contained areas (rows, boxes) selectable as that is what is expected.
  30. So I said finger size doesn’t matter. Well, not for touch target size or touch accuracy. Really, at all.
  31. But they still get in the way….
  32. This is anecdotal, but I have seen similar results on real projects. When I updated to the new Twitter, I kept hitting the Add-person icon. Because it’s got a plus, and is visible in the other action area.
  33. But mostly because the compose area was obscured. Plus I like to focus on the middle of the page like every human, so simply missed it.
  34. This sort of behavior makes me abide by a simple rule: Nothing below the key touch targets. Of course, that’s too simplified. What I mean is, nothing below the target that is: — About the target. A carousel with labels below won’t work well. — Updated based on user input. Notifications, or a sliding input at the top of the screen that changes results below is bad. Generally, this is easy. You just flip things vertically, putting the updated info or label above, and you are safe.
  35. I keep mentioning touch targets, so let’s get to the size.
  36. The way the electrical conductivity of the capacitive touch screen works, the part that is always sensed is the centroid (or geometric center) of the contact patch, or the flat part of your finger against the screen. What matters for touch accuracy is the Circular Error of Probability or the pointing accuracy of people with their fingers. There’s a bit of a range here, depending on the user’s attention, care and the environment in which they operate. Not to mention the ability of the user themselves. Touch targets themselves should be no smaller than about 6 mm, and preferably 8 mm. Give enough room for this. Make sure that small targets have some padding around them to make it easier to click, even if the user can’t see that’s clickable area.
  37. But touch targets are relatively easy. What really matters is interference. If you have to remember one lesson, and one set of numbers, remember interference. Which is just avoiding accidental clicks by having enough space between items.
  38. Defining as button size, or spacing between buttons won’t do it. Your link or button is so variable, what you need is a guideline for interference alone. Whether you check digitally, or as I’ll show in a minute, with real world tools, you don’t measure space between items, but space between centers. Center the size target in the clickable area, and if anything else is in the circle, that has a chance of being clicked by accident. The tab bar here is typical of tab bars: It’s too short and too near other items so there will be accidents.
  39. I didn’t give you a size for interference. There’s a reason. Looking closely the pile of serious academic research I mentioned, at my own research, at usability studies on real products, reveals that the way people touch devices is a bit more complex than a single number. But in ways that correspond neatly to some of the work we already do. So aside from numbers, the one thing to remember is to avoid the edges.
  40. As I said, people are worse at accurately touching the edges, and especially the top and bottom. I have turned the gathered data into usable charts, with larger interference zones at the top and edges, and which neatly correspond to sort of structural zones that already exist in much of our design. Up here are those numbers. These are the rows for mastheads, tabs, the big content area of course, and the chyron at the bottom. If you aren’t getting the rows I refer to, I mean this…. (This whole principle detailed, with many references, in http://www.uxmatters.com/mt/archives/2013/11/design-for-fingers-and-thumbs-instead-of-touch.php)
  41. (Point to Masthead, Tabs, Content, Chyron)And, if you look at the few squares I overlaid here, you can see how they correspond to the diagram of where people touch screens accurately. Or, not. You can see the red square where things are a bit too close together also.
  42. I am starting to call this designing by zones. You just make sure those strips exist, and make sure they have proper spacing for the handset screen selected.
  43. That can also be boiled down to a pretty simple checklist. — Put things that people want to read, or the primary interaction, in the center. — Provide room to scroll, so pages longer than the viewport can scroll that content to the center of the page. — Make rows selectable, without requiring small buttons at the left and right sides. — Limit the number of common controls, in the masthead and chyron…— Because everything has to have plenty of space. I’ll provide specific guidelines, but “plenty” is easy to remember. — For tabs, don’t hide content or require gestures to use them.
  44. Lastly, I say the best way to work with a lot of this stuff is to do it at device scale. Work on the device, send images and code to the handset.
  45. Sketch at device scale, so you start with it being the right way around. Avoid too much reliance on your computer screen, and the Powerpoint to show it off. (From a participant at a workshop on this same basic topic at MoDev UX 2014 in McLean, Virginia.)
  46. Size guidelines are fine, but you can help yourself a lot and reduce your math time by just checking your work at scale.
  47. Take the design out of Graffle, Visio, Acture, Photosho, InDesign or whatever, and get it off the computer. No need for clever prototype tools (though those are fine), just put screens onto actual devices. Try it out. Pass it around the room to make sure you aren’t foolish, or to share the design the way it will really work, in meetings with clients or stakeholders. If you do want to measure, do it directly to make sure your sizes are right. You can use a circle template you get at the art supply store (or these days, Amazon), but I made up my own little tool I keep in my pocket, because this is so important. (Get the template and see video about how and why to use it at http://4ourth.com/wiki/4ourth%20Mobile%20Touch%20Template.)
  48. You can boil this down to the sizes and numbers you care the most about, but basically, when designing for touch, think about: — Visible targets — Is the text readable? Do the actions afford whatever action you want them to have? — Fingers — Do they obscure important information? Do they cover so much of your button the user can’t tell if they clicked it or not? — Touch Target Sizes — Just meet the basic sizes. And provide plenty of room around targets when you have it. — Design by Zones — To avoid interference, make sure there’s enough space between targets, by where it is on the viewport. Try to put key stuff to read or click in the center, make edge stuff bigger. This is all shared in many ways, and you can get this deck from the conference or I will have it on Slideshare soon.
  49. And, if you want to discuss more, just ask me. If you miss these addresses, just Google my name and you’ll find me.
  50. If you download this yourself, it’s information you may find useful. But it’s mostly here in case I get a question: instead of just waving my arms, I can show these neat slides I used to put in the presentation but which bore most of you now.
  51. Since it’s the most common thing, we’re talking about capacitive touch. Resistive is the one where you have to simply apply pressure, and a grid of conductive leads make contact, so the device knows which point you touched. These are still being built. Even for consumer devices, like tablets or seatback entertainment systems and so on. There are even the old IR beam systems still around, used mostly in rugged environments (some ATMs and kiosks) and for very large displays.Capacitive touch, uses electrical properties of your body. Your finger acts as a capacitor whose presence in the system can easily be measured by these little nodes, in a grid, on several layers between the display screen and the protective plastic or glass. But it is not perfect. There is math, and interference, and tradeoffs in thickness, weight, cost, and optical clarity that get in the way of increased precision.
  52. A few years ago, Motorola put a handful of devices in a little jig so they could precisely, robotically control the pressure, angle and speed of touch sensing. This is some of them. Even the much-loved iPhone is imperfect, with notable distortion at the edges, and actually a total inability to get to the edge on some sides. Look at the stairstep pattern on the Droid. That’s a problem with the calculations or something that predicts the precise position between the sensors. The pitch of the steps is clearly the grid size.
  53. You can actually SEE the capacitive touch sensors sometimes. Rarely as a grid, but only one direction at a time. This is important so you understand the previous slide. These sensors aren’t microscopic, but quite large. There’s a lot of math to estimate where you touched between sensors.
  54. As it turns out, it’s not really important how big our fingers are, except insofar as they obscure part of the screen, which is something else. Our finger squishes against the screen and only a part gets flattened and detected. My own research indicates this is pretty much the same for everyone. Children press really hard, so have a larger relative contact patch for example. There is some variability based on task, so people can use fingertips and press lightly.
  55. BREAK This phone, and all smartphones, are not just about touch.
  56. But have huge numbers of sensors, that make them aware of the user, and the world they live in.
  57. Design by zones examples.
  58. Design by zones examples. Bad ones here. More than 4 actions on the menu bar is too many. And all tabs are too short, or too near other elements.
  59. Understanding when to use mousedown vs. mouseup, even just to do stuff like activate the visual click on mousedown, but not activate the action until mouseup, can be really good ways to improve the overall experience of the interaction. But, not all touch behaviors are equally supported. Check compatibility before you implement, and make sure that the platforms you need to support will work. For the web, as shown here, make sure there’s a useful fallback, so the design works no matter what even if some platforms have better features. http://www.quirksmode.org/dom/events/index_mobile.htmlhttp://www.quirksmode.org/blog/archives/2014/01/touch_action_te.html
  60. If you miss these addresses, just Google my name and you’ll find me.