Sticky Alert Design Component from Shipfaster UI Design Systems

Shipfaster: UI Components

Sticky Alert

Overview

Breadcrumbs are used when you have a large amount of content organised in hierarchical structure with defined categories (multiple sections that can be divided into more sub-sections). An excellent example is e-commerce site, in which a large variety of products is grouped into logical categories. They inform visitors of their current location in relation to the entire site hierarchy. Whereas they also improve the find-ability of site pages. The structure of the site is more easily understood because it is laid out in a breadcrumb.

These alerts persist until they are dismissed by the user. These alerts can include a ghost button or link. Depending on the message, the user resolving a product or system issue (for example, updating necessary account information), may also dismiss the alert. Sticky alerts may also persist across multiple sessions.

When to use

To highlight specific messages that require user's attention.
To promote special offers for your product or service.
When you want to make a site-wide announcement to the users.

‍

Anatomy

Alert Label: Informs the context of the alert message.
Actions: Provides appropriate actions for the user to take after reading the alert label.
Dismiss Icon: Allows the user to dismiss the alert.

‍

Best Practices

Decide on the priority of the banner based on the information you want to convey.
Allowing users to dismiss the alert is better.
Do not cover other content with an alerts notification.
Place system-wide messages directly below the main header or navigation bar.
Be descriptive, short and give users clear next steps.
Only show one alert at a time.

‍