Griffin Interactive

The touch screen keyboard

Unlike the Piano keys, or physical keyboard the touchscreen delivers no tactile feedback. Therefore when typing, the user must concentrate and focus their attention on each and every key, ensuring that the correct one is pressed. This is far from ideal when typing, as we spend most of the time focusing on the keyboard and not on what we want to type. What exacerbates this task even further is that the finger tip covers the letter/touch-zone entirely.

Touch zone

It's clear to see that touch zone (finger size) and keyboard size make an obvious difference in the usability of the keyboard. The first example below shows the Touch-zone target encroaching into the neighbouring keys 'q' and 'e'. The spaces dividing the keys in example two make the target easier to hit.

Is it any wonder users often try to reduce their own touch-zone by using the corner of a finger tip.

Notably, iOS actually vary the touch target size depending upon which keys the user is most likely to press next (see research from David Pogue and Lukas Mathis).

Gaze Density

To optimally perform the task of typing a users gaze density should be focused on the text field, or area, and not the touchscreen keyboard.

Comparing the ideal with the actual gaze density we can see the users focus is largely on the keyboard.

Gaze density heat map key

The usability of the touchscreen keyboard is vastly improved by visually indicating which button has been pressed. However on many devices the indication is often presented at a large distance from the original button making feedback disjointed. This results in the users focus jumping back and forth between the finger (touch-zone) and the indicator.

A far more effective pattern is to include a visual connection between the button and the feedback indicator.

Using this approach ensures the gaze density is aligned with the key pressed giving immediate reassurance that the correct key has been selected.

Whilst testing we found this pattern to vastly improve both the speed and accuracy of touchscreen typing.

Touchscreen Keyboard research and examples

• Observational and Experimental Investigation of Typing Behaviour using Virtual Keyboards on Mobile Devices
• Large-scale analysis of mobile text entry
• Virtual Keyboards on iPhone and Android
• iPhone Keyboard Secrets
• Various manufacturer examples
• Windows Phone 7 touchscreen keyboard video
• Blackberry 10 touchscreen keyboard