Emphasis
Making one thing stand out, which only works if most things do not.
Definition
Emphasis is the deliberate promotion of a single element above its surroundings. It depends entirely on contrast with a consistent baseline, which makes it a limited resource within any one view.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
On this plate
Reach for this when
- Designing any screen with a primary action.
- Reviewing a screen where the main action is being missed.
Common mistakes
- Emphasis inflation across releases as each feature is promoted.
- Colour-only emphasis.
- Emphasising the business goal rather than the user goal.
- Emphasising what the business wants rather than what the reader is looking for, which teaches people to ignore emphasis.
Emphasis techniques, quietest first
- Increased weight, which is precise and cheap.
- Increased size.
- A background tint, which creates a region as well as emphasis.
- A solid fill in the accent colour, which is the strongest static treatment.
- Isolation in whitespace, which is quiet and often the most elegant option.
- Motion, which overrides everything and should be reserved for change.
Do
- Emphasise the action that matches the user's most likely goal.
- Combine two levers at most.
- Keep the baseline quiet so emphasis has somewhere to stand out from.
Do not
- Use colour alone, which fails WCAG 1.4.1.
- Emphasise more than one element per view.
- Use animation to emphasise something that is not changing.
Emphasis techniques and what each costs
| Technique | Strength | Cost |
|---|---|---|
| Extra space around it | Moderate | Layout space. Costs nothing else |
| Weight | Moderate | Wears out if used widely |
| Size | Strong | Space, and it unbalances a grid |
| Colour | Strong | Fails alone for many readers, and in greyscale |
| A filled container | Strong | Implies the thing is an object or a control |
| Motion | Strongest | Attention, accessibility, and it cannot be used twice |
In practice
- i.
Two primary buttons
A very common failureSave and Publish both styled as primary forces the user to read and decide where the design should have told them. Making one secondary costs nothing and answers the question.
- ii.
The second primary button
A budget, spent twiceTwo filled buttons side by side make the reader choose between two things that both look like the answer. Demoting one to a quieter style is the entire fix, and it is usually resisted for reasons that have nothing to do with the reader.
Local chart
FND·018 · Region II · Grid C2
This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Applies when you are designing
Applied through
Where this shows up as a concrete interface decision.
- ButtonCMP·001 · Component
- Destructive ActionsPAT·009 · Pattern
Principles behind this
The reasoning this solution is an application of.
- Aesthetic and Minimalist DesignHEUR·008 · Heuristic
- Serial Position EffectLAW·008 · Law
- Von Restorff EffectLAW·009 · Law
Short definition
The one-paragraph version, for when that is all you need.
- Visual HierarchyTERM·054 · Term
Related concept
Connected closely enough to change how you apply this.
- Use of ColorA11Y·010 · Accessibility
- Eye TrackingRES·017 · Research method
- Five-Second TestRES·008 · Research method
- Brand Color in InterfacesFND·024 · UI foundation
- ContrastFND·002 · UI foundation
- Font WeightFND·033 · UI foundation
- ScaleFND·012 · UI foundation
- Semantic ColorFND·023 · UI foundation
- Visual HierarchyFND·001 · UI foundation
- WhitespaceFND·015 · UI foundation