Simplicity And Hierarchy
Start With Information Priority
Identify four layers before arranging the screen:
- the user's primary goal
- information required to achieve it
- supporting information
- content or controls that do not materially help
Make the first three layers visibly distinct. Remove or quieten the fourth rather than letting available data or desktop whitespace dictate the interface.
A glance should reveal what the screen is about, what matters most, the primary action, and the major groups. Blur or squint at the rendered UI as a quick hierarchy check; the main structure should remain apparent before details are read.
Remove What Does Not Help
Every extra element competes for attention. Question badges added merely because a value exists, cards around every fragment, redundant explanatory copy, decorative treatments, and secondary controls given primary prominence.
Start by simplifying information and styles rather than adding another component to organise the complexity.
Distinguish Simplicity From Minimalism
The goal is the simplest interface that still supplies what the user needs. Do not remove labels, context, values, or recovery guidance to achieve a sparse appearance.
Avoid placing essential information only in hover content, tooltips, unfamiliar icons, or hidden views. Important information should be visible or clearly discoverable at the point it is needed.
Use Progressive Disclosure Deliberately
Show what is needed for the current decision, then make secondary detail easy to reach through an expandable region, details view, contextual popover, secondary screen, or learn-more path.
Use progressive disclosure when reduced cognitive load is worth the extra interaction. Do not hide primary information, frequent actions, or prerequisites behind it.
Reduce Unnecessary Choice
Remove redundant options, group related decisions, provide a sensible default, split a genuinely complex decision into coherent stages, or offer a recommendation when the product has enough context to justify one.
Do not remove meaningful control simply to reduce option count. An informed choice is better than a shorter but opaque flow.
Compose From The Constrained Viewport
When a product supports mobile and desktop, use the constrained viewport to force prioritisation. Preserve required context and practical targets, then adapt the composition deliberately for larger screens.
Desktop is not a stretched mobile layout, but additional space is not a requirement to add content. Use it to improve scanning, comparison, or efficiency where the task benefits.