Mobile

Jornada

Realizamos o mapeamento da jornada efetuada pelo usuário, desde a busca pelo produto desejado até a etapa de finalização da compra.
Cenário: o usuário está buscando um Nimbus para começar a correr.
1 - Usuário acessa o menu lateral, clica em Masculino, em Calçados e por último em Corrida, sendo direcionado à página de categoria “Running”.
Pontos observados já apontados em Usabilidade.

image.png
image.png
image.png
image.png
2 - Usuário realiza alguns scrolls, navegando pelos cards e, resolve aplicar filtro, então, é obrigado a realizar mais scrolls e voltar ao topo.
Ponto observado além daqueles existentes em Usabilidade:
Opções de filtro não acompanham o scroll, delongando a jornada do usuário.

image.png
image.png
image.png
Sugestão de melhoria:
Ideal deixar os filtros acompanhando a navegação do usuário. UI/Dev - absorvido no redesign das páginas de departamento/categoria/resultado de busca.

Heurísticas de Nielsen atendidas: 8ª, com estética e design minimalista que ajuda o usuário.
Impacto: Baixo
Alto
Referência:
image.png
3 - Ele escolhe a cor “preto” e clica no botão “fechar” e, verifica as opções de tênis na cor escolhida.
Pontos observados já apontados em Usabilidade.
image.png
image.png
image.png
4 - Usuário gosta do tênis de lançamento “Asics Gel Nimbus” clica e é direcionado à PDP. Ele verifica as imagens do produto e todas as informações referentes ao tênis. O usuário se interessa pelo tênis, clica no botão flutuante comprar e, nada acontece, aí ele realiza o scroll para o topo da página e percebe que precisa escolher o tamanho primeiro. Aproveita e já faz o cálculo do frete para saber quanto irá gastar.
Ponto observado além daqueles existentes em Usabilidade:
Quando o usuário clica no botão flutuante “comprar” sem ter escolhido primeiro o tamanho, nada acontece, não há qualquer informação dizendo que ele precisa selecionar primeiro, então, fica com a sensação de que o botão não está funcionando e aí vai tentar o outro botão e percebe que precisa escolher o tamanho primeiro.

image.png
image.png
image.png
image.png
image.png
image.png
Sugestão de melhoria:
O ideal é que no botão flutuante tenha um seletor de tamanho, para deixar a navegação mais fluída e rápida. Se ficar muito grande e não interessante, deixar apenas um alerta para o usuário selecionar o tamanho. UI/Dev - absorvido pelo redesign da PDP.

Heurísticas de Nielsen atendidas: 1ª, dando visibilidade do status do sistema ao usuário; 8ª, com estética e design minimalista que ajuda o usuário; 9ª, ajudando o usuário a reconhecer, diagnosticar e se recuperar de erros.
Impacto: Baixo
Alto
5 - Usuário clica no CTA Comprar e aparece uma mensagem de “Adicionado com sucesso”, e aí é direcionado para a página da sacola e verificar as informações.
Pontos observados:
Design da Sacola apresentando inconsistências no layout tanto em Android quanto em iPhone.
Frase de alerta do prazo de entrega com erros de grafia (Devido ao Covid, pertinente à região) e, está faltando pontuação final.
Título de pagamento com equívoco - Formas e não Forma.

image.png
image.png
IMG_8145.jpeg
image.png
image.png
IMG_8147.jpeg
image.png
Sugestão de melhoria:
Ideal é fazer o redesign do Carrinho, corrigindo os equívocos apontados, indicando que o usuário está na Sacola (Minha Sacola), indo para o checkout. UI - 6h (sacola e checkout - TUDO!) / Dev - 6h

Heurísticas de Nielsen atendidas: 4ª, dando consistência e padronização ao design; 8ª, com estética e design minimalista que ajuda o usuário.
Impacto: Baixo
Alto
Referência:
image.png
6 - Usuário calcula novamente o frete e clica em “continuar”, sendo direcionado para o meio da página de “Finalizar Compra”, sendo obrigado a realizar o scroll para cima. Preenche seu e-mail e clica no botão “>”, sendo direcionado para o checkout.
Pontos observados:
Bug de direcionamento para o meio da página de “Finalizar Compra”.
Frase de alerta para preenchimento é cópia da frase anterior ao placeholder.
Botão “>” não indica corretamente o próximo passo daquela ação, podendo deixar o usuário com dúvidas.
Não há barra de evolução mostrando os passos claramente ao usuário.
Checkbox de newsletter já está selecionado, o que pode ferir as normas da LGPD, pois é necessário pedir o consentimento do usuário.
Checkbox de aceite não está seguindo os títulos apresentados no footer da página - no checkout está Políticas de Privacidade, no footer, Política; no checkout, Termos e Condições, no footer como Termos de Uso, gerando inconsistência do design.

image.png
IMG_8150.jpeg
IMG_8151.jpeg
IMG_8153.jpeg
IMG_8154.jpeg
image.png
Sugestões de melhoria:
Corrigir o bug de direcionamento.
Ideal que a frase de alerta seja diferente e chamativa, com texto orientando o usuário a preencher seu e-mail.
Alterar o botão “>” para “Continuar”, auxiliando o usuário e deixando clara a função do botão.
Ideal que tenha uma barra de evolução mostrando os passos para o usuário, como na referência.
Para não haver problemas com a LGPD, é ideal que o checkbox de newsletter permita que o usuário expressamente clique, consentindo com o recebimento, ou seja, que ele esteja com estado primário “não selecionado”.
Padronizar o texto do checkbox de aceite, de acordo com os títulos do footer.
UI/Dev - absorvido lá em cima
Heurísticas de Nielsen atendidas: 1ª, dando visibilidade do status do sistema ao usuário; 3ª, dando controle e liberdade para o usuário; 4ª, dando consistência e padronização ao design; 6ª, promovendo o reconhecimento em vez de memorização; 8ª, com estética e design minimalista que ajuda o usuário.
Impacto: Baixo
Alto
Referência:
image.png
Conclusão: o fluxo de busca por um Nimbus funcionou, com leve desvio e quebra de expectativa na hora de clicar no botão flutuante “comprar”. Botões e funcionalidades clicados funcionam e o direcionamento para as páginas ocorre de forma correta, com exceção dos bugs de direcionamento apontados acima. Assim, o usuário consegue atingir o objetivo de comprar um Nimbus. Entretanto, podemos deixar o fluxo ainda mais intuitivo e melhor para o usuário, conforme apontamos em “Sugestões de melhoria”.


Próxima Página →

Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.