an introduction to ergonomics for mobile ux (ux in the city)

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