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.
LAW·002
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.
LAW·003
Below roughly 400 milliseconds of system response, people stop waiting on the machine and productivity rises sharply.
LAW·006
Decision time grows logarithmically with the number of equally likely choices, so the tenth option costs far less than the second.
LAW·001
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.
LAW·016
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.
FND·016
One layout that reflows across sizes, ideally driven by content limits rather than by device categories.
FND·043
Distinct layouts for distinct contexts, justified when the task genuinely differs rather than merely the screen size.
FND·044
How easily continuous text can be read, governed mostly by size, line length, leading and contrast.
FND·036
Animation should explain a change, and anything that does not explain something is delay.
FND·052
Difference is what makes anything perceivable, and it is measurable for text against its background.
FND·002
Icons speed recognition for concepts users already know and create guesswork for everything else.
FND·050
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.
PAT·001
Getting someone to their first real outcome, which is a very different goal from explaining the interface.
PAT·014
Apply the change immediately and reconcile with the server afterwards, so the interface never waits on the network.
PAT·013
What to show while waiting, chosen by how long the wait is and whether its length is known.
PAT·011
Three ways to handle long result sets, each with a different cost, and the right choice depends on the task.
PAT·021
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.
CMP·011
A brief confirmation that disappears, which makes it unsuitable for anything the user must act on.
CMP·014
Parallel views in one space, which works only when users never need to compare across them.
CMP·016
One of the hardest components to get right, and one where typing is often faster than picking.
CMP·009
Accessibility requirements
Not a separate pass. These are the requirements this surface raises, mapped to the decisions that produce them.
Software that reads the interface aloud, navigating by structure rather than by layout.
A11Y·005
Large-scale motion can cause nausea and dizziness, so the system preference must be honoured.
A11Y·012
Text must scale to 200 percent without breaking, which means never sizing type in absolute units.
A11Y·014
The visible marker showing where keyboard focus is, which must never be removed.
A11Y·003
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.
WRT·001
Designing so the product can be adapted to other languages and regions without being rebuilt.
WRT·006
Say what happened, why if you know, and what to do next, in that order and in plain language.
WRT·002
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.
RES·012
Watching people attempt real tasks, which is the most direct evidence available about whether a design works.
RES·001
Participants record their own experience over time, which captures things a single session cannot.
RES·013
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.
CHK·003
A practical WCAG 2.2 AA review pass, ordered so the checks that find the most problems come first.
CHK·002
Whether a new user reaches real value, and how much you make them do before they get there.
CHK·005
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.
TPL·005
A session script with tasks phrased as goals, and moderator prompts that do not lead.
TPL·007
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.
CASE·005
Every team that added a feature added a notification, and users responded by turning all of them off.
CASE·007
Designing something else?
Neighbouring territory. Each surface reuses much of the same material, arranged around the decisions that surface turns on.