Collab space: Status labels

This is an open space for collaborating on a status label pattern. To join in the conversation please add a comment below.

Overview

Status labels communicate a level of severity or status of an object to users.

When to use status labels

Use to indicate a desired status to users or provide a state that requires attention. Status labels stand out from other content to draw a users attention to important content.

Types of status labels

  • Information - Use when the status is informative or new and also has a neutral meaning (ie. new, coming soon)
  • Success - Use to communicate a successful or positive status (ie. available, approved, completed etc)
  • Warning - Use to communicate when action is required or to avoid incurring an impending error (ie. missing information, expiring soon etc)
  • Error - Use to communicate an issue or failure that needs resolving (ie. expired, failed, cancelled etc)
  • Neutral - Use when a status is not available or does not fall into a state above (ie. inactive, not available, not provided etc)

Interaction Design & Usability Research

  • Place status labels as close to the element as possible to strengthen its connection
  • Use clear labels with short, scannable text (single words where possible)
  • Use adjectives rather than verbs so the user doesn’t think that clicking them will perform an action.

UI Design

Great! works well for me…

1 Like