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).

Chat01
Best practices
Chat02DO

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

Chat02DONT

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

Chat03DO

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

Chat03DONT

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

Chat04DO

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.

Chat04DONT

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.

Chat02
Chat03
Chat04
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