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).
Best practices
Always use the chat title to provide a context for the topic of discussion. Use chats only when they bring value.
Don’t be unclear about the purpose of the chat.
Always put the most recent messages on the list with the date they were sent.
Don’t put the last message at the top nor use a vertical timeline.
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 below each message.
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.
Code & Design assets
Request code and design assets for creating user interfaces.
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.