Fine tuning the mobile touchscreen keyboard

Oct 13
piano sketch

There are some really good articles on the usability of Touchscreen keyboards, some comparing Android to iOS, others look at variations between manufactures. This article summarises the results from a short usability study. Using eye tracking and predictive techniques it helps revealed why some touch keyboards are easier to use than others.

A crescendo reverberates around the auditorium as the piano keys are struck with measured precision and vigour. The pianist barely has to even glance at the piano's keys as each delivers a tactile and audible response to the senses.

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.

  • HTC Desire-Z Android Touchscreen Keyboard
  • LG Optimus X2 Android Touchscreen Keyboard

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

  • drag down

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

Filed under:
Posted by:
James Griffin
October 13, 2012