Block Kit : la contribution de Slack à la création d'une meilleure interface utilisateur de collaboration

Publié: 2022-03-10

Résumé rapide ↬ Slack a beaucoup fait pour rassembler les équipes et les partenaires en ligne. Il a également fait beaucoup pour permettre aux développeurs de créer leurs propres applications personnalisées. Jusqu'à récemment, cependant, les développeurs étaient limités par ce qu'ils pouvaient faire pour personnaliser la conception de ces applications. Cela change aujourd'hui avec Block Kit.

(Ceci est un article sponsorisé.) Au cours des dernières années, il y a eu un changement majeur dans la façon dont les entreprises fonctionnent. Alors que de plus en plus d'entreprises deviennent indépendantes de leur emplacement, les outils de collaboration sont devenus le moyen standard par lequel les équipes se réunissent et travaillent.

Cela dit, ce n'est pas parce que nous avons des applications de collaboration qui intègrent nos processus et outils commerciaux connectés que l'expérience conduit toujours à une efficacité ou une productivité optimale. Pourquoi? Eh bien, parfois, une interface utilisateur peu conviviale gêne.

C'est pourquoi, aujourd'hui, je vais parler de Block Kit, la contribution de Slack à la construction d'une meilleure interface utilisateur de collaboration.

Pour ceux d'entre vous qui ont créé une application Slack personnalisée (pour le répertoire des applications ou à des fins internes), ce sera votre introduction au nouvel outil de conception. Pour ceux d'entre vous qui ne l'ont pas fait, ce n'est pas grave. Il y a quelques leçons précieuses à tirer de cela en termes de ce qui fait un espace de travail engageant qui améliorera la collaboration.

Développeurs, savez-vous sur quoi Slack a travaillé ?

Slack a fait d'énormes progrès depuis son lancement en 2013. Ce qui a commencé comme une application de messagerie s'est maintenant transformé en une puissante plateforme de collaboration.

Au moment d'écrire ceci: Slack compte plus de 10 millions d'utilisateurs actifs par jour - et ils vivent partout dans le monde (plus de 150 pays, pour être exact).

Un exemple de chaîne Slack pour les locuteurs japonais — Voici un exemple de chaîne Slack pour les locuteurs japonais. (Source de l'image : Slack) ( Grand aperçu )

Ce ne sont pas seulement les individus qui utilisent Slack non plus - près de 585 000 équipes de trois personnes ou plus collaborent au sein de la plateforme. 65 des entreprises du Fortune 100 se trouvent également sur Slack.

Un aperçu de la collaboration en temps réel entre les utilisateurs de Slack (Source de l'image : Slack) ( Grand aperçu )

Tout cela grâce à l'API Slack qui a ouvert la porte aux développeurs pour créer et publier des applications accessibles au public qui étendent les fonctionnalités des espaces de travail Slack.

La première page du répertoire des applications Slack — La page d'accueil du répertoire des applications Slack. (Source de l'image : Slack) ( Grand aperçu )

De cette façon, les utilisateurs de Slack n'ont pas à basculer entre leurs outils professionnels les plus couramment utilisés. Les processus associés peuvent tous avoir lieu à partir de Slack.

Parfois, cependant, ce qui est disponible dans le répertoire d'applications Slack n'est tout simplement pas suffisant pour ce dont votre organisation a besoin en interne. Vous pourrez peut-être combler certaines des divisions entre vos outils professionnels avec ce qui existe, mais vous pourriez également trouver une raison de créer vos propres applications Slack personnalisées.

Présentation du kit de blocs de Slack

Voici le problème : alors que Slack a réussi à permettre aux développeurs de créer leurs propres applications pour améliorer la collaboration au sein de la plate-forme, comment les développeurs sont-ils censés savoir comment créer une bonne expérience avec elle ?

Jusqu'à récemment, l'API et le répertoire d'applications de Slack offraient une flexibilité et un contrôle limités. Comme Brian Elliott, le directeur général de la plateforme, l'a expliqué :

"Aujourd'hui, toutes les applications sont contraintes à un ensemble limité de façons d'afficher des informations riches. Si vous avez regardé, vu et utilisé toutes les différentes applications de Slack, beaucoup d'entre elles se retrouvent avec la même disposition, quelle que soit la fonctionnalité qu'elles essaient de déployer. Alors qu'en réalité, ce dont vous avez besoin est un ensemble de composants qui vous permettent de créer des écrans interactifs riches qui sont plus faciles à comprendre, à digérer et à utiliser pour les gens. »

Ainsi, Slack a développé Block Kit.

Block Kit est un framework d'interface utilisateur qui permet aux développeurs, concepteurs et constructeurs frontaux d'afficher leurs applications de messagerie via une interface utilisateur riche, interactive et intuitive. De plus, en fournissant un ensemble d'éléments ou de blocs d'interface utilisateur empilables, Block Kit offre désormais aux développeurs plus de contrôle et de flexibilité sur la conception et la mise en page de leurs applications.

Remarque : Si vous souhaitez voir Block Kit en action, rejoignez la prochaine session Slack, "Construire avec Block Kit", où vous obtiendrez une démonstration de produit en direct et découvrirez à quel point il est facile de personnaliser la conception de votre application.

Le kit de bloc est livré avec deux composants clés :

1. Constructeur de kits de blocs

Notez la similitude entre cet outil de création et de nombreux autres outils que nous utilisons pour créer des sites Web et des applications pour les clients :

Une démo du constructeur de kits de blocs — Une démo du constructeur de Block Kit (Source de l'image : Block Kit) ( Grand aperçu )

Les éléments de construction sont à gauche. Cliquez simplement sur celui que vous souhaitez inclure et regardez-le s'ajouter à l'aperçu de votre application au centre.

Vous voulez plus de personnalisation ? Découvrez l'éditeur de texte sur la droite. Bien que Block Kit fournisse des éléments prédéfinis qui suivent les meilleures pratiques pour la conception d'applications de messagerie, vous avez la possibilité de les personnaliser si vous préférez.

2. Modèles de kits de blocs

Bien que vous puissiez certainement créer vous-même une interface de messagerie à partir du Builder, je vous suggère également d'explorer les modèles fournis :

Certains des modèles que Block Kit propose aux utilisateurs — Ce ne sont là que quelques-uns des modèles que Block Kit propose aux utilisateurs. (Source de l'image : Block Kit) ( Grand aperçu )

L'équipe Slack a déjà vu des cas vraiment utiles d'applications Slack en action. Inutile de dire qu'ils savent quels types de choses votre organisation pourrait vouloir exploiter pour améliorer la collaboration.

C'est pourquoi vous trouverez des actions courantes telles que les suivantes déjà conçues pour vous :

Examiner les demandes d'approbation ;
Prendre des mesures sur les nouvelles notifications ;
Organiser des sondages et surveiller les résultats ;
Effectuer une recherche.

Guru est l'un de ces outils qui a utilisé Block Kit pour améliorer son application Slack :

Guru fournit une fonction de recherche de base de données dans Slack. Les résultats sont maintenant récupérés rapidement et affichés plus clairement sur le frontend de Slack.

Les clés pour créer une meilleure interface utilisateur de collaboration

Maintenant que nous avons vu ce qui se passe avec Block Kit, nous devons parler de la façon dont il va vous aider à créer des applications qui conduisent à une collaboration plus productive.

Blocs

J'ai récemment parlé du sujet de Gutenberg et de la façon dont les designers peuvent l'utiliser à leur avantage. Bien que le nouvel éditeur WordPress ait clairement ses défauts, on ne se demande pas pourquoi l'équipe de WordPress a fait le changement :

Les constructeurs de blocs sont l'avenir de la conception Web.
"

Je comprends que les constructeurs de blocs ont tendance à être l'outil préféré des concepteurs de sites Web et des utilisateurs de bricolage. Les constructeurs permettent une conception frontale visuelle et incluent souvent de nombreuses options de personnalisation.

Certains des blocs préfabriqués inclus dans le kit de blocs — Certains des blocs préfabriqués inclus dans Block Kit (Source de l'image : Block Kit) ( Grand aperçu )

Mais Block Kit fait bien plus que cela, ce qui signifie que les concepteurs et les développeurs peuvent facilement créer des applications personnalisées.

Code

Le principal différenciateur entre quelque chose comme un constructeur de site Web et le constructeur de Block Kit est l'aspect de codage.

Dans la plupart des cas, les concepteurs utilisent des constructeurs de pages pour ne pas avoir à se soucier du code. Ils peuvent ajouter des classes CSS personnalisées ou ajouter du HTML à leur texte, mais c'est généralement tout. Les développeurs ne fonctionnent pas comme ça cependant.

Block Kit comprend un panneau avec JSON pré-écrit que les développeurs peuvent copier et coller dans leur propre application Slack une fois qu'elle est prête. Plutôt que de laisser les développeurs écrire leur propre code, Slack fournit un code qui utilise les meilleures pratiques en matière de vitesse et de conception.

Un exemple de JSON que vous obtenez lorsque vous créez votre expérience de messagerie enrichie dans le générateur. (Source de l'image : Block Kit) ( Grand aperçu )

Cela permet aux développeurs de se concentrer sur la personnalisation au lieu de devoir créer leurs applications à partir de zéro.

Cohérence

Lorsque les utilisateurs de Slack entrent dans la plateforme, ils savent à quoi s'attendre. Chaque interface est la même d'un espace de travail à l'autre.

Cependant, lorsqu'une API permet aux développeurs de créer des applications à intégrer à ces espaces, il existe un risque d'introduire des éléments qui ne correspondent tout simplement pas bien. Lorsque cela se produit, l'imprévisibilité de l'interface peut créer de la confusion et de l'hésitation pour l'utilisateur final. Des choix de mise en page mal adaptés peuvent également nuire à l'expérience.

Block Kit permet aux développeurs de créer des applications avec des composants d'interface utilisateur empilables qui ont fait leurs preuves. Lors de la personnalisation d'une expérience au sein d'une plate-forme déjà établie, il peut être difficile de savoir jusqu'où vous pouvez aller, ou même si cela fonctionnera. Slack a éliminé ces questions de l'équation.

Espacement

Voici à quoi ressemble l'échange Slack traditionnel :

Un exemple d'utilisateurs de Slack qui s'envoient des messages — Un exemple d'utilisateurs de Slack qui s'échangent des messages (Source de l'image : Slack) ( Grand aperçu )

Il s'agit généralement d'un échange de va-et-vient sur une seule colonne. Et cela fonctionne parfaitement pour les chaînes Slack où la collaboration est simple. Message des employés sur l'état d'une tâche. Un client télécharge un élément manquant. Le PDG partage un lien vers un communiqué de presse mentionnant l'entreprise. Mais tous les espaces de travail ne sont pas aussi simples.

Block Kit vous aide à maximiser et à améliorer l'espace occupé par les fonctionnalités de votre application. Par exemple, Block Kit permet à des entreprises comme Optimizely d'afficher des informations pertinentes dans des formats à deux colonnes pour une meilleure lisibilité.

Utilise de manière optimale Block Kit pour créer des formats à deux colonnes. (Source de l'image : Optimizely) ( Grand aperçu )

C'est en effet un meilleur moyen de partager des détails pertinents dans l'application Slack de votre équipe.

Interactions riches

Une autre façon d'améliorer votre application consiste à transformer l'intégration en une intégration riche en interactions.

Les blocs ont été spécialement développés pour améliorer les éléments les plus couramment utilisés dans la collaboration Slack. Par exemple:

Utilisez le bloc sectionnel pour une meilleure organisation.
Utilisez le bloc Texte pour personnaliser l'affichage des messages.
Utilisez des blocs d' image de taille appropriée pour ne plus vous soucier de savoir s'ils s'afficheront correctement ou non.
Utilisez les blocs de contexte pour afficher des signatures ou un contexte supplémentaire sur les messages (comme l'auteur, les commentaires, les modifications, etc.)
Utilisez les blocs de séparation pour améliorer l'apparence de l'application.
Utilisez des blocs d' action tels que la sélection de menus, la sélection de boutons et les dates du calendrier pour apporter de meilleures fonctionnalités à votre application et les rendre plus intuitives.
Utilisez des blocs à 2 sections pour des mises en page plus propres.

Doodle a un bel exemple de ce qui peut être fait avec des interactions riches en utilisant Block Kit :

Comme vous pouvez le constater, les utilisateurs peuvent travailler ensemble pour planifier des réunions aussi efficacement que s'ils utilisaient un calendrier tiers. La seule différence est qu'ils peuvent désormais faire tout cela dans leur espace de travail Slack.

Emballer

La collaboration est un élément essentiel du succès de toute organisation, et peu importe qu'il s'agisse d'une équipe de 3 ou de 300. Mais il y a une grande différence entre travailler ensemble et collaborer de manière productive .

Grâce à l'API de Slack, les développeurs ont créé des moyens impressionnants d'intégrer des processus et des outils connexes dans la plate-forme. Et grâce à Block Kit, ces contributions externes ne perturberont pas l'expérience si la conception des éléments échoue.

Avec des capacités intuitives de construction de blocs, des options de codage conviviales pour les développeurs et plus encore, Block Kit va aider les développeurs à apporter des expériences plus riches et une meilleure collaboration à la plate-forme Slack.

Une dernière chose à mentionner :

La conférence Slack's Frontiers arrive bientôt. Ce sera à San Francisco les 24 et 25 avril. Si vous prévoyez d'y assister, notez que la piste Développeurs comprendra une journée complète de formation sur Block Kit , y compris des ateliers, des démonstrations de nouvelles fonctionnalités, des tutoriels, ainsi qu'un- mentorat individuel. Si vous pensez à Block Kit, c'est une opportunité à ne pas manquer.