Dit bericht is geschreven voor de Slack Platform Blog. Lees de originele invoer hier.

De Slack-integratie van Guru begon in de vroege dagen van bots, waar de ervaring vooral tekst-gebaseerd was, en is in functionaliteit gegroeid naarmate Slack meer functies heeft geïntroduceerd — zoals interactieve berichten en app-acties. We zagen onmiddellijk de voordelen van Block Kit, een kans om de diepe, rijke ervaringen te bouwen die onze gebruikers zijn gaan verwachten, met meer vertrouwde UI/UX patronen en interactieve inhoud. Wat we echter niet verwachtten, was hoe Block Kit de manier zou veranderen waarop onze ontwikkelings- en ontwerpteams samenwerken.

Een betere onboarding ervaring bouwen

We past de eerste keer Block Kit toe om het helpmenu van onze app te vernieuwen. Vroeger, toen een gebruiker begon, begroette het helpmenu hen met een muur van informatieve tekst. Niet alleen was deze tekst moeilijk te scannen, maar het vereiste dat een gebruiker commando's typete om iets te bereiken. App-onboarding is cruciaal voor onze gebruikers, en we gebruikten Block Kit om de ervaring volledig opnieuw uit te vinden — op twee belangrijke manieren:

• Door het gebruik van separators hebben we die muur van informatieve tekst gestileerd door vergelijkbare inhoud te groeperen — waardoor het beter verteerbaar en makkelijker te lezen is.
• Inline-knoppen en overflow-menu's maakten een interactieve, actiegerichte onboarding-ervaring mogelijk. Nu hoeven gebruikers geen toetscommando's meer te typen; ze kunnen eenvoudig een knop selecteren en snel actie ondernemen.

Het helpmenu was slechts één plek waar Block Kit de Guru-app-ervaring verbeterd. Inline-knoppen in de activiteit-feedinterface brengen de oproep tot actie dichter bij de bijbehorende informatie. Overflow-menu's verbergen nu acties die minder vaak worden gebruikt en helpen de gebruiker zich te concentreren op prioritaire informatie. We hebben nog maar het oppervlak gekrabd — er zijn nog talloze manieren waarop Block Kit apps interactiever kan maken.

Dezelfde taal spreken

Bij Guru kan het bouwen van consistente ervaringen over alle interfaces (webapplicatie, browserextensie en Slack-app) een uitdaging zijn. Terwijl ontwerp en ontwikkeling onvermoeibaar werken om naadloze ervaringen voor onze gebruikers te waarborgen, is het een samenwerkingsproces met veel heen en weer. Vroeger begon ons ontwerpteam (over het algemeen niet gewend aan het bouwen op Slack) met een blanco canvas en liep onvermijdelijk tegen technische beperkingen aan — vooral toen hun ontwerpen overgingen naar ontwikkeling, wat veel iteraties vereiste voordat ze op een definitief ontwerp landden.

Hoe inefficiënt dit ook was, dit proces is er een die de meeste ontwikkelaars bekend is. Terwijl we verwachtten rijkere, interactievere ervaringen te bouwen met behulp van Block Kit, hadden we niet voorzien hoezeer de Block Kit Builder het partnerschap tussen ontwerp en ontwikkeling zou transformeren. De Block Kit Builder is een visuele prototyping-sandbox die je in staat stelt om elk beschikbaar blok te selecteren, te stapelen en aan te passen.

Voor Guru overbrugt de Block Kit Builder de kloof tussen ontwerp en engineering — waardoor onze ontwerpers gemakkelijk hun ideale gebruikerservaring kunnen prototypen, terwijl ze ook de exacte JSON produceren die nodig is voor de ontwikkeling om hun visie te implementeren. Ons ontwerpteam hoeft niet langer vanaf een leeg blad te beginnen en vraagt zich af: Waar kan ik deze knop plaatsen? of Welke tekst gebruik ik? Nu is het zo eenvoudig als het maken van de lay-out, het delen van de URL en vervolgens het iteratief heen en weer gaan.

De Block Kit Builder functioneert ook als een hulpmiddel voor ontwikkeling om problematische JSON te debuggen. Als een app-bericht niet correct wordt weergegeven, plakken we gewoon de code in de builder en kunnen we direct het probleem identificeren.

Efficiëntie op zijn best

De combinatie van Block Kit en de Block Kit Builder heeft geleid tot een efficiëntere ervaring voor zowel app-gebruikers als het Guru-team. Block Kit biedt ons niet alleen een nieuw kader voor het bouwen van unieke app-UI, maar geeft ons ook de flexibiliteit en controle over de volgorde en lay-out van informatie. Het is nu gemakkelijker dan ooit om de Guru-app te gebruiken; bovendien helpt het bijgewerkte helpmenu gebruikers snel op weg.

Nieuwsgierig? Bekijk de onlangs bijgewerkte, Block Kit-ondersteunde app van Guru in de Slack App Directory op slack.com/apps.