Vittorio

Design System Architect / Senior UX Designer

User-Centered Design
Predictability

Consistency and Standards

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

Behavioral Consistency

Similar actions produce similar outcomes, regardless of where they occur in the interface.

Click on three dots menu

Your home 350 Fifth Avenue, New York, NY 10118, USA Edit Show stats pro Delete
Mario Rossi Product Manager
Edit Show profile page Logout

External Standards

The interface follows established platform, industry, and web conventions, reducing the learning curve.

Different components, same conventions 

<mds-button variant="success" tone="weak">Click me</mds-button>
<mds-banner variant="success" tone="weak" deletable>...</mds-banner>

Components based on standard conventions 

<mds-input-field label="Your name">
  <mds-input type="text" name="full-name" required placeholder="Es: Mario Rossi"></mds-input>
<mds-input-field>
<mds-input-switch type="checkbox" name="agree" required checked>
  I agree to the terms and conditions
</mds-input-switch>

React wrappers available 

<MdsInputField label="Your name">
  <MdsInput type="text" name="full-name" required placeholder="Es: Mario Rossi"></MdsInput>
<MdsInputField>
<MdsInputSwitch type="checkbox" name="agree" required checked>
  I agree to the terms and conditions
</MdsInputSwitch>

Internal Consistency

The system behaves the same way in similar situations, so users can rely on patterns they have already learned.

Create your first folder Organize your files and folders in a structured way. New folder Add your first contact Add your first contact to your address book. New contact

Pattern Reuse

Established solutions are reused instead of reinvented, strengthening familiarity and efficiency.

Interactive use case

This text is a reusable web component, also the button below is a reusable web component. Click me And this is a dropdown, also a reusable web component.

System Integrity

The interface feels like a single, coherent system rather than a collection of disconnected parts.

Separated components which compose complex components

online Luigi Verdi UX Designer Button
Luigi Verdi online UX Designer

Terminology Consistency

Words and labels are used consistently to avoid confusion and misinterpretation.

off on
Workspaces Workspaces are the places where users are working together as teams.
Attacker You Fujimi Junior High School Dash Kappei Seirin High School basketball team Guard Kise Seirin High School basketball team Design System Team Core design system maintenance and development
Add Workspace
Workspaces Teams are the places where users are working together.
Attacker You Fujimi Junior High School Dash Kappei Seirin High School basketball team Guard Kise Seirin High School basketball team Design System Team Core design system maintenance and development
Add Group

Visual Consistency

Visual styles are applied uniformly, reinforcing recognition and predictability.

Read Reply Download Retry