Designing a touch layout that your thumbs can actually use

A touch controller has no edges to feel. Your thumb cannot slide off a button and find the next one by touch, so the design of the layout does more work than on a physical pad. A few simple principles separate a layout that feels natural from one that causes constant misses. This guide covers them, then applies them to four common game types.

Start with how you hold the phone

Hold the phone in landscape the way you will play, in both hands, with your index fingers free if you use shoulder buttons. Notice where your thumbs rest without stretching. That resting position is the centre of each thumb's comfortable area. Place your most-used controls there and your less-used ones further out. Design for the grip you actually have, not for the picture of a controller in your head.

Principle 1: size by importance

The controls you press most should be the largest. The accelerator in a racing game, the jump button in a platformer and the fire button in a shooter earn big targets. Rarely used controls, such as a map or pause button, can be small. A small button that is hit by accident is worse than a small button that is hard to find, so put those at the top corners, away from thumb traffic.

Principle 2: leave space between controls

Thumbs are wide. Two buttons placed side by side will be pressed together unless there is a clear gap. Leave at least half a button width between neighbours that are used in quick succession, and more between controls that must never be hit together, for instance "jump" and "pause".

Principle 3: keep the edges clear

Your palms and the sides of your hands rest near the screen edges. Controls placed right at the edge get brushed. Keep the important ones a thumb's width inside. The same applies to the bottom edge, where the phone's gesture area can interfere with swipes.

Principle 4: put analog controls where they get room

A thumbstick needs space to move in. A stick squeezed into a corner means you run out of room as you push, and the stick feels cramped. Give it a generous area on the left for movement and keep it clear of other controls. Remember that the right thumb is also your fire and action hand, so a right stick plus buttons competes for the same thumb. In shooters, consider tilt for fine aiming instead of a right stick. See gyro aiming.

Principle 5: use the right widget for the job

• A trigger widget in Throttle mode suits anything analog, such as accelerator and brake, because sliding a finger gives smooth 0 to 100 percent control.
• A trigger in Normal mode or a plain button suits on-off actions.
• A rectangular button is easier to hit than a small circle, because your thumb can land anywhere on it.
• The D-pad widget suits retro games where precision on four directions matters more than analog movement.

Principle 6: fewer controls beat more controls

It is tempting to place every possible button on the screen. Resist. Each extra control shrinks the others and adds a chance of a mistaken press. Include only what the game needs and build separate layouts for different games. The layout builder lets you save as many as you like.

Applying the principles

Racing

Tall rectangular triggers on the right for accelerator and brake, set to Throttle. Steer by tilting, so the left half of the screen stays empty and your thumbs rest at the sides. Put gear changes on the bumpers at the top. Add only the buttons you use, such as handbrake and camera. See tilt steering.

Shooters

Left stick bottom left for movement. A large fire button on the right and a jump or crouch button above it. Put the reload and weapon-swap buttons within a short slide of the right thumb. Consider tilt for fine aim so the right thumb is freed for buttons.

Platformers

A D-pad or stick on the left and two big buttons on the right for jump and action. Place them low and close to the corners so your thumbs barely move. Platformers reward muscle memory, so keep the layout identical between sessions.

Emulators and retro games

A D-pad on the left, face buttons on the right, and small start and select buttons in the middle top. For older consoles, copy the real controller's proportions: the more the layout resembles the original, the easier the games feel.

Test, then adjust one thing at a time

1. Build the layout and play for ten minutes in a real game, not in the editor.
2. Note every mistaken press and every stretch. Those are the changes to make.
3. Move or resize one control, then play again. Changing many things at once hides which one helped.
4. When it feels right, save and name it. Come back after a week and fine-tune.

Make it permanent

A layout you spent an evening tuning is worth protecting. Read about sharing and backing up layouts, so a new phone or a reinstall does not erase your work. For a refresher on the editor itself, see the layout builder guide.