Workflow management through Slack messages

What we learned about conversational UX and smart message design

Drew McKinney
Sep 29, 2017 · 5 min read
Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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
Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post

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.

Image for post
Image for post
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.

Image for post
Image for post
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…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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