Design enough states for all interactive elements

A question worth asking when reviewing a design: "If you press this button and nothing happens for two seconds, what will you do?" The answer is almost always: press it again. That is when the problem begins: duplicates, double submissions, and loss of trust in the system. State and feedback are the foundation of a functional interface, not details added later.

The seven mandatory states

Each interactive element, whether a button, input field, dropdown menu, or link, needs to have all seven states listed below. Missing any state is a deficiency, not just "acceptable".

• Default: the default state when there is no interaction.
• Hover: When the customer hovers over, the interface must indicate that this element is clickable.
• Focusing on the focal point: Customers use the keyboard to navigate, requiring clear borders or indicators to know where the cursor is.
• Loading: After clicking, the system is working; a clear indicator is needed so that customers do not click again.
• Success: completed actions, confirmed by a checkmark, notification, or appropriate screen transition.
• Error: something is wrong; you need to point out where the mistake is and what the client needs to do to fix it.
• Disabled: actions that are not available should be clearly indicated and should include a brief reason.

Three timeframes that customers perceive.

The Nielsen Norman Group has identified three time thresholds at which the human brain processes differently. These thresholds help determine the type of feedback that needs to be designed.

• Under 0.1 seconds: Customers feel an instant response, like pressing a physical button. A small color change or a subtle press effect is sufficient.
• Under 1 second: Customers notice a delay but their thought process remains intact. A small spinning icon or a button state changing to "sending" is appropriate.
• Over 10 seconds: Customers lose focus and begin to doubt whether the system is running. A progress bar or percentage completion indicator is needed to reassure customers while they wait.

The system must always inform customers about what is happening, through appropriate feedback in a timely manner.

Nielsen Norman Group, Visibility of System Status (Heuristic #1)

Common mistakes when delivering

The most common point of loss occurs when transferring files from design to development. When the file only has a beautiful screen during idle time, developers must decide the remaining states on their own. The result is often inconsistent with brand identity.

• The button does not respond after being pressed, causing the customer to press again and submit a duplicate order.
• The deliverable file only has the default state, lacking hover, focus, processing, error, and disabled states.
• Generic error messages like "An error has occurred," without specifying where the error is and how to fix it.
• Use an indefinite loading spinner for long actions, causing customers to be unaware of how much longer it will take and think the system is frozen.

Feedback is a way to respect customers.

Timely feedback is not just a technical issue. It is how a brand shows respect for you: you always know where you are, what just happened, and what the next step is. A silent interface after you take action is an interface that does not respect your time.

Therefore, specifying all seven states should be a criterion for acceptance set at the beginning of the project, not left for developers to guess. An element lacking a state is an element that is not fully designed.

This article is for reference. The scope, pricing, and specific commitments of Sinh Vũ are detailed in the proposal and signed contract.