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 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:
- 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.
- Welcome people and get them started. During onboarding, your Chat app introduces itself to users and spaces, and sets them up for success.
- 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.
Text messages are perfect for simple notifications. They support @mentions
and basic formatting like bold, italics, and
An app might use a text message to notify software developers that code freeze is approaching:
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:
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:
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.
Plan your Chat app:
Welcome people and get them started:
Guide people to success: