With this card – Distinction Error

This card makes the development of your design-system more effective and efficient.

A design system is a collection of reusable components, guidelines and standards that work together to create a consistent and cohesive user experience across a product or suite of products. Key benefits of a design system include consistency of the resulting user interface, process efficiency, scalability and collaboration. Many organizations develop their own design systems. The introduction of psychological insights into design system development makes a huge difference to the content of design systems (components, rules, etc.) as well as to their evaluation.

What is the “Distinction Error”?

The “Distinction Error” has a crucial psychological impact on the quality of design systems. It describes the following behaviour:  People consider two options to be more different when they are presented simultaneously than when they are evaluated separately in time or space. When users compare things (systems, information, attitudes, etc.), they perceive them as more similar if they can be compared directly. They also notice smaller differences, so they can form a more sophisticated picture of things and compare features more easily. The further apart things are presented in time, the fewer differences people notice and the more similar they judge them to be.

What does this mean for design systems?

When designing components, it is crucial that users can distinguish between their different states (e.g. deactivated, unpressed, permanently pressed buttons, etc.). If the components are designed visually while the states are simultaneously visible, the visual distinction is stronger than in the real usage context. In the real context, users may not see different states at the same time and therefore may not recognize one state as different from another.

The best way to address this potential pitfall is to assess the distinctiveness of component states by presenting the different states to users in a timely and visually separated manner and testing whether they perceive differences. This is particularly important when considering colour perception deficits. Approximately 10% of people have some form of colour perception deficiency. How will these people perceive differences in components? Are they distinct enough? If you only check for contrast (text on background), you are missing a critical step.


Other UX Psychology Lens cards can also improve your design-system, the card on the Gestaltlaws for instance.

You might also enjoy

Shopping Cart