What is a warning state in UX design?
A warning state is a visual and communicative treatment applied to an interface element or section to alert users to a potential problem, risk, or important consideration that does not prevent them from proceeding but that they should be aware of. Unlike an error state which indicates something has gone wrong and must be corrected, a warning state indicates something that could go wrong or that the user should consider before taking an action. Warnings communicate "be careful" rather than "stop."
When should you use a warning state?
Warning states are appropriate for communicating that a potentially irreversible or significant action is about to be taken, such as deleting a record that has dependencies. They communicate configuration or data conditions that may not be intentional, such as a form field that accepts values outside the typical range. They alert users to system conditions that may affect their workflow, such as low storage space or an approaching rate limit. The key distinction from errors is that warnings are informational: the user can acknowledge them and proceed, while errors require correction before proceeding.
How to design effective warning states?
Warning states conventionally use amber or yellow as their visual signal, following the traffic light metaphor where red indicates stop and yellow indicates caution. The warning must use a visual signal that does not rely solely on color, because color alone is not accessible. An icon such as a triangle with an exclamation point, paired with clear warning copy, communicates the state through both color and form. Warning copy should explain specifically what users should be aware of and, where relevant, what options they have. Warnings that can be dismissed should have a clear dismiss action and should not reappear immediately unless the underlying condition has not been resolved.