Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

An introduction to ergonomics for mobile UX (Ux in the City)

5,806 views

Published on

Presented at UX in the City 2016. The presentation covers why it’s so important to consider the ergonomics of a design, how we hold our devices, what our physical constraints are and how you can use this information to design digital experiences that not only look great, but feel great as well.

Published in: Design
  • Not bad, but relies on outdated information from 2013. Steven Hoober, who made all those charts about how users hold their phones and the zones where you can reach a given element published a follow-up article in 2017 saying that all those charts were incorrect, obviously after the date this presentation was given.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

An introduction to ergonomics for mobile UX (Ux in the City)

  1. 1. An introduction to ergonomics for mobile UX Neil Turner
  2. 2. What is ergonomics? Why is ergonomics important to UX? How do we hold our mobile devices? 11 Mobile UX ergonomics rules of thumb
  3. 3. 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)
  4. 4. Ergonomics = Designing products that fit the human body (rather than the other way around)
  5. 5. An example of bad ergonomics - The last fork left in my cutlery draw (because it’s so damn uncomfortable to use)
  6. 6. In the early days of computers ergonomics wasn’t really considered. Users had to work around the computer…
  7. 7. And this was still largely true of early PCs which restricted input to keyboards
  8. 8. The Mac introduced the mouse to compliment the keyboard. But users were still deskbound.
  9. 9. Ergonomics started to become important for early mobile devices. But input was largely by stylus, not fingers and thumbs.
  10. 10. The iPhone changed everything. It popularised the now ubiquitous full touch screen UI.
  11. 11. Now touchscreens are everywhere. Users are physically interacting with UIs more and more.
  12. 12. And touchscreens are being used more and more…
  13. 13. How many times a day does someone look at their mobile phone? A: 0-25 B: 26-50 C: 51-75 D: 76-100
  14. 14. Source: http://journals.plos.org/plosone/article?id=10.1371/journal.pone.0139004 D: 76-100
  15. 15. How do you design a touch interface that is comfortable to use?
  16. 16. Mobile devices are used in lots of different situations. From waiting for the bus…
  17. 17. To cycling along… (a personal bug bear of mine)
  18. 18. And even in the bedroom (oh err)
  19. 19. 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)
  20. 20. 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…
  21. 21. Tablets are frequently used whilst seated
  22. 22. People will frequently change how they hold a device depending on what they’re doing
  23. 23. 90% 10% 60% 40% Sources: http://alistapart.com/article/how-we-hold-our-gadgets | http://alistapart.com/article/how-we-hold-our-gadgetsSmart phones and tablets are held vertically most of the time
  24. 24. Orientation will change depending on the task, but it’s usually vertical
  25. 25. 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…
  26. 26. Source: http://alistapart.com/article/how-we-hold-our-gadgets As mobile devices get larger, the hard to reach zones grow
  27. 27. Place common controls together and in easy to reach areas
  28. 28. The Facebook app does a good job of placing controls within reach
  29. 29. 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)
  30. 30. Don’t place important information where it might be obscured
  31. 31. Source: http://alistapart.com/article/how-we-hold-our-gadgets/ 70%30% Thumbs drive a lot of mobile interactions
  32. 32. 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
  33. 33. Design for fat fingers and thumbs
  34. 34. 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)
  35. 35. 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?1085 So don’t make touch targets too small, or too close together…
  36. 36. Maximise tap targets and design for big gestures
  37. 37. The iPhone mail app supports lots of different gestures
  38. 38. Anthropometry involves the systematic measurement of the physical properties of the human body, primarily dimensional descriptors of body size and shape Source: https://en.wikipedia.org/wiki/Anthropometry (Wikipedia)
  39. 39. 97.5% tile 50% tile 2.5% tile Designing to fit the 97.5% tile to the 2.5% tile ensure that 95% can comfortably use a product
  40. 40. Design for more challenging scenarios e.g. walking down the street (don’t try this at home!)
  41. 41. Design with challenging users and scenarios in mind
  42. 42. Challenges can include poor eyesight and dexterity
  43. 43. Make everything bigger than it would be on desktop
  44. 44. Base font size Line height 16px 200%Make fonts large and well spaced on mobile…
  45. 45. What is the most comfortable mobile device interaction?
  46. 46. It’s no interaction at all!
  47. 47. “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
  48. 48. The less interface there is the better
  49. 49. The best interface is no interface by Golden Krishna http://www.nointerface.com/book/
  50. 50. So how have a mobile design. How can you find out how ergonomic it is?
  51. 51. Prototype it! Very easy to quickly create a paper prototype.
  52. 52. Prototype designs as soon as possible
  53. 53. Can’t really tell if a design works until you test it with users…
  54. 54. Test, test, then test some more…
  55. 55. • 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
  56. 56. • 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…
  57. 57. 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
  58. 58. http://abookapart.com/products/designing-for-touch
  59. 59. www.uxforthemasses.com THANK YOU :-) @neilturnerux slideshare.net/neiljamesturner

×