Wednesday 7 December 2016

Finger Travel and Target Size in Touchscreen User Interfaces

Touch Target Size






The size of the interactive elements on a touchscreen interface is incredibly important. Though there are no generally agreed-upon guidelines or rules for ideal touch target size, device manufacturers and system design teams tend to have their own recommendations. Apple’s iPhone Human Interface Guidelines recommend a minimum target size of 44 pixels wide and 44 pixels tall, whereas Microsoft’s Windows Phone UI Design and Interaction Guide suggests a touch target size of 34px with a minimum touch target size of 26px. Nokia’s developer guidelines suggested that the target size should be no smaller than 1cm x 1cm square or 28 x 28 pixels. Google's Material Design guidelines (pictured above), recommend 48 x 24 pixels. 

It makes sense then to assess the size of human fingertips. An MIT Touch Lab study of Human Fingertips to investigate the Mechanics of Tactile Sense found that the average width of the index finger is 1.6 to 2 cm (16 – 20 mm) for most adults. This converts to 45 – 57 pixels, which is wider than what most mobile guidelines suggest. Of course finger-sized elements are ideal, but not always practical. Most of the touchscreen interfaces we interact with on a daily basis are on the relatively small display surface of smartphones.



Finger Travel 




As seen on the images of iOS 10 above, most of the elements you can interact with are located near the bottom of the device to minimise the travel undertaken by your fingers as you reach to press the targets. Though this is generally abided by, Apple (and Android devices) have a lot of crucial navigation elements right at the top of the device, such as their hamburger menus and back buttons. Most interfaces do the same, but BlackBerry 10 was a system which optimised ergonomic, one-handed UI navigation. As seen on the images below, almost all navigation could be done with the fingers on one hand and with very little finger travel. If space was non-permitting, then gestures would often provide an ergonomic secondary. 





A gesture used to access the BlackBerry Hub from any point in the system







Bottom navigation bar on BlackBerry 10


No comments:

Post a Comment