Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.
The system minimizes the amount of information users must remember, compare, or interpret to complete a task.
off
on
Vittorio VittoriDesign System Architect / Senior UX Designer
Group related information and actions togetherForce users to mentally connect scattered elementsUse sensible defaults to reduce decision-makingRequire configuration for every interactionShow information only when it becomes relevantExpose all options at once regardless of context
Consistency
Styles and interaction patterns are applied predictably, reducing the need for interpretation or relearning.
Your home350 Fifth Avenue, New York, NY 10118, USAEdit
Show stats
proDelete
Mario RossiProduct Manager
Edit
Show profile page
Logout
Apply the same visual treatment to the same type of actionChange styles or behavior arbitrarily between screensReuse established interaction patternsIntroduce new patterns without a clear needMaintain consistent spacing and typographyMix multiple visual systems in the same product
Essential Content
The interface presents only what is necessary for the user's current goal, removing visual noise and redundant information.
off
on
Giulia CrippaFrontend Developer
Giulia CrippaFrontend Developergiulia.crippa@example.comLast activity 5 min ago
Prioritize content directly related to the current taskDisplay secondary or promotional content by defaultRemove duplicated or low-value informationRepeat the same data in multiple visual formsDefer optional information behind secondary actionsOverload screens with edge-case details
Goal Focus
Each screen is designed around a primary user task, avoiding feature accumulation and distraction.
off
on
Are you sure you want to delete this project? This action cannot be undone.Cancel
Delete
Are you sure you want to delete this project? This action cannot be undone.Cancel
Projects List
Delete
Define a clear primary action per screenCompete with multiple equally prominent actionsSupport the main task with secondary actionsIntroduce unrelated features on the same screenAlign layout and content with the main goalDesign screens as generic feature containers
Semantic Clarity
Each element communicates a single, unambiguous purpose through its appearance and behavior.
off
on
SearchProceed
Match visual style to the element's functionReuse the same style for different purposesUse labels that describe the outcome of actionsRely on vague or metaphorical wordingEnsure behavior matches visual expectationsCreate elements that look clickable but are not
Visual Cleanliness
Visual styling supports content and actions without competing for attention or adding unnecessary decoration.
off
on
Are you sure you want to add unnecessary elements and distract the user from the essential,
to add cognitive load and decrease the usability?
CancelConfirm
Are you sure you want to remove unnecessary elements and focus on the essential, to reduce
the cognitive load and improve the usability?
This should improve the usability and avoid user to read unnecessary information.
That's why we have removed the unnecessary text to read and focus on the essential.
Yep.CancelConfirm
Use decoration only when it adds meaningAdd visual effects purely for aestheticsFavor whitespace to separate contentRely on heavy borders and dividersKeep color palettes minimal and functionalUse too many accent colors on one screen
Visual Hierarchy
The layout and styling guide attention naturally, helping users understand what matters most without conscious effort.
typography composition
Love Is AllEverything else is just secondary
Use size, contrast, and spacing to show importanceGive equal visual weight to all elementsGuide the eye from primary to secondary contentForce users to scan randomly for key actionsAlign hierarchy with user prioritiesBase hierarchy solely on aesthetic preferences
Related references and bibliographypotentially outdated