an introduction to ergonomics for mobile ux (ux in the city)
TRANSCRIPT
An introduction to ergonomics
for mobile UXNeil Turner
What is ergonomics?
Why is ergonomics important to UX?
How do we hold our mobile devices?
11 Mobile UX ergonomics rules of thumb
Ergonomics, also know as comfort design is the study of designing equipment and devices that fit the human body and its cognitive abilities.Source: https://en.wikipedia.org/wiki/Human_factors_and_ergonomics
(Wikipedia)
Ergonomics = Designing products that fit the human body (rather than the other way around)
An example of bad ergonomics - The last fork left in my cutlery draw(because it’s so damn uncomfortable to use)
In the early days of computers ergonomics wasn’t really considered.Users had to work around the computer…
And this was still largely true of early PCs which restricted input to keyboards
The Mac introduced the mouse to compliment the keyboard. But users were still deskbound.
Ergonomics started to become important for early mobile devices.But input was largely by stylus, not fingers and thumbs.
The iPhone changed everything.It popularised the now ubiquitous full touch screen UI.
Now touchscreens are everywhere.Users are physically interacting with UIs more and more.
And touchscreens are being used more and more…
How many times a day does someone look at their mobile
phone?A: 0-25B: 26-50C: 51-75D: 76-100
85Source: http://journals.plos.org/plosone/article?id=10.1371/journal.pone.0139004
D: 76-100
How do you design a touch interface that is comfortable to use?
Mobile devices are used in lots of different situations.From waiting for the bus…
To cycling along…(a personal bug bear of mine)
And even in the bedroom (oh err)
Source: http://alistapart.com/article/how-we-hold-our-gadgets
This is how people typically hold their mobile phone…(From a 2013 study by Steven Hoober)
Source: http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
33% 67%Left-handed Right-handed
Mobiles are held in the left-hand more than you might think…
Tablets are frequently used whilst seated
People will frequently change how they hold a
device depending on what they’re doing
90% 10% 60% 40%
Sources: http://alistapart.com/article/how-we-hold-our-gadgets | http://alistapart.com/article/how-we-hold-our-gadgets Smart phones and tablets are held vertically most of the time
Orientation will change depending on
the task, but it’s usually vertical
Source: http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
49% 36% 15%
The easy to reach tap zones for various holds…
Source: http://alistapart.com/article/how-we-hold-our-gadgets As mobile devices get larger, the hard to reach zones grow
Place common controls together and in easy to reach areas
The Facebook app does a good job of placing controls within reach
Source: http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
49% 36% 15%Some areas of the screen are often obscured
(e.g. bottom corners)
Don’t place important
information where it might be obscured
Source: http://alistapart.com/article/how-we-hold-our-gadgets/
70%30%
Thumbs drive a lot of mobile interactions
Source: http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
49% 36% 15%
Which isn’t surprising when you look back at the holds
Design for fat fingers and thumbs
Source: https://i-msdn.sec.s-msft.com/dynimg/IC689376.jpg
(11 px) (19 px) (26 px) (34 px) (42 px)
Tap target size vs accuracy% missed taps
25%
20%
15%
10%
5%
1 in 30 taps (3%)will miss the target
1 in 100 (1%) 1 in 200 (0.5%)
Target size 3 mm 5 mm 7 mm 9 mm 11 mm
The bigger the tap target the higher the accuracy – funny that…(as discovered by Microsoft)
44px x 44px(12mm x 12 mm)
30px x 44px
(8mm x 12 mm)
44px x 30px(12mm x 8mm)
Minimum touch target
Absolute minimum touch target (if you must)
At least 8px (2mm) spacing
Source: http://www.lukew.com/ff/entry.asp?1085So don’t make touch targets too small, or too close together…
Maximise tap targets and design
for big gestures
The iPhone mail app supports lots of different gestures
Anthropometry involves the systematic measurement of the physical properties of the human body, primarily dimensional descriptors of body size and shapeSource: https://en.wikipedia.org/wiki/Anthropometry
(Wikipedia)
97.5% tile 50% tile 2.5% tileDesigning to fit the 97.5% tile to the 2.5% tile ensure
that 95% can comfortably use a product
Design for more challenging scenariose.g. walking down the street (don’t try this at home!)
Design with challenging users and scenarios in
mind
Challenges can include poor eyesight and dexterity
Make everything bigger than it would
be on desktop
Base font size
Line height
16px200%
Make fonts large and well spaced on mobile…
What is the most comfortable mobile device
interaction?
It’s no interaction at all!
“The real problem with the interface is that it is an interface. Interfaces get in the way. I don’t want to focus my energies on an interface. I want to focus on the job… I don’t want to think of myself as using a computer, I want to think of myself as doing my job.”
Donald Norman
The less interface there is
the better
The best interface is no interface by Golden Krishnahttp://www.nointerface.com/book/
So how have a mobile design.How can you find out how ergonomic it is?
Prototype it!Very easy to quickly create a paper prototype.
Prototype designs as soon as possible
Can’t really tell if a design works until you test it with users…
Test, test, then test some more…
• People will frequently change how they hold a device depending on what they’re doing
• Orientation will change depending on the task, but it’s usually portrait
• Place common controls together and in easy to reach areas
• Don’t place important information where it might be obscured
• Design for fat fingers and thumbs
• Maximise tap targets and design for big gestures• Design with challenging scenarios in mind• Make everything bigger than it would be on desktop• The less interface there is, the better• Prototype designs as soon as possible• Test, test, then test some more…
How we hold our gadgets (A List Apart)http://alistapart.com/article/how-we-hold-our-gadgets
How Do Users Really Hold Mobile Devices? (UX Matters)www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
Finger-Friendly Design: Ideal Mobile Touchscreen Target Sizes (Smashing Magazine)www.smashingmagazine.com/2012/02/21/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/The best interface is no interface (Cooper)www.cooper.com/journal/2012/08/the-best-interface-is-no-interface
Making mLearning Usable: How we use mobile devices (Steven Hoober)http://shoobe01.blogspot.co.uk/2014/11/making-mlearning-usable-how-we-use.html
http://abookapart.com/products/designing-for-touch
www.uxforthemasses.com
THANK YOU :-)
@neilturneruxslideshare.net/neiljamesturner