Messaging (UI Standards)
- Jesilyn Barnes (Deactivated)
- Karen Jennings
- Anonymous
Messaging on Ferguson.com is the primary and most direct method that we give feedback to the users.
Any element-specific messaging (ie. empty states, field requirements, etc.) would trump the standards documented on this page.
The type of messaging that should be used is determined by two variables: Severity and Contextual Proximity.
1. Severity
Severity is related to the state that the message should be communicated in. By using the states accurately and consistently, we are able to give users information gracefully, clearly, and quickly.
Messages on Ferguson.com can be in one of four states:
1. Info Message
A message on Ferguson.com would be defined as 'info' if it was not generated by user interaction and there is NO action that the user could take to change the message.
We use two colors to communicate the 'info' state
2. Success Message
Ferguson.com defines a ‘success' as a message generated by user interaction, that communicates a valid and complete execution of the users intended task. These messages usually dismiss themselves after a short amount of time.
We use two colors to communicate the 'success' state
3. Warning Message
Ferguson.com defines a ‘warning' as a message generated either by user interaction or system-generated, that states a hindrance to the user's progression in a task that has yet to happen, or could potentially happen (in the future). The user must be able to perform an action to dismiss or correct this message.
We use two colors to communicate the 'warning' state
4. Error Message
Ferguson.com defines an ‘error' as a message generated either by user interaction or system-generated, that states a hindrance to the user's progression in a task that has already happened (in the past). The user must perform an action to correct and dismiss this message. If there is no action needed this will be an 'info' message.
We use two colors to communicate the 'error' state
2. Contextual Proximity
Contextual Proximity deals with placing the message as close in proximity to the element it references. For example, we do not want to use page-level messaging for something that deals with a single button.
Ferguson.com has four levels of Contextual Proximity.