Asics

Explore

Mobile

Jornada
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.

⁠

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.

⁠

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:

⁠

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.

⁠

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.

⁠

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.

⁠

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:

⁠

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.

⁠

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:

⁠

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 →

Acessibilidade⁠

⁠

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.

JornadaJornada

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”.

2 - Usuário realiza alguns scrolls, navegando pelos cards e, resolve aplicar filtro, então, é obrigado a realizar mais scrolls e voltar ao topo.

3 - Ele escolhe a cor “preto” e clica no botão “fechar” e, verifica as opções de tênis na cor escolhida.

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.

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.

Jornada
Jornada