Block Kit: Slacks bidrag till att bygga ett bättre samarbete UI

om författaren

Suzanne Scacca är en tidigare WordPress-implementerare, tränare och byråchef som nu arbetar som frilansande copywriter. Hon är specialiserad på crafting marknadsföring, web … mer aboutSuzanne↬

(detta är en sponsrad artikel.) Under de senaste åren har det skett en stor förändring när det gäller hur företag arbetar. När fler företag blir platsoberoende har samarbetsverktyg blivit det vanliga sättet på vilket Team möts och får arbete gjort.

som sagt, bara för att vi har samarbetsappar som integrerar våra anslutna affärsprocesser och verktyg, betyder det inte att upplevelsen alltid leder till optimal effektivitet eller produktivitet. Varför? Tja, ibland kommer ett ovänligt användargränssnitt i vägen.

det är därför jag idag ska prata om Block Kit, Slacks bidrag till att bygga ett bättre SAMARBETSGRÄNSSNITT.

för dig som har byggt en anpassad Slack-app (för appkatalogen eller för interna ändamål) kommer detta att vara din introduktion till det nya designverktyget. För er som inte har det är det okej. Det finns några värdefulla lärdomar att ta bort från detta när det gäller vad som gör för en engagerande arbetsyta som kommer att förbättra samarbetet.

Utvecklare, Vet Du Vad Slack Har Arbetat Med?

Slack har gjort stora framsteg sedan lanseringen 2013. Det som ursprungligen började som en meddelandeapp har nu blomstrat till en kraftfull samarbetsplattform.

när du skriver detta: Slack har över 10 miljoner aktiva användare dagligen — och de bor över hela världen (över 150 länder, för att vara exakt).

det är inte bara individer som använder Slack heller-nästan 585 000 team med tre personer eller fler samarbetar inom plattformen. 65 av Fortune 100-företagen råkar också vara på Slack.

allt detta tack vare Slack API som har öppnat dörren för utvecklare att skapa och publicera offentligt tillgängliga appar som utökar funktionaliteten i Slack-arbetsytor.

på så sätt behöver Slack-användare inte studsa mellan sina vanligaste affärsverktyg. Relaterade processer kan ske allt inifrån Slack.

ibland räcker det dock inte med vad som finns tillgängligt i Slack-appkatalogen för vad din organisation behöver internt. Du kanske kan överbrygga några av skillnaderna mellan dina affärsverktyg med vad som finns där, men du kan också hitta en anledning att bygga dina egna anpassade Slack-appar.

Introducing Block Kit från Slack

här är saken: medan Slack har lyckats låta utvecklare skapa sina egna appar för att förbättra samarbetet inom plattformen, hur ska Utvecklare veta hur man skapar en bra upplevelse med det?

tills nyligen gav Slacks API-och appkatalog begränsad flexibilitet och kontroll. Som Brian Elliott, chef för plattformen, förklarade:

”idag tvingas alla appar till en begränsad uppsättning sätt att visa rik information. Om du har tittat på och sett och använt alla olika appar i Slack, slutar många av dem med samma layout oavsett vilken funktionalitet de försöker distribuera. När du i verkligheten behöver en uppsättning komponenter som låter dig bygga rika interaktiva skärmar som är lättare för människor att förstå, smälta och agera på.”

så, Slack utvecklat Block Kit.

Block Kit är ett användargränssnitt som gör det möjligt för utvecklare, designers och front-end-byggare att visa sina meddelandeprogram genom ett rikt, interaktivt och intuitivt användargränssnitt. Genom att tillhandahålla en uppsättning stapelbara gränssnittselement eller block ger Block Kit nu Utvecklare mer kontroll och flexibilitet över sina appdesigner och layouter.

notera: Om du vill se Block Kit i aktion, gå med i den kommande Slack-sessionen,” Building with Block Kit”, där du får en levande produktdemonstration och se hur lätt det är att anpassa designen av din app.

Block Kit levereras med två viktiga komponenter:

1. Block Kit Builder

Lägg märke till likheten mellan detta byggverktyg och många av de andra verktygen vi använder för att skapa webbplatser och appar för kunder:

byggnadskomponenterna finns till vänster. Klicka bara på den du vill inkludera och se den läggas till i förhandsgranskningen av din app i mitten.

vill du ha ytterligare anpassning? Kolla in textredigeraren till höger. Medan Block Kit tillhandahåller färdiga element som följer bästa praxis för att designa meddelandeprogram, har du möjlighet att göra dem till dina egna om du föredrar det.

2. Block Kit mallar

även om du säkert kan skapa ett meddelandegränssnitt från byggaren på egen hand, föreslår jag att du utforskar mallarna som tillhandahålls också:

Slack-teamet har redan sett riktigt användbara fall av Slack-appar i aktion. Naturligtvis vet de vilka typer av saker din organisation kanske vill utnyttja för att förbättra samarbetet.

det är därför du hittar vanliga åtgärder som följande som redan är byggda för dig:

• granska ansökningar om godkännande;
• vidta åtgärder för nya meddelanden;
• köra omröstningar och övervakningsresultat;
• genomföra en sökning.

Guru är ett sådant verktyg som är utnyttjat Block Kit för att förbättra sin Slack app:

Guru tillhandahåller en databas sökfunktion inom Slack. Resultaten hämtas nu snabbt och visas tydligare på framsidan av Slack.

nycklarna till att bygga ett bättre samarbete UI

nu när vi har sett vad som kommer ner i linjen med Block Kit, måste vi prata om hur det kommer att hjälpa dig att skapa appar som leder till mer produktivt samarbete.

Block

jag talade nyligen om ämnet Gutenberg och hur designers kan använda det till sin fördel. Även om den nya WordPress-redigeraren tydligt har sina brister, är det ingen fråga varför teamet på WordPress gjorde förändringen:

Blockbyggare är framtiden för webbdesign.

”

jag får att blockbyggare tenderar att vara det föredragna verktyget för webbdesigners och DIY-användare. Byggare möjliggör visuell frontend-design och innehåller ofta rikliga anpassningsalternativ.

men Block Kit gör mycket mer än så, vilket innebär att både designers och utvecklare kan bygga anpassade appar med lätthet.

kod

den viktigaste skillnaden mellan något som en webbplatsbyggare och Block Kit builder är kodningsaspekten.

i de flesta fall använder designers sidbyggare så att de inte behöver bry sig om kod. De kan lägga till några anpassade CSS-klasser eller lägga till HTML i sin text, men det är i allmänhet det. Utvecklare fungerar dock inte så.

Block Kit innehåller en panel med förskriven JSON som utvecklare kan kopiera och klistra in i sin egen Slack-app när den är redo att gå. I stället för att låta utvecklare skriva sin egen kod, tillhandahåller Slack kod som använder bästa praxis för hastighet och design.

detta gör det möjligt för utvecklare att fokusera på att göra anpassningar istället för att behöva bygga sina appar från grunden.

konsistens

när Slack-användare går in i plattformen vet de vad de kan förvänta sig. Varje gränssnitt är detsamma från arbetsyta till arbetsyta.

men när ett API tillåter utvecklare att bygga appar för att integrera med dessa utrymmen finns det risk för att införa element som bara inte är bra. När det händer kan gränssnittets oförutsägbarhet skapa förvirring och tvekan för slutanvändaren. Dåligt passande layoutval kan också skada upplevelsen.

Block Kit gör det möjligt för utvecklare att bygga appar med stapelbara UI-komponenter som har testats och testats. När du anpassar en upplevelse inom en redan etablerad plattform kan det vara svårt att veta hur långt du kan ta det — eller om det ens fungerar. Slack har tagit dessa frågor ur ekvationen.

Spacing

så här ser det traditionella Slack-utbytet ut:

det tenderar att vara en enda kolumn, fram och tillbaka utbyte. Och detta fungerar perfekt för Slack-kanaler där samarbete är enkelt. Anställda meddelande om status för en uppgift. En klient laddar upp en saknad tillgång. VD delar en länk till ett pressmeddelande som nämner företaget. Men inte alla arbetsytor är så enkla.

Block Kit hjälper dig att maximera och förbättra det utrymme som appens funktioner upptar. Block Kit gör det till exempel möjligt för företag som Optimizely att visa relevant information i två-kolumnformat för bättre läsbarhet.

detta är verkligen ett bättre sätt att dela relevanta detaljer i ditt lags Slack-app.

rika interaktioner

ett annat sätt att höja din app är genom att göra integrationen till en som är rik på interaktioner.

block har utvecklats speciellt för att förbättra de vanligaste elementen i Slack-samarbete. Exempelvis:

• använd Sektionsblocket för bättre organisation.
• använd textblocket för att anpassa hur meddelanden visas.
• använd bildblock med rätt storlek så att du kan sluta oroa dig för om de ska visas korrekt eller inte.
• använd Kontextblock för att visa bylines eller ytterligare sammanhang om meddelanden (som författare, kommentarer, ändringar etc.)
• använd avdelare block för att förbättra utseendet på appen.
• använd Åtgärdsblock som menyval, knappval och kalenderdatum för att få bättre funktioner i din app och få dem att visas mer intuitivt.
• Använd 2-sektionsblock för renare layouter.

Doodle har ett vackert exempel på vad som kan göras med rika interaktioner med Block Kit:

som du kan se kan användare arbeta tillsammans för att schemalägga möten lika effektivt som om de använde en tredjepartskalender. Den enda skillnaden är att de nu kan göra allt detta inom sin Slack-arbetsyta.

inslagning upp

samarbete är en viktig del av en organisations framgång, och det spelar ingen roll om det är ett team av 3 eller ett team av 300. Men det är en stor skillnad mellan att arbeta tillsammans och produktivt samarbeta.

tack vare Slacks API har utvecklare skapat några fantastiska sätt att integrera relaterade processer och verktyg i plattformen. Och tack vare Block Kit kommer dessa externa bidrag inte att störa upplevelsen om elementens design blir kort.

med intuitiva blockbyggnadsfunktioner, utvecklarvänliga kodningsalternativ och mer kommer Block Kit att hjälpa utvecklare att ge rikare upplevelser och bättre samarbete till Slack-plattformen.

en sista sak att nämna:

Slacks Frontiers conference kommer snart. Det kommer att vara i San Francisco den 24 och 25 April. Om du planerar att delta, notera att utvecklarens spår kommer att innehålla en hel dags träning på Block Kit, inklusive workshops, nya funktionsdemos, handledning, samt en-mot-en-mentorskap. Om du funderar på Block Kit är detta en möjlighet du inte vill missa.

(ms, ra, il)