Confira os principais aprendizados e takeaways da migração do Sketch para o Figma e como isso facilitou o nosso trabalho neste Chatbot Design Kit construído pelo UX Designer, Adolfo Melo.
Quando entrei na Take, há 2 anos, 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 e-mail para clientes e aguardar o processo de baixarem o arquivo, lerem a documentação, comentarem e responderem o email com os feedbacks (isso quando não acontecia o fatídico “Desculpe, faltou o anexo”). O feedback era uma parte improdutiva e pouco ágil do processo.
O Figma não era tão popular quanto hoje, mas eu já o utilizava em projetos pessoais. Sugeri um teste e, em poucas semanas, o time inteiro já tinha se adaptado à ferramenta.
Em vez 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 para o Figma. Dá uma olhada no quanto o Figma otimizou a 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 Chatbot Design Kit
Focamos em três 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:
1. 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 o balãozinho de typing são dispensáveis e podem tirar a atenção de quem está vendo a documentação.
Assim, 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.
2. 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 é isto: a agilidade permite que a gente passe mais tempo pensando no que realmente importa.
3. 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 Chatbot Design 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 vêm no pacote e fazem toda a diferença. Organizamos tudo em três grupos: Tags, Descrições e Marcações de apoio.
- Indicar mudanças (laranja)
- Fazer anotações importantes (azul)
- Indicar chamadas de API (verde musgo)
- Marcar trackings (amarelo)
- Indicar momentos em que transferimos a conversa para humanos — o que 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 é a 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 a 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: [email protected]
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 e deixe seu feedback.
Adolfo Melo
UX Designer
Leia mais:
Dicas de uma UX Designer para realizar workshops bem sucedidos
Protótipos colaborativos: como prototipamos a evolução do BLiP em 1 dia
Aprendizados de um projeto inesperado como UX-PO no Google Assistant
