A fingertip is much bigger than a pointer
A touch target is any control a finger can press, such as a button, a link or a tick box. If it is too small, people press the wrong one or miss it.
Sizing controls for fingers is one of the cheapest ways to make a mobile web app feel good.
By the end of this lesson
Note
I can size and space controls so a finger can press them.
Key words
| Word | What it means | Example |
|---|---|---|
| Touch target | the area of the screen that reacts to a press | |
| Tap | a quick press with a finger | |
| Spacing | the gap between two controls | |
| Thumb zone | the part of the screen a thumb reaches easily | |
| Pixel | one dot of the screen, the unit CSS uses for size | 44 px |
The cells students fill in are left blank in this preview.
Why a small button is hard to press
A mouse pointer is a single sharp point. A fingertip is a soft pad about a centimetre wide, and it covers the thing it presses. You cannot see what you are about to hit.
So a control must be big enough for the pad. It must also sit far enough from its neighbour that a slightly early tap still lands on the right one.
Worked example: common size guidance
| Idea | A common guide | Why |
|---|---|---|
| Size of a target | About 44 px square or more | A fingertip pad is about this wide |
| Gap between targets | About 8 px or more | A small slip then misses both |
| Text size for reading | About 16 px or more | Smaller text is hard to read at arm's length |
The cells students fill in are left blank in this preview.
The thumb zone is near the bottom
Most people hold a phone in one hand and use the thumb. The thumb reaches the lower middle of the screen easily and the top corners badly.
So the control used most often, such as Add, works well near the bottom. A rarely used control, or a risky one such as Delete, can sit further away.
Measure the sizes in the stylesheet
docker exec jupyter python3 steps/touch.pyShown here, not run. Create a free account to press Run and type it into your own lab’s terminal.
What the size check prints
The script reads every class in the lab's stylesheet that sets a width or a height in pixels. It prints each size and marks it UNDER 44 when it is below the line this lab uses.
It finishes with a count. The lab's own task is to fix the small ones. Here you only read the report and decide which controls a thumb would find hardest.
Sizing a control in CSS, line by line
.button {
min-height: 44px;
min-width: 44px;
margin: 4px;
}
/* min-height and min-width set the least size the control may have. */
/* margin adds a gap on every side. Two buttons side by side keep 8 px apart. */A common mistake
Warning
Many people think a small icon needs a small button. The icon can stay small while the button around it is large. The tap area is the button, not the picture. Add padding or a minimum size so the press area is big even when the drawing is not.