Skip to content
UX Atlas

I'm designing

A Pricing Page

Comparison under uncertainty, where framing decisions are also ethical ones.

What this surface turns on

  • How many tiers exist, and who each is genuinely for.
  • What is compared, and whether the comparison is possible at a glance.
  • Where the anchor sits, and whether it is defensible.
  • What happens at the plan boundary when someone exceeds a limit.

Where these usually go wrong

  • A tier that exists only to make another look better.
  • Feature lists so long that comparison becomes impossible.
  • Plan names that describe nothing about who they are for.
  • Total cost obscured by per-seat, per-month and billed-annually all mixed together.
  • A comparison table whose headers scroll out of view.

Why these

A pricing page is a comparison under uncertainty. These entries cover choice architecture, anchoring, the honesty of the presented total and the writing that makes a plan comparable rather than merely listed.

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.

The first number a person sees shapes every judgement that follows, even when it is obviously arbitrary.

Adding a deliberately inferior third option changes which of the original two people choose.

More options can reduce satisfaction and completion, but the effect is much less reliable than the popular version suggests.

Decision time grows logarithmically with the number of equally likely choices, so the tenth option costs far less than the second.

The same fact produces different decisions depending on whether it is expressed as a gain or a loss.

People look to others' behaviour when deciding, especially under uncertainty.

The craft decisions

The visual and structural foundations that carry most of the weight on this surface.

The order in which elements are noticed, controlled by size, weight, colour, position and space.

Making one thing stand out, which only works if most things do not.

Using size, weight, colour and space to make the structure of text visible before it is read.

Empty space is a design element that groups, emphasises and sets pace, not leftover area.

Difference is what makes anything perceivable, and it is measurable for text against its background.

Shared edges create invisible lines that organise a layout and make it feel deliberate.

Patterns to reach for

Solutions people already recognise, with the conditions under which each one earns its place.

Putting options side by side so differences can be seen rather than remembered.

Show the common case first and reveal the rest on request, so complexity is available without being present.

User-contributed evaluations, which build trust only when the negative ones are visible too.

Components you will specify

Each entry covers the states, behaviour and accessibility contract you need to define.

A container that groups content about one object, and the most over-applied component in modern UI.

The right tool for comparing many records across many attributes, and a large amount of behaviour to specify.

An immediate on or off setting, which must actually take effect immediately.

A small marker of status, category or count, which must not look like something you can press.

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.

Difference is what makes anything perceivable, and it is measurable for text against its background.

Content must work at 400 percent zoom without horizontal scrolling, which is the same as working at 320 pixels wide.

Everything must be operable with a keyboard alone, which is the single most load-bearing accessibility requirement.

Colour may reinforce meaning but must never be the only thing carrying it.

The right tool for comparing many records across many attributes, and a large amount of behaviour to specify.

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.

The same fact produces different decisions depending on whether it is expressed as a gain or a loss.

Voice is who you are and stays constant. Tone is how you speak in a moment and must change with the situation.

How to find out

Research methods suited to the questions this surface raises.

Comparing variants with real traffic, which tells you what happened without telling you why.

Watching people attempt real tasks, which is the most direct evidence available about whether a design works.

Structured conversations about what people actually did, which is far more reliable than what they say they will do.

Showing a design briefly and asking what people remember, which tests hierarchy and clarity of message.

Check your work

Interactive checklists, with progress saved in your browser.

Whether the design serves the user's interest, including where that now overlaps with legal obligation.

A structured pass across the whole product, organised by the same categories as the audit tool.

Documents you might need

Fillable templates, prefilled so they are usable rather than empty.

The problem, the constraints and the success measures, agreed before design starts.

Decisions other teams made

Worked cases, including the options that were rejected and why.

A retention gauntlet kept subscribers for one more month and produced public complaints, regulatory attention and worse reactivation.

Designing something else?

Neighbouring territory. Each surface reuses much of the same material, arranged around the decisions that surface turns on.