Os utilizadores de telemóvel são diferentes. Usam ecrãs mais pequenos. Interagem com o toque. Têm menos paciência para o atrito. As gravações de sessões revelam problemas específicos do telemóvel que os testes no computador não apanham. Um campo de formulário que funciona bem no computador pode ser impossível de usar no telemóvel. Um botão fácil de clicar no computador pode ser demasiado pequeno no telemóvel. Um layout claro no computador pode ser confuso no telemóvel. Quem testa no computador não vê estes problemas. As gravações de sessões no telemóvel mostram-nos. Um visitante chega ao teu site pelo telemóvel. Tenta navegar. O menu é demasiado pequeno. Toca no item errado. Fica confuso. A gravação mostra a dificuldade. Tenta preencher um formulário. Os campos estão apertados. O teclado tapa a página. Desiste. A gravação mostra a frustração. Otimizar para telemóvel exige a perspetiva do telemóvel. Quem desenvolve para computador otimiza para computador. Os utilizadores de telemóvel precisam de otimização para telemóvel. As gravações de sessões fecham essa distância. Mostram os utilizadores de telemóvel tal como vivem o teu site.
Este artigo explica como usar gravações de sessões para melhorar a experiência no telemóvel e o design responsivo.
Identifica problemas de tamanho dos alvos de toque e de precisão
O telemóvel usa o toque. O computador usa o rato. O toque é menos preciso. Um botão grande o suficiente para o cursor do rato é pequeno demais para um dedo. As gravações de sessões mostram visualmente os problemas de precisão. Um visitante tenta tocar num botão. Falha. Tenta outra vez. Acerta no botão errado. Esta dificuldade é invisível nas métricas. Nas gravações é evidente.
Vê gravações de telemóvel. Os visitantes tocam com precisão? Ou falham com frequência? Tocam no botão que queriam? Ou no que está ao lado? Os problemas de precisão revelam problemas de densidade da interface.
Botões pequenos causam erros de toque. Demasiados botões muito juntos causam confusão. Os alvos de toque precisam de espaço. A gravação mostra que elementos criam dificuldades. Torna esses elementos maiores. Afasta-os uns dos outros. A usabilidade no telemóvel melhora.
Repara em layouts partidos e problemas de legibilidade do texto
Os ecrãs de telemóvel são mais pequenos. O conteúdo que cabe no computador não cabe no telemóvel. O texto fica minúsculo. As imagens ficam distorcidas. Os layouts partem. As gravações de sessões mostram os problemas de layout no telemóvel.
Vê gravações de telemóvel. O visitante consegue ler o texto? Faz zoom para ler? Desiste de ler? O texto que obriga a fazer zoom é pequeno demais. As imagens que não se ajustam são um problema. Os layouts que não se adaptam estão partidos.
O design responsivo deve adaptar os layouts ao tamanho do ecrã. Se as gravações mostram problemas de layout, o design responsivo falhou. Corrige os layouts para o telemóvel. Torna o texto legível sem zoom. Ajusta as imagens da forma certa.
Identifica problemas de navegação no telemóvel
A navegação no telemóvel é diferente da do computador. O computador usa estados de hover. O telemóvel não pode passar o rato por cima. O computador tem espaço para menus. O telemóvel não. A navegação no telemóvel tem de ser diferente. As gravações de sessões revelam falhas de navegação no telemóvel.
Vê gravações de telemóvel. O visitante consegue aceder à navegação? Percebe como navegar? Perde-se? Clica em itens do menu por engano? Os problemas de navegação impedem a exploração do site.
Os menus de telemóvel usam muitas vezes ícones de hambúrguer. Se os visitantes não os veem ou não os percebem, a navegação falha. Os menus de telemóvel cobrem muitas vezes o conteúdo. Se cobrem conteúdo importante, os visitantes ficam frustrados. A gravação mostra os problemas de navegação no telemóvel. Corrige-os com um design pensado primeiro para o telemóvel.
Repara em problemas de teclado e de preenchimento de formulários no telemóvel
Os formulários no telemóvel são difíceis. O teclado tapa metade do ecrã. Os campos de texto são pequenos. O preenchimento automático funciona de forma irregular. As gravações de sessões mostram o atrito dos formulários no telemóvel.
Vê gravações de telemóvel com interação em formulários. O teclado aparece e tapa o formulário? O visitante vê o que está a escrever? Tem dificuldades com o teclado? O preenchimento automático ajuda ou confunde? A gravação mostra a usabilidade do formulário no telemóvel.
Os formulários no telemóvel precisam de outro design. Reduz os campos do formulário. Usa tipos de campo otimizados para telemóvel. Testa o comportamento do teclado. A gravação mostra o que funciona e o que não funciona.
Compara sessões de telemóvel e de computador para identificar atrito específico de cada dispositivo
As experiências no telemóvel e no computador são diferentes. O atrito pode aparecer no telemóvel e não no computador. Pode aparecer no computador e não no telemóvel. A comparação das gravações de sessões mostra os problemas específicos de cada dispositivo.
Vê uma gravação de abandono no telemóvel. Depois vê a gravação equivalente no computador. Aparecem os mesmos problemas? Ou são diferentes? O atrito específico de um dispositivo exige correções específicas desse dispositivo.
Alguns problemas são universais. Propostas de valor pouco claras. Navegação confusa. Aparecem nos dois. Outros são específicos de um dispositivo. O tamanho dos alvos de toque. O teclado a tapar a página. Aparecem só no telemóvel. Identifica quais são quais. Corrige os dois tipos da forma adequada.
Perguntas frequentes
Qual é o tamanho mínimo recomendado dos alvos de toque, com base nas gravações de sessões no telemóvel?
Vê gravações de telemóvel. Se os visitantes tocam com precisão, o tamanho dos alvos está bem. Se falham com frequência, os alvos são pequenos demais. O padrão do setor é um mínimo de 48 por 48 píxeis. Mas as gravações de sessões mostram o que funciona para os teus utilizadores. Alguns têm dedos maiores. Outros têm a mão mais firme. O comportamento gravado mostra que tamanho funciona para o teu público. Com o criador de websites da WEMASY, podes configurar isto diretamente no teu website.
Devo testar o telemóvel em dispositivos reais ou os dados das gravações de sessões chegam?
Usa os dois. As gravações de sessões mostram o comportamento real de utilizadores reais em dispositivos reais. Isso é valioso. Mas não consegues testar todos os dispositivos. Usa as gravações para identificar problemas. Usa testes em dispositivos para perceber comportamentos específicos de cada um. As gravações respondem ao que está estragado. Os testes em dispositivos respondem ao porquê de estar estragado naquele dispositivo.
Como sei se os problemas de desempenho no telemóvel vêm do design ou da velocidade da rede?
Vê as gravações. Se os elementos carregam devagar, o problema pode ser a rede. Mas se os elementos estão visíveis e mesmo assim causam problemas, o problema é o design. Grava ligações móveis rápidas e lentas. Vê se os problemas de design continuam. Os problemas de rede só aparecem em ligações lentas. Os problemas de design aparecem em todo o lado.
De que dispositivos móveis devo ver gravações em primeiro lugar?
Consulta a tua análise. Que dispositivos enviam mais tráfego? Vê primeiro as gravações desses dispositivos. Depois vê os menos comuns. Mas não os ignores. Um dispositivo com pouco tráfego pode ter uma taxa de abandono alta. Prioriza pelo impacto. Muito tráfego com muito abandono é crítico. Pouco tráfego com algum abandono pode ainda assim precisar de correção.
As gravações de sessões ajudam-me a decidir entre design responsivo e uma aplicação móvel?
Em parte. As gravações mostram se a tua experiência web no telemóvel está a funcionar. Se mostram muito atrito e má conversão, uma aplicação móvel pode ajudar. Mas as aplicações têm o seu próprio atrito. A gravação não consegue prever o sucesso de uma aplicação. Usa as gravações para perceber os problemas da web no telemóvel. Deixa a web no telemóvel o melhor possível. Considera uma aplicação se a web no telemóvel continuar abaixo do esperado.
Como otimizo para dispositivos móveis com ecrãs de tamanhos diferentes se só tenho gravações dos dispositivos populares?
O design responsivo deve funcionar em vários tamanhos. Testa em vários tamanhos de ecrã durante o desenvolvimento. Usa as gravações para encontrar atrito. Otimiza com base nas gravações. Depois testa as correções noutros tamanhos. Design responsivo significa um só site que funciona em todos os tamanhos. As gravações mostram o que precisa de correção. A cobertura de testes garante que a correção funciona em tamanhos que não gravaste.