Workflow management through Slack messages

What we learned about conversational UX and smart message design

Drew McKinney
Sep 29, 2017 · 5 min read

If your product facilitates workflow in some way, you likely want to enable these workflows through Slack messages. This article will walk you through the process of designing interactive Slack messages to support your product vision and enhance your user experience.

Why would my app need interactive Slack messages?

Not everyone needs a high degree of interaction between Slack and their app, but we absolutely do.

A brief introduction to Slack message attachments

Slack messages can be as simple as a text field with some basic formatting. But the real power of Slack messages are in attachments. Attachments provide a wealth of versatility, including support for basic markdown, message collapsing (and expanding), color striping, buttons, and of course, image previews.

Slack’s message builder, your new best friend

Slack not only provides a robust framework for creating messages using JSON, but gives us access to a WYSIWYG editor called the message builder. The message builder lets us preview exactly how our messages will look and behave when they arrive in Slack.

  • Hot-reload messages you design as you’re designing them, and be presented with specific error messages if they are found
  • Perhaps most importantly, the JSON with which you designed your messages can be used directly by your development team, so there’s no gap between design and implementation
Slack’s message builder

Our four big takeaways from designing interactive Slack messages

ICYMI: Sample code for the message builder example.

1. Put your most important information in “title” and “field” sections, and secondary in “text”

If the “text” field in a Slack attachment message is too long, Slack will automatically collapse the message after a few lines. The exceptions are the title and fields sections, which are shown regardless of message state.

Title and field sections will always show, regardless of message length

2. Use Slack’s native colors to represent state

Slack message attachments will display a stripe of color alongside the message. By default, this is gray, but you can customize this however you want. Slack provides some default color options to represent state, “danger”, “warning”, and “good”. Slack suggests that you make use of these color names to represent state, and don’t start introducing new state colors unless absolutely necessary.

3. Show meta details in the message footer

Message footers may seem forgettable, but you can use them to provide relevant meta information. We use them as a means to show who actioned on an incident when it changes state, and display when that change happened. You can optionally add an image alongside any footer to act as a visual anchor.

Slack message footers

4. Link to related messages with “jump”

Sometimes, an actionable message will get buried in the Slack timeline. If your app posts new messages related to the original (actionable) message, you can add a link to “jump” back up the timeline to the original message. We attach jump links to repeated paging and alert notifications so our users don’t have to go hunting to acknowledge or resolve an incident.

Slack’s jump link interaction

Where to go from here?

If you’re designing an integration with Slack, check out Slack’s User Experience Guide and Guidelines for building Slack messages, which provide do’s and don’ts for Slack message design. Also check out Building an interactive Slack app with message menus for an in-depth guide to Slack message menus (not discussed in this article)

Slack Platform Blog

Several bots are typing…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store