Finger usable UI

This document describes stylus as the input method with touch UI, but events apply to finger use also. However, in some cases the components may not be finger optimized due to the size of objects, for example, virtual keyboard or text field.

In Symbian, UI style defines the target minimum sizes for a UI element considered as finger usable:

  • 7 x 7 mm with 1 mm gaps for index finger usage

  • 8 x 8 mm with 2 mm gaps for thumb usage

  • List type of components should have minimum of 5 mm line spacing

Targets are general as in practice sizes can be use case dependent, for example, due to frequency of use, efficiency vs. error criticality or ease of error correction, location of the button (edge of screen vs. center).

The visible area of the component and the component's active area should be identical. There are exception cases to this rule though:

  • When components are located near the edge of the display, the touchable area should extend fully to the edge of the display (beyond the components visible graphics).

  • Visible area is smaller than the active area in order to keep the balance in look and feel of the UI. For example, scrollbar has wider touch area than visible area.

  • Active area is smaller than the visible area in order to avoid unwanted presses to contiguous active areas. In this case, there it should be graphically indicated where the user should tap. Example: fixed toolbar buttons in landscape layout.