Nos módulos anteriores, você aprendeu a criar um formulário, ajudar os usuários a evitar a reinserção de dados e como validar os dados do formulário. O que você deve fazer para garantir a usabilidade do formulário? Você pode testar e analisar seu formulário para responder a esta pergunta.
Seu formulário funciona em outros dispositivos?
Para começar, você precisa confirmar que o formulário está funcionando no seu dispositivo. No entanto, seus usuários podem utilizar muitos tipos de dispositivo. Como você pode testar se o formulário funciona com outros dispositivos?
Primeiro, teste seu formulário em um dispositivo desktop. Em seguida, tente usar apenas o teclado. Em seguida, teste em um smartphone. Você testou seu formulário com diferentes métodos de entrada (teclado, toque e mouse), diferentes tamanhos de tela, navegadores e sistemas operacionais diferentes.
Você tem mais dispositivos para testar? Teste seu formulário em todos eles. Quanto mais diferentes dispositivos, navegadores, versões de navegadores e sistemas operacionais você testar, melhor.
Também é possível usar um serviço de teste para testar seu formulário em vários navegadores, versões e dispositivos diferentes e sistemas operacionais variados. O BrowserStack oferece contas de teste sem custo financeiro para projetos de código aberto para permitir testes em diferentes navegadores, dispositivos e sistemas operacionais.
Como você pode testar se seu formulário funciona para outras pessoas?
Seu primeiro formulário está pronto. Você gasta muito tempo para garantir que ele funcione bem. Como você pode confirmar se o formulário pode ser usado por todos? Como primeira etapa, peça para seus amigos e colegas preencherem o formulário.
sentarem lado a lado ou compartilharem a tela. Dessa forma, você pode ver como eles interagem com seu formulário. Veja como eles preenchem o formulário. Peça que eles digam em voz alta o que estão fazendo e se estão tendo algum problema. Depois que eles concluírem a tarefa, faça perguntas. Ficou claro o que eles deveriam preencher? Houve algum problema para preencher o formulário? Alguma coisa ficou clara? Essas perguntas ajudam você a criar formulários ainda melhores.
Como você pode medir o desempenho do seu formulário?
Você confirmou que seu formulário pode ser usado por outras pessoas. A próxima etapa é medir o desempenho do formulário. Existem ferramentas sem custo financeiro disponíveis para isso. Vamos conferir alguns deles.
PageSpeed Insights (PSI)
O PSI avalia o desempenho do seu site e dá dicas de como melhorá-lo.
Faça um teste: o PageSpeed fornece um relatório de desempenho usando dados de laboratório e campo. Um site rápido é o primeiro sinal de que seu formulário é utilizável. Seu site ainda não é rápido? O PSI mostra recomendações para melhorar a performance.
Confira novamente o relatório do site que você testou antes com o PSI. Está vendo as informações sobre as Core Web Vitals? Esse é um resumo se o site atende aos critérios das Core Web Vitals. As Core Web Vitals ajudam a entender a experiência dos usuários em uma página da Web.
Farol
O Lighthouse ajuda a identificar problemas de desempenho, otimização de mecanismos de pesquisa (SEO), práticas recomendadas e acessibilidade.
Há maneiras diferentes de usar o Lighthouse. Uma opção é executá-lo diretamente no DevTools. Abra o URL com o formulário no Chrome, abra o DevTools, alterne para a guia do Lighthouse e execute a auditoria.
As métricas de desempenho do PSI são exibidas. Além disso, o Lighthouse verifica seu site em relação a SEO, práticas recomendadas e problemas de acessibilidade. Esqueceu de conectar um rótulo a um controle de formulário? O Lighthouse alerta e fornece um guia para corrigir o problema.
Ferramentas para identificar problemas comuns
Há muitas ferramentas para identificar problemas comuns.
Uma maneira é usar a extensão solucionador de problemas de formulários.
Ele avisa sobre atributos autocomplete ausentes,
atributos não padrão, rótulos ausentes ou vazios e muito mais.
Também é possível usar uma ferramenta de avaliação de acessibilidade, como WAVE ou axe. Essas ferramentas notificam você sobre rótulos ausentes, falta de conexões entre rótulos e controles de formulários, contrastes de cor insuficientes e muitos outros problemas de acessibilidade.
Como você pode monitorar a experiência com o formulário?
Monitorar a experiência real do usuário nos formulários ajuda a identificar novos problemas rapidamente. Vamos conferir como você pode monitorar seu formulário.
PSI
Uma maneira de monitorar a experiência é usar o PSI novamente. Use a API PSI para criar sua própria ferramenta de monitoramento: a API PageSpeed Insights explica como fazer isso.
O PSI inclui dados do conjunto de dados do Chrome User Experience Report (CrUX, na sigla em inglês), se disponíveis para o URL especificado. Dessa forma, também é possível consultar os dados do campo diretamente no relatório.
Farol
O Lighthouse pode ser usado como uma ferramenta de linha de comando, como um módulo de nó ou com as ferramentas de CI do Lighthouse. O artigo Monitoramento de desempenho com o Lighthouse CI explica como adicionar o Lighthouse a um sistema de integração contínua, como o GitHub Actions.
Existem muitas outras tools disponíveis para medir e monitorar seu site. Algumas estão disponíveis como ferramentas da Web, outras permitem executar a auditoria na linha de comando e outras oferecem uma API para integrá-las às suas ferramentas.
Como analisar seu formulário
Você testou o formulário com usuários reais e aprendeu a medir e monitorar o formulário. Como você pode coletar estatísticas sobre seus usuários e como eles interagem com o formulário? Usar uma ferramenta de análise de dados. Vamos analisar uma delas e ver como ela funciona.
Análise
Uma ferramenta que você pode usar é o Google Analytics (GA). Depois de configurá-lo, você receberá um snippet de JavaScript que pode ser incluído em cada página do seu site. A partir deste ponto, você pode descobrir como as pessoas usam seu site.
Quantas pessoas visitam a página com seu formulário? Quantas preenchem o formulário e passam para a próxima página? Você obtém respostas para essas perguntas usando ferramentas de análise.
Também é possível configurar relatórios de análise mais avançados. Quer acompanhar quantos usuários clicam no botão Enviar? É possível definir e integrar eventos para a análise.
Há uma grande variedade de ferramentas de análise disponíveis. Alguns são minimalistas, outros oferecem muitas opções de individualização. Teste várias ferramentas para encontrar a melhor opção para suas necessidades.
Teste seu conhecimento
Teste seus conhecimentos sobre formulários de teste
O que são dados de campo?
O RUM coleta métricas de: