Design enough states for all interactive elements

Sinh Vũ often asks clients a question when reviewing designs: "If customers press this button and nothing happens for two seconds, what will they do?" The answer is almost always: press it again. And that is when the problem begins, duplicate submissions, customers losing faith in the system. State and feedback are not the final details of completion. They are the foundation of a functional interface.

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.

Nielsen Norman Group has identified three time thresholds at which the human brain processes differently. Sinh Vũ uses these three benchmarks to determine the type of feedback needed in design.

• 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 loss occurs not during design, but when transferring files from design to programming. When the file only has a beautiful screen during rest, the programmer has to 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, loading, 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.

The viewpoint of Sinh Vũ

Timely feedback is not just a technical issue. It is how the brand shows respect to customers: they always know where they stand, what just happened, and what the next step is. A silent interface after customer interaction is an interface that does not respect the customer's time.

Sinh Vũ specifies all seven states in the deliverable file for every project, without leaving it to the developer's interpretation. You should request this as a criterion for acceptance, not as an additional requirement. A missing state is not an incomplete element: it is an element that has not been fully designed.