Block Kit: Slacks Beitrag zum Aufbau einer besseren Benutzeroberfläche für die Zusammenarbeit

Veröffentlicht: 2022-03-10

Kurze Zusammenfassung ↬ Slack hat viel getan, um Teams und Partner online zusammenzubringen. Es wurde auch viel getan, um Entwicklern die Möglichkeit zu geben, ihre eigenen benutzerdefinierten Apps dafür zu erstellen. Bis vor kurzem waren Entwickler jedoch eingeschränkt, wie viel sie tun konnten, um das Design dieser Apps anzupassen. Das ändert sich heute mit Block Kit.

(Dies ist ein gesponserter Artikel.) In den letzten Jahren hat sich die Arbeitsweise von Unternehmen stark verändert. Da immer mehr Unternehmen standortunabhängig werden, sind Kollaborationstools zum Standard geworden, mit dem sich Teams treffen und ihre Arbeit erledigen.

Nur weil wir Collaboration-Apps haben, die unsere verbundenen Geschäftsprozesse und Tools integrieren, bedeutet das nicht, dass die Erfahrung immer zu optimaler Effizienz oder Produktivität führt. Warum? Nun, manchmal steht eine unfreundliche Benutzeroberfläche im Weg.

Aus diesem Grund werde ich heute über Block Kit sprechen, Slacks Beitrag zum Aufbau einer besseren Benutzeroberfläche für die Zusammenarbeit.

Für diejenigen unter Ihnen, die eine benutzerdefinierte Slack-App erstellt haben (für das App-Verzeichnis oder für interne Zwecke), ist dies Ihre Einführung in das neue Designtool. Für diejenigen unter Ihnen, die dies nicht getan haben, ist das in Ordnung. Daraus lassen sich einige wertvolle Lektionen in Bezug darauf ziehen, was einen ansprechenden Arbeitsplatz ausmacht, der die Zusammenarbeit verbessert.

Entwickler, wissen Sie, woran Slack gearbeitet hat?

Slack hat seit seiner Einführung im Jahr 2013 große Fortschritte gemacht. Was ursprünglich als Messaging-App begann, hat sich mittlerweile zu einer leistungsstarken Plattform für die Zusammenarbeit gemausert.

Während ich dies schreibe: Slack hat täglich über 10 Millionen aktive Benutzer – und sie leben auf der ganzen Welt (über 150 Länder, um genau zu sein).

Ein Beispiel für einen Slack-Kanal für Japanisch sprechende Personen — Hier ist ein Beispiel für einen Slack-Kanal für Japanisch sprechende Personen. (Bildquelle: Slack) (Große Vorschau)

Es sind auch nicht nur Einzelpersonen, die Slack verwenden – fast 585.000 Teams aus drei oder mehr Personen arbeiten innerhalb der Plattform zusammen. 65 der Fortune-100-Unternehmen sind zufällig auch auf Slack.

Ein Einblick in die Echtzeit-Zusammenarbeit zwischen Slack-Benutzern (Bildquelle: Slack) (Große Vorschau)

All dies ist der Slack-API zu verdanken, die Entwicklern die Tür geöffnet hat, öffentlich verfügbare Apps zu erstellen und zu veröffentlichen, die die Funktionalität von Slack-Workspaces erweitern.

Die Titelseite des App-Verzeichnisses von Slack. (Bildquelle: Slack) (Große Vorschau)

Auf diese Weise müssen Slack-Benutzer nicht zwischen ihren am häufigsten verwendeten Geschäftstools wechseln. Verwandte Prozesse können alle innerhalb von Slack stattfinden.

Manchmal reicht das, was im App-Verzeichnis von Slack verfügbar ist, jedoch einfach nicht für die internen Anforderungen deiner Organisation aus. Möglicherweise können Sie mit dem, was vorhanden ist, einige der Unterschiede zwischen Ihren Geschäftstools überbrücken, aber Sie finden möglicherweise auch einen Grund, Ihre eigenen benutzerdefinierten Slack-Apps zu erstellen.

Einführung des Block-Kits von Slack

Hier ist die Sache: Während es Slack gelungen ist, es Entwicklern zu ermöglichen, ihre eigenen Apps zu erstellen, um die Zusammenarbeit innerhalb der Plattform zu verbessern, woher sollen Entwickler wissen, wie sie eine gute Erfahrung damit schaffen können?

Bis vor kurzem boten die API und das App-Verzeichnis von Slack nur begrenzte Flexibilität und Kontrolle. Wie Brian Elliott, der General Manager der Plattform, erklärte:

„Heutzutage sind alle Apps auf eine begrenzte Anzahl von Möglichkeiten gezwungen, umfangreiche Informationen anzuzeigen. Wenn du dir all die verschiedenen Apps in Slack angeschaut und gesehen und verwendet hast, haben viele von ihnen am Ende das gleiche Layout, unabhängig davon, welche Funktionalität sie bereitzustellen versuchen. In Wirklichkeit brauchen Sie jedoch eine Reihe von Komponenten, mit denen Sie reichhaltige interaktive Displays erstellen können, die für die Menschen einfacher zu verstehen, zu verdauen und zu handeln sind.“

Also hat Slack Block Kit entwickelt.

Block Kit ist ein UI-Framework, das es Entwicklern, Designern und Front-End-Erstellern ermöglicht, ihre Messaging-Apps über eine reichhaltige, interaktive und intuitive Benutzeroberfläche anzuzeigen. Durch die Bereitstellung einer Reihe von stapelbaren UI-Elementen oder Blöcken bietet Block Kit Entwicklern jetzt mehr Kontrolle und Flexibilität über ihre App-Designs und -Layouts.

Hinweis : Wenn Sie Block Kit in Aktion sehen möchten, nehmen Sie an der bevorstehenden Slack-Sitzung „Building with Block Kit“ teil, bei der Sie eine Live-Produktdemonstration erhalten und sehen, wie einfach es ist, das Design Ihrer App anzupassen.

Block Kit wird mit zwei Schlüsselkomponenten geliefert:

1. Block-Kit-Builder

Beachten Sie die Ähnlichkeit zwischen diesem Builder-Tool und vielen anderen Tools, die wir verwenden, um Websites und Apps für Kunden zu erstellen:

Eine Demo des Block Kit Builders (Bildquelle: Block Kit) (Große Vorschau)

Die Gebäudeteile sind auf der linken Seite. Klicken Sie einfach auf die App, die Sie hinzufügen möchten, und beobachten Sie, wie sie zur Vorschau Ihrer App in der Mitte hinzugefügt wird.

Möchten Sie weitere Anpassungen? Schauen Sie sich den Texteditor auf der rechten Seite an. Während Block Kit vorgefertigte Elemente bereitstellt, die Best Practices für das Entwerfen von Messaging-Apps folgen, haben Sie die Möglichkeit, sie zu Ihren eigenen zu machen, wenn Sie dies bevorzugen.

2. Kit-Vorlagen blockieren

Während Sie sicherlich selbst eine Messaging-Oberfläche aus dem Builder erstellen können, würde ich vorschlagen, auch die bereitgestellten Vorlagen zu erkunden:

Einige der Vorlagen, die Block Kit den Benutzern anbietet — Dies sind nur einige der Vorlagen, die Block Kit den Benutzern anbietet. (Bildquelle: Block Kit) (Große Vorschau)

Das Slack-Team hat bereits wirklich nützliche Fälle von Slack-Apps in Aktion gesehen. Unnötig zu erwähnen, dass sie wissen, welche Art von Dingen Ihr Unternehmen für eine verbesserte Zusammenarbeit nutzen möchte.

Aus diesem Grund finden Sie häufige Aktionen wie die folgenden, die bereits für Sie entwickelt wurden:

Überprüfung von Anträgen auf Genehmigung;
Ergreifen von Maßnahmen bei neuen Benachrichtigungen;
Durchführung von Umfragen und Überwachung der Ergebnisse;
Durchführung einer Suche.

Guru ist ein solches Tool, das Block Kit nutzt, um seine Slack-App zu verbessern:

Guru bietet eine Datenbanksuchfunktion in Slack. Ergebnisse werden jetzt schneller abgerufen und übersichtlicher im Frontend von Slack angezeigt .

Die Schlüssel zum Aufbau einer besseren Benutzeroberfläche für die Zusammenarbeit

Nachdem wir nun gesehen haben, was mit Block Kit auf uns zukommt, müssen wir darüber sprechen, wie es Ihnen helfen wird, Apps zu erstellen, die zu einer produktiveren Zusammenarbeit führen.

Blöcke

Ich habe kürzlich über das Thema Gutenberg gesprochen und wie Designer es zu ihrem Vorteil nutzen können. Obwohl der neue WordPress-Editor eindeutig seine Schwächen hat, steht außer Frage, warum das Team von WordPress die Änderung vorgenommen hat:

Block Builder sind die Zukunft des Webdesigns.
„

Ich verstehe, dass Block Builder das bevorzugte Tool für Webdesigner und Heimwerker sind. Builder ermöglichen ein visuelles Frontend-Design und enthalten häufig zahlreiche Anpassungsoptionen.

Einige der vorgefertigten Blöcke, die im Block Kit enthalten sind — Einige der im Block Kit enthaltenen vorgefertigten Blöcke (Bildquelle: Block Kit) (Große Vorschau)

Aber Block Kit kann viel mehr als das, was bedeutet, dass sowohl Designer als auch Entwickler mit Leichtigkeit benutzerdefinierte Apps erstellen können.

Code

Das Hauptunterscheidungsmerkmal zwischen so etwas wie einem Website-Builder und dem Block-Kit-Builder ist der Codierungsaspekt.

In den meisten Fällen verwenden Designer Seitenersteller, damit sie sich nicht mit Code herumschlagen müssen. Sie könnten einige benutzerdefinierte CSS-Klassen oder HTML zu ihrem Text hinzufügen, aber das war es im Allgemeinen. Entwickler arbeiten jedoch nicht so.

Block Kit enthält ein Panel mit vorgefertigtem JSON, das Entwickler kopieren und in ihre eigene Slack-App einfügen können, sobald sie einsatzbereit ist. Anstatt Entwickler ihren eigenen Code schreiben zu lassen, bietet Slack Code, der Best Practices für Geschwindigkeit und Design nutzt.

Ein JSON-Beispiel, das Sie erhalten, wenn Sie Ihre Rich-Messaging-Erfahrung im Builder erstellen. (Bildquelle: Block Kit) (Große Vorschau)

Dadurch können sich Entwickler darauf konzentrieren, Anpassungen vorzunehmen, anstatt ihre Apps von Grund auf neu erstellen zu müssen.

Konsistenz

Wenn Slack-Benutzer die Plattform betreten, wissen sie, was sie erwartet. Jede Schnittstelle ist von Arbeitsbereich zu Arbeitsbereich gleich.

Wenn eine API es Entwicklern jedoch ermöglicht, Apps zu erstellen, die sich in diese Bereiche integrieren lassen, besteht die Gefahr, dass Elemente eingeführt werden, die einfach nicht gut passen. In diesem Fall kann die Unvorhersehbarkeit der Benutzeroberfläche beim Endbenutzer zu Verwirrung und Zögern führen. Auch schlecht passende Layouts können das Erlebnis beeinträchtigen.

Block Kit ermöglicht es Entwicklern, Apps mit erprobten und getesteten stapelbaren UI-Komponenten zu erstellen. Wenn Sie ein Erlebnis innerhalb einer bereits etablierten Plattform anpassen, kann es schwierig sein zu wissen, wie weit Sie damit gehen können – oder ob es überhaupt funktionieren wird. Slack hat diese Fragen aus der Gleichung herausgenommen.

Abstand

So sieht die traditionelle Slack-Börse aus:

Ein Beispiel für Slack-Benutzer, die sich gegenseitig Nachrichten senden (Bildquelle: Slack) (Große Vorschau)

Es handelt sich in der Regel um einen einspaltigen Hin- und Her-Austausch. Und das funktioniert perfekt für Slack-Kanäle, wo die Zusammenarbeit einfach ist. Mitarbeiternachricht über den Status einer Aufgabe. Ein Kunde lädt ein fehlendes Asset hoch. Der CEO teilt einen Link zu einer Pressemitteilung, in der das Unternehmen erwähnt wird. Aber nicht alle Arbeitsbereiche sind so einfach.

Block Kit hilft Ihnen, den Platz, den die Funktionen Ihrer App belegen, zu maximieren und zu erweitern. Beispielsweise ermöglicht Block Kit Unternehmen wie Optimizely, relevante Informationen zur besseren Lesbarkeit in zweispaltigen Formaten anzuzeigen.

Optimizely verwendet Block Kit, um zweispaltige Formate zu erstellen. (Bildquelle: Optimizely) (Große Vorschau)

Dies ist in der Tat eine bessere Möglichkeit, relevante Details in der Slack-App Ihres Teams zu teilen.

Reichhaltige Interaktionen

Eine weitere Möglichkeit, Ihre App aufzuwerten, besteht darin, die Integration in eine Interaktionsreiche umzuwandeln.

Blöcke wurden speziell entwickelt, um die am häufigsten verwendeten Elemente in der Slack-Zusammenarbeit zu verbessern. Zum Beispiel:

Verwenden Sie den Abschnittsblock für eine bessere Organisation.
Verwenden Sie den Textblock , um die Anzeige von Nachrichten anzupassen.
Verwenden Sie Bildblöcke in der richtigen Größe, damit Sie sich keine Gedanken mehr darüber machen müssen, ob sie richtig angezeigt werden oder nicht.
Verwenden Sie Kontextblöcke, um Verfasserzeilen oder zusätzlichen Kontext zu Nachrichten anzuzeigen (wie Autor, Kommentare, Änderungen usw.).
Verwenden Sie Trennblöcke , um das Aussehen der App zu verbessern.
Verwenden Sie Aktionsblöcke wie Menüauswahl, Schaltflächenauswahl und Kalenderdaten, um bessere Funktionen in Ihre App zu integrieren und sie intuitiver anzuzeigen.
Verwenden Sie 2-teilige Blöcke für sauberere Layouts.

Doodle hat ein schönes Beispiel dafür, was mit reichhaltigen Interaktionen mit Block Kit gemacht werden kann:

Wie Sie sehen, können Benutzer beim Planen von Besprechungen genauso effektiv zusammenarbeiten, als würden sie einen Kalender eines Drittanbieters verwenden. Der einzige Unterschied besteht darin, dass sie all dies jetzt in ihrem Slack-Arbeitsbereich tun können.

Einpacken

Zusammenarbeit ist ein wesentlicher Bestandteil des Erfolgs eines jeden Unternehmens, und es spielt keine Rolle, ob es sich um ein 3-köpfiges oder ein 300-köpfiges Team handelt. Aber es gibt einen großen Unterschied zwischen Zusammenarbeit und produktiver Zusammenarbeit .

Dank der API von Slack haben Entwickler einige großartige Möglichkeiten geschaffen, verwandte Prozesse und Tools in die Plattform zu integrieren. Und dank Block Kit stören diese externen Beiträge das Erlebnis nicht, wenn das Design der Elemente zu kurz kommt.

Mit intuitiven Funktionen zum Erstellen von Blöcken, entwicklerfreundlichen Codierungsoptionen und mehr wird Block Kit Entwicklern dabei helfen, reichhaltigere Erfahrungen und eine bessere Zusammenarbeit auf der Slack-Plattform bereitzustellen.

Eine letzte Sache zu erwähnen:

Slacks Frontiers-Konferenz steht bald an. Es findet am 24. und 25. April in San Francisco statt. Wenn Sie eine Teilnahme planen, beachten Sie, dass der Developers Track eine ganztägige Schulung zu Block Kit umfasst, einschließlich Workshops, Demos neuer Funktionen, Tutorials sowie einer On-One-Mentoring. Wenn Sie an Block Kit denken, ist dies eine Gelegenheit, die Sie nicht verpassen sollten.