Apr 15, 2013

Designing for the Thumb

While playing this imaginatory game with the non existing UI I am constantly producing auditive feedback for myself. Making different “swooshs” and “clicks” helps me to go through the UI and its different functions. So, I am creating feedback ´since there is no interaction on the screen yet. More thoughts about UI sounds later...

Another thing I have noticed is that I use mainly my thumb for interacting with my smartphone. All these visualizations for gestures for iOS devices use index finger! And what is the reason for that? I use index finger only for pinch and spread actions. iPad is a different story! There are numerous studies that indicates that the use of an index finger has decreased since sms:ing started to be part of everyday communication. (I have to find this one specific study where they call people who uses thumbs as peukaloinen, thumbling).

It is interesting and inspiring to design an UI that can be used with one hand -- and more specifically an UI that is ambidextrous, so pick a hand! The app can be used also with two hands: the user holds the smartphone on the other hand and interacts with the other hand. I rarely do this my self! These were the main reasons why I started developing an UI with four active corners instead of buttons and switches.

How about you? Have you paid any attention which fingers you mainly use with your smartphone?

The Size of the Thumb

The way you hold the device is important when designing the interaction and the size of your finger defines the measurements of the UI. But how big is my thumb?

It feels like all the platforms give different measurements for these tap targets. But let´s concentrate on iOS  devices. IOS developer library offers colossal amount of information related UI design for touch screen devices. According to this source the minimum size of a tap target is 44 points, or about 1/4" or 7mm. To make this more concrete here is an example: in the iPhone keyboard the keys are 44 points tall but only 30 points wide. To fit in the full QWERTY keyboard they had to make keys more narrow -- and this is the reason why it is so annoying to write with an iPhone. You have to focus and edit your text multiple times to make it right.

Summa summarum: 44 x 44 point is the absolute minumum size for tap target but for our purposes it is too small. So, let´s make it big enough and easy to use.

The average width of an adult thumb is 1 inch (2.5 cm), which converts to 72 pixels. (http://en.wikipedia.org/wiki/Finger_%28unit%29)

About units: Pixel is the appropriate unit of measurement to use when discussing the size of a device screen or the size of an icon you create in an image-editing app. Point is the appropriate unit of measurement to use when discussing the size of an area that is drawn onscreen.

On a standard-resolution device screen, one point equals one pixel, but other resolutions might dictate a different relationship. On a Retina display, for example, one point equals two pixels.

(https://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Characteristics/Characteristics.html#//apple_ref/doc/uid/TP40006556-CH7-SW1)

 References:


Target Size Study for One-Handed Thumb Use on Small Touchscreen Devices
http://research.microsoft.com/pubs/75812/parhi-mobileHCI06.pdf

Touch key design for target selection on a mobile phone
http://arnetminer.org/publication/-495564.html


https://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html

 

UX Design Guidelines for Smartphones http://uxdesign.smashingmagazine.com/2011/10/06/not-your-parents-mobile-phone-ux-design-guidelines-smartphones/

No comments:

Post a Comment