Fundamentals - Interaction States

Interaction states are crucial components of a design system. They ensure a seamless user experience by providing clear feedback on the usability of UI elements. These states help users understand what actions can be taken and what the result of their interaction with a product might be.

Principles

Interaction states must be intuitive, ensuring users understand their meaning without confusion. Aesthetic transitions should be avoided if they cause distraction; the goal is to enhance usability, not diminish it.

Designing Interaction States

Consider the context of use, ensuring that the states are appropriate for the device and the method of interaction whether it be mouse, touch, or keyboard.

Use Signifiers

Utilise clear visual indicators like colour changes or icons to signify state changes. For example, a button might change colour when hovered over to indicate it's clickable.

Behaviour

Provide immediate feedback, such as a colour change or a sound, to confirm an action has been received. Ensure that the feedback matches the action's significance—subtle for low priority actions and more pronounced for critical ones.