Chatbot Design Kit no Figma
Quando entrei na Take, em meados de 2107, documentávamos os fluxos de chatbots no Sketch (que só roda no MacOS). Observei que era preciso exportar cada um dos arquivos em PDF, enviar por email para clientes e aguardar o processo de baixarem o arquivo, lerem a documentação, comentarem e responderem o email com os feedbacks (quando não acontecia o fatídico “Desculpe, faltou o anexo”). O feedback era uma parte pouco ágil e improdutiva do processo.
O Figma não era tão popular quanto hoje, mas já o utilizava em projetos pessoais. Sugeri um teste e, em poucas semanas, o time inteiro já tinha se adaptado à ferramenta. Ao invés de compartilhar e estocar PDFs, mandávamos um link que tinha sempre a versão mais atual do nosso trabalho, onde UXs, DEVs, PMs e clientes podiam colaborar simultaneamente. Até hoje não tive outra experiência de migração entre softwares que tenha sido tão suave quanto a do Sketch pro Figma. Dá uma olhada no quanto o Figma otimizou nossa performance 👇
Componentes de conversa
Com o Figma estabelecido, o próximo passo foi componentizar nossos recursos. Como designers, Além dos balõezinhos de mensagens enviadas e recebidas, precisávamos deixar claras as tomadas de decisões, manipulação de variáveis e possíveis observações para que todas as pessoas envolvidas entendessem nossas propostas.
Os valores que orientam nosso Design Kit
Focamos nestas 3 qualidades para criar cada componente: simplicidade, agilidade e flexibilidade. Outras qualidades (como responsividade, fidelidade e adaptabilidade) também estão presentes, mas, nos momentos em que era preciso tomar uma decisão sobre o visual ou comportamento dos componentes, buscamos favorecer as qualidades mais importantes:
Simplicidade
Os componentes que criamos para cada canal de mensagem são bem próximos do visual real, mas você vai notar que removemos alguns detalhes. Informações como a hora de envio da mensagem do WhatsApp ou balãozinho de typing são dispensáveis e podem tirar a atenção de quem está vendo a documentação. A simplicidade nos ajuda no objetivo de apresentar a lógica de funcionamento de uma conversa de forma clara e objetiva, dispensando detalhes que não agregam.
Agilidade
Chegamos a criar diversas variações para os possíveis cenários de utilização dos componentes, mas, na prática, tal como a lei de Hick prevê, quanto mais opções, mais tempo a gente gastava para escolher uma delas.
Outra decisão importante foi otimizar o tamanho dos componentes. Quando importamos o design kit do Facebook Messenger para o Figma, tudo funcionava bem, mas observamos que para carregar fluxos maiores, a demora era significante. O tempo para carregar ou exportar um arquivo caiu pela metade quando diminuímos o tamanho de todos componentes.
Então e isto: a agilidade permite que a gente passe mais tempo pensando pensando no que realmente importa.
Flexibilidade
No design de conversas a forma também muda de acordo com o conteúdo. Em várias situações precisamos adicionar ou remover itens de uma lista ou esticar um elemento para que comporte o conteúdo, então priorizamos a flexibilidade dos componentes. É fácil combinar elementos conforme a quantidade de itens que você precisa incluir, ou ajustar o tamanho das mensagens até que o texto fique todo dentro de cada balãozinho.
A flexibilidade nos permite fazer mais com menos componentes. Isso favorece as duas qualidades anteriores, porque ter menos componentes torna o design kit mais simples e fácil de utilizar, e ao mesmo tempo reduz o tempo que você gasta para criar e atualizar seus fluxos de conversa.
O Conteúdo do Chatbot Design Kit
Dividimos o Kit em duas partes: canais e componentes auxiliares. Os canais componentizados são:
- Facebook Messenger
- Google Assistant
- Apple Business Chat
- Blip Chat (Canal de chat da Take)
- SMS
Além dos componentes de cada canal de troca de mensagens, componentes auxiliares também vem no pacote, e fazem toda a diferença. Os organizamos em 3 grupos: Tags, Descrições e Marcações de apoio.
As Tags servem para:
- Indicar mudanças (laranja)
- Fazer anotações importantes (azul)
- Indicar chamadas de API (Verde musgo)
- Marcar trackings (amarelo)
- Indicar momentos onde transferimos a conversa para humanos — chamamos de transbordo (rosa)
- Indicar o sucesso de um fluxo (verde flat)
As Descrições nos ajudam a:
- Nomear fluxos e sub-fluxos
- Documentar menus persistentes
- Descrever telas de saudação
- Fazer comentários secundários
Já as Marcações de apoio são para:
- Documentar versões
- Indicar critérios de decisão
- Ir para outro fluxo (“Go To”)
- Conduzir a leitura dos diferentes caminhos possíveis
- Indicar tempo de digitação ou pausa
Alguns exemplos práticos
- Basta esconder os botões de cards que você não precisar utilizar
- Dá pra combinar componentes e criar uma lista com quantos itens você precisar
- Alterne entre componentes a partir da Instance
Confere o detalhe 👇
- Repara que, para cada um dos canais de mensagens, temos um background diferente. Do Google Assistente é amarelo e do WhatsApp é verde, por exemplo. Mnemónica para facilitar no dia a dia.
- Escolhemos priorizar simplicidade mais do que adaptabilidade. Por conta disso, nem sempre os componentes vão se comportar como gostaríamos. Para esses casos, basta utilizar a função Detach instance e ajustar manualmente.
Agora é sua vez de experimentar!
O que estamos compartilhando é o resultado de meses de colaboração e aprendizado. Se estiver iniciando agora ou já tiver um bot no ar mas que falta documentação, você pode poupar um bom tempo utilizando nossa biblioteca.
🔗 Aqui está o link para a biblioteca de componentes!
Esse é um documento vivo que crescemos e aprimoramos a cada feedback, então, se tiver alguma dúvida ou sugestão, manda uma mensagem pra gente.
Dica: Se não tiver uma conta paga no Figma, você pode copiar os componentes para uma aba de um arquivo e projetar as conversas em outra com a mesma facilidade.
É isto! Aproveite, compartilhe, deixe seu feedback e dê umas palminhas para aumentar o alcance da iniciativa 👏
*Este texto foi originalmente publicado no blog da Take.
