By the end of this lesson you can
- Choose an appropriate information density for different contexts.
- Apply minimum touch target sizes and spacing.
- Offer density options where users need them.
The idea
Density is how much information fits in a given space. High density suits experts who scan lots of data, such as traders and analysts. Low density suits occasional users, touch screens and calm experiences.
Touch targets
Fingers are less precise than mouse pointers. Common guidance:
- Apple suggests at least 44 by 44 points; Material Design suggests 48 by 48 density-independent pixels.
- WCAG 2.2 sets a minimum of 24 by 24 CSS pixels (with exceptions) and recommends 44 by 44 at the enhanced level.
- Leave enough space between targets so people do not tap the wrong one.
A small icon can have a larger invisible target area around it, so the visual size and the tappable size can differ.
Density options
Professional tools often offer compact, comfortable and spacious modes. These can be built with spacing tokens and modes. Keep touch targets large enough even in compact mode on touch devices.
Why it matters in real projects
The right density makes products efficient for experts and approachable for newcomers. Small or crowded targets cause mis-taps, frustration and errors, especially for people with motor impairments, older users and anyone using a phone on the move. Target size is also an accessibility requirement.
A realistic example
A field engineering app shows job lists with small "Start" and "Cancel" icons placed 4px apart. Engineers wearing gloves often cancel jobs by mistake.
The designer increases tappable areas to 48px, separates the destructive action, adds a confirmation for cancelling and introduces a "comfortable" density by default on phones. Accidental cancellations drop sharply, while office staff using the web version keep a compact table view.
Step by step
Identify context
Note who uses the screen, how often and on what device.
Choose density
Decide the base density for that context.
Check targets
Measure tappable areas against guidelines.
Check spacing
Make sure adjacent targets are not too close, especially destructive ones.
Add density modes
Where needed, define compact and comfortable spacing tokens.
Test on device
Try key actions on a phone, one-handed.
Common mistakes
Mistake Tiny icon buttons on touch screens.
Instead Extend the tappable area to at least 44–48px.
Mistake Destructive actions next to common ones.
Instead Separate them and confirm where appropriate.
Mistake One density for every user.
Instead Offer options for expert, data-heavy contexts.
Check your understanding
Choose an answer, then check it. There is an explanation either way.
Practice exercise
Exercise · about 30 min
Target audit
Audit touch targets on a mobile app you use.
Steps
- Screenshot three screens.
- Measure the tappable areas you can identify.
- Mark any below guidance or too close together.
- Redesign one problem area.
Deliverable
An annotated audit and one redesign.
Self-assessment
Tick each item when it is true of your exercise. Be honest; this is for you.
4 items
Summary
- Density should match users and context.
- Touch targets need about 44–48px with spacing.
- Tappable areas can exceed visual size.
- Offer density modes for expert tools.
Further reading
Third-party sources, chosen for reliability. They open in a new tab.
Your notes
Marking complete updates your course and roadmap progress.