Identify Slack App Surfaces
Learning Objectives
After completing this unit, you’ll be able to:
- Explain the surfaces available in a Slack app.
- Recommend which surface to use for a given use case.
App Surfaces
In this unit, you explore the three surfaces in a Slack app that you can use to design user experiences.
- App Home tab
- Modals
- Messages
Each surface serves a unique purpose. When you’re designing Slack apps, keep these options in mind so you can deliver the best app experience to your users.
App Home Tab
The App Home tab is a persistent, dynamic interface that’s tailored to individual users. It’s prime real estate to showcase your app's main functionality and display relevant information.
Example Slack App
The Drift app uses the Home tab for dynamic reporting and data insights. It uses the Messages tab for real-time sales cycle updates, demonstrating a versatile use of Slack's app surfaces.
The combination of a persistent interface with dynamic content in Home tabs enables a wide range of use cases for Slack apps, including dashboards, mood boards, and entry points to complex workflows.
Learn more about publishing and updating your app's Hometab.
Home Tab Design Tips
To create a Home tab, you can use Block Kit layout blocks and elements to compose its content. You can add interactive components to make it dynamic, arranging up to 100 layout blocks in a single view. Some tips to keep in mind:
-
Introduce your app: Clearly explain what your app does and how to use it at the top. Consider adding a help button that opens a modal for more detailed information.
-
Highlight primary actions: Use buttons or interactive components near the top to surface key calls to action.
-
Organize information hierarchically: Ensure information is glanceable and actionable. Consider pagination or filtering for extensive lists.
-
Allow customization: Add a settings button to a modal where users can adjust notification frequencies or toggle features. Determine whether your users should be able to filter or customize any information in the app.
Imagine how you would apply these design tips to Expense Reports, a sample expense approval app.
In the Home tab, users create expense reports, display pending reports, and list past reports. These features make it a useful tool for users like @bette.
The app also includes features for users that manage expense reports. In the Home tab, they can view all reports including those with pending, approved, or denied statuses. Since approvers can also submit expenses, the tab's content should be dynamic to accommodate different user roles and permissions. This ensures a tailored experience for various users, such as approvers who receive a list of reports after users like @bette submit a request.
Modals
Modals present interactive, app-triggered popups that enable advanced workflows in Slack by collecting data from users or displaying dynamic content. Use modals for tasks like submitting information via a form or reporting bugs. You build modals in Block Kit Builder.
Modals take center stage with prominent and pervasive popup windows, which display over the Slack UI. Modals display after users take a specific action and are intended to display for a short time.
You can configure modals with up to 100 blocks to provide a personalized experience. They can collect user input or display information like metrics, project status, or FAQs. This makes modals a versatile tool for creating interactive and informative experiences within Slack apps.
Modals can render Block Kit interactive components like datepickers and multiselect menus, and the standard input options available to dialogs. Modals can also be updated dynamically.
A modal can contain up to three layered views, enabling complex workflows. You define each view with a payload that includes the Block Kit layout, functionality, and state variables. You can create, push, or update views within a modal, allowing for flexible and interactive user experiences.
Critical API Documentation
Modal Design Tips
Keep the goal of the modal in mind. Modals can collect user input or display detailed information previewed in Messages or Home tabs. When designing a modal, be intentional about its purpose, how users invoke it, and what they achieve. Modals work best with focused data, so users can accomplish their goal quickly.
Consider the appropriate block types to use. Rather than relying on static and external select elements, use users_select, conversations_select, datepicker, and channels_select block elements. This approach creates an intuitive Slack-generated menu and makes your work easier.
Messages
Messages—a crucial part of the Slack experience—act as a versatile tool for notification, user input, and workflow completion. Apps use them to send information and prompt actions in channels and direct messages, creating a dynamic, conversational interface. With messages, apps can enhance user interaction and simplify workflows within Slack.
When an expense report is submitted, the approver receives a message with interactive elements like approve and deny buttons, and an option to view more details. This allows approvers to act directly in Slack, simplifying the approval process and creating a more efficient workflow for managing expense reports.
To learn more, check out these Slack Developers resources.
Message Design Tips
Pick the right frequency of notifications. To avoid overwhelming users with notifications, consider offering a digest option for frequent messages, especially those from automated sources. When apps generate too many notifications, users might remove or uninstall them. To avoid this situation, make it easy to access messaging preferences. For example, you might include a preferences link directly in the message so years can easily customize their experience.
Match message types and channels. To enhance the Slack notification experience, consider allowing users to direct different message types to specific channels. For instance, an HR tool could send candidate background check messages to #hr-team and new hire notifications to #new-hires. As a best practice, avoid default posts to a #general channel, which might unnecessarily distract users. Instead, send the message to a more relevant channel.
Make notifications actionable. Enhance your Slack messages with interactive elements like buttons and modals, so your users can take immediate action. Modals help you collect multistep input without requiring users to leave their current conversation. To create effective actionable messages, consider the user’s likely next step such as adding Approve and Deny buttons for expense reports.
When you apply these best practices for designing Slack App surfaces, you create a seamless and intuitive user experience that enhances your app's functionality and value within Slack.