Indication
The indication pattern provides a starting point for designers to apply common indication scenarios, with consideration for color, iconography and recommended labeling guidelines.
There are four types of indication:
- Status
- Sentiment
- Progression
- Urgency
Status indicates the state or condition of a system or process. Each status helps users understand what’s happening, what actions are needed, and whether any issues need to be addressed.
The Salt Design System includes 4 statuses with associated colors and icons:
Status | Color | Icon |
---|---|---|
Info | Blue | InfoIcon |
Warning | Orange | WarningIcon |
Error | Red | ErrorIcon |
Success | Green | SuccessCircleIcon |
Sentiment helps guide users through an interface by providing visual cues about potential outcomes. Each sentiment evokes specific feelings such as negativity, carefulness, comfort, trust or positivity.
The Salt design system includes 5 sentiments with associated colors:
Sentiment | Color | Feeling |
---|---|---|
Neutral | Gray | Comfort |
Accented | Accent | Trust |
Caution | Orange | Carefulness |
Negative | Red | Negativity |
Positive | Green | Positivity |
A progression is a sequence of steps through which a piece of work passes from initiation to completion.
Progression is sequential but does not escalate. Not all steps are mandatory and can be skipped or repeated. Some processes may branch or result in different outcomes. The statuses are usually unique to a particular journey. Some processes may be relatively simple in nature (e.g. To-do, Doing, Done). Others are more complex, with the possibility of sub-status’ (e.g. In Progress, In Progress - Pending approval, In Progress - Approved).
There are 5 main stages of progression with associated colors and icons:
- Static:
- To do – An item that is ready to be picked up or assigned to a user
- Draft – An item has been picked up or assigned to a user, and is ready to be worked on/addressed
- In Progress:
- On hold – An item is temporarily not being dealt with and is paused
- In progress – An item is actively being worked on/addressed, with no blockers
- Alart:
- Pending – An item is being worked on but may be waiting for another process or input
- At Risk:
- Canceled – An item has been deliberately closed or removed, likely due to a negative circumstance
- Rejected – An item has been dismissed or failed, likely due to an error, and requires further action
- Complete:
- Completed – An item is finished or ready, and requires no further action
- Closed – An item is not being actively worked on and does not require further action
Progression | Color | Icon |
---|---|---|
Static | Gray | ProgressTodoIcon ProgressDraftIcon |
In Progress | Accent | ProgressOnhold ProgressInprogressIcon |
Alert | Orange | ProgressPending |
At Risk | Red | ProgressCancelledIcon ProgressRejectedIcon |
Complete | Green | ProgressCompleteIcon ProgressClosedIcon |
Urgency indicates the level of risk associated with an item, process or entity to be communicated.
Urgency levels escalate, but do not have to be followed in a sequence. An item may step through each level, but can also jump between levels depending on its condition. Factors determining urgency include:
- Risk
- Escalation
- Age
There are 5 levels of urgency with associated colors and icons:
- None: No urgency or priority level, neutral item with no action required from the user
- Low: Non-priority item with low threat to threshold/deadline, doesn’t require immediate acknowledgement from the user
- Medium: Moderate level of priority nearing threshold/deadline, item can be addressed at a later stage by the user
- High: Nearing threshold/deadline, item to be addressed by user to prevent a more serious outcome in workflow
- On Time: Indicates that the process has begun, but not enough time has elapsed to increase the urgency to "low"
Urgency | Color | Icon |
---|---|---|
None | Gray | UrgencyNoneIcon |
Low | Accent | UrgencyLowIcon |
Medium | Orange | UrgencyMediumIcon |
High | Red | UrgencyHighIcon |
On Time | Green | Icon TBD |