Alerts
Keep users on their toes using Alerts
Alert is a messaging tool used to notify users when something important happens in the current case or flow or to prompt them to take an action.
Specifications
Anatomy
An alert typically consists of several key elements, which can include:
Title: a brief text that appears at the top of the alert and is used to indicate the nature of the alert or the source of the message.
Message: the main text of the alert used to convey important information or instruction to the user.
Icon or Symbol: a visual element used to indicate the type of the alert, such as a warning, error, or success icon.
Buttons or Actions: one or more buttons or actions that are used to allow the user to take a specific action in response to the alert. These can include “OK”, “Cancel”, “Yes”, “No”, “Retry” etc.
Close button: a button or icon that the user can use to close or dismiss the alert.
Progress bar: used to indicate a progress of an action
Color
The only color variation comes from the type of the alert. The color is applied to the leading icon while the background is white and Bilberry L4 when hovering.
Typography
/* Title */
font-family: Tahoma;
font-weight: bold;
font-size: 14px;
line-height: 17px;
color: #353535;
/* Message */
font-family: Tahoma;
font-weight: regular;
font-size: 12px;
line-height: 14px;
color: #353535;
Types
When use it? Used to indicate that a specific action has been completed successfully.
When use it? Used to indicate that an error has occurred and the user needs might need to take action to resolve it.
When use it? Used to warn the user of potential problems or issues. Usually for non-blocking issues that may have serious consequences if ignored. They are often non-dismissible.
When use it? Used to provide important information or context to the user, but does not require any action from the user. Information Alerts show useful things such as tips, help, or context and are dismissible. Can be a one- or multi-line pattern.
When use it? Used to indicate the progress of a task or process.
States
Default and hovering states are applied to alerts:
Variants
Simple: with icon message
With Title: alerts can include a title to offer an immediate context to the user
With Actions: alerts can include action buttons and a close button. Each button has their own hover state
Layout
Guidelines
Alerts can be used in a variety of ways in UI design:
Confirmation messages: used to confirm that a specific action has been completed successfully, e.g. when a user has successfully completed a task.
Error messages: used to inform the user of errors that have occurred, e.g. when an action cannot be completed.
Warning messages: used to warn the user of potential problems or issues, e.g. when an action may have unintended consequences.
Notifications: used to notify the user of important information, e.g. when new data is available or when a task is complete.
Progress indicators: used to display progress information, e.g. when a long-running task is in progress or when data is being loaded.
Things to consider while using alerts:
Context: the alert should be contextual to the current task or action the user is performing
Clarity: the message and title of the alert should be clear and concise, so that the user can quickly understand the information.
Relevance: the alert should be relevant to the task or action that the user is currently performing, and should not be used to display irrelevant information.
Consistency: the design and layout of alerts should be consistent throughout the product, so that the user can easily identify and understand them.
Feedback: the alert should provide feedback to the user on the outcome of their actions, so that they know whether the task has been completed successfully or whether an error has occurred.
Minimalism: the use of alerts should be minimal. Display the alerts only when it’s necessary and don’t overuse them as it can cause confusion or frustration.
Things to avoid:
Vagueness: avoid using unclear or vague language in the message and title of the alert. The user should be able to understand the important information or instruction quickly and easily.
Irrelevance: avoid displaying alerts that are not relevant to the task or action that the user is currently performing. This can be distracting and confusing for the user.
Overuse: avoid overusing alerts or displaying them unnecessarily. This can lead to alert fatigue and make the user less likely to pay attention to important alerts.
Lack of consistency: Avoid using different designs or layouts for alerts throughout the application. This can make it difficult for the user to identify and understand alerts.
Behavior:
Activation: the alert will be activated at the appropriate time and in response to the appropriate user action or system event.
Placement:
they should always appear in the same place on the screen and their behavior should be consistent and predictable.
it is possible to show alerts in different places depending on their type. E.g., information alerts are shown in the bottom left corner, and warning/error alerts are always shown in the top right corner of the page/screen.
alerts overlay the content on the screen.
Behavior:
Activation: the alert will be activated at the appropriate time and in response to the appropriate user action or system event.
Placement:
they should always appear in the same place on the screen and their behavior should be consistent and predictable.
it is possible to show alerts in different places depending on their type. E.g., information alerts are shown in the bottom left corner, and warning/error alerts are always shown in the top right corner of the page/screen.
alerts overlay the content on the screen.
Time on screen: the length of time that an alert should stay on the screen depends on the context and purpose of the alert.
Time-sensitive alerts: for alerts that require immediate attention (error messages or critical warnings), keep the alert visible until the user takes an action or dismisses the alert. Add an extra fadeout time of 2 to 3 seconds.
Non-time-sensitive alerts: for alerts that provide information or context, but do not require immediate attention, keep the alert visible for a brief period, 5-10 seconds, before dismissing it automatically. Add an extra fadeout time of 0.5 to 1 seconds.
Progress alerts: for alerts that indicate the progress of a task or process, keep the alert visible until the task or process is complete or the user dismisses the alert.
User interaction:
mouse or keyboard hover over the alert pauses the fading tame (if enabled) – this also applies to the fadeout time
Dismissal:
alert messages can be dismissed automatically (by timer) or manually (by user).
they can be dismissed by the user by clicking a close button or by clicking “OK” or “Cancel”.
urgent alerts can be dismissable only if there are other urgent messages present on the page and user can recognize the system state even without the alert message.
automatically dismissed alert messages should be paused if the user hovers on them with the cursor or keyboard.
automatically dismissed alerts should have a close/dismiss button and allow users to remove them from the screen before the automatic timeout of the alert.
once the alert is dismissed, it cannot be reopened.
Multiple alerts:
when multiple error messages are triggered at the same time, stack the alerts in a queue and display them one at a time in the order in which they were triggered.
filter alerts based on priority, only displaying the most critical alerts and hiding or aggregating less important alerts.
group alerts together in a single message to avoid repetition, e.g. “10 documents deleted.”
Animation:
animation that helps the user to notice the alert, such as fading in or sliding up.
if alerts are dismissable by time, they should have an animation indicating the time to read the message is almost up. This can be done by fading out or movement animation
Keyboard Navigation:
The alert should be navigable and actionable with a keyboard, for accessibility purposes, so that it’s possible to highlight the actions inside the alert with a keyboard hover
Color scheme: a color scheme that is used to indicate the type of the alert, such as red for error or yellow for warning.
Accessibility
The text messages inside of the alerts should be available for the highlight and copy if a user needs to clarify or translate the words and meaning of the message.
Since alerts overlay the on-screen content, it is important to guarantee sufficient contrast and good recognisability.
Use clear, simple language: avoid using jargon or technical terms, and ensure that the message and title of the alert, as well as action button labels, are clear and easy to understand.
Make sure that alerts can be dismissed easily, so that users who have difficulty interacting with the alert can remove it from their screen.
For users with motor impairments, it’s important to consider providing alternative methods for interacting with the alert, such as keyboard navigation, to avoid requiring the user to use a mouse or touch screen.
For users with reduced mobility, it’s recommended to keep the alert visible for a longer period of time, such as 10-15 seconds, to allow enough time for the user to react and interact with the alert.
Microcopy
- Be concise and clear
- Highlight the main benefit/value proposition
- Use an active voice
- Avoid jargon or technical terms
- Be attention-grabbing and actionable
- Match the tone and style of the brand
