Yubi, a touch target bookmarklet

422

Yubi overlays a web page with a finger or thumb touch target, useful for testing how touchable page elements are. To install, simply drag Yubi to your bookmarks.

Yubi will launch a dialog to select thumb or finger touch size. The inner circle represents touch target size with an outer halo target boundary.

Touch size selection

To remove Yubi from a page, just click the bookmarklet again.

Yubi works on modern desktop and mobile browsers but touch size may be inaccurate on mobile and tablet browsers that rely on a viewport meta tag to set viewport scale but with no viewport meta tag present. Yubi will warn you if this is the case.

Due to CSS limitations, touch size may be slightly off on some devices (see limitations below).

Touch sizes

Touch sizes are based on Nokia recommendations: for thumbs, an 8mm touch target with 2mm boundary and for fingers, a 7mm touch target and 1 mm boundary.

There are numerous usability studies with varying touch size recommendations but I prefer Nokia’s as its finger touch sizes are close to what Apple recommends in their iOS Human Interface Guidelines but Nokia also includes thumb sizes. We use our thumbs with touch devices, a lot.

Limitations

In a prefect would, I would set the touch size using millimetres but unfortunately this doesn’t work so I have to convert millimetres to pixels. To do this, I calculated millimetre to pixel conversions for a number of popular devices when viewport width is set to device-width (device independent pixels):

Thumb size pixel conversions

TargetBoundary
iPhone 52 13
iPad 42 10
iPad mini 52 13
Galaxy Nexus 50 12
Nexus 7 51 13

Finger size pixel conversions

TargetBoundary
iPhone 45 6
iPad 36 5
iPad mini 45 6
Galaxy Nexus 44 6
Nexus 7 45 6

Based on this, I selected safe pixel sizes: for thumbs, a 52 pixel target with 13 pixel boundary and for fingers, a 45 pixel target and 6 pixel boundary. These sizes will be a little large on devices like the iPad but it’s better to have too large rather than too small touch targets.

You can pop over to Yubi on GitHub if you have any issues or feature requests.