UX analysis: indo além da construção de telas como dev frontend

Fala galera do frontend! Só de boas?

Hoje quero trazer um assunto que já me rendeu destaque dentro de equipes por mais de uma vez sendo dev frontend: análise de experiência de usuário (UX).

Vejo esse tópico muito favorável como uma proposta de iniciativa dentro da nossa área. Traz valor real para o projeto e eu particularmente acho bem interessante. Além disso está alinhado com as dicas que passei em: 3 Dicas para sobreviver aos layoffs na área de tecnologia

Lançamos o produto, e agora? 📺

Quando sua equipe lança um novo produto ou atualização no sistema, é importante saber o quanto e como aquilo está sendo utilizado pelos usuários.

Nesse post quero cobrir de forma básica como fazer essa análise utilizando o PostHog. Existem ferramentas similar no mercado, como LogRocket, Hotjar, DataDog e etc, porém o PostHog tem uma cota de uso gratuita bem generosa!

Inclusive esse cota de uso gratuita foi de grande incentivo para introdução dessa ferramenta na minha empresa atual. A gestão aceitou facilmente a implementação por não ter que pagar.

O valor 🤑

Não vou entrar em méritos da instalação da ferramenta, pois isso vai depender de cada projeto, mas sim quero compartilhar 3 casos de uso básicos que vão com certeza trazer valor para o seu projeto ao aplicar o PostHog:

1. Web analytics

Na instalação mais básica da ferramenta, você já vai ter um dashboard com métricas padrões de uso e acesso da aplicação. Você vai ver coisas como número de visitantes (únicos), número de sessões (usuário recorrente), duração média de sessão, bounce rate, e etc. São números vitais para te dar um panorama geral de uso do sistema.

2. Insights

Indo um pouco além, você consegue capturar eventos customizados dentro do projeto. De maneira simples, você vai adicionar posthog.capture('{NOME_DO_EVENTO') em trechos importantes do código: quando um formulário foi enviado, um botão clicado, um erro alertado, uma opção escolhida, e etc.

Utilizando desses eventos capturados, dentro do painel do PostHog você vai criar "dashboards" de análise. Verifique se o fluxo de eventos está ocorrendo como esperado, determine se alguma opção ou funcionalidade do sistema está sendo sub utilizada, e etc.

Estas análises é que vão permitir seu time tomar decisões baseadas em dados, e não mais em achismo: onde está valendo mais a pena o seu time investir tempo e recurso.

Uma coisa muito bacana aqui são os "insights" que você pode criar no painel do PostHog: agrupe e automatize o envio de relátorios desses dashboards de análise. Diariamente, semanalmente, ou mensalmente você configura a ferramenta para enviar os dados por Slack ou Email para seu time - os donos do produto adoraram essa implantação aqui!

Trazendo meu exemplo prático, defini dois Insights para o nosso projeto:

• "Business Metrics": dados de uso mais relevantes para os donos do produto, contendo:
  • número de envio de formulários
  • tempo médio para completá-los
  • aceitação da geolocalização no navegador
  • lista de cidades acessando o aplicativo;
• "Technical Metrics": dados voltados ao time técnico, incluído:
  • dispositivos mais utilizados (desktop, ipad, celular)
  • navegadores mais utilizados (Chrome, Safari, Firefo)
  • resoluções de tela mais utilizadas para acessar o sistema;

3. Alerta de erros

Por fim, capturando eventos customizados em locais de tratamento de erro dentro do código, podemos, através do PostHog, criar um sistema de alerta ("Alerts"): quando um evento de erro crítico é capturado pela ferramenta, o time recebe via Slack ou Email um alerta contendo as informações relevantes capturada sobre o erro.

Novamente trazendo um exemplo prático meu: nosso fluxo de login principal tem uma etapa de leitura de QR Code, onde a aplicação tem que fazer o download de uma biblioteca externa para realizar a leitura do QR Code através da câmera do celular do usuário. É uma etapa crítica para o processo, caso falhe por qualquer razão, queremos ser alertados imediatamente! Na inicialização dessa biblioteca, adicionei uma captura de evento no tratamento de erro. Se esse evento for capturado, PostHog nos alerta 😄

Atenção 🚨

Para mim é essencial introduzir alguma ferramenta de análise de UX em qualquer aplicação que queira escalar e constantemente evoluir, entretanto na atualidade temos que ter muita atenção com a legislação vigente do pais consumidor sobre a coleta de dados de usuários.

PostHog traz uma seção especifica sobre conformidade com privacidade do usuário, com configurações específicas para utilizar cookies ou não, mascarar dados nas gravações de sessão, e etc. Isso importa para estar de acordo com a Lei Geral de Proteção de Dados Pessoais (LGPD) em projetos nacionais ou General Data Protection Regulation (GDPR) para projetos internacionais.

Fim 🥳

Espero que o artigo tenha lhe sido útil de alguma forma.

Tanto PostHog, quanta outras ferramentas de análise, irão trazer outras capacidades, como gravação de seções de uso, pesquisa de usuário, "feature flag", e mais. As 3 que eu trouxe aqui são as que eu pessoalmente mais aplico e consigo ver valor real.

Se quiser aprofundar no tema, comenta ai ou manda uma mensagem! Abraços turma