A Small Design Habit That Greatly Improved My UI Consistency

Why Read This from an HCI Perspective

This article clearly highlights the importance of designing component states as a single system—not as separate decisions per screen. For HCI/UX practitioners, it’s meaningful not only for achieving visual consistency, but also for improving predictability of interaction and bringing usability checks earlier into the process. When read alongside prototyping, it also connects to a collaboration perspective that can reduce back-and-forth costs with developers.

CIT's Commentary

From a CIT perspective, the core of this piece is that ‘state design’ is treated as part of interaction modeling—not as something handled during styling. Laying out default, hover, active, and disabled states side by side makes the rules of the design system more apparent, and it also clarifies what kind of feedback users should come to expect. That said, if you take it one step further, usability quality improves only when you define not just the states, but also the conditions for transitions between them and the meaning of animations. In other words, it’s an approach that prioritizes ‘consistency of behavior’ over simply making components look pretty.

Questions to Consider While Reading

• Q.How are you reflecting this approach to state design in your design system’s token structure or component guidelines?
• Q.When creating hover/active/disabled states, what issues are most commonly discovered during usability testing or prototyping?
• Q.When designing states together conflicts with accessibility (accessibility) requirements, how do you adjust priorities?