Pardon Me, But I Actually Meant To Ignore You

There's a distinct usability difference between navigating a web site on a desktop with a mouse and on a tablet or mobile device with your finger. A mouse is accurate to the pixel. Fingers are far less precise. They’re particularly less precise if you have big fat caveman fingers like mine.

This came to mind this morning as I inadvertently accepted a LinkedIn request on my iPad that I intended to ignore. It’s true, I don't willy nilly accept every LinkedIn request I get... but that's another rant. The options were just too close together and like I said, I've got caveman hands.

Physical Space, Not Pixels

This is just one example of why you need to consider real world physical space when designing for tablet and mobile. Bigger pointing devices, like fingers, need bigger targets. Between Apple, Microsoft, Nokia and MIT’s Touch Lab the recommended guidelines for touch targets are between 8 and 14mm with a minimum of 2mm of spacing between actions (source: Mobile First by Luke Wroblewski).

Guidelines, Not Rules

LinkedIn followed the guidelines for some of their targets. However, guidelines are meant to lead you in the right direction, not force you into a rigid structure. How often the target is used and its position on the screen should also be considered for optimal usability. Context and common sense should lead your design if you want it to facilitate human behavior.

The touch targets below are the worst offenders. The options arrow (B) is far too small and placed too close to the accept button (A), making it too easy to accidentally accept a request when all you wanted to do was view the options. Accidentally tapping on a nav item is frustrating. Accidentally tapping on the wrong action item causes you to blog about it.

Thumbs, Not Cursors

Here's a good rule of thumb (pun intended) when designing targets for mobile. Just ask yourself, “Could I hit it with my thumb?”