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

Banner

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

Fixed

Use a fixed banner to alert the user about significant information. Appearing from the top and pushing the content down, the message will :

  • be closed by the user.
  • disappear after a few seconds.
Fixed blue banner
Float

Use a float banner to transmit a message with less impact on the user (e.g.: an action confirmation). The banner should not interrupt the user, but will appear within his field of vision. Consequently, the message and its frequency must be adapted.

A float banner can either stay for “x” seconds or require the user to perform the action requested.

Fixed blue banner
Best practices
Don't use another format. Lines will not be equidistant to each other, which will generate more time to scan the picture for the user, especially while browsing a long list.

Prefer concise and explicit messages.

Don't use another format. Lines will not be equidistant to each other, which will generate more time to scan the picture for the user, especially while browsing a long list.

Avoid using two lines of text for a message. Never show more than one fixed banner.

Good practice about the use of banner.

Always show at least a title or add secondary text or an icon to provide more details. You also add a call to action if the user can perform an action quickly.

Caution practice about the use of multiple floating banners.

Be careful with using too many floating banners at the same time, it increases the cognitive load for the user.

Good practice about the use of floating banner.

Always use a description and propose actions when there are several floating banners of the same type to keep the user informed.

Don't use another format. Lines will not be equidistant to each other, which will generate more time to scan the picture for the user, especially while browsing a long list.

Avoid technical and unexplicit messages for the user.

Visual guidelines

Visual variants

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.

Fixed blue banner

Motion

This component should slide from a corner, depending on the interaction context. Consider this component as an attention getter.

Position

Float banners always overlay the content.

Code & Design assets

Request code and design assets for creating user interfaces.

Component overview

Component overview

Can I contribute to the System?

Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.

Back to top