|Read this if:||You're still experimenting, prototyping, and exploring.|
|Read first:||Introducing Block Kit|
|Read next:||Messaging for Slack apps|
Making your messages interactive allows you to provide more value to your users. It enables them to complete tasks quickly in the context of their conversation and workflow without having to navigate elsewhere.
Like guidelines? We have even more in our UI best practices guide.
Interactions should focus on what members are trying to do right then and there. Instead of offering many options, focus on the simple, common tasks that make sense to complete inside of Slack conversations.
Attachments allow you to add richer formatting to messages as well as buttons. Use the least amount of formatting needed.
On iOS and Android, our message attachments render something like:
Don't use an attachment when regular message text will suffice, and don't send multiple attachments when a single attachment will do.
And never ever (ever!) send more than 20 attachments.
The difference is small, yes, but Slack prefers consolidated messages.
Each attachment should represent an object so if there's a title for it, it should be inside the attachment.
Colorful bars guarding the edge of messages and their components definitely make them more distinctive.
Use color bars a few ways: Utilize your brand color to complement your app's avatar to more clearly brand your messages. Your service may already associate specific colors with workflow transition types and objects — use the colors that will most clearly resonate with our common users.
When you're not harmonizing with your brand, we suggest using the default light gray. If you're looking for just a little more distinction, consider using optional
Choose between three button styles: Default (
default), Primary (
primary), and Destructive (
Use Primary buttons when there's a single primary action you want to highlight next to other default buttons. Put the primary button before the default buttons.
Use a destructive button when there's a single primary action you want to highlight that is a destructive action. Also put the destructive button before the default buttons.
If the destructive action is potentially catastrophic or may inspire a deep sense of regret, offer a clear confirmation step before proceeding.
Use non-default buttons sparingly. There should only be one non-default button per attachment to help users quickly identify what their options are.
Please don't use emoji in your buttons. Decorate your messages with their mirthful magic instead.
After a user takes an action, try to update the message to reflect the current state. This may mean replacing the buttons with a confirmation of what they've selected. You can do this by either updating the first message or removing it and sending a new one. Try to keep elements in place so users can quickly see what has changed. Also check that someone who is seeing this message later can understand what has happened.
If there are multiple steps in an interaction, consider replacing the parts of the message and buttons along the way instead of just adding messages, and cleaning up the entire interaction at the end to summarize the entire interaction.
Please don't display a long list of items.
Try to show the most likely options first and, if you must, use buttons to paginate items. Try to replace the list instead of adding new messages.
Avoid cluttering up the conversation for everyone by using ephemeral messages in conversations when displaying items as an intermediary step of an action.
You have a few options on the type of message to send:
When it's useful for everyone in the channel to see the actions or that an action has been taken, just send a regular message to that channel.
If a user has initiated an action that has multiple steps, those steps should be shown as ephemeral messages visible only to that user until the entire action is complete to avoid cluttering the channel for everyone.
If you want to show actions or messages only to certain people, then you can send them a DM instead.
If actions expire, update the message when that has occurred with information on how to start it again.
Create a storyboard of your app's interactions before you start implementing it. It's a great way to remain user-centric and provide the most valuable and pleasant experience possible.
Words and copy used in your interactions should be easily understood even by someone who doesn't speak the same language fluently.
Nois better than
Get me out of here!