Laying Out Content and Controls

Consider how people hold the TouchPad

Tap Targets

• Tap targets should be larger on tablets than on phones.

• Standard webOS controls on the TouchPad are 54px square. We recommend using standard controls wherever possible, as these components have been designed specifically for use on the TouchPad and using these components will also lend familiarity to your application.

• If you choose to create custom controls, we recommend that any tap targets also be at least 54px square.

• Tapping on any tappable targets should provide immediate visual feedback to the user. Tap targets should be designed so that they have a pressed state when they are tapped--see the section on Providing Feedback for more details.

Positioning Controls

• The TouchPad has no conventional grip.

• People can hold the TouchPad either one- or two-handed in either orientation.

• It is harder to determine where to place controls on a tablet than it is on a phone; however, consider placing controls on the sides, as these are easily thumbable areas.

• Avoid placing destructive controls on the sides, as these areas are also easy to tap by mistake when gripping the device.

Create logical groupings of navigation and action controls

Pane with Header Only

Use the header area for:

• View title
• Search
• View options
• Navigation
• Actions and controls

Pane with Header and Footer

Use the header area for:

• View title
• Search
• View options
• Navigation

Use the footer area for:

• Actions and controls