Build Chat apps that help and delight users

The Google Chat design principles are a system we've put together to help you build high-quality Chat apps. The system rests on two pillars: design principles and a card-based UI framework.

Design principles

Design principles are guides that help you plan, design, and implement Chat app features that help users achieve their goals.

Design principles divide the Chat app creation process into three sequential phases:

  1. Plan your Chat app. During planning, you'll consider the people who your Chat app will help, the tasks the app will help with, and you'll map user journeys that define each user-app interaction.
  2. Welcome people and get them started. During onboarding, your Chat app introduces itself to users and spaces, and sets them up for success.
  3. Guide people to success. After onboarding, your Chat app continues to help people achieve their goals by guiding them with interactive cards and messages. If people need help or encounter errors, your Chat app tells them what they need to know to move forward.

A card-based UI framework

A card-based UI framework ensures a consistent, delightful experience on Android, iOS, and the web.

Chat apps interact with users using either text messages or card messages, each of which is represented as a JSON object.

Text messages are perfect for simple notifications. They support @mentions and basic formatting like bold, italics, and code.

An app might use a text message to notify software developers that code freeze is approaching:

Example text message in Google Chat that announces code freeze

Card messages support a defined layout, interactive UI elements like buttons, and rich media like images. Use card messages to present detailed information, gather information from users, and guide users to take a next step.

An app might use a card message to run a poll:

Running a poll in a Chat space with a card message

To help users complete multi-step processes, like filling in form data, cards can be strung together sequentially in a dialog. Dialogs open in windows that let apps interact with a user directly.

An app might start a dialog to gather contact details:

Gathering details about a new contact from a user with a dialog

Whether you've already built and deployed a Chat app or are just now thinking of a Chat app's name, these principles can help you build Chat apps that delight users.