Designing for opposable thumbs

Design, UI/UX

One of the easiest to understand, yet still one of the most abused concepts when breathing life into your mobile product is that your interface, disregarding for the moment it’s pixel aesthetics, should indeed be optimized ‘ergonomically’ for your users. Yes, the makers of said devices should have hopefully carefully thought this through; however, when a user is actually using the device, depending on your apps interactive-action placements (buttons) and required gestures it could make using your application or mobile website a more of a pain or a  joy & wonder. The best mobile experiences do much more than force their application into small tiny screens, instead they make an early conscience effort to make sure that each individual screen incorporates the use of actual fingers and thumbs — not baby fingers or styluses, thus accommodating for the capricious taps and drags of our clumsy fingers and thumbs.

If you’re creating something that is relatively complex then you’ll probably want to know what is the optimal size for tap targets. Well, all of the platforms do offer guidance but for this example I’ll refer to the Apple iOS Human Interface Guidelines, and they recommend to make targets a minimum of 44 points, or for the web 44px would be roughly the equivalent. You will want to take note though, that if for some rare-case you actually need to squeeze in a plethora of buttons (ie. VOIP apps and calculator apps) you’ll want to make your hit-states much larger. The closer that you squeeze buttons together, you want to make sure the larger they are or you just simply space them out accordingly.

If you were to look closely at the icon springboard on any iOS device you’ll notice that another icon can easily fit onto each row, effectively giving more room on each ‘screen’ so that you can have more options to apps. However, by doing so the screen would still be *usable*, but wouldn’t account for the varying thumb sizes and accidental clicks. With only 4 icons from left-to-right (on an iPhone & iPod Touch) and equally spaced out both vertically and horizontally, we as users don’t have too give much energy to our cognitive thought process. We can get a general sense of where to place our thumb or finger and we’ll be okay.

Smartphones

Speaking of finger & thumb placement, not only do you want to focus on the number of action-states on any given view, their proximity toward one another and their individual size, you’ll also want to keep in mind the finger or thumb rule. There is a limited range of motion for your thumb on any device, and usually on any device less than 4 inches an adults thumb can reach anywhere within the view; however, on screens larger than 4 inches it proves to be a much more involved task.

If your app takes pictures and you place the capture button at the top right of the view you will have effectively forced your user to either explicitly use their finger from their other hand, or shift how they’re holding the device and risk dropping it to reach that corner — thus evoking the ‘finger rule‘. Instead, you’ll notice on all of the photo sharing apps, their capture buttons are placed well within the thumb-arc, effectively using the ‘thumb rule‘. This may seem like a trivial example, however, if you’re an android user take note on exactly how many apps call for the wrong rule for high traffic buttons, especially on the larger devices like the Galaxy S3. Now, I’m not just trying to pick on android, there are plenty of great apps in that ecosystem too — but I am an Apple fanboy.. so, there is that.

Tablets and non-smartphone things

For tablets, you should clearly know that your users will usually need to hold the device and use their fingers most of the time; however, it’s a real treat when app creators really think about their solutions to this and don’t just throw tab icons at the bottom or top and instead handle this gracefully. Apples’ default camera app does a really good job of placing the ‘capture’ icon on the left or right side of the device, depending on your orientation. The next step to this would be to take into account whether your users are either left or right handed. Many tablet apps typically favor ‘right handed’ people who would hold the device in their left hand while navigating with their right hand. However, as you could imagine, those who are left handed are now left to clumsily use your application in an unnatural way — or maybe they’re relatively used to it by now becuase no-one really accounts for this, but wouldn’t it be a nice surprise if you were one of the first ;)

Rocket Science? No….

None of this is rocket-science, however these simple guidelines and rules seem to always get tossed during the actual creation process. The simple lesson should be that while it might seem like a no brainer, when you’re trying to squeeze “all the important things” into that tiny viewport the reality is that the applications with success actually and truly understand these rules. Chunky buttons or at-least large hit-states and nice airy-spacing are crucial. The screens may be small, however our fingers are not, so lets all keep that in mind.

What else? Are there other personal pains that you have that should be important rules when designing for touch that you believe many people glance over?

Related Articles



There are no responses so far.

Leave your response

About Vince Baskerville
Product Manager at Lithium, a co-founder of 2 startups: TripLingo and Glancely.
A 10+ year industry specialist & adrenaline junkie whom has traveled to 12 countries, and is known for creating highly intuitive-engaging digital products. Continue reading »
 
Subscribe
Get the latest posts via RSS or Email for free:

or

Would you be so kind..