Vittorio Vittori

Design System Architect / Senior UX Designer

Error Prevention

Even better than good error messages is a careful design which prevents a problem from occurring in the first place.

User-Centered Design
Error handling

Clear Affordances

Elements communicate what actions are possible and which are not, reducing misclicks and misuse.

A list of input fields and buttons

Use visual cues to indicate interactive elements Make clickable and non-clickable elements look the same Show disabled states for unavailable actions Allow actions without any visual affordance Use consistent patterns across the interface Change interaction patterns arbitrarily

Clear Input Expectations

The system makes requirements explicit so users know what is expected before acting.

Password strength indicator

State format and constraints upfront Reveal requirements only after submission Use labels and helper text together Rely on placeholder text alone Show character limits before typing Let users discover limits by trial and error

Constraint-Based Design

The interface prevents errors by limiting what users can do, making invalid actions impossible rather than recoverable.

Date range

Bug report
Current behavior Fonts should be easier to customize.
Expected behavior Actually, there is no way to change the font style of the date range.
Component affected mds-input-date-range
Constrain inputs to valid options Allow invalid data and handle it later Guide users with progressive disclosure Overwhelm users with unrestricted choices Prevent impossible states by design Rely solely on error messages for prevention

Destructive Action Protection

Potentially harmful actions require additional intent, preventing accidental execution.

off on
Require confirmation for irreversible actions Execute destructive actions immediately Use clear, specific warning messages Use vague confirmations like "Are you sure?" Differentiate destructive actions visually Style destructive and safe actions the same

Error-Resistant Flows

User journeys are designed to reduce the likelihood of mistakes, especially in critical paths.

A form with a select field

Break complex tasks into manageable steps Force users through long, dense forms Provide a final review before commitment Submit critical actions without user review Design flows around common user goals Optimize flows only for edge cases

Real-Time Validation

Errors are caught while the user is acting, not after submission, reducing frustration and rework.

File upload

Validate inputs as users interact Show all errors only after form submission Use clear, actionable error messages Display generic or technical error text Confirm valid input positively Only communicate when something is wrong

Safe Defaults

The system preselects options that minimize risk and reflect the most common or least harmful choice.

off on
Choose defaults that protect users Preselect risky or irreversible options Base defaults on common user behavior Use defaults that benefit only the system Allow users to change defaults easily Hide or lock default choices
Error Prevention