In order to give you a better service Airbus uses cookies. By continuing to browse the site you are agreeing to our use of cookies I agree

Banners

Banners convey information to users after an action, a modification or a change in the HMI.

Usage

Notifications

Use the notification component to communicate a message that has little impact on the user (e.g.: confirmation that a request was sent). The notification is not used to interrupt the user’s action, but only to give the user some visual feedback. Notifications should only remain a few seconds.

Notifications

Banners

Use a banner to transmit a message with more impact on the user (e.g.: delete confirmation of a file containing a lot of elements). The banner should not interrupt the user, but will appear within his field of vision. Consequently, the message and its frequency must be adapted. The banner remains and requires an action from the user to disappears.

Banners

Use the color system to give meaning to the message and allow users to consider the importance of the message.

Success messages: give a positive message to the user following a successful action.

Warning messages: give a message of vigilance in order to inform the user of a potential error or a recommendation to finish an action.

Error messages: give a negative message following an error during an action or improper use of the system and provides information for finishing the task.

Information messages: give some neutral contextual information to the user to help understand an action or to announce a minor change.

 

Best practices

- Use a banner or a notification to transmit only one message at a time. If the need to show numerous notifications of the same type is justified, use the expandable banner element that allows you to group many messages into one banner.

- Limit showing simultaneous messages on the screen. In cases where the messages have a highly significant frequency, opt to use a notification panel.

- Always show at least a title. You may add secondary text or an icon to provide more details.

- Be concise and sufficiently explicit in the text. Avoid using two lines of text for a simple message. To finish off the message (for example, with some instructions for resolving an error), use a secondary text.

- Show affirmative messages using consistent vocabulary and favor the active voice.

- Add a call to action if the user can perform an action quickly (e.g.: cancel the submission of a request). In this case, opt for a ghost button. Do not include more than two calls to action per message.

- Use messages sparingly, only to convey important information that is pertinent to the users. Don’t forget that although they may be useful, they still represent a significant cognitive bias on the user.

- If the information is absolutely necessary and important, and requires action from the user, use a modal.

- Always allow users to delete a message using a delete icon located to the upper right.

 

Placement

The notification should appear as superimposed, at the bottom center of the page.

Visual

Appearance

Messages may be showed in the form of two following distinct elements: the banner and the toast.

 

Behavior 

Notifications and banners each exist in four possible states, according the information to be conveyed: success/positive information, alert, error or neutral/informative. Each behavior corresponds to a specific color.

Notif_Banner_Colors
Back to top