Block Kit: a contribuição do Slack para criar uma interface de usuário de colaboração melhor

(Este é um artigo patrocinado.) Nos últimos anos, houve uma grande mudança na forma como as empresas trabalham. À medida que mais empresas se tornam independentes do local, as ferramentas de colaboração se tornaram a maneira padrão de as equipes se encontrarem e realizarem o trabalho.

Dito isso, só porque temos aplicativos de colaboração que integram nossos processos e ferramentas de negócios conectados, isso não significa que a experiência sempre leve à eficiência ou produtividade ideal. Por quê? Bem, às vezes uma interface de usuário hostil atrapalha.

É por isso que, hoje, vou falar sobre o Block Kit, a contribuição do Slack para construir uma melhor interface de colaboração.

Para aqueles que criaram um aplicativo Slack personalizado (para o diretório de aplicativos ou para fins internos), esta será sua introdução à nova ferramenta de design. Para quem não tem, tudo bem. Há algumas lições valiosas a serem tiradas disso em termos do que cria um espaço de trabalho envolvente que melhorará a colaboração.

Desenvolvedores, você sabe em que o Slack está trabalhando?

O Slack deu grandes passos desde seu lançamento em 2013. O que originalmente começou como um aplicativo de mensagens agora se transformou em uma poderosa plataforma de colaboração.

No momento em que escrevo isso: o Slack tem mais de 10 milhões de usuários ativos diariamente – e eles vivem em todo o mundo (mais de 150 países, para ser exato).

Não são apenas os indivíduos que usam o Slack — quase 585.000 equipes de três pessoas ou mais colaboram na plataforma. 65 das empresas da Fortune 100 também estão no Slack.

Isso tudo graças à API do Slack, que abriu as portas para os desenvolvedores criarem e publicarem aplicativos disponíveis publicamente que estendem a funcionalidade dos espaços de trabalho do Slack.

Dessa forma, os usuários do Slack não precisam alternar entre as ferramentas de negócios mais usadas. Os processos relacionados podem ocorrer todos no Slack.

Às vezes, porém, o que está disponível no Diretório de aplicativos do Slack não é suficiente para o que sua organização precisa internamente. Você pode superar algumas das divisões entre suas ferramentas de negócios com o que está lá, mas também pode encontrar um motivo para criar seus próprios aplicativos personalizados do Slack.

Apresentando o Block Kit do Slack

O problema é o seguinte: embora o Slack tenha conseguido permitir que os desenvolvedores criem seus próprios aplicativos para aprimorar a colaboração dentro da plataforma, como os desenvolvedores devem saber como criar uma boa experiência com ele?

Até recentemente, a API e o diretório de aplicativos do Slack ofereciam flexibilidade e controle limitados. Como Brian Elliott, gerente geral da plataforma, explicou:

“Hoje, todos os aplicativos são forçados a um conjunto limitado de maneiras de exibir informações ricas. Se você consultou, viu e usou todos os aplicativos diferentes no Slack, muitos deles acabam com o mesmo layout, independentemente da funcionalidade que estão tentando implantar. Quando, na realidade, o que você precisa é de um conjunto de componentes que permitem construir exibições interativas ricas que são mais fáceis para as pessoas compreenderem, digerirem e agirem.”

Então, o Slack desenvolveu o Block Kit.

O Block Kit é uma estrutura de interface do usuário que permite que desenvolvedores, designers e construtores de front-end exibam seus aplicativos de mensagens por meio de uma interface de usuário rica, interativa e intuitiva. Além disso, ao fornecer um conjunto de elementos ou blocos de interface do usuário empilháveis, o Block Kit agora oferece aos desenvolvedores mais controle e flexibilidade sobre seus designs e layouts de aplicativos.

Observação : se você quiser ver o Block Kit em ação, participe da próxima sessão do Slack, "Construindo com o Block Kit", onde você terá uma demonstração do produto ao vivo e verá como é fácil personalizar o design do seu aplicativo.

O Block Kit vem com dois componentes principais:

1. Construtor de Kits de Blocos

Observe a semelhança entre esta ferramenta de construção e muitas outras ferramentas que usamos para criar sites e aplicativos para clientes:

Os componentes de construção estão à esquerda. Basta clicar no que você deseja incluir e vê-lo ser adicionado à visualização do seu aplicativo no centro.

Quer mais personalização? Confira o editor de texto à direita. Embora o Block Kit forneça elementos pré-fabricados que seguem as práticas recomendadas para projetar aplicativos de mensagens, você pode torná-los seus, se preferir.

2. Modelos de Kit de Blocos

Embora você certamente possa criar uma interface de mensagens do Builder por conta própria, sugiro explorar os modelos fornecidos também:

A equipe do Slack já viu casos realmente úteis de aplicativos do Slack em ação. Escusado será dizer que eles sabem que tipos de coisas sua organização pode querer alavancar para melhorar a colaboração.

É por isso que você encontrará ações comuns, como as seguintes, já criadas para você:

• Revisão de solicitações de aprovação;
• Ação em novas notificações;
• Realização de enquetes e acompanhamento de resultados;
• Fazendo uma pesquisa.

O Guru é uma dessas ferramentas que aproveitou o Block Kit para melhorar seu aplicativo Slack:

O Guru fornece uma função de pesquisa de banco de dados no Slack. Os resultados agora são recuperados rapidamente e exibidos com mais clareza no frontend do Slack.

As chaves para criar uma interface de usuário de colaboração melhor

Agora que vimos o que está por vir com o Block Kit, precisamos falar sobre como ele ajudará você a criar aplicativos que levam a uma colaboração mais produtiva.

Blocos

Falei recentemente sobre o assunto de Gutenberg e como os designers podem usá-lo a seu favor. Embora o novo editor do WordPress tenha claramente suas falhas, não há dúvida de por que a equipe do WordPress fez a mudança:

Os construtores de blocos são o futuro do web design.

“

Eu entendo que os construtores de blocos tendem a ser a ferramenta preferida para web designers e usuários de bricolage. Os construtores permitem o design de front-end visual e geralmente incluem opções de personalização abundantes.

Mas o Block Kit faz muito mais do que isso, o que significa que designers e desenvolvedores podem criar aplicativos personalizados com facilidade.

Código

O principal diferencial entre algo como um construtor de sites e o construtor Block Kit é o aspecto de codificação.

Na maioria dos casos, os designers usam construtores de páginas para que não precisem se preocupar com o código. Eles podem adicionar algumas classes CSS personalizadas ou adicionar HTML ao seu texto, mas geralmente é isso. Os desenvolvedores não funcionam assim.

O Block Kit inclui um painel com JSON pré-escrito que os desenvolvedores podem copiar e colar em seu próprio aplicativo Slack quando estiver pronto para uso. Em vez de deixar os desenvolvedores escreverem seu próprio código, o Slack fornece código que utiliza as melhores práticas de velocidade e design.

Isso permite que os desenvolvedores se concentrem em fazer personalizações em vez de criar seus aplicativos do zero.

Consistência

Quando os usuários do Slack entram na plataforma, eles sabem o que esperar. Cada interface é a mesma de espaço de trabalho para espaço de trabalho.

No entanto, quando uma API permite que os desenvolvedores criem aplicativos para integração com esses espaços, existe o risco de introduzir elementos que simplesmente não combinam bem. Quando isso acontece, a imprevisibilidade da interface pode criar confusão e hesitação para o usuário final. Escolhas de layout mal ajustadas também podem prejudicar a experiência.

O Block Kit permite que os desenvolvedores criem aplicativos com componentes de interface do usuário empilháveis ​​que foram testados e comprovados. Ao personalizar uma experiência dentro de uma plataforma já estabelecida, pode ser difícil saber até onde você pode levá-la – ou se funcionará. O Slack tirou essas questões da equação.

Espaçamento

É assim que a troca tradicional do Slack se parece:

Tende a ser uma troca de coluna única, de ida e volta. E isso funciona perfeitamente bem para canais do Slack onde a colaboração é simples. Os funcionários enviam mensagens sobre o status de uma tarefa. Um cliente carrega um ativo ausente. O CEO compartilha um link para um comunicado de imprensa mencionando a empresa. Mas nem todos os espaços de trabalho são tão simples.

O Block Kit ajuda você a maximizar e aprimorar o espaço que os recursos do seu aplicativo ocupam. Por exemplo, o Block Kit permite que empresas como a Optimizely exibam informações pertinentes em formatos de duas colunas para melhor legibilidade.

Essa é realmente uma maneira melhor de compartilhar detalhes pertinentes no aplicativo Slack da sua equipe.

Interações avançadas

Outra maneira de elevar seu aplicativo é transformar a integração em uma rica em interações.

Os blocos foram desenvolvidos especialmente para aprimorar os elementos mais usados ​​na colaboração do Slack. Por exemplo:

• Use o bloco Seccional para melhor organização.
• Use o bloco de texto para personalizar como as mensagens são exibidas.
• Use blocos de imagem de tamanho adequado para que você possa parar de se preocupar se eles serão exibidos corretamente ou não.
• Use blocos de contexto para mostrar assinaturas ou contexto adicional sobre mensagens (como autor, comentários, alterações etc.)
• Use blocos divisores para melhorar a aparência do aplicativo.
• Use blocos de ação como seleção de menu, seleção de botão e datas de calendário para trazer melhores recursos para seu aplicativo e torná-los mais intuitivos.
• Use blocos de 2 seções para layouts mais limpos.

O Doodle tem um belo exemplo do que pode ser feito com interações ricas usando o Block Kit:

Como você pode ver, os usuários podem trabalhar juntos para agendar reuniões de forma tão eficaz quanto se estivessem usando um calendário de terceiros. A única diferença é que agora eles podem fazer tudo isso no espaço de trabalho do Slack.

Empacotando

A colaboração é uma parte essencial do sucesso de qualquer organização, e não importa se é uma equipe de 3 ou 300 pessoas. Mas há uma grande diferença entre trabalhar em conjunto e colaborar produtivamente .

Graças à API do Slack, os desenvolvedores criaram algumas maneiras incríveis de integrar processos e ferramentas relacionados à plataforma. E graças ao Block Kit, essas contribuições externas não atrapalham a experiência se o design dos elementos ficar aquém.

Com recursos intuitivos de criação de blocos, opções de codificação amigáveis ​​ao desenvolvedor e muito mais, o Block Kit ajudará os desenvolvedores a trazer experiências mais ricas e melhor colaboração para a plataforma Slack.

Uma última coisa a mencionar:

A conferência Frontiers do Slack está chegando em breve. Será em San Francisco nos dias 24 e 25 de abril. Se você planeja participar, observe que a faixa Desenvolvedores incluirá um dia inteiro de treinamento no Block Kit , incluindo workshops, demonstrações de novos recursos, tutoriais, bem como um- mentoria em um. Se está a pensar no Block Kit, esta é uma oportunidade que não vai querer perder.