Design Guidelines

A Conversation

Guidelines

Conversations can be very complex. Consider the different states of a conversation (first time vs. continuation) as well as actions that can be taken during or after.

A Conversation

Introduction

Let's consider the actions and experiences of a particular conversation—a collection of conversation entries, or even an empty conversation.

Start using our Design Kits

Open in Figma

Empty States

When a conversation is opened with no previous dialogue, what should the user see? A message (req), call to action (opt), or illustration (opt)—or should we prompt the next best action? (i.e. FB messenger asking you to "wave")

Possible Variations of Empty States:
  • First use
  • User cleared
  • Errors
  • No results/data
Empty States DO
Empty State: DO show the user pertinent information or help. Is there a wait time to be connected with someone? Are there any options for them to choose from to be connected to the right place?
Empty States DON'T
Empty State: DO NOT simply have a blank screen. At the very least something like a system message or text stating that this is the beginning of a conversation should be present.

Real-time Actions

The actions that happen in a conversation may differ if it is actively happening or historical. There are several actions a participant might be able to take, especially in a business setting. Many times these actions will be initiated by the publisher, though they can be launched from other places as well.

Examples:
  • Ability to transfer
  • Flag supervisor for help
  • Swarm around an issue with outside participants
  • Reactions (emojis, likes, star/favorite)
  • Screenshare
Flag for Help
Flagging for help from the publisher
Transfer from a publisher
Initiating a transfer from the publisher
Actions on a Conversation Entry
Actions being taken on a messaging entry

System Messages

These are notifications about events that happen during the conversation. Example: Someone has joined, left, shared file, transfer, etc.

  • Often includes timestamp and description of the event or action (see action indicator)
  • Can be used to indicate a user interaction, such as selecting an option from a list picker
  • Participants joining or leaving

Message Entries

These are the individual messages sent back and forth. (Details in the Message Entries Page. )

Summary or Highlights

A real-time conversation might include highlights of why a customer is reaching out. Or a conversation that has already ended might include a summary of the full interaction.

Post Conversation Actions

Similar to individual message entries, there may be different actions available to a full conversation history. Some might pose ethical concerns. Examples:

  • Share conversation
  • Save to library
  • Export (could include a transcript, maybe audio or video files.
  • Reactions (emojis, likes, star/favorite)