Block Kit: il contributo di Slack alla creazione di una migliore interfaccia utente per la collaborazione

Pubblicato: 2022-03-10
Riassunto veloce ↬ Slack ha fatto molto per riunire team e partner online. Ha anche fatto molto per consentire agli sviluppatori di creare le proprie app personalizzate per questo. Fino a poco tempo, tuttavia, gli sviluppatori erano limitati da quanto potevano fare per personalizzare il design di quelle app. Oggi le cose stanno cambiando con Block Kit.

(Questo è un articolo sponsorizzato.) Negli ultimi anni, c'è stato un cambiamento importante in termini di modo in cui le aziende lavorano. Man mano che sempre più aziende diventano indipendenti dalla sede, gli strumenti di collaborazione sono diventati il ​​modo standard in cui i team si incontrano e portano a termine il lavoro.

Detto questo, solo perché disponiamo di app di collaborazione che integrano i nostri processi e strumenti aziendali connessi, ciò non significa che l'esperienza porti sempre a un'efficienza o una produttività ottimali. Come mai? Bene, a volte un'interfaccia utente ostile si intromette.

Ecco perché, oggi, parlerò di Block Kit, il contributo di Slack alla costruzione di una migliore interfaccia utente per la collaborazione.

Per quelli di voi che hanno creato un'app Slack personalizzata (per la directory dell'app o per scopi interni), questa sarà la vostra introduzione al nuovo strumento di progettazione. Per quelli di voi che non l'hanno fatto, va bene. Ci sono alcune lezioni preziose da trarre da questo in termini di ciò che rende uno spazio di lavoro coinvolgente che migliorerà la collaborazione.

Sviluppatori, sapete su cosa sta lavorando Slack?

Slack ha fatto passi da gigante sin dal suo lancio nel 2013. Quella che originariamente era iniziata come un'app di messaggistica è ora sbocciata in una potente piattaforma di collaborazione.

Al momento della stesura di questo: Slack ha oltre 10 milioni di utenti attivi ogni giorno e vivono in tutto il mondo (oltre 150 paesi, per l'esattezza).

Un esempio di canale Slack per chi parla giapponese
Ecco un esempio di canale Slack per chi parla giapponese. (Fonte immagine: Slack) (Anteprima grande)

Non sono nemmeno solo le persone che utilizzano Slack: quasi 585.000 team di tre persone o più collaborano all'interno della piattaforma. Anche 65 delle società Fortune 100 sono su Slack.

Uno sguardo alla collaborazione in tempo reale tra gli utenti Slack
Uno sguardo alla collaborazione in tempo reale tra gli utenti Slack (Fonte immagine: Slack) (Anteprima grande)

Tutto questo grazie all'API Slack che ha aperto la porta agli sviluppatori per creare e pubblicare app pubblicamente disponibili che estendono la funzionalità degli spazi di lavoro Slack.

La prima pagina della Slack App Directory
La prima pagina della Slack App Directory. (Fonte immagine: Slack) (Anteprima grande)

In questo modo, gli utenti Slack non devono rimbalzare tra i loro strumenti aziendali più comunemente utilizzati. I processi correlati possono aver luogo tutti all'interno di Slack.

A volte, tuttavia, ciò che è disponibile nella Slack App Directory non è sufficiente per ciò di cui la tua organizzazione ha bisogno internamente. Potresti essere in grado di colmare alcune delle divisioni tra i tuoi strumenti aziendali e ciò che c'è, ma potresti anche trovare un motivo per creare le tue app Slack personalizzate.

Presentazione del kit di blocchi di Slack

Ecco il punto: mentre Slack è riuscito a consentire agli sviluppatori di creare le proprie app per migliorare la collaborazione all'interno della piattaforma, come dovrebbero gli sviluppatori sapere come creare una buona esperienza con essa?

Fino a poco tempo, l'API e la directory dell'app di Slack fornivano flessibilità e controllo limitati. Come ha spiegato Brian Elliott, Direttore Generale della Piattaforma:

“Oggi, tutte le app sono costrette a utilizzare una serie limitata di modi per visualizzare informazioni complete. Se hai guardato, visto e utilizzato tutte le diverse app in Slack, molte di esse finiscono con lo stesso layout indipendentemente dalla funzionalità che stanno cercando di distribuire. Quando in realtà ciò di cui hai bisogno è un insieme di componenti che ti consentano di creare display interattivi ricchi che siano più facili da comprendere, digerire e agire per le persone".

Quindi, Slack ha sviluppato Block Kit.

Block Kit è un framework dell'interfaccia utente che consente a sviluppatori, designer e costruttori di front-end di visualizzare le proprie app di messaggistica tramite un'interfaccia utente ricca, interattiva e intuitiva. Inoltre, fornendo una serie di elementi o blocchi dell'interfaccia utente impilabili, Block Kit ora offre agli sviluppatori un maggiore controllo e flessibilità sui design e sui layout delle loro app.

Nota : se desideri vedere Block Kit in azione, partecipa alla prossima sessione Slack, "Building with Block Kit", dove riceverai una dimostrazione dal vivo del prodotto e vedrai quanto è facile personalizzare il design della tua app.

Block Kit viene fornito con due componenti chiave:

1. Generatore di kit di blocchi

Nota la somiglianza tra questo strumento di creazione e molti altri strumenti che utilizziamo per creare siti Web e app per i clienti:

Una demo del builder Block Kit
Una demo del builder Block Kit (Fonte immagine: Block Kit) (Anteprima grande)

I componenti dell'edificio sono sulla sinistra. Fai semplicemente clic su quello che desideri includere e guardalo mentre viene aggiunto all'anteprima della tua app al centro.

Vuoi un'ulteriore personalizzazione? Controlla l'editor di testo sulla destra. Sebbene Block Kit fornisca elementi predefiniti che seguono le migliori pratiche per la progettazione di app di messaggistica, hai la possibilità di personalizzarle se preferisci.

2. Modelli di kit di blocchi

Sebbene tu possa certamente creare un'interfaccia di messaggistica dal Builder da solo, suggerirei di esplorare anche i modelli forniti:

Alcuni dei modelli che Block Kit offre agli utenti
Questi sono solo alcuni dei modelli che Block Kit offre agli utenti. (Fonte immagine: Block Kit) (Anteprima grande)

Lo Slack Team ha già visto in azione casi davvero utili di app Slack. Inutile dire che sanno quali tipi di cose la tua organizzazione potrebbe voler sfruttare per una migliore collaborazione.

Ecco perché troverai azioni comuni come le seguenti già create per te:

  • Esame delle richieste di approvazione;
  • Intervenire su nuove notifiche;
  • Esecuzione di sondaggi e monitoraggio dei risultati;
  • Condurre una ricerca.

Guru è uno di questi strumenti che ha sfruttato Block Kit per migliorare la sua app Slack:

Guru fornisce una funzione di ricerca nel database all'interno di Slack. I risultati ora vengono recuperati rapidamente e visualizzati in modo più chiaro sul frontend di Slack.

Le chiavi per costruire una migliore interfaccia utente di collaborazione

Ora che abbiamo visto cosa succederà con Block Kit, dobbiamo parlare di come ti aiuterà a creare app che portino a una collaborazione più produttiva.

Blocchi

Di recente ho parlato dell'argomento Gutenberg e di come i designer possono usarlo a proprio vantaggio. Sebbene il nuovo editor di WordPress abbia chiaramente i suoi difetti, non c'è dubbio sul perché il team di WordPress abbia apportato la modifica:

I block builder sono il futuro del web design.

Ho capito che i block builder tendono ad essere lo strumento preferito dai web designer e dagli utenti fai-da-te. I costruttori consentono il design del frontend visivo e spesso includono abbondanti opzioni di personalizzazione.

Alcuni dei blocchi prefabbricati inclusi nel Block Kit
Alcuni dei blocchi predefiniti inclusi in Block Kit (Fonte immagine: Block Kit) (Anteprima grande)

Ma Block Kit fa molto di più, il che significa che sia i progettisti che gli sviluppatori possono creare facilmente app personalizzate.

Codice

Il principale elemento di differenziazione tra qualcosa come un costruttore di siti Web e il costruttore di Block Kit è l'aspetto della codifica.

Nella maggior parte dei casi, i progettisti utilizzano i page builder in modo da non doversi preoccupare del codice. Potrebbero aggiungere alcune classi CSS personalizzate o aggiungere HTML al loro testo, ma in genere è tutto. Gli sviluppatori non funzionano così però.

Block Kit include un pannello con JSON pre-scritto che gli sviluppatori possono copiare e incollare nella propria app Slack una volta che è pronta per l'uso. Invece di lasciare che gli sviluppatori scrivano il proprio codice, Slack fornisce codice che utilizza le migliori pratiche per velocità e design.

Un esempio di JSON che ottieni quando crei la tua ricca esperienza di messaggistica nel builder
Un esempio di JSON che ottieni quando crei la tua ricca esperienza di messaggistica nel builder. (Fonte immagine: Block Kit) (Anteprima grande)

Ciò consente agli sviluppatori di concentrarsi sulla realizzazione di personalizzazioni invece di dover creare le proprie app da zero.

Consistenza

Quando gli utenti Slack entrano nella piattaforma, sanno cosa aspettarsi. Ogni interfaccia è la stessa dall'area di lavoro all'area di lavoro.

Tuttavia, quando un'API consente agli sviluppatori di creare app da integrare con quegli spazi, c'è il rischio di introdurre elementi che semplicemente non si adattano bene. Quando ciò accade, l'imprevedibilità dell'interfaccia può creare confusione ed esitazione per l'utente finale. Anche scelte di layout inadeguate possono danneggiare l'esperienza.

Block Kit consente agli sviluppatori di creare app con componenti dell'interfaccia utente impilabili che sono stati provati e testati. Quando personalizzi un'esperienza all'interno di una piattaforma già consolidata, può essere difficile sapere fino a che punto puoi portarla o se funzionerà. Slack ha eliminato queste domande dall'equazione.

Spaziatura

Ecco come appare il tradizionale scambio Slack:

Un esempio di utenti Slack che si scambiano messaggi
Un esempio di utenti Slack che si scambiano messaggi (Fonte immagine: Slack) (Anteprima grande)

Tende ad essere uno scambio a colonna singola, avanti e indietro. E questo funziona perfettamente per i canali Slack in cui la collaborazione è semplice. Messaggio dei dipendenti sullo stato di un'attività. Un cliente carica una risorsa mancante. L'amministratore delegato condivide un collegamento a un comunicato stampa che menziona l'azienda. Ma non tutti gli spazi di lavoro sono così semplici.

Block Kit ti aiuta a massimizzare e migliorare lo spazio occupato dalle funzionalità della tua app. Ad esempio, Block Kit consente ad aziende come Optimizely di visualizzare le informazioni pertinenti in formati a due colonne per una migliore leggibilità.

Optimizely utilizza Block Kit per creare formati a due colonne
Optimizely utilizza Block Kit per creare formati a due colonne. (Fonte immagine: Optimizely) (Anteprima grande)

Questo è davvero un modo migliore per condividere i dettagli pertinenti nell'app Slack del tuo team.

Interazioni ricche

Un altro modo per migliorare la tua app è trasformare l'integrazione in una ricca di interazioni.

I blocchi sono stati sviluppati appositamente per migliorare gli elementi più comunemente usati nella collaborazione Slack. Per esempio:

  • Utilizzare il blocco sezionale per una migliore organizzazione.
  • Utilizzare il blocco di testo per personalizzare la modalità di visualizzazione dei messaggi.
  • Usa blocchi immagine di dimensioni adeguate in modo da poter smettere di preoccuparti se verranno visualizzati correttamente o meno.
  • Usa i blocchi di contesto per mostrare i sottotitoli o un contesto aggiuntivo sui messaggi (come autore, commenti, modifiche, ecc.)
  • Usa i blocchi divisori per migliorare l'aspetto dell'app.
  • Usa i blocchi di azione come la selezione del menu, la selezione dei pulsanti e le date del calendario per portare funzionalità migliori nella tua app e renderle più intuitive.
  • Usa blocchi a 2 sezioni per layout più puliti.

Doodle ha un bellissimo esempio di cosa si può fare con interazioni avanzate usando Block Kit:

Come puoi vedere, gli utenti possono collaborare per pianificare le riunioni con la stessa efficacia come se stessero utilizzando un calendario di terze parti. L'unica differenza è che ora possono fare tutto ciò all'interno del loro spazio di lavoro Slack.

Avvolgendo

La collaborazione è una parte essenziale del successo di qualsiasi organizzazione e non importa se si tratta di un team di 3 o di un team di 300. Ma c'è una grande differenza tra lavorare insieme e collaborare in modo produttivo .

Grazie all'API di Slack, gli sviluppatori hanno creato alcuni modi fantastici per integrare processi e strumenti correlati nella piattaforma. E grazie a Block Kit, quei contributi esterni non interromperanno l'esperienza se il design degli elementi non è all'altezza.

Con funzionalità intuitive di creazione di blocchi, opzioni di codifica adatte agli sviluppatori e altro ancora, Block Kit aiuterà gli sviluppatori a portare esperienze più ricche e una migliore collaborazione alla piattaforma Slack.

Un'ultima cosa da ricordare:

La conferenza di Slack's Frontiers sarà presto disponibile. Sarà a San Francisco il 24 e 25 aprile. Se hai intenzione di partecipare, tieni presente che il percorso per sviluppatori includerà un'intera giornata di formazione su Block Kit , inclusi workshop, demo di nuove funzionalità, tutorial e uno- tutoraggio individuale. Se stai pensando a Block Kit, questa è un'occasione da non perdere.