Fala, pessoal! Tudo certo?

Ultimamente venho tentando empurrar meu trabalho pro lado mais product engineer. Na prática isso tem significado olhar dado de comportamento do usuário pra achar possíveis dores e melhorias.

Esse post é sobre um caso recente meu que deu muito certo! Da leitura do mapa de calor até a medição dois meses e meio depois do deploy.

O sinal

Estava vasculhando o Microsoft Clarity de uma aplicação do meu trabalho, olhando os últimos 90 dias, sem hipótese nenhuma na cabeça. Só varrendo mapa de calor atrás de padrão estranho.

E aí tinha uma faixa vermelha num lugar que não fazia sentido nenhum: em cima de um identificador numérico longo, dentro de um bloco de informações do usuário. Texto estático. Sem link, sem botão, etc... sem nada clicável.

Tinha 2.198 cliques! Isso é 0,13% de todos os cliques da página.

Um elemento que não faz nada ser um dos pontos mais clicados da tela é um sinal muito barulhento. O Clarity classifica parte disso como rage click, vários cliques seguidos no mesmo ponto, que normalmente indica frustração.

Vale ressaltar que isso não veio de um chamado, reunião ou pedido de usuário. Foi monitorando os dados de comportamento do usuário.

Leitura do dado

Dado quantitativo nos diz onde. Só que ele não diz por quê. Mas às vezes dá pra sacar rápido.

Minha leitura foi: o usuário está tentando selecionar e copiar aquele número pra levar pra outro sistema. Ele clica, arrasta, erra a seleção, clica de novo, pega metade, tenta mais uma vez. Cada cópia bem-sucedida custa muitos cliques.

O que me deu confiança nessa leitura:

• O padrão aparecia em outras seções da página também, só que com frequência muito menor. O que mudava nessa seção específica era que o conteúdo é um número longo que o usuário precisa levar pra outro lugar.
• Número comprido é exatamente o tipo de conteúdo que dá trabalho pra selecionar com o mouse, principalmente quando está colado em outros elementos.
• Não existia nenhuma outra ação possível naquele elemento. Clique ali só pode ser seleção.

Hipótese que fechei: não tem ação de copiar, então o usuário copia na mão. Isso pode indicar uma frustração.

A proposta

A solução é das mais simples que existem: um botão de copiar do lado do número. Troca N cliques de seleção por 1.

Levei pro time com duas opções desenhadas:

Opção A: só o ícone, com tooltip "Copiar número" no hover. Mais limpo, não quebra o alinhamento do bloco de informações.

Opção B: ícone + texto, com o label trocando pra "Copiado!" depois do clique. Mais explícito, mas pesa visualmente numa área que já tem bastante informação.

O time aprovou na mesma tarde e escolheu o ícone. Vieram duas sugestões boas da discussão, que entraram na implementação:

• manter um feedback visual de "copiado" mesmo na versão só-ícone, porque sem feedback o usuário não sabe se funcionou e clica de novo (ou seja: você resolveria o rage click de um jeito e criaria outro);
• fazer esse feedback sumir sozinho depois de alguns segundos, voltando ao estado normal.

Abri a PR no mesmo dia. Deploy alguns dias depois.

A primeira medição

Duas semanas depois do deploy, comparei duas janelas de 6 dias, uma antes e uma depois do botão existir:

Queda de 64% no total de cliques pra copiar o identificador! \o/

À primeira vista parece que 59% das cópias ainda são manuais, o que seria um resultado não excelente.

Só que a essa altura o hábito de usar o botão não tinha consolidado. Seis dias é pouco tempo pra saber.

Dois meses e meio depois

Voltei no Clarity em 02/10 pra fazer uma nova coleta de dados, agora com janelas de 30 dias. As três janelas têm volume de tráfego praticamente igual, entre 44 e 46 mil pageviews, então dá pra comparar os números crus sem normalizar nada.

O que esses dados dizem:

A seleção manual caiu 91%!! De 810 pra 69 cliques por mês. São cerca de 2,3 cliques manuais por dia em toda a base de usuários, ou seja, virou resíduo! \o/

O botão virou o caminho padrão. A fatia dos cliques que vai pra ele subiu de 48% → 58% → 93%, numa curva consistente mês a mês. Isso significa que a adoção do botão foi subindo.

O uso cresceu em volume absoluto. 855 cliques nos últimos 30 dias contra 762 no primeiro mês, com tráfego ligeiramente menor.

Era exatamente a hipótese que eu tinha levantado na primeira medição: a cópia manual continuaria alta por um tempo e cairia conforme as pessoas se acostumassem. Foi o que aconteceu, só que eu só pude afirmar isso dois meses e meio depois.

Método e ressalvas

Como os números foram coletados. Mapa de calor de cliques do Clarity, visão desktop, contando cliques por elemento: a classe do ícone do botão de um lado, e a linha do campo de texto do outro. Quando o mesmo elemento aparece em mais de uma tela, as ocorrências foram somadas.

Os 1.928 cliques da primeira medição não são reproduzíveis hoje. A amostra do heatmap e a identidade do elemento mudaram desde julho. Por isso a comparação entre meses usa só janelas medidas agora, com o mesmo método, então o número de julho fica como contexto histórico, não como base de cálculo.

Clique não é cópia. Um clique no botão equivale a uma cópia; vários cliques na seleção manual podem equivaler a uma só. Isso significa que a melhora real em esforço por cópia é maior do que a queda bruta de cliques sugere, e também que eu não posso traduzir nenhum desses números em "número de usuários".

O que podemos aprender com isso

Varrer heatmap sem hipótese vale a pena. Essa dor nunca apareceu em chamado, em pesquisa ou em reunião. Ninguém abre ticket dizendo "tive dificuldade de selecionar um número com o mouse" hahah, a pessoa só se irrita por três segundos e segue a vida. O comportamento dela é o único lugar onde isso fica registrado.

Clique em elemento não-clicável é sempre uma pergunta. É o padrão mais fácil de achar num mapa de calor e quase sempre significa que o usuário esperava uma ação que não existe ali.

Decida como vai medir antes de subir. Sem a janela de 6 dias anterior ao deploy, eu teria depois um número bonito tipo "284 cliques no botão" sem nenhuma base de comparação.

E volte a medir depois. Essa parte é muito importante e às vezes a gente esquece. Por conta da correria acaba subindo muita coisa e ninguém volta pra medir as métricas do que já subiu, os impactos, etc... Se eu tivesse parado em 22/07, teria registrado "−64%, mas 59% ainda copia na mão" e ficado com a dúvida. A medição de dois meses e meio é que mostrou que o comportamento mudou de verdade, e não só no primeiro impulso de novidade.

E um detalhe técnico: o ícone do botão vem do Font Awesome e ele não aparece nas gravações de sessão do Clarity, a área fica visualmente vazia no replay. O Clarity detecta o elemento e conta os cliques normalmente, mas se você for só assistir gravação pra validar, vai achar que as pessoas estão clicando no nada.

Conclusão

A entrega em si é um botão de copiar. Algumas linhas de código. O ganho de UX é pequeno e localizado.

Encontrar o problema foi a parte mais difícil; resolver foi bem mais fácil. E voltar dois meses depois para conferir os resultados foi essencial para realmente metrificar a entrega.

Se você tem Clarity, Hotjar ou qualquer coisa parecida rodando na sua aplicação, vale abrir o mapa de calor quando tiver um tempo, sem procurar nada específico. Grande chance de achar algum dado importante que possa virar feature nova ou aliviar a experiência do usuário.

Qualquer dúvida, estou à disposição. Fiquem com Deus!

Gostou do conteúdo? Aceito uma contribuição! :)

PIX: gabrielmonteiroduete@gmail.com

Aceito um café: ko-fi.com/gabrielduete (abre em nova aba)

Tem algo para acrescentar?

Esse blog é open source, então fique à vontade para abrir um PR no repositório. (abre em nova aba)

Me encontre também em:

• GitHub: @gabrielduete (abre em nova aba)
• LinkedIn: @gabrielduete (abre em nova aba)
• DEV: @gabrielduete (abre em nova aba)
• Tabnews: @gabrielduete (abre em nova aba)
• StackOverflow: @gabrielduete (abre em nova aba)
• Beecrowd: @gabrielduete (abre em nova aba)
• LeetCode: @gabrielduete (abre em nova aba)