11. Interaction States
UI is a Dialogue
Amateur design assumes UI is a static painting. Professional UI Engineering treats the interface as a living dialogue between the user and the machine. When a user touches the system, the system must immediately confirm that it felt the touch. This is achieved through Interaction States and Micro-interactions.
✋ The 5 Core Button States
A professional button is never just one design. It is a system of at least five distinct visual states:
- 1. Default: The normal, resting state of the element.
- 2. Hover: Triggered when a mouse pointer rests over the element. It indicates clickability (usually by lightening or darkening the color).
- 3. Active (Pressed): The exact moment the user presses down. The element should physically react (e.g., shrinking slightly or darkening) to simulate real-world physics.
- 4. Focus: Triggered when a user navigates using the
Tabkey on a keyboard. This is a strict legal accessibility requirement. It is usually indicated by a prominent glowing outline. - 5. Disabled: The action is currently unavailable. It must look unclickable (usually grayed out with low contrast) and have a
not-allowedcursor.
⚡ Micro-interactions
A micro-interaction is a subtle, almost invisible animation that provides instant psychological feedback. For example, when you click 'Like' on Twitter, the heart doesn't just turn red—it bursts. When you toggle a switch on iOS, the background turns green while the circle slides over.
These elements reduce anxiety because they assure the user that the system is processing their request.
In the Sandbox, you will find a button that is completely static. Your mission is to engineer the interaction logic. You must define what happens when the button is Hovered (color change), Active (scale factor reduction), and Disabled (color change and cursor update). A button that does not react is indistinguishable from a broken application.
Editing: Default
Knowledge Check
Ready to test your understanding of 11. Interaction States?