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

Chat

A chat is a module allowing you to display a discussion in real time.

General guidelines

A chat is an element that shows a written conversation and allows files to be exchanged between two or more people, being composed of various chat items. The use of each item must respect the standard display structure in the form of a chronological vertical list.

Sending a message may be allowed by simply pressing the “Enter/Return” key. An avatar with a status dot may be added to show user activity (see avatar).

You can see a chat interface where a woman talking with a bot.

Best practices

Good practice about the use of the chat.

Always use the chat title to provide a context for the topic of discussion.
 Use chats only when they bring value.

Bad practice about the use of the chat.

Don’t be unclear about the purpose of the chat.

Good practice about the use of the chat.

Always put the most recent messages on the list with the date they were sent.

Good practice about the use of the chat.

Don’t put the last message at the top nor use a vertical timeline.

A good practice for the timeline of a chart.

Stack up as a list if a user sends numerous messages in a row. If they are sent within a short amount of time and no other user message is sent at the same time, the send date will only be displayed below that last message.

Don't put the time and the picture of the avatar every message.

Don’t put the time below each message.

Anatomy

The key item is the message element, it varies according to the nature of the message and/or the sender. A chat module includes several components.

1. Title

Should be concise and describe the aim of the chat module.

2. Description

If needed when the title is not sufficient.

3. Incoming Message

Incoming messages are used to display a message received by the chat user. It appears to the left of the chat window and is neutral in color.

4. Outgoing Message

Outgoing messages are used to display a message sent by the chat user. It appears to the right of the chat window and its color should be chosen from the primary color palette.

5. Typing awareness indicator  

An alternative version of this message exists, which is an animated bubble indicating that another user is currently typing a message. It is only used in this temporary situation to provide feedback in the discussion.

6. Message with Attachment

Whether the message is incoming or outgoing, any attachment must be shown in the bubble provided for that purpose.

7. Call to action buttons

This type of button can automatically pops when the incoming message involves an action.

 

Placement

On desktop, a chat module is always placed inside a card. 

On mobile, this component should be full screen.

You can see a chat interface with point of interest.
You can see a chat interface on desktop.
You can see a chat interface on mobile.
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