Time to hit a target depends on how far away it is and how big it is, which makes size and distance the two levers you control.
I'm designing
A Mobile App
Native or mobile web, where reach, input precision and connectivity all change.
What this surface turns on
- What the primary task is, and whether it sits in thumb reach.
- Which platform conventions you follow and which you deliberately break.
- How gestures are taught, and what their visible alternative is.
- What happens with no connection.
Where these usually go wrong
- Functionality that depends on hover, which does not exist on touch.
- Gestures with no visible alternative, which are undiscoverable and inaccessible.
- The on-screen keyboard covering the field being typed into.
- Feature parity quietly reduced on small screens.
- Tested only on a new phone on office wifi.
Why these
Small screens make every ranking decision visible, and touch makes every target size decision consequential. These entries cover reach, platform convention and the states an unreliable network introduces, which is where mobile designs usually break rather than in layout.
Why it works the way it does
The reasoning layer. Read these when a decision needs justifying, or when something is failing and you cannot say why.
People spend most of their time on other products, so they expect yours to work the way those do.
Below roughly 400 milliseconds of system response, people stop waiting on the machine and productivity rises sharply.
Decision time grows logarithmically with the number of equally likely choices, so the tenth option costs far less than the second.
Moving a pointer along a constrained path takes time proportional to the path length divided by its width, which is why nested menus are hard.
The craft decisions
The visual and structural foundations that carry most of the weight on this surface.
How much information occupies a given area, which should follow the user's expertise and task rather than a house style.
One layout that reflows across sizes, ideally driven by content limits rather than by device categories.
Distinct layouts for distinct contexts, justified when the task genuinely differs rather than merely the screen size.
How easily continuous text can be read, governed mostly by size, line length, leading and contrast.
Animation should explain a change, and anything that does not explain something is delay.
Difference is what makes anything perceivable, and it is measurable for text against its background.
Icons speed recognition for concepts users already know and create guesswork for everything else.
Patterns to reach for
Solutions people already recognise, with the conditions under which each one earns its place.
The structure that tells people what exists and where they are, which is an information architecture problem before it is a layout one.
Getting someone to their first real outcome, which is a very different goal from explaining the interface.
Apply the change immediately and reconcile with the server afterwards, so the interface never waits on the network.
What to show while waiting, chosen by how long the wait is and whether its length is known.
Three ways to handle long result sets, each with a different cost, and the right choice depends on the task.
Components you will specify
Each entry covers the states, behaviour and accessibility contract you need to define.
A panel that slides in from an edge, keeping context visible while offering more room than a popover.
A brief confirmation that disappears, which makes it unsuitable for anything the user must act on.
Parallel views in one space, which works only when users never need to compare across them.
One of the hardest components to get right, and one where typing is often faster than picking.
Triggers an action. If it navigates somewhere, it should be a link instead.
Accessibility requirements
Not a separate pass. These are the requirements this surface raises, mapped to the decisions that produce them.
Interactive targets need to be large enough and spaced enough to hit reliably.
Software that reads the interface aloud, navigating by structure rather than by layout.
Large-scale motion can cause nausea and dizziness, so the system preference must be honoured.
Text must scale to 200 percent without breaking, which means never sizing type in absolute units.
The visible marker showing where keyboard focus is, which must never be removed.
Language and content
The words do more work here than most teams budget for.
The small pieces of text that do most of the work: labels, hints, empty states, errors and confirmations.
Designing so the product can be adapted to other languages and regions without being rebuilt.
Say what happened, why if you know, and what to do next, in that order and in plain language.
How to find out
Research methods suited to the questions this surface raises.
Watching people work in their own environment, which surfaces the context that interviews miss.
Watching people attempt real tasks, which is the most direct evidence available about whether a design works.
Participants record their own experience over time, which captures things a single session cannot.
Check your work
Interactive checklists, with progress saved in your browser.
Touch targets, reach, input, performance and the assumptions that only fail on a phone.
A practical WCAG 2.2 AA review pass, ordered so the checks that find the most problems come first.
Whether a new user reaches real value, and how much you make them do before they get there.
Documents you might need
Fillable templates, prefilled so they are usable rather than empty.
Every path through a task, including the error paths and the states most flows forget.
A session script with tasks phrased as goals, and moderator prompts that do not lead.
Decisions other teams made
Worked cases, including the options that were rejected and why.
Hiding columns on small screens made the table tidy and removed the data field staff had opened it to see.
Every team that added a feature added a notification, and users responded by turning all of them off.
Designing something else?
Neighbouring territory. Each surface reuses much of the same material, arranged around the decisions that surface turns on.