Block Kit:Slackがより良いコラボレーションUIを構築するための貢献-Smashing MagazineBlock Kit:Slackがより良いコラボ

著者について

Suzanne Scaccaはフリーのコピーライターとして今働く前のWordPressの実装者、トレーナーおよび代理店のマネージャーである。 専門はクラフトマーケティング、ウェブ…続きを読む↬

(これは後援された記事である。）ここ数年、企業の働き方の面で大きな変化がありました。 より多くの企業が場所に依存しないようになるにつれて、コラボレーションツールは、チームが会い、仕事を成し遂げる標準的な方法になっています。

つまり、接続されたビジネスプロセスとツールを統合するコラボレーションアプリがあるからといって、経験が常に最適な効率や生産性につながるわけではありません。 どうして？ まあ、時には非友好的なUIが邪魔になることがあります。

というわけで、今日は、より良いコラボレーションUIを構築するためのSlackの貢献であるBlock Kitについてお話します。

カスタムSlackアプリを構築した人のために（アプリディレクトリまたは内部目的のために）、これは新しいデザインツールの紹介になります。 あなたのそれらのために持っていない、それは大丈夫です。 コラボレーションを改善する魅力的なワークスペースのために作るものの面で、これから奪うためにいくつかの貴重な教訓があります。

開発者、Slackが何に取り組んでいるか知っていますか？

Slackは2013年の発売以来、大きな進歩を遂げてきました。 もともとメッセージングアプリとして始まったものは、現在、強力なコラボレーショ

これを書いている時点で：Slackには毎日1000万人以上のアクティブユーザーがいます—そして彼らは世界中に住んでいます（正確には150カ国以上）。

Slackを使用しているのは個人だけではなく、3人以上の585,000人近くのチームがプラットフォーム内で協力しています。 フォーチュン100社のうち65社もSlackに参加しています。

これは、開発者がSlack workspacesの機能を拡張する公開されたアプリを作成して公開するための扉を開いたSlack APIのおかげです。

このようにして、Slackユーザーは、最も一般的に使用されるビジネスツール間でバウンスする必要はありません。 関連するプロセスはすべてSlack内から実行される場合があります。

ただし、Slackアプリディレクトリで利用できるものだけでは、組織が内部的に必要とするものには不十分な場合があります。 ビジネスツール間のいくつかの境界をそこにあるものと橋渡しすることができるかもしれませんが、独自のカスタムSlackアプリを構築する理由を見つ

SlackからBlock Kitを紹介

ここでは、Slackは開発者がプラットフォーム内のコラボレーションを強化するために独自のアプリを作ることに成功しましたが、開発者はどのようにそれで良い体験を作成する方法を知っているはずですか？

最近まで、SlackのAPIとアプリディレクトリは限られた柔軟性と制御を提供していました。 プラットフォームのゼネラルマネージャーであるBrian Elliott氏は次のように説明している。

「今日、すべてのアプリは、豊富な情報を表示するための限られた方法に強制されている。 Slackですべての異なるアプリを見て見て使用したことがある場合、それらの多くは、展開しようとしている機能に関係なく、同じレイアウトになります。 必要とする何が実際に人々が理解し、消化し、行動することができるように容易の豊富な相互表示を造ることを可能にする一組の部品である時。”

だから、Slackはブロックキットを開発しました。

Block Kitは、開発者、デザイナー、フロントエンドビルダーが、豊富でインタラクティブで直感的なUIを介してメッセージングアプリを表示できるUIフレームワークです。 さらに、スタック可能なUI要素またはブロックのセットを提供することにより、Block Kitは、開発者がアプリのデザインやレイアウトをより詳細に制御し、柔軟性を提供するようになりました。

注: Block Kitの動作を確認したい場合は、今後のSlackセッション「Building with Block Kit」に参加して、ライブの製品デモを行い、アプリのデザインをカスタマイズするのがいかに簡単であるかを確認してください。

ブロックキットには、

1つの主要コンポーネントが付属しています。 Block Kit Builder

このbuilderツールと、クライアント用のwebサイトやアプリを作成するために使用する他の多くのツールとの類似性に注意してください:

建物の構成要素は左側にあります。 含めるものをクリックして、中央のアプリのプレビューに追加されるのを見るだけです。

さらにカスタマイズしたいですか？ 右側のテキストエディタをチェックしてください。 Block Kitには、メッセージングアプリを設計するためのベストプラクティスに従った事前作成された要素が用意されていますが、必要に応じて独自に作

2. Block Kit Templates

Builderからメッセージングインターフェイスを自分で作成することは確かですが、提供されているテンプレートも検討することをお勧めします:

SlackチームはすでにSlackアプリの実際の有用なケースを見てきました。 言うまでもなく、彼らはあなたの組織が改善されたコラボレーションのために活用したいかもしれないものの種類を知っています。

そのため、次のような一般的なアクションがすでに構築されています:

• 承認要求のレビュー;
• 新しい通知に対するアクションの実行;
• 世論調査と結果の監視の実行;
• 検索の実行。

GuruはSlackアプリを改善するためにBlock Kitを活用しているツールの1つです:

GuruはSlack内でデータベース検索機能を提供しています。 結果はすぐに取得され、Slackのフロントエンドにより明確に表示されます。

より良いコラボレーションUIを構築するための鍵

Block Kitのラインを見てきたので、より生産的なコラボレーションにつながるアプリの作成にどのよ

ブロック

私は最近、Gutenbergのテーマと、デザイナーがそれをどのように活用できるかについて話しました。 新しいWordPressエディタには明らかに欠陥がありますが、WordPressのチームが変更を加えた理由は疑問ではありません:

ブロックビルダーは、webデザインの未来です。

“

私は、ブロックビルダーは、webデザイナーやDIYユーザーのための好ましいツールになる傾向があることを取得します。 建築者は視覚フロントエンドの設計を可能にし、頻繁に豊富なカスタム化の選択を含んでいる。

しかし、Block Kitはそれ以上のことをしているため、設計者と開発者の両方がカスタムアプリを簡単に構築できます。

Code

ウェブサイトビルダーとブロックキットビルダーのようなものの主な差別化要因は、コーディングの側面です。

ほとんどの場合、設計者はページビルダーを使用するので、コードを気にする必要はありません。 彼らはいくつかのカスタムCSSクラスを追加したり、テキストにHTMLを追加したりするかもしれませんが、それは一般的にそれです。 しかし、開発者はそのように動作しません。

Block KitにはJSONがあらかじめ記述されているパネルが含まれており、開発者は準備ができたらSlackアプリにコピー＆ペーストできます。 開発者に自分のコードを書くことを任せるのではなく、Slackはスピードとデザインのためのベストプラクティスを利用するコードを提供します。

これにより、開発者はアプリを一から構築するのではなく、カスタマイズに集中することができます。

一貫性

Slackユーザーがプラットフォーム内にステップインすると、何を期待するかがわかります。 すべてのインターフェイスは、ワークスペース間で同じです。

しかし、APIによって開発者がそれらのスペースと統合するアプリを構築できる場合、うまく動かない要素を導入する危険性があります。 それが起こると、インターフェイスの予測不可能性は、エンドユーザーのための混乱と躊躇を作成することができます。 不適当なレイアウトの選択はまた経験に害を与えることができる。

Block Kitを使用すると、開発者は試してテストされたスタック可能なUIコンポーネントを使用してアプリを構築できます。 すでに確立されているプラットフォーム内でエクスペリエンスをカスタマイズする場合、どこまでそれを取ることができるか、またはそれがうまくいくかどうかを知ることは難しい場合があります。 Slackはこれらの質問を方程式から外しました。

これは伝統的なSlack交換のように見えるものです:

それは、単一の列、前後の交換になる傾向があります。 そして、これはコラボレーションが簡単なSlackチャンネルのために完全にうまく動作します。 タスクのステータスに関する従業員メッセージ。 クライアントが不足しているアセットをアップロードします。 CEOは、同社に言及するプレスリリースへのリンクを共有しています。 しかし、すべてのワークスペースがそれほど単純ではありません。

ブロックキットは、アプリの機能が占めるスペースを最大化し、強化するのに役立ちます。 たとえば、Block Kitを使用すると、Optimizelyのような企業は、適切な情報を2列形式で表示して、読みやすくすることができます。

これは確かにあなたのチームのSlackアプリで適切な詳細を共有するより良い方法です。

Rich Interactions

アプリを昇格させるもう一つの方法は、統合をインタラクションが豊富なものに変えることです。

ブロックは、Slackのコラボレーションで最も一般的に使用される要素を強化するために特別に開発されました。 例えば:

• より良い組織のために断面ブロックを使用してください。
• テキストブロックを使用して、メッセージの表示方法をカスタマイズします。
• 適切なサイズの画像ブロックを使用すると、正しく表示されるかどうかを心配するのをやめることができます。
• コンテキストブロックを使用して、メッセージに関するバイラインや追加のコンテキスト（作成者、コメント、変更など）を表示します。)
• アプリの外観を改善するために分周器ブロックを使用します。
• メニュー選択、ボタン選択、カレンダーの日付などのアクションブロックを使用して、アプリに優れた機能をもたらし、より直感的に表示させます。
• よりきれいなレイアウトのための2セクションブロックを使用しなさい。

Doodleは、ブロックキットを使用した豊富な相互作用で何ができるかの美しい例を持っています:

ご覧のように、ユーザーは、サードパーティの予定表を使用しているかのように効果的に会議をスケジュールするために協力することができます。 唯一の違いは、Slackワークスペース内ですべてを実行できるようになったことです。

コラボレーションはどの組織の成功にも不可欠な部分であり、3人のチームか300人のチームかは関係ありません。 しかし、一緒に働くことと生産的に協力することの間には大きな違いがあります。

SlackのAPIのおかげで、開発者は関連するプロセスとツールをプラットフォームに統合する素晴らしい方法をいくつか作成しました。 Block Kitのおかげで、これらの外部からの貢献は、要素の設計が不足しても経験を混乱させることはありません。

直感的なブロック構築機能、開発者に優しいコーディングオプションなどを備えたBlock Kitは、開発者がより豊かな経験とより良いコラボレーションをSlack

最後に言及すること：

SlackのFrontiers会議がまもなく開催されます。 24日と25日にサンフランシスコで開催される。 参加する予定の場合は、開発者トラックには、ワークショップ、新機能デモ、チュートリアル、一対一のメンタリングなど、ブロックキットに関する一日のトレーニン あなたがブロックキットについて考えているなら、これはあなたが見逃したくない機会です。

(ms,ra,il)