Friday 16 March 2012

iPhone screen layout

In developing smartphone screen interfaces, the challenge is to fit the core feature set into the vertical screen area. Make the buttons too big and you need to lose some content. Too small and the interface is frustrating to use. But if size matters, how small is too small?

In the case of the iPhone screen (480x320 pixels), the structure of the vertical interface is established using a 44 pixel grid. This establishes the minimum size for a tap target on an iPhone, like a button or a list item, at 44 pixels – about the size of a fingertip touching the screen. By building the standard controls in proportion to that measure, apps can be developed for handheld devices that are actually built for hands, using finger-sized units.

That doesn’t mean that the button graphics have to be 44 pixels high. Instead, whilst a button graphic may be visually smaller, nominally within a 20x20 pixel box, the graphic sits within an active 44 pixel ‘tap area’ that extends beyond the button edges. That way, if touching slightly above and below, or to the left and right of a button, the tap is still registered by the button footprint.



At least one dimension of Apples’ standard controls always fits to this 44 pixel measurement. For example, although the QUERTY keyboard buttons are as narrow as 30 pixels, they still retain the 44 pixel height.

Rows of buttons are then fitted into multiples of 44 pixels. For example, the iPhone home screen organises buttons into rows 88 pixels deep.

Using multiples of 44 provides a natural rhythm in proportion to your fingers and helps establish the look and feel of your interface in harmony with other iPhone apps.