Scale and positioning of controls

Touch interface elements should not be smaller than the smallest average finger pad, that is, no smaller than 1 cm (0.4") in diameter or a 1 cm × 1 cm square.

The target minimum sizes for UI elements should be 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.

  • A minimum of 5 mm line spacing in list type components.

Note that the given target sizes are general and may vary in practice. The visible area of the component and the component’s active area should be identical.

The width of a finger limits the density of items on screen. If the items are too close, the user will not be able to choose a single one.

As the user is more likely to touch higher on the button by mistake than on either side, consider the height of your buttons and icons.

Never place essential information or features, such as a label, instructions, or sub-controls below an interface element that can be touched, as it may be hidden by the user's own body.

  • In interfaces with traditional input devices, it makes sense to place targets like menu items on the edges of screens: the user cannot overshoot the target, as the cursor stops at the edge of the screen.

  • When using a touch screen, a user seldom drags his finger across the screen as he would with a cursor. Instead, they most likely lift their finger and place it on a new target. Users may have difficulties in reaching the objects located on the edges of the screen, especially if the physical device has protruding edges around the touch screen panel. Additionally, with some devices, the screen edges may be less sensitive to register the touch input.


Last updated 12 August 2011
Nokia Developer aims to help you create apps and publish them so you can connect with users around the world.

京ICP备05048969号  © Copyright Nokia 2012 All rights reserved