Slack アプリのサーフェスを特定する

学習の目的

この単元を完了すると、次のことができるようになります。

• Slack アプリで使用できるサーフェスを説明する。
  
• ユースケースに適したサーフェスを推奨する。
  

アプリのサーフェス

この単元では、ユーザーエクスペリエンスの設計に使用できる Slack アプリの 3 つのサーフェスについて学びます。

• App Home の [Home (ホーム)] タブ
  
• モーダル
  
• Messages
  

各サーフェスには、それぞれ異なる役割があります。Slack アプリを設計するときは、ユーザーに最適なアプリエクスペリエンスを提供できるように、これらの選択肢を考慮します。

App Home の [Home (ホーム)] タブ

App Home の [Home (ホーム)] タブは、ユーザーごとにカスタマイズされ、常時利用できる動的なインターフェースです。アプリの主要機能や関連情報を目立つ場所に表示するのに最適です。

Slack アプリの例

Drift アプリでは、動的なレポートとデータインサイトの表示に [Home (ホーム)] タブを使用します。リアルタイムの営業サイクル更新情報には [Messages (メッセージ)] タブを使用しており、Slack アプリのサーフェスを用途に応じて使い分けています。

常設のインターフェースに動的なコンテンツを組み合わせた [Home (ホーム)] タブは、ダッシュボード、ムードボード、複雑なワークフローの開始点など、Slack アプリのさまざまなユースケースに対応できます。

[Home (ホーム)] タブの設計のヒント

[Home (ホーム)] タブは、Block Kit のレイアウトブロックと要素を組み合わせて構成できます。インタラクティブコンポーネントを追加して動的な画面にすることもでき、1 つのビューに最大 100 個のレイアウトブロックを配置できます。設計時には、次の点を考慮してください。

• アプリを紹介する: アプリの機能と使い方を画面上部で明確に説明します。詳しい情報を表示するモーダルを開くヘルプボタンを追加するのもよいでしょう。
  
• 主要なアクションを目立たせる: 重要なアクションをすぐに実行できるように、ボタンやインタラクティブコンポーネントを画面上部に配置します。
  
• 情報を階層的に整理する: 情報を一目で把握して、すぐに操作できるようにします。長いリストには、ページネーションや絞り込みを使いましょう。
  
• カスタマイズできるようにする: ユーザーが通知頻度を調整したり機能のオンとオフを切り替えたりできるモーダルを開く設定ボタンを追加します。アプリ内の情報をユーザーが絞り込んだりカスタマイズしたりできるようにするかどうかも検討してください。
  

経費承認用のサンプルアプリ Expense Reports を例にして、これらの設計のヒントをどのように適用できるか考えてみましょう。

[Home (ホーム)] タブでは、経費レポートを作成し、承認待ちのレポートを表示して、過去のレポートを一覧で確認できます。この例では、@bette というユーザーがレポートの承認を待っています。

このアプリには、経費レポートを管理するユーザー向けの機能もあります。[Home (ホーム)] タブでは、承認待ち、承認済み、却下済みを含むすべてのレポートを確認できます。承認者自身も経費を申請できるため、ユーザーの役割や権限に応じてタブの内容が動的に変わるようにします。この例では、@bette が承認を依頼したレポートが承認者側の一覧に表示されるなど、ユーザーごとに異なるエクスペリエンスが提供されます。

モーダル

モーダルはアプリから呼び出されるインタラクティブなポップアップで、ユーザーからデータを収集したり動的なコンテンツを表示したりして、Slack で高度なワークフローを実現します。フォームから情報を送信したり、バグを報告したりする作業にはモーダルを使用します。モーダルは Block Kit ビルダーで作成します。

モーダルは Slack UI の上に重なる目立つポップアップウィンドウとして表示されます。ユーザーが特定の操作を行うと表示され、短時間だけ使用することを想定しています。

モーダルには最大 100 個のブロックを設定して、ユーザーに合わせたエクスペリエンスを提供できます。ユーザーから情報を収集したり、メトリクス、プロジェクトの状況、FAQ などの情報を表示したりできます。そのためモーダルは、Slack アプリ内でユーザーが操作しながら必要な情報を得られるエクスペリエンスを作成できる、汎用性の高いツールです。

モーダルには、日付ピッカーや複数選択メニューなどの Block Kit インタラクティブコンポーネントに加え、ダイアログで使用できる標準の入力オプションを表示できます。モーダルの内容は動的に更新することもできます。

1 つのモーダルでは、最大 3 つのビューを階層化して、複雑なワークフローを実現できます。各ビューは、Block Kit のレイアウト、機能、状態変数を含むペイロードで定義します。モーダル内でビューを作成、プッシュ、更新できるため、柔軟でインタラクティブなユーザーエクスペリエンスを実現できます。

モーダル設計のヒント

モーダルの目的を常に意識する。 モーダルではユーザー入力を収集したり、メッセージや [Home (ホーム)] タブでプレビューした情報の詳細を表示したりできます。モーダルを設計するときは、目的、ユーザーがどのように起動するか、何を達成するかを明確にします。モーダルは必要なデータに絞って使用すると効果的で、ユーザーが目的をすばやく達成できます。

適切なブロック種別を選択する。 static と external の選択要素だけではなく、users_select、conversations_select、datepicker、channels_select といったブロック要素も活用しましょう。これにより、Slack が生成する直感的なメニューを利用でき、開発作業も簡単になります。

Messages

Slack の重要な要素であるメッセージは、通知、ユーザー入力、ワークフローの完了に利用できる汎用性の高いツールです。アプリはチャンネルやダイレクトメッセージで情報を送信してユーザーに操作を促し、動的な会話型インターフェースを作成します。メッセージを使用すると、Slack 内でユーザーとのやり取りを充実させ、ワークフローを簡素化できます。

経費レポートが申請されると、承認者には [Approve (承認)] と [Deny (却下)] ボタンなどのインタラクティブ要素と、詳細を表示するオプションを含むメッセージが届きます。承認者は Slack から直接操作できるため、承認プロセスが簡素化され、経費レポートをより効率的に管理できます。

メッセージ設計のヒント

適切な通知頻度を設定する。 通知が多すぎてユーザーの負担にならないように、特に自動送信されるメッセージの頻度が高い場合は、ダイジェストとしてまとめて受け取るオプションを用意することを検討してください。アプリから届く通知が多すぎると、ユーザーがアプリを削除またはアンインストールする可能性があります。そうならないように、メッセージ通知の設定に簡単にアクセスできるようにします。たとえば、メッセージ内に設定リンクを直接含めて、ユーザーが簡単に自分向けにカスタマイズできるようにします。

メッセージ種別とチャンネルを適切に対応させる。 Slack の通知を使いやすくするには、メッセージの種類ごとに送信先のチャンネルを指定できるようにすることを検討します。たとえば、人事ツールであれば採用候補者の身元確認に関するメッセージを #hr-team に、新入社員に関する通知を #new-hires に送信できます。ベストプラクティスとして、関係のないユーザーまで通知で煩わせる可能性があるため、#general チャンネルをデフォルトの投稿先にすることは避けます。それぞれのメッセージに適したチャンネルに投稿しましょう。

通知からアクションを実行できるようにする。 ボタンやモーダルなどのインタラクティブ要素を Slack メッセージに追加して、通知から直接アクションを実行できるようにします。モーダルを使えば、ユーザーは現在の会話を離れることなく、複数のステップにわたって必要な情報を入力できます。ユーザーがアクションを実行できる効果的なメッセージを作成するには、次にどのような操作をするかを考えましょう。たとえば、経費レポートには [Approve (承認)] と [Deny (却下)] ボタンを追加します。

Slack アプリのサーフェスを設計するときにこれらのベストプラクティスを意識すれば、シームレスで直感的なユーザーエクスペリエンスを実現して、Slack 内でのアプリの機能と価値を高められます。

リソース

• Slack Marketplace: Drift
• Slack Marketplace: Streak
• Slack 開発者: Blocks (ブロック)