Startup FInance

5 Expert Hacks to Improve Your Slackbot UI

Slack was built as a communication tool to collaborate effectively with teammates under little friction. Over the last few years, Slack has matured from a simple chat platform into an application platform that can deliver beautiful user experiences. As the number of Slack integrations and bots continue to rise, best practices have emerged to ensure that Slack interfaces are intuitive, effective and able to retain users for months to come. In this article, you’ll find five simple hacks that allow you to enhance your bot’s UI in Slack. We break down both the motivation that led us to these Slack UI hacks and the specifics of how we implemented them. None of these tweaks require more than a few lines of code and all bring simplicity and clarity to your user experience. Feel free to use these hacks in your own Slackbot UI and give your users a more intuitive and pleasant experience. Check them out:

1. Create Collapsible Menus

Collapsible Menus The right image is the result of clicking the “Try it” button

Our motivation for this UI hack:

We often want to provide users with a large amount of information all at once. In this example, we’re detailing a few actions you can take to improve your account completion. When we initially dumped the information onto the screen in full it was an overwhelming wall of text.

What we did:

The trick is using the UI principle of “progressive disclosure”. No user needs to see all the available information at once. They’ll want to request specific info on a topic that interests them. We provided separate attachments for each topic and allow users to select the topic they’d like to view using buttons. When the user clicks “Try It” or “Why?” the attachments expand to include a text section with a detailed explanation. Finally, clicking the “Try It” or “Why?” buttons a second time contracts the message. This has two benefits. First, the attachments feel more like a classic accordion widget. Second, we ensure that clicking a button always results in a visual action taking place, making the UI feel more responsive.

2. Format Attachments using Placeholder Images

Our Motivation for this UI hack:

Slack’s attachment formatting can be a bit temperamental when attaching images. Specifically, when using the image_url attribute, attachments that are supplied a blank or invalid url act as though they weren’t given an image at all. This creates a different formatting style in each of the attachments, as you can see the above-left image. Formatting Before The second item does not wrap at all and makes the formatting uneven

What we did:

We serve a tiny 1×1 pixel transparent image any time that image_url would be unfilled. While the tiny transparent image isn’t visible, Slack’s formatting is still convinced that there’s an image attached. As in the second image, everything lines up properly. Formatting After 2 The second item now clearly aligns with the first

3. Create Pretty Pagination

Smaller Pagination After Pretty Pagination in Slack!

Our Motivation for this UI hack:

The UI elements that Slack provides aren’t well-suited for displaying large data sets to the user. While we’d never recommend dumping hundreds of rows of data into a Slack channel, there are some things you can do to make the display of a simple data set more painless.

What we did:

One of the easiest ways to improve readability is pagination. A user should never get lost in a data set and the ability to navigate forward and backwards are essential. Since Slack doesn’t provide any UI options for pagination we created our own. We create a single attachment below the displayed data and use the usual bold unicode numerals to display unselected pages. The selected page uses the emoji for that number (e.g “:one:”, “:two:”, etc. in Slack’s shortcode) to draw visual interest.

Download The Report:

The Finance Stack of Top Performing Startups

    4. Use Images to Make Tables

    slackbot image tables The right table has a higher resolution and cleaner formatting

    Our Motivation for this UI hack:

    Another frequently used but not yet Slack supported display is the simple table. We wanted to display group spending data to users in a slack attachment but found that without official table support we were limited to ugly text rows or attempting to squeeze everything into the Slack attachment’s “fields” option, which quickly became a formatting nightmare.

    What we did:

    We generate static images from the table data and attach them to a Slack attachment. Specifically, since we’re using a Python/Django backend we used PIL (the Python Imaging Library) but every language should have an easy to locate, text-to-image solution. For extra polish points, Slack’s font, Lato, is freely available and makes your image look seamless with the rest of the attachment.

    5. Include Confirmation Buttons With Drop-down Menus

    slackbot confirmation

    Our Motivation for this UI hack:

    Drop-down select menus are a relatively new Slack feature and they allow for a lot more flexibility in your UI. However, some users find it strange that there’s no need to confirm their selection after its made. The data packet is sent (and thus the menu is “confirmed”) as soon as an item is selected. Without strong visual feedback, there can be uncertainty as to whether their selection was actually saved. This becomes even more confusing when there are two menus present as above.

    What we did:

    We added a regular Slack button to the attachment that allows the user to “Confirm.” The button doesn’t actually do anything other than visually change the Slack attachment to display the confirmation message. It doesn’t manipulate any data (we already updated the user’s choice when they made a selection in the drop-down menu). The confirm button and subsequent attachment update serve solely as visual feedback to the user and provide them with absolute certainty that we received their request.

    Three Slack UI Lessons Learned

    There’s a surprising amount that can be accomplished inside the confines of a Slack app. We learned a few key lessons while designing Teampay’s Slack UI, such as:
    • No amount of visual feedback is too much. Every button, menu, and interaction should have some effect on the attachment it’s part of.
    • Where Slack doesn’t provide a UI element (tables, pagination, collapsible menus) it’s possible to create an approximation.
    • Don’t be afraid to get creative, there’s a lot of flexibility in Slack’s attachment API and the supported configurations. Stretch it to your advantage.
    Slack makes for a comfortable and, with a little effort, beautiful place to make your app an easily accessible, and prominent part of your user’s daily workflow. We believe, if you take the time to creatively think through your design decisions, you’ll find it worthwhile.