Block Kit: Contribuția lui Slack la construirea unei interfețe de utilizare mai bune pentru colaborare

Publicat: 2022-03-10

Rezumat rapid ↬ Slack a făcut multe pentru a reuni echipele și partenerii online. De asemenea, a făcut foarte mult pentru a oferi dezvoltatorilor posibilitatea de a-și construi propriile aplicații personalizate. Până de curând, însă, dezvoltatorii erau limitați de cât de mult puteau face pentru a personaliza designul acelor aplicații. Asta se schimbă astăzi cu Block Kit.

(Acesta este un articol sponsorizat.) În ultimii ani, a existat o schimbare majoră în ceea ce privește modul în care lucrează companiile. Pe măsură ce tot mai multe companii devin independente de locație, instrumentele de colaborare au devenit modul standard în care echipele se întâlnesc și își desfășoară activitatea.

Acestea fiind spuse, doar pentru că avem aplicații de colaborare care integrează procesele și instrumentele noastre de afaceri conectate, asta nu înseamnă că experiența duce întotdeauna la o eficiență sau productivitate optimă. De ce? Ei bine, uneori o interfață neprietenoasă iese în cale.

De aceea, astăzi, voi vorbi despre Block Kit, contribuția lui Slack la construirea unei interfețe de utilizare de colaborare mai bune.

Pentru cei dintre voi care au creat o aplicație Slack personalizată (pentru directorul aplicației sau în scopuri interne), aceasta va fi introducerea dumneavoastră în noul instrument de design. Pentru cei dintre voi care nu au făcut-o, este în regulă. Există câteva lecții valoroase de luat din acest lucru în ceea ce privește ceea ce face un spațiu de lucru captivant, care va îmbunătăți colaborarea.

Dezvoltatori, știți la ce s-a lucrat Slack?

Slack a făcut progrese uriașe de la lansarea sa în 2013. Ceea ce a început inițial ca o aplicație de mesagerie s-a transformat acum într-o platformă de colaborare puternică.

În momentul în care scriu acest lucru: Slack are peste 10 milioane de utilizatori activi zilnic - și trăiesc în toată lumea (mai exact, peste 150 de țări).

Un exemplu de canal Slack pentru vorbitori de japoneză — Iată un exemplu de canal Slack pentru vorbitori de japoneză. (Sursa imagine: Slack) (Previzualizare mare)

Nu este vorba doar de indivizi care folosesc Slack - aproape 585.000 de echipe de trei persoane sau mai multe colaborează în cadrul platformei. 65 dintre companiile Fortune 100 se întâmplă să fie și ele pe Slack.

O privire asupra colaborării în timp real între utilizatorii Slack (Sursa imagine: Slack) (Previzualizare mare)

Toate acestea se datorează API-ului Slack, care a deschis ușa dezvoltatorilor să creeze și să publice aplicații disponibile public care extind funcționalitatea spațiilor de lucru Slack.

Prima pagină a Directorului de aplicații Slack. (Sursa imagine: Slack) (Previzualizare mare)

În acest fel, utilizatorii Slack nu trebuie să sară între instrumentele lor de afaceri cele mai frecvent utilizate. Procesele conexe pot avea loc toate din Slack.

Uneori, totuși, ceea ce este disponibil în Slack App Directory pur și simplu nu este suficient pentru ceea ce organizația dvs. are nevoie intern. S-ar putea să reușiți să rezolvați unele dintre divergențele dintre instrumentele dvs. de afaceri cu ceea ce există, dar s-ar putea să găsiți și un motiv pentru a vă crea propriile aplicații Slack personalizate.

Vă prezentăm Block Kit de la Slack

Iată chestia: în timp ce Slack a reușit să permită dezvoltatorilor să-și creeze propriile aplicații pentru a îmbunătăți colaborarea în cadrul platformei, cum ar trebui dezvoltatorii să știe cum să creeze o experiență bună cu aceasta?

Până de curând, API-ul și directorul aplicațiilor Slack au oferit flexibilitate și control limitate. După cum a explicat Brian Elliott, directorul general al platformei:

„Astăzi, toate aplicațiile sunt forțate să adopte un set limitat de moduri de a afișa informații bogate. Dacă v-ați uitat și văzut și folosit toate aplicațiile diferite din Slack, multe dintre ele ajung să aibă același aspect, indiferent de funcționalitatea pe care încearcă să o implementeze. Când, în realitate, ceea ce aveți nevoie este un set de componente care vă permit să construiți afișaje interactive bogate, care sunt mai ușor de înțeles, digerat și de acționat de către oameni.”

Deci, Slack a dezvoltat Block Kit.

Block Kit este un cadru UI care permite dezvoltatorilor, designerilor și constructorilor front-end să-și afișeze aplicațiile de mesagerie printr-o interfață de utilizare bogată, interactivă și intuitivă. În plus, oferind un set de elemente sau blocuri UI stivuibile, Block Kit oferă acum dezvoltatorilor mai mult control și flexibilitate asupra designului și aspectului aplicațiilor lor.

Notă : dacă doriți să vedeți Block Kit în acțiune, alăturați-vă viitoarei sesiuni Slack, „Building with Block Kit”, unde veți primi o demonstrație live a produsului și veți vedea cât de ușor este să personalizați designul aplicației dvs.

Block Kit vine cu două componente cheie:

1. Block Kit Builder

Observați asemănarea dintre acest instrument de generare și multe dintre celelalte instrumente pe care le folosim pentru a crea site-uri web și aplicații pentru clienți:

O demonstrație a constructorului Block Kit (Sursa imagine: Block Kit) (Previzualizare mare)

Componentele clădirii sunt în stânga. Pur și simplu faceți clic pe cel pe care doriți să îl includeți și urmăriți cum se adaugă la previzualizarea aplicației dvs. din centru.

Doriți personalizare suplimentară? Consultați editorul de text din dreapta. În timp ce Block Kit oferă elemente prefabricate care urmează cele mai bune practici pentru proiectarea aplicațiilor de mesagerie, aveți posibilitatea de a le face proprii, dacă preferați.

2. Șabloane de set de blocuri

Deși cu siguranță puteți crea o interfață de mesagerie din Builder pe cont propriu, vă sugerez să explorați și șabloanele furnizate:

Unele dintre șabloanele Block Kit le oferă utilizatorilor — Acestea sunt doar câteva dintre șabloanele Block Kit pe care le oferă utilizatorilor. (Sursa imagine: Block Kit) (Previzualizare mare)

Echipa Slack a văzut deja cazuri cu adevărat utile de aplicații Slack în acțiune. Inutil să spun că ei știu ce fel de lucruri ar putea dori organizația dvs. să folosească de dragul unei colaborări îmbunătățite.

De aceea, veți găsi acțiuni comune, cum ar fi următoarele, deja concepute pentru dvs.:

Examinarea cererilor de aprobare;
Luarea de măsuri cu privire la noile notificări;
Desfășurarea sondajelor și monitorizarea rezultatelor;
Efectuarea unei căutări.

Guru este un astfel de instrument care folosește Block Kit pentru a-și îmbunătăți aplicația Slack:

Guru oferă o funcție de căutare în baza de date în Slack. Rezultatele sunt acum recuperate rapid și afișate mai clar pe front-end-ul Slack.

Cheile pentru construirea unei interfețe de utilizare mai bune pentru colaborare

Acum că am văzut ce urmează cu Block Kit, trebuie să vorbim despre cum vă va ajuta să creați aplicații care duc la o colaborare mai productivă.

Blocuri

Am vorbit recent despre subiectul Gutenberg și despre modul în care designerii îl pot folosi în avantajul lor. Deși noul editor WordPress are în mod clar defectele sale, nu există nicio îndoială de ce echipa WordPress a făcut schimbarea:

Creatorii de blocuri sunt viitorul designului web.
„

Înțeleg că constructorii de blocuri tind să fie instrumentul preferat pentru designerii web și utilizatorii de bricolaj. Constructorii permit designul vizual frontal și adesea includ opțiuni de personalizare abundente.

Unele dintre blocurile prefabricate incluse în Block Kit (Sursa imagine: Block Kit) (Previzualizare mare)

Dar Block Kit face mult mai mult decât atât, ceea ce înseamnă că atât designerii, cât și dezvoltatorii pot crea aplicații personalizate cu ușurință.

Cod

Diferențiatorul cheie între ceva de genul unui constructor de site-uri web și constructorul de blocuri este aspectul de codificare.

În cele mai multe cazuri, designerii folosesc generatori de pagini, astfel încât să nu fie nevoiți să se deranjeze cu codul. S-ar putea să adauge niște clase CSS personalizate sau să adauge HTML textului lor, dar asta este în general tot. Totuși, dezvoltatorii nu funcționează așa.

Block Kit include un panou cu JSON pre-scris pe care dezvoltatorii îl pot copia și insera în propria lor aplicație Slack, odată ce este gata de funcționare. În loc să lase dezvoltatorii să-și scrie propriul cod, Slack oferă cod care utilizează cele mai bune practici pentru viteză și design.

O mostră de JSON pe care o obțineți atunci când vă construiți experiența bogată de mesagerie în generator. (Sursa imagine: Block Kit) (Previzualizare mare)

Acest lucru le permite dezvoltatorilor să se concentreze pe realizarea de personalizări în loc să fie nevoiți să-și construiască aplicațiile de la zero.

Consecvență

Când utilizatorii Slack intră în platformă, știu la ce să se aștepte. Fiecare interfață este aceeași de la spațiu de lucru la spațiu de lucru.

Cu toate acestea, atunci când un API le permite dezvoltatorilor să creeze aplicații care să se integreze cu acele spații, există riscul de a introduce elemente care pur și simplu nu se potrivesc bine. Când se întâmplă acest lucru, imprevizibilitatea interfeței poate crea confuzie și ezitare pentru utilizatorul final. Alegerile de aspect nepotrivite pot dăuna, de asemenea, experienței.

Block Kit permite dezvoltatorilor să creeze aplicații cu componente UI stivuitoare care au fost încercate și testate. Când personalizați o experiență într-o platformă deja stabilită, poate fi dificil să știți cât de departe o puteți duce - sau chiar dacă va funcționa. Slack a scos aceste întrebări din ecuație.

Spațiere

Iată cum arată schimbul tradițional Slack:

Un exemplu de utilizatori Slack care își trimit mesaje unul altuia (Sursa imagine: Slack) (Previzualizare mare)

Tinde să fie un schimb dus-întors pe o singură coloană. Și acest lucru funcționează perfect pentru canalele Slack unde colaborarea este simplă. Mesajul angajaților despre starea unei sarcini. Un client încarcă un material lipsă. CEO-ul distribuie un link către un comunicat de presă care menționează compania. Dar nu toate spațiile de lucru sunt atât de simple.

Block Kit vă ajută să maximizați și să îmbunătățiți spațiul pe care îl ocupă funcțiile aplicației dvs. De exemplu, Block Kit permite companiilor precum Optimizely să afișeze informații relevante în formate cu două coloane pentru o mai bună lizibilitate.

Optimizely utilizează Block Kit pentru a crea formate cu două coloane. (Sursa imagine: Optimizely) (Previzualizare mare)

Acesta este într-adevăr o modalitate mai bună de a partaja detalii pertinente în aplicația Slack a echipei tale.

Interacțiuni bogate

O altă modalitate de a vă îmbunătăți aplicația este să transformați integrarea într-una bogată în interacțiuni.

Blocurile au fost special dezvoltate pentru a îmbunătăți elementele cele mai frecvent utilizate în colaborarea Slack. De exemplu:

Utilizați blocul Secțional pentru o mai bună organizare.
Utilizați blocul Text pentru a personaliza modul în care mesajele sunt afișate.
Folosiți blocuri de imagine dimensionate corespunzător, astfel încât să nu vă mai faceți griji dacă se vor afișa sau nu corect.
Utilizați blocurile de context pentru a afișa liniile de referință sau contextul suplimentar despre mesaje (cum ar fi autorul, comentariile, modificările etc.)
Utilizați blocurile de separare pentru a îmbunătăți aspectul aplicației.
Utilizați blocuri de acțiune , cum ar fi selecția meniului, selecția butoanelor și datele calendarului, pentru a aduce funcții mai bune în aplicația dvs. și pentru a le face să se afișeze mai intuitiv.
Utilizați blocuri cu 2 secțiuni pentru amenajări mai curate.

Doodle are un exemplu frumos de ceea ce se poate face cu interacțiuni bogate folosind Block Kit:

După cum puteți vedea, utilizatorii pot lucra împreună pentru a programa întâlniri la fel de eficient ca și cum ar folosi un calendar terță parte. Singura diferență este că acum pot face toate acestea în spațiul lor de lucru Slack.

Încheierea

Colaborarea este o parte esențială a succesului oricărei organizații și nu contează dacă este o echipă de 3 sau o echipă de 300. Dar există o mare diferență între a lucra împreună și a colabora productiv .

Datorită API-ului Slack, dezvoltatorii au creat câteva modalități minunate de a integra procesele și instrumentele aferente în platformă. Și datorită Block Kit-ului, acele contribuții externe nu vor perturba experiența dacă designul elementelor este scurt.

Cu capabilități intuitive de creare a blocurilor, opțiuni de codare prietenoase pentru dezvoltatori și multe altele, Block Kit îi va ajuta pe dezvoltatori să aducă experiențe mai bogate și o colaborare mai bună platformei Slack.

Un ultim lucru de menționat:

Conferința Slack's Frontiers va avea loc în curând. Va avea loc la San Francisco pe 24 și 25 aprilie. Dacă intenționați să participați, rețineți că secțiunea Dezvoltatori va include o zi întreagă de instruire despre Block Kit , inclusiv ateliere, demonstrații de funcții noi, tutoriale, precum și o zi întreagă. mentorat pe unul. Dacă te gândești la Block Kit, aceasta este o oportunitate pe care nu vei dori să o ratezi.