UX Term of the Day: "Fitt's Law" (aka Fat Fingers...)

Ever have one of those controls on a screen that was Soooooooo small you couldn't tap it twice in a row if your life depended on it? These are the apps that make me pull out my pinky-finger in order to try to tap something... (If I'm totally honest with myself, pretty much every mobile phone soft-keyboard feels like this at times...there just *never* seems to be enough space to fit in all those keys!)

Earlier this year I was helping test an application for BB10 that clearly had some usability struggles. One of the issues that really stuck out was that one UI controls was about 4mm in width. That's actually about 1/2 what size it should have been.

So how big is big and how big is big enough? Turns it's not arbitrary and we have some math & science that basically tells how big something should be. The formula often used is called Fitts' Law:

Fitts' Law Formula

I've *simplified* here, but Difficulty (or technically the ID - Index of Difficulty) is logarithmically proportional to Distance Moved or how far the user has to move (the cursor or their "finger") and the Width of Button or the size of the 'tappable area' of the UI control. 

When we're talking about menu or nav buttons which could be selected from anywhere, really we don't care about distance moved (because it varies a lot), so really usability is somewhat *inversely* proportional to size. Even more so, if size *approaches* zero, the difficulty level becomes infinite! (Starting to remember infinity and limits from first year calc class, right?) 

In plain English, smaller buttons are harder and larger buttons are easier. Obvious right?

*However* the 'amount' that they are easier to use isn't linear, but rather at some point making the button bigger doesn't help *that* much. The converse is also true, at some point a little smaller can make it *really* *really* *really* hard to use.

For the full math and derivation of Fitts' Law, I'd suggestion the following links. (These are mostly best left for "geeky" HCI PhD's...)

• http://en.wikipedia.org/wiki/Fitts's_law
• http://www.cs.umd.edu/class/fall2002/cmsc838s/tichi/fitts.html

For the rest of us 'mere mortals', I would use Microsoft's (see below) much more human-understandable guidelines. I especially like MS depiction of various 'sizes' of fingers!

Quote from Microsoft (Win8) Touch Interaction Design Guide:

"People often blame themselves for having "fat fingers." But even baby fingers are wider than most touch targets. The image on the left shows the width of the average adult finger is about 11 millimeters (mm) wide, while a baby's is 8 mm, and some basketball players have fingers wider than 19 mm!"

http://msdn.microsoft.com/en-us/library/windows/apps/hh465415.aspx

MS goes on to say if you have a control @ 7mm, your error rate for mis-taps is about 1%. If you can make it at least 9mm, it's 0.5%. Notice how the curve is *almost* logarithmic? (Anything after 10-11mm, the difference is marginal at best. The % of missed taps gets smaller, but never 'actually' becomes zero...)

http://msdn.microsoft.com/en-us/library/windows/apps/hh465415.aspx

Apple too states that UI controls should be about 44 Pixels, which is about 9mm in real life on iPhones and iPads. Google/Android says 48 DPs, which is about 9mm on Superphones and Tablets, but the guidelines say stay within 7-10mm range if possible. 

(I think this is one of the *only* times I've ever seen all 3x big players agreed on anything!)

So bottom, if you don't want to do the messy math, 8-10mm should be a good threshold. Any smaller and you run a real risk of "mis-taps" from your mobile device (and likely *frustrated*) users.

Hope that helps...

w.

p.s. Still don't believe me? Every platform has a default "calculator" app. Load up the calculator app on your device and measure the physical size of the buttons. Break out the ruler and give it a try yourself!

Every time I've done this, at least one dimension is always at least 8mm long or longer. 

For the record here a quick snapshot of my finger on a ruler. I'd say that's just under 10mm and I assure you I don't have basketball player sized hands!