Overview

The key characteristics of our alert component are the following:

  1. Visibility: alerts should be positioned in a place where it can attract the user’s eye without too much effort, as it will convey critical messages about the system or important features.
  2. Concise: alert messages should use clear and straight-to-the-point language that conveys the message without unnecessary information, avoiding ambiguity or irrelevant details that could distract or confuse the user.
  3. Relevance: the content displayed on the alert must be directly relevant to the users task or system state.
  4. Actionability: the component provides clear and straightforward actions for the user to take in response to it, such as retrying, seeing details or dismissing the alert.
  5. Persistence: alerts should remain visible long enough for users to read and understand them, but not so long as to become an annoyance. Allow users to dismiss alerts once they have acknowledged them.
  6. Sequential display: only one alert must be visible at a time. If multiple alerts are triggered, subsequent alerts wait until the current alert is dismissed before appearing. This behavior prevents alert stacking and ensures users address each alert individually.

Types

Depending on the message that the alert is showcasing, we can find four different semantic meanings of the component:

Type Description
Information Informational messages are used exclusively to assist the user with directional or explanatory text about a complex or seldom used process
Warning Alert or warning messages should be displayed when there is a potential obstacle in completing a process as intended
Error Error messages convey a critical system problem that requires user and/or technical intervention to correct
Success Success messages should be used to assure user that a system calculation or data submission was completed correctly

Variants

Alerts can appear in various scenarios within a product, making it crucial to select the most appropriate variant for effectively conveying the message. Halstack offers three variants of its Alert component, each specifically designed and tailored to address common use cases.

Alert banner

Displayed always bellow the header of the site, the Alert banner is used for critical system or application messages. These alerts are actionable, meaning the user can interact with the message to resolve the issue directly from the alert itself. However, closing the message is not considered an action and is mandatory, as the message remains visible and cannot be dismissed until addressed. Additionally, if there are multiple critical system messages, the Alert banner allows pagination between them, ensuring that users can manage and resolve all critical issues systematically.

Use cases: