Building a user-friendly Slack app with Block Kit
Creating NAVITIME for Slack
This article was originally posted on our Qiita blog in Japanese.
While developing our new Slack app, we fully utilized Block Kit to realize the rich user interface of NAVITIME for Slack. In this article, we’ll discuss the lessons we learned during development:
- Overview of Block Kit
- How we used Block Kit for NAVITIME for Slack
- Obstacles we encountered, and a few tips
NAVITIME launched a new Slack app on July 2, 2019. Refer to the landing page (in Japanese) to learn more. NAVITIME is a popular travel and destination routing app in Japan for both locals and those visiting from abroad.
Disclaimer
This article doesn’t discuss the basics of creating Slack apps or how to interact with the payloads sent from Slack Platform. To learn how to get started, we recommend reading Slack’s API documents.
Block Kit Overview
Block Kit is a new UI framework for building rich messages on Slack. Block Kit is not a method library but instead is an interface specification for communications with Slack Platform. You don’t need to install anything to start using it. Simply send Block Kit compatible JSON data to Slack servers.
Things you can do with Block Kit
Using Block Kit, you can easily build beautiful native app-like UI and organize messages with great informational density.
To learn how to build apps with Block Kit, this article is a great resource for examples of using Block Kit properly.
Check your UI with Block Kit Builder
It can be a bit time-consuming to verify the appearance of messages by cutting and pasting JSON data. While prototyping, we recommend using Block Kit Builder, a useful tool offered by Slack. Block Kit Builder displays a live preview in the left pane when you edit the JSON data in the right pane as shown below. Additionally, once you’ve built your message, you can instantly share the message with other people in your Slack workspaces.
Structure of Block Kit Messages
Block Kit messages consist of data objects called “blocks.” Blocks may have many elements such as buttons, a select menu, or images. There are several types of blocks and allowed element types may vary. In order to build your messages with Block Kit, you stack these elements vertically.
If you’re curious about the types of block elements, refer to the corresponding official documents — Reference: Message layout blocks and Reference: Block elements.
Simple Example of JSON Structure
Code Example Here is a very basic Block Kit JSON example:
[
{
"type": "actions",
"elements": [
{
"type": "button",
"text": {
"type": "plain_text",
"text": "Button element 1",
"emoji": true
},
"value": "click_me_123"
},
{
"type": "static_select",
"placeholder": {
"type": "plain_text",
"text": "Select element 2"
},
"options": [
{
"text": {
"type": "plain_text",
"text": "Choice 1"
},
"value": "value-0"
},
{
"text": {
"type": "plain_text",
"text": "Choice 2"
},
"value": "value-1"
}
]
}
]
},
{
"type": "divider"
},
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "You can add a button alongside text in your message. "
},
"accessory": {
"type": "button",
"text": {
"type": "plain_text",
"text": "Button"
},
"value": "click_me_123"
}
}
]UI Example
This image is how the block kit example code appears in Slack. As you can see, there are several block elements inside the message.
To better understand the structure of the message, try it yourself using the Block Kit Builder.
Send a message from a Slack App
If you try sending our example JSON blocks directly to Slack, this won’t work. But if you already have a Slack app which can send plain-text messages with text attribute, you can easily send this Block Kit message by adding blocks at the top level and using your JSON block data.
An example Block Kit JSON array on Block Kit Builder:
[
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "this is a section block"
}
}
]Next, add blocks to complete the message payload.
{
"channel": "Cxxxxxx",
"text": "this content will be ignored when a block exists",
"blocks": // Insert Json created by Block Kit Builder here
[
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "This is a section block"
}
}
]
}Now let’s send the message using your Slack app. You will see the same message on Slack. Take note that when a message has a block, the text attribute is used as a fallback and doesn't show in the message. (Reference: Reference: Message payloads).
Case study: NAVITIME for Slack
The new app, NAVITIME for Slack, uses Block Kit a lot. Next, we’ll detail a message by disassembling its data structure to blocks and elements. You may think this message is a little too complicated, but once we take it apart, you’ll see it is actually very simple.
If you’d like to see the full message, open open the example message in Block Kit Builder.
Search Window
For the parts to input departure, destination, datetime, and so on, we recreated in the select menu and buttons native-app-level appearance and usability.
Display Routes
Route navigation tends to be so complicated, so we used both markdown and icon images a lot to organize the elements.
Open the full message of NAVITIME Route Search Result in Block Kit Builder. Note: we replaced the icon image URLs with the ones available in Block Kit Builder.
Obstacles and Tips
Performance degradation with image elements
When we had context blocks with seven to ten image elements in a single message, it took seven to eight seconds to display the message in Slack. If your app needs to display messages without any delays, you may need to avoid using many images in messages. Instead, you can use many emoji instead of large images.
Mobile screen issues with buttons and select menus
On smartphones, Slack displays buttons and select menus full width. So, if you have a lot of buttons in a message, a user’s mobile screen may be filled with buttons. Make sure to test your message on mobile as well in the Block Kit builder or on your device.
In our case, we decided to prioritize our laptop users’ experience as most of our smartphone users use our mobile app instead of our Slack app.
Block Kit elements unavailable in Dialogs
Originally we thought about using Dialogs to input departure, destination, and date/time. But we realized that it’s not possible to take advantage of these Block Kit elements in dialogs at this time. Instead, we decided to use select menus in dialogs and place the parts which require Block Kit components outside dialogs.
A wish list for the future of Block Kit
As of July 2019, Block Kit has only five types of elements. A few common elements of web and native apps are still missing. Here’s our wish list for the future, and the corresponding workarounds we used:
Radio buttons: We went with static_select select menu instead
Datetime picker: We went with static_select select menu instead. Ideally, we wanted to have a single element to input hours and minutes
More options for channels_select select menu: it would be more user-friendly if we had an option like select from the channels the current user joins
Summary
Let’s review what we’ve covered:
- You can build rich messages just by having Block Kit JSON in Slack
- Be careful not to use many large images in your messages
- Be sure to test your messages on mobile devices
