The Expected (and Unexpected) Benefits of Building with Block Kit

O novo Block Kit do Slack resultou em uma experiência mais eficiente tanto para os usuários do app Guru quanto para a equipe do Guru. Agora, é mais fácil do que nunca usar o app Guru para Slack. Descubra como nossa equipe no Guru aproveitou a oferta do Block Kit do Slack.

Este post foi escrito para o Blog da Plataforma Slack. Leia a entrada original aqui.

A integração do Guru com o Slack começou nos primeiros dias dos bots, onde a experiência era principalmente baseada em texto, e cresceu em funcionalidade à medida que o Slack introduziu mais recursos — como mensagens interativas e ações de apps. Imediatamente percebemos os benefícios do Block Kit, uma oportunidade de construir experiências profundas e ricas que nossos usuários passaram a esperar, com padrões de UI/UX mais familiares e conteúdo interativo. O que não esperávamos, no entanto, era como o Block Kit mudaria a forma como nossas equipes de desenvolvimento e design colaboram.

slack-and-guru.png

Criando uma melhor experiência de integração

Nós aplicamos pela primeira vez o Block Kit para reformular o menu de ajuda do nosso app. Anteriormente, quando um usuário estava começando, o menu de ajuda o recebia com um muro de texto informativo. Esse texto não apenas era difícil de escanear, como também exigia que o usuário digitasse comandos para realizar qualquer ação. A integração do app é crítica para nossos usuários, e usamos o Block Kit para reimaginar completamente a experiência — de duas maneiras principais:

  • Através do uso de divisores, estilizamos aquele muro de texto informativo agrupando conteúdo semelhante — tornando-o mais digerível e mais fácil de ler.
  • Botões inline e menus de overflow possibilitaram uma experiência de integração interativa e orientada à ação. Agora os usuários não precisam digitar comandos; eles podem simplesmente selecionar botões e agir rapidamente.
Guru%20help%20menu%20in%20Slack.png

O menu de ajuda era apenas um lugar onde o Block Kit eleva a experiência do app Guru. Botões inline na interface do feed de atividades aproximam a chamada à ação da informação correspondente. Menus de overflow agora escondem ações que são usadas com menos frequência, ajudando o usuário a se concentrar nas informações prioritárias. Nós só arranhamos a superfície — ainda existem inúmeras maneiras de o Block Kit tornar os apps mais interativos.

Falando a mesma língua

Na Guru, criar experiências consistentes em todas as interfaces (aplicativo web, extensão de navegador e app Slack) pode ser desafiador. Enquanto design e desenvolvimento trabalham incansavelmente para garantir experiências sem falhas para nossos usuários, é um processo colaborativo com muitas idas e vindas. Anteriormente, nossa equipe de design (geralmente não acostumada a trabalhar com Slack) começou com uma tela em branco e inevitavelmente enfrentou limitações técnicas — especialmente à medida que seus designs se transformaram em desenvolvimento, necessitando de várias iterações antes de chegar a um design final.

Por mais ineficiente que fosse, esse processo é um que a maioria dos desenvolvedores está familiarizada. Enquanto esperávamos criar experiências mais ricas e interativas usando o Block Kit, não antecipamos o quanto o Block Kit Builder transformaria a parceria entre design e desenvolvimento. O Block Kit Builder é uma sandbox de prototipagem visual que permite selecionar, empilhar e personalizar qualquer bloco disponível.

Para o Guru, o Block Kit Builder fecha a lacuna entre design e engenharia — permitindo que nossos designers prototipem facilmente sua experiência ideal de usuário, enquanto também produzem o JSON exato necessário para que o desenvolvimento implemente sua visão. Nossa equipe de design não precisa mais começar com uma tela em branco, perguntando: Onde posso colocar este botão? ou Qual texto eu uso? Agora é tão fácil quanto criar o layout, compartilhar a URL e iterar com idas e vindas.

Slack%20Block%20Kit.png

O Block Kit Builder também serve como uma ferramenta para desenvolvimento depurar JSON problemáticos. Se uma mensagem do app não estiver sendo renderizada corretamente, nós simplesmente colamos o código no builder e podemos identificar instantaneamente o problema.

Eficiência em seu melhor

A combinação do Block Kit com o Block Kit Builder resultou em uma experiência mais eficiente tanto para os usuários do app quanto para a equipe do Guru. O Block Kit não apenas nos fornece uma nova estrutura para construir uma UI de app única, mas também nos dá flexibilidade e controle sobre a ordem e layout das informações. Agora é mais fácil do que nunca usar o app Guru; além disso, o menu de ajuda atualizado faz com que os usuários iniciem e funcionem rapidamente.

Curioso? Confira o app do Guru, recém-atualizado e habilitado para Block Kit, no Diretório de Apps do Slack em slack.com/apps.

Este post foi escrito para o Blog da Plataforma Slack. Leia a entrada original aqui.

A integração do Guru com o Slack começou nos primeiros dias dos bots, onde a experiência era principalmente baseada em texto, e cresceu em funcionalidade à medida que o Slack introduziu mais recursos — como mensagens interativas e ações de apps. Imediatamente percebemos os benefícios do Block Kit, uma oportunidade de construir experiências profundas e ricas que nossos usuários passaram a esperar, com padrões de UI/UX mais familiares e conteúdo interativo. O que não esperávamos, no entanto, era como o Block Kit mudaria a forma como nossas equipes de desenvolvimento e design colaboram.

slack-and-guru.png

Criando uma melhor experiência de integração

Nós aplicamos pela primeira vez o Block Kit para reformular o menu de ajuda do nosso app. Anteriormente, quando um usuário estava começando, o menu de ajuda o recebia com um muro de texto informativo. Esse texto não apenas era difícil de escanear, como também exigia que o usuário digitasse comandos para realizar qualquer ação. A integração do app é crítica para nossos usuários, e usamos o Block Kit para reimaginar completamente a experiência — de duas maneiras principais:

  • Através do uso de divisores, estilizamos aquele muro de texto informativo agrupando conteúdo semelhante — tornando-o mais digerível e mais fácil de ler.
  • Botões inline e menus de overflow possibilitaram uma experiência de integração interativa e orientada à ação. Agora os usuários não precisam digitar comandos; eles podem simplesmente selecionar botões e agir rapidamente.
Guru%20help%20menu%20in%20Slack.png

O menu de ajuda era apenas um lugar onde o Block Kit eleva a experiência do app Guru. Botões inline na interface do feed de atividades aproximam a chamada à ação da informação correspondente. Menus de overflow agora escondem ações que são usadas com menos frequência, ajudando o usuário a se concentrar nas informações prioritárias. Nós só arranhamos a superfície — ainda existem inúmeras maneiras de o Block Kit tornar os apps mais interativos.

Falando a mesma língua

Na Guru, criar experiências consistentes em todas as interfaces (aplicativo web, extensão de navegador e app Slack) pode ser desafiador. Enquanto design e desenvolvimento trabalham incansavelmente para garantir experiências sem falhas para nossos usuários, é um processo colaborativo com muitas idas e vindas. Anteriormente, nossa equipe de design (geralmente não acostumada a trabalhar com Slack) começou com uma tela em branco e inevitavelmente enfrentou limitações técnicas — especialmente à medida que seus designs se transformaram em desenvolvimento, necessitando de várias iterações antes de chegar a um design final.

Por mais ineficiente que fosse, esse processo é um que a maioria dos desenvolvedores está familiarizada. Enquanto esperávamos criar experiências mais ricas e interativas usando o Block Kit, não antecipamos o quanto o Block Kit Builder transformaria a parceria entre design e desenvolvimento. O Block Kit Builder é uma sandbox de prototipagem visual que permite selecionar, empilhar e personalizar qualquer bloco disponível.

Para o Guru, o Block Kit Builder fecha a lacuna entre design e engenharia — permitindo que nossos designers prototipem facilmente sua experiência ideal de usuário, enquanto também produzem o JSON exato necessário para que o desenvolvimento implemente sua visão. Nossa equipe de design não precisa mais começar com uma tela em branco, perguntando: Onde posso colocar este botão? ou Qual texto eu uso? Agora é tão fácil quanto criar o layout, compartilhar a URL e iterar com idas e vindas.

Slack%20Block%20Kit.png

O Block Kit Builder também serve como uma ferramenta para desenvolvimento depurar JSON problemáticos. Se uma mensagem do app não estiver sendo renderizada corretamente, nós simplesmente colamos o código no builder e podemos identificar instantaneamente o problema.

Eficiência em seu melhor

A combinação do Block Kit com o Block Kit Builder resultou em uma experiência mais eficiente tanto para os usuários do app quanto para a equipe do Guru. O Block Kit não apenas nos fornece uma nova estrutura para construir uma UI de app única, mas também nos dá flexibilidade e controle sobre a ordem e layout das informações. Agora é mais fácil do que nunca usar o app Guru; além disso, o menu de ajuda atualizado faz com que os usuários iniciem e funcionem rapidamente.

Curioso? Confira o app do Guru, recém-atualizado e habilitado para Block Kit, no Diretório de Apps do Slack em slack.com/apps.

Experimente o poder da plataforma Guru em primeira mão - faça nosso tour interativo pelo produto
Faça um tour