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

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

Post on 12-Feb-2017

4.295 views

Category:

Design

0 download

TRANSCRIPT

<p>Title slide</p> <p>An introduction to ergonomics for mobile UXNeil Turner</p> <p>Im going to be introducing you to ergonomicsMore specifically ergonomics in terms of designing touch interfaces for mobile devicesIm going to be talking about how we hold and interact our mobile devices And how you can use this information to create ergonomically sound mobile designs1</p> <p>What is ergonomics?Why is ergonomics important to UX? How do we hold our mobile devices?11 Mobile UX ergonomics rules of thumb</p> <p>2</p> <p>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)</p> <p>So what is Ergonomics?This is what Wikipedia has to sayIts the study of designing equipment and devices that fit the human body, rather than the other way aroundYou probably associate the term with desk set-ups and physical things3</p> <p>Ergonomics = Designing products that fit the human body (rather than the other way around) </p> <p>I like to think about ergonomics as the art of designing things that fit the human body, rather than the other way around4</p> <p>An example of bad ergonomics - The last fork left in my cutlery draw(because its so damn uncomfortable to use) </p> <p>So why is ergonomics important?This is my cutlery draw at homeAnd this is always the last fork left in the draw. Why?Because its horribly uncomfortable to useIm always reminded of this fork when I think about the importance of ergonomics because good design is not just about creating things that are useful, usable and beautiful, but comfortable too5</p> <p>In the early days of computers ergonomics wasnt really considered.Users had to work around the computer</p> <p>Ergonomics is important for a lot of things, from desk set-up, to designing dashboards and jet fightersBut its never really been a consideration when it comes to designing digital interfacesThe ergonomics has always been someone elses job, or simply wasnt considered at allIn the very early days of punch cards and then terminals input was very limitedThe user had to work around the computer, not the other way around6</p> <p>And this was still largely true of early PCs which restricted input to keyboards</p> <p>Then came the personal computer revolutionBut input was still almost exclusively through a keyword7</p> <p>The Mac introduced the mouse to compliment the keyboard. But users were still deskbound.</p> <p>The original Mac was the first mainstream personal computer with a mouseOf course the mouse has been around since the 1960s, but it was the Mac that brought it into the mainstreamSuddenly the interface wasnt just about a keyboard, but a mouse as wellBut computers were still something we sat down to use at a deskAnd ergonomics was still something that related to the keyboard, the mouse, and the desk set-up8</p> <p>Ergonomics started to become important for early mobile devices.But input was largely by stylus, not fingers and thumbs.</p> <p>Then came more portable computers like the Palm PDAThese came with a stylus as we were still very attached to our mouse like interactionsErgonomics certainly came into play but as a stylus was used interaction was still quite predictable9</p> <p>The iPhone changed everything.It popularised the now ubiquitous full touch screen UI.</p> <p>Then everything changed when the iPhone came about in 2007Of course the iPhone wasnt the first Smartphone, or the first touchscreen phoneBut arguably more than anything else it popularised the full screen touch interface that pretty much every Smartphone and Tablet now utilisesNow designers had to really think about designing for these things (hold up hands and fingers)10</p> <p>Now touchscreens are everywhere.Users are physically interacting with UIs more and more.</p> <p>And physical touch interfaces are now everywhere, from smart watches to touch enabled laptopsErgonomics has now become a very key consideration for interface designNot just creating interfaces that are usable and beautiful, but comfortable to use too</p> <p>11</p> <p>And touchscreens are being used more and more</p> <p>And in our increasingly digital world we are using mobile and touch screen devices more and more(spot the one guy not on their phone)</p> <p>12</p> <p>How many times a day does someone look at their mobile phone?A: 0-25B: 26-50C: 51-75D: 76-100</p> <p>How many times on average do you think that someone looks at their mobile?Theres a lolly pop available for everyone that guesses correctly13</p> <p>85Source: http://journals.plos.org/plosone/article?id=10.1371/journal.pone.0139004D: 76-100</p> <p>According to a 2015 study at the Uni of Lincoln which logged smartphone use using an appSo with mobiles being used so much, and so often its pretty important that interfaces are comfortable to useAn interface that is not very comfortable to use is bad enough once or twice a day, times that by 10 and you have a real problem14</p> <p>How do you design a touch interface that is comfortable to use?</p> <p>Predominately mobile, could be tablet or even desktop15</p> <p>Mobile devices are used in lots of different situations.From waiting for the bus</p> <p>If you go out and observe people using mobile devicesYou find lots of different ways that people use their mobiles and tabletsThe beauty of mobile devices is that theyre er mobileThey can be used at home, at work and out and aboutSomeone might be using their mobile whilst waiting for a bus16</p> <p>To cycling along(a personal bug bear of mine)</p> <p>Or a particular bug bear of mine while riding their bike17</p> <p>And even in the bedroom (oh err)</p> <p>Or even in the bedroomApparently 1 in 9 Americans have used their mobile during sexAnd as you might guess how you hold your mobile is going to differ depending on whether youre waiting for the bus, on your bike or having a bit of rumpy pumpy18</p> <p>Source: http://alistapart.com/article/how-we-hold-our-gadgets </p> <p>This is how people typically hold their mobile phone(From a 2013 study by Steven Hoober)</p> <p>In 2013 Steven Hoober did just that and carried out over 1300 observations of people using their SmartphoneHe found the following three main gripsOne handed, two handed with fingers and two handed with thumbsMind that this was a few years ago when mobiles were perhaps a bit smaller, so its likely that two handed use is now more commonAnd how we hold a device impacts where on the screen we can comfortably touch19</p> <p>Source: http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php</p> <p>33%67%</p> <p>Left-handedRight-handedMobiles are held in the left-hand more than you might think</p> <p>And even though about 90% of people are right-handed, left handed use is quite highMakes sense as people often doing something with their dominant hand e.g. holding coffee20</p> <p>Tablets are frequently used whilst seated</p> <p>A separate study in 2014 found that 88% of iPad use is whilst seatedUsually propped up on table or holding with two hands21</p> <p>People will frequently change how they hold a device depending on what theyre doing</p> <p>Unsurprisingly people will change how they hold a mobile device depending on what theyre doingAnd as well see it also depends on the sort of device theyre usingAnd this is tricky, because it makes it harder to predict how someone will be interacting with your mobile designBut the good news is that you can make some educated guesses22</p> <p>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</p> <p>Firstly that they are likely to be holding the device vertically, rather than horizontallyA study a few years ago by Steven Hoober found that we use mobiles vertically about 90% of the timeIn a different study Hoober and Patti Shank found that tablets are used vertically about 60% of the time</p> <p>23</p> <p>Orientation will change depending on the task, but its usually vertical</p> <p>So we can say that whilst orientation might change depending on task e.g. view a video or photosUsually people hold their device verticallyAnd for this 90% of the time, how do people hold their device vertically?24</p> <p>Source: http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php</p> <p>49%36%15%The easy to reach tap zones for various holds</p> <p>These graphics show the tap areas depending on the holdGreen is most comfortable to tap, unless you have exceeding large hands the red is hard to impossible to tap25</p> <p>Source: http://alistapart.com/article/how-we-hold-our-gadgets </p> <p>As mobile devices get larger, the hard to reach zones grow</p> <p>And as mobile devices get larger the red area increases (show own mobile)This is probably why were likely to see more two handed use as mobiles get larger26</p> <p>Place common controls together and in easy to reach areas</p> <p>You should place frequently used controls in this easy to reach areaYou should also place them together to avoid having to reach all over the device27</p> <p>The Facebook app does a good job of placing controls within reach</p> <p>We can see that Facebook do this for their mobile appFor a friend the common controls are in the middle and bottom of the screen where they are relatively easy to reach28</p> <p>Source: http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php</p> <p>49%36%15%Some areas of the screen are often obscured(e.g. bottom corners)</p> <p>Going back to our different grips we can see that hand placement also affects what is visible on the screenFor example the one hand grip obscures the bottom right of the screen29</p> <p>Dont place important information where it might be obscured</p> <p>So even if we dont know how a device is being held its important not to obscure important informationFor example, notifications or key information30</p> <p>Source: http://alistapart.com/article/how-we-hold-our-gadgets/</p> <p>70%30%Thumbs drive a lot of mobile interactions</p> <p>Another thing youll see if you observe people using their mobilesIs that most of the time (70%) its with a thumb, not a finger31</p> <p>Source: http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php</p> <p>49%36%15%Which isnt surprising when you look back at the holds</p> <p>Which is not very surprising when we go back to consider the main grips used32</p> <p>Design for fat fingers and thumbs</p> <p>So design for fat fingers and thumbsBecause if you design a nice big touch target, then it will be easier to tap33</p> <p>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 taps25%20%15%10%5%1 in 30 taps (3%)will miss the target1 in 100 (1%)1 in 200 (0.5%)Target size3 mm5 mm7 mm9 mm11 mmThe bigger the tap target the higher the accuracy funny that(as discovered by Microsoft)</p> <p>Microsoft carried out some research to see how easy it was to tap targets of increasing sizesUnsurprisingly its much harder to accurately hit small targetsAt 3 mm up to 1 in 5 taps were missed and 1 in 30 missed at 5 mm34</p> <p>44px x 44px(12mm x 12 mm)30px x 44px(8mm x 12 mm)44px x 30px(12mm x 8mm)Minimum touch targetAbsolute minimum touch target (if you must)</p> <p>At least 8px (2mm) spacingSource: http://www.lukew.com/ff/entry.asp?1085So dont make touch targets too small, or too close together</p> <p>So your minimum should really be 44px by 44pxAlthough if you really need to, you can get away with a narrower or shorter targetYou should also have at least 8px of spacing between targets (unless very large)35</p> <p>Maximise tap targets and design for big gestures</p> <p>The bigger the touch target the better36</p> <p>The iPhone mail app supports lots of different gestures</p> <p>Mail app for iPhone is a nice example of maximise tap targets and supporting big gesturesCan tap anywhere in messageCan also swipe to perform actions and to bring up side menu37</p> <p>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)</p> <p>Weve been talking about finger and thumb sizesAnthropometry is an important part of ergonomicsIts basically the measurement of people and their body size and shapeIts used to ensure that a design fits a large percentage of the population38</p> <p>97.5% tile50% tile2.5% tileDesigning to fit the 97.5% tile to the 2.5% tile ensure that 95% can comfortably use a product</p> <p>What you can do is design something that fits most people e.g. 95% of the populationSo if a design is comfortable for someone at the 97.5% and someone at the 2.5%, it should fit the restWhich is why its often more useful to focus on making a design comfortable for the more challenging users</p> <p>39</p> <p>Design for more challenging scenariose.g. walking down the street (dont try this at home!)</p> <p>For example this sort of a scenarioIf you can create a mobile design that can be used one handed whilst walking down the street, it should be usable for most other scenarios40</p> <p>Design with challenging users and scenarios in mind</p> <p>Which brings me to another rule of thumbDesign with challenging users and scenarios in mind e.g. mobility imparedLike designing to fit 95% of the population, if you can create a design that is comfortable and usable for challenging users and scenarios, it should work well for the rest41</p> <p>Challenges can include poor eyesight and dexterity</p> <p>And when were designing for challenging users we should consider eyesight as well as dexterityImportant aspect of ergonomics is also being able to see a screen at holding distanceRemember that a mobile might not always be very steady in the hand e.g. in motion42</p> <p>Make everything bigger than it would be on desktop</p> <p>Bigger text, bigger buttons, bigger controls43</p> <p>Base font sizeLine height</p> <p>16px200%Make fonts large and well spaced on mobile</p> <p>Your base font should really be a minimum of 16pxYour line height should be at least 200%44</p> <p>What is the most comfortable mobile device interaction?</p> <p>Is it a tap, swipe, button press?45</p> <p>Its no interaction at all!</p> <p>Its no interaction at all46</p> <p>The real problem with the interface is that it is an interface. Interfaces get in the way. I dont want to focus my energies on an interface. I want to focus on the job I dont want to think of myself as using a computer, I want to think of myself as doing my job. Donald Norman</p> <p>This is a great quote from Don Norman, who is one of the forefathers of usability and UX and indeed coined the UX term</p> <p>47</p> <p>The less interface there is the better</p> <p>You see the less interface there is, the less ergonomics you have to considerSo try to keep taps and interactions to a minimumThink about things like notifications and alertsHow can you utilise mobile capabilities like GPS and a camera to cut down interactions?How can you second guess the user so that they can leave their mobile device in their back pocket?</p> <p>48</p> <p>The best interface is no interface by Golden Krishnahttp://www.nointerface.co...</p>