この投稿はSlackプラットフォームブログのために書かれました。 元のエントリーを読む こちら。

GuruのSlack統合は、ボットの初期の頃に始まり、当時の体験は主にテキストベースで、Slackがインタラクティブなメッセージやアクション機能を導入するにつれて、その機能が向上しました。 私たちはすぐにBlock Kitの利点を見出しました。それは、ユーザーが期待する深い、リッチな体験を構築する機会であり、より馴染みのあるUI/UXパターンやインタラクティブなコンテンツを提供することができました。 しかし、私たちが予期していなかったのは、Block Kitが開発チームとデザインチームのコラボレーションの方法をどのように変えるかということでした。

より良いオンボーディング体験の構築

私たちは最初にBlock Kitを適用して、アプリのヘルプメニューを刷新しました。 以前は、ユーザーがスタートするとき、ヘルプメニューは情報の壁で彼らを迎えていました。 このテキストはスキャンしにくく、何かを達成するためにはユーザーがコマンドを入力する必要がありました。 アプリのオンボーディングはユーザーにとって重要であり、私たちはBlock Kitを使って体験を完全に再構築しました—二つの重要な方法で：

• 区切りを使うことで、私たちは情報の壁をスタイリングし、類似のコンテンツをグループ化して、より消化しやすく、読みやすくしました。
• インラインボタンとオーバーフローメニューは、インタラクティブでアクション指向のオンボーディング体験を可能にしました。 今や、ユーザーはキーボードショートカットを入力する必要はなく、ボタンを選択し、すぐにアクションを実行できます。

ヘルプメニューは、Block KitがGuruアプリの体験を向上させる唯一の場所ではありませんでした。 アクティビティフィードインターフェースのインラインボタンは、アクションを促す情報に近づける役割を果たします。 オーバーフローメニューは、頻繁に使用しないアクションを隠し、ユーザーが優先情報に焦点を合わせられるようにします。 私たちはまだ表面に触れただけです - Block Kitがアプリをよりインタラクティブにできる方法はまだ無数にあります。

同じ言語を話す

Guruでは、すべてのインターフェース（ウェブアプリケーション、ブラウザ拡張機能、Slackアプリ）で一貫した体験を構築することが課題です。 デザインと開発は、ユーザーのためにシームレスな体験を保証するために尽力していますが、これはたくさんのやり取りを伴う協力的なプロセスです。 以前は、私たちのデザインチーム（通常はSlack上で構築することに慣れていない）は、空白のキャンバスで始め、必然的に技術的な限界に直面しました—特に、彼らのデザインが開発に移行するとき、最終的なデザインに至るまでに多くの反復が必要でした。

どんなに非効率的でも、このプロセスはほとんどの開発者にとって馴染みのあるものです。 私たちはBlock Kitを使ってよりリッチでインタラクティブな体験を構築すると予想していましたが、Block Kitビルダーがデザインと開発のパートナーシップをどれほど変えるかは予計していませんでした。 Block Kitビルダーは、使用可能なブロックを選択、スタック、カスタマイズできる視覚的なプロトタイピングサンドボックスです。

GuruにとってBlock Kitビルダーは、デザインとエンジニアリングのギャップを埋めるものであり、私たちのデザイナーが理想のユーザー体験を簡単にプロトタイピングし、開発チームが彼らのビジョンを実装するために必要な正確なJSONを生成できるようにします。 私たちのデザインチームはもはや空白のスレートから始める必要がなく、このボタンをどこに置けばいいですか？と尋ねることができます。 またはどのテキストを使用すればいいですか？ 今やレイアウトを作成し、URLを共有し、反復するのが簡単です。

Block Kitビルダーは、開発が問題のあるJSONをデバッグするためのツールとしても機能します。 アプリメッセージが正しくレンダリングされない場合、私たちは簡単にコードをビルダーに貼り付け、問題を即座に特定できます。

最高の効率性

Block KitとBlock Kitビルダーの組み合わせは、アプリユーザーとGuruチームの両方にとってより効率的な体験をもたらしました。 Block Kitは、ユニークなアプリUIを構築するための新しいフレームワークを提供するだけでなく、情報の順序とレイアウトに関する柔軟性とコントロールも提供します。 今や、Guruアプリを使うことがこれまで以上に簡単になり、更新されたヘルプメニューはユーザーをすぐに利用できるようにします。

興味がありますか？ Guruの新しく更新されたBlock Kit対応アプリをSlackアプリディレクトリの slack.com/appsでチェックしてください。