Skip to main content

Messaging and Chatbots

Messaging services and chatbots are digital tools designed to facilitate real-time conversations between users or systems.

Foundations

For compliance with JET guidelines, it's essential to overwrite all available foundations to align with the PIE foundational tokens. Depending on the customisation level, various foundations may be available to adjustment. We advise confirming the customisation options available for the specific third party platform.

Foundations you can investigate are:

  • Typography
  • Colour
  • Elevation
  • Radius
  • Spacing
  • Motion
  • Iconography

Content width

All content types content should have a maximum width of 80% of the available space. This includes the avatar if used for the correspondents messages.

Messages

Colour

It's crucial to differentiate between the correspondent's and user's messages. Below are message options designed to ensure clear distinction between both the user and the correspondent.

Do
  • Ensure that the background colour used for the user’s messages is stronger than that of the correspondents to help users easily identify their contributions to the conversation.
  • Guarantee messages are clearly visible against the background, allowing users to read the conversion with ease, especially if a complex background has been applied.
  • Consider the tone of the scenario when selecting colours to ensure they align, and are suitable.
Don't
  • Don’t use the same colour for both the user’s messages and the correspondent’s. Ensure there are clear visual differences to help the user easily distinguish between them.
  • Don’t use multiple colours.

Borders

Borders are an optional addition to message colours than can be used for multiple reasons.

Do
  • Use borders to increase the contrast of the message against the background.
  • Use borders to enhance the user's ability to quickly scan a conversation and more clearly identify individual messages.
  • Ensure that the border colour aligns to the message colour, creating a cohesive palette.
Don't
  • Don’t apply borders to messages that provide a high contrast against the background.

Tails

Tails are a small extension that point towards the direction of the message’s sender that are attached to individual messages. They can vary in design depending on the third party platform that is being used.

Do
  • Use tails where available with the third party platform to provide additional context to the user’s.
Don't
  • Don’t apply tails to individual messages within a group, except for the last message in the sequence.

Groups

Messages sent in quick succession can be grouped to show users they are connected. Different third-party platforms may have varying time thresholds for defining grouped messages.

The spacing between individual messages is reduced to ensure they are visually tied together, and only the last message in a sequence retains its tail, while the others do not.

Structured responses

Structured responses are useful for chatbots that present choices to the user that are easy for the bot to understand, when selected, all structured responses will change their visual appearance and a user message will appear with the selected content.

Structured responses are always paired with a message to provide context to the options provided.

Do
  • Align the options to the side of the correspondent offering them to make it clear which side of the conversation they belong to.
  • Always provide an automated message response from the user with the option they selected for confirmation and visual feedback.
  • Always disable the options once a selection has been made to ensure a clear direction for the conversation.
Don't
  • Avoid structured responses for complex, emotional, ambiguous, or highly personalised interactions, as they can feel too rigid.

Interactive states

Outlines the atomic level interactive elements for the component.

Default

Hover

Active

Focus

Disabled

Metadata

Metadata should be applied to individual content elements or content groups to provide additional context

Name

Consider including the correspondent's name as message metadata based on the user-correspondent relationship. It can be used to foster a more personalised connection or enhance identification depending on the conversation.

First name

Using the correspondent’s first name allows personalisation whilst maintaining a level of privacy and security.

First + last name

Using both first and last names in metadata enhances identification, professionalism, record-keeping, and personalised communication, particularly in contexts where accuracy and clarity are important.

Restaurant name

Using a restaurant's name helps clearly identify the business, enabling personalised interactions and efficient customer service.

Date & timestamp

Consider including the message’s date and time in the metadata, for both the user and the correspondent, depending on the message’s purpose. This can provide contextual understand the timing of events or response.

Date & timestamp

Using both the timestamp and date provides precise tracking of when interactions occurred, which is crucial for context.

Timestamp

Using just the timestamp ensures precise tracking of interactions and response times, for conversations lasting less than a day.

Placement

Different UI kits position metadata in various locations relative to individual content elements, with some placing it above and others below. While using the default placement is acceptable, we recommend; if possible, positioning metadata below the message to reduce its prominence in the hierarchy.

Below

Above

Avatars

Avatars should only be visible for the correspondent, and not for the user. If the avatar is included in the conversation, it should be applied to all messages for consistency.

Variants

Various avatar variants are provided to cater for different correspondent types, ensuring users have distinct visual identifiers.

Chatbot

AI assistant

Advisor

Customer

Courier

Partner

Colour

The default colour should be brand orange to ensure that the brand colour is present within the UI. Consider the hierarchy of the avatar within the conversation when making a choice.

Maintain consistency by using the same colour throughout the entire message, regardless of any changes in avatar variants.

The footer is used to enter messages or select media to send in the conversation.

Do
  • Ensure the message send button or icon is prominent in the visual hierarchy, making it stands out as the primary CTA.
Don't
  • Don’t enable the message send button or icon until the user has entered a minimum of one character.

Backgrounds

Various background options are available, but always ensure that the background choice feels appropriate for the scenario as the background can change the user’s experience.

Simple

Single coloured backgrounds help messages stand out clearly and keep them as the main focus. Simple backgrounds are also viewed as more professional, so consider this when making your choice.

Complex

Do
  • Ensure that it doesn't draw too much attention from the messages and ensure that the messages stand out through either colour or borders.
  • Make sure that a background feels appropriate for the scenario, as complex backgrounds typically make the conversation feel more casual.
Don't
  • Use a complex background unnecessarily, make sure that it serves a purpose for the conversation and benefits the users.

Content

Copy across chatbots and messaging services can impact how users perceive the experience. To ensure the tone of voice and content being proposed is suitable, reach out the product copywriting team for their expertise.

Examples

Outlines the atomic level interactive elements for the component.

LTR examples

Here are some examples of messaging in left-to-right context:

RTL examples

Here are some examples of messaging in right-to-left context: