Monte Carlo

Explore

Análise geral

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: a usuária está buscando um colar para seu aniversário.

1 - Usuária acessa a lupa de “busca” e digita “colar”.

Pontos observados:

Tarja de cashback (Pague com AME) carrega quebrada quando se clica em “busca”.

A cor da frase “O que você procura?” está muito clara, quase ilegível.

Opções de resultado com tamanho de fonte pequeno, sem contraste, dificultando a leitura.

⁠

Sugestões de melhoria:

Verificar possível bug na tarja de cashback (Pague com AME).

Melhorar o contraste da frase “O que você procura?” ou deixar o espaço em branco com o ícone de lupa do lado direito.

O ideal é já mostrar opções de busca para o usuário quando ele clicar para escrever, como “termos mais buscados” ou “termos da busca”, facilitando a pesquisa pelo usuário.

Deixar as opções de resultado mais legíveis, com contraste, e tamanhos maiores, além de destacar as imagens, deixando mais atrativas.

Heurísticas de Nielsen atendidas: 1ª, dando visibilidade do status do sistema ao usuário; 3ª, dando controle e liberdade para o usuário; 5ª, prevenindo eventual equívoco por parte do usuário; 8ª, com estética e design minimalista que ajuda o usuário.

Impacto: Baixo

⁠

Alto

Referência:

⁠

2 - Usuária clica em “ver todos os resultados” e direcionada à página de resultados.

Pontos observados:

Cards de produtos com fundo igual ao do site, não deixando o produto em destaque; tamanho de fonte das informações pequeno e sem contraste, dificultando a visibilidade e leiturabilidade.

Opções de ordenamento (lançamentos, menor preço etc.) com tamanho de fonte pequeno e sem qualquer contraste, e dependendo da tela de desktop a leitura fica muito ruim.

⁠

Sugestões de melhoria:

Deixar os cards de produtos com fundo diferente ao do site, dando mais destaque aos produtos; aumentar o tamanho de fonte das informações e melhorar o contraste, facilitando a busca e navegação do usuário.

Aumentar o tamanho da fonte e melhorar o contraste da fonte das opções de ordenamento (lançamentos, menor preço etc.), deixando mais legível.

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.

Impacto: Baixo

⁠

Alto

Referência:

⁠

3 - Usuária dá alguns scrolls e se interessa pelo colar da “coleção semear”, clica e é direcionada à página do produto.

Ponto observado:

Breadcrumb sem contraste, dificultando a leitura.

Imagens iguais do produto e sem o devido destaque.

Card com título, modelo e preço do produto, bem como descrição e informações com tamanho de fonte pequena (12px) e sem contraste e, dependendo da tela de desktop dificulta a leitura.

Página gerando o efeito de

False Floor⁠

⁠

Sugestões de melhoria:

Aumentar o contraste do breadcrumb, facilitando a leitura.

Ideal é trazer imagens de diferentes ângulos do produto, em modelos, em 360 graus e, em realidade aumentada. Carrossel de miniaturas das imagens também atrai o usuário e, evita frustrações sobre o que esperar das imagens.

Ideal é ajustar a hierarquia no card com título, modelo e preço, aumentando a fonte, dando mais destaque para o título e preço, com o intuito de elevar o rankeamento de SEO no Google. Interessante trazer a avaliação de usuários, a disponibilidade e link âncora com a opção de ver as informações sobre o produto.

Deixar o card de detalhes e informações em destaque, pois este foi um comportamento observado nas redes sociais (usuários querendo mais informações sobre o produto). Interessante deixar como opção ao usuário a verificação da composição do produto, com breve texto sobre a escolha de material e, informação relativa ao prazo de garantia.

Pensar em um design para a página, deixando imagens ou textos “visualmente incompletos”, sinalizando para o usuário que há mais conteúdo para baixo, evitando, assim o efeito False Floor.

É interessante deixar um CTA de “adicionar ao carrinho” acompanhando o usuário conforme ele dá scrolls pela página.

Heurísticas de Nielsen atendidas: 1ª, dando visibilidade do status do sistema ao usuário; 2ª, apresentando compatibilidade entre o sistema e o mundo real (com imagens que refletem a realidade do produto); à 3ª, dando controle e liberdade para o usuário; 4ª, dando consistência e padronização ao design; 7ª, apresentando eficiência e dando flexibilidade de uso; à 8ª, com estética e design minimalista que ajuda o usuário.

Impacto: Baixo

⁠

Alto

Referências:

⁠

4 - Usuária insere o CEP para calcular o frete e clica em “comprar”, aparecendo o modal da “sacola”.

Pontos observados:

Impossível visualizar o produto dentro do modal da “sacola”.

Ícone “x” para excluir o item adicionado é comumente usado para “fechar” uma página - o que pode levar o usuário ao erro ao tentar fechar o modal e excluir o item, causando irritação.

CTA “comprar” não reflete o direcionamento correto (checkout).

⁠

Sugestões de melhoria:

Ideal é deixar a imagem do produto em destaque no modal, bem como o preço.

É interessante também deixar um botão de “continuar comprando” no modal também, para dar liberdade ao usuário de escolher a jornada que quiser.

Ideal é utilizar o ícone de lixeira para excluir itens da sacola, pois o usuário já está mais acostumado com este ícone para exclusão de itens.

Ideal é deixar o CTA com a informação da página a ser direcionada, no caso “adicionar à sacola”.

Heurísticas de Nielsen atendidas: 1ª, dando visibilidade do status do sistema ao usuário; 2ª, apresentando compatibilidade entre o sistema e o mundo real (com imagem que reflete o produto selecionado e ícone que reflete a ação); 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:

⁠

5 - Usuária clica em “finalizar compra” no modal e é direcionada à página de “sacola” e, fica confusa porque tem que clicar novamente em “finalizar compra”.

Ponto observado:

Ícone “x” para excluir o item adicionado é comumente usado para “fechar” uma página, como o “X” do modal do carrinho - o que pode levar o usuário ao erro ao tentar fechar o modal e excluir o item, causando irritação.

Usuário se frustra com a página de “sacola”, pois havia clicado em “finalizar compra” e, agora tem quem clicar novamente.

Botão de “continuar comprando” sem o devido destaque.

⁠

Sugestões de melhoria:

Ideal é utilizar o ícone de lixeira para excluir itens do carrinho, pois o usuário já está mais acostumado com este ícone para exclusão de itens.

A fim de evitar frustrações ao usuário, o ideal é deixar o CTA do modal da “sacola” como “fechar pedido” e, aí na página da “sacola” deixar o CTA de “finalizar compra”.

Heurísticas de Nielsen atendidas: 1ª, dando visibilidade do status do sistema ao usuário; 2ª, apresentando compatibilidade entre o sistema e o mundo real (com ícone que reflete a ação); 3ª, dando controle e liberdade para o usuário; 4ª, dando consistência e padronização ao design; 7ª, apresentando eficiência e dando flexibilidade de uso; 6ª, promovendo o reconhecimento em vez de memorização.

Impacto: Baixo

⁠

Alto

⁠

6 - Usuária insere e-mail, seus dados pessoais e verifica se o resumo do pedido está correto.

Pontos observados:

Não há informação de que as informações são de preenchimento obrigatório.

No resumo do pedido não dá para enxergar o colar, mal dando para visualizar o número 1.

⁠

Sugestões de melhoria:

Deixar claro ao usuário que o preenchimento é obrigatório com o asterisco “*” nos inputs.

Pensar em um design que melhore a visibilidade do produto, no resumo do pedido.

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.

Impacto: Baixo

⁠

Alto

⁠

Conclusão: o fluxo de busca por um colar funcionou, bem como os botões e funcionalidades clicados, com direcionamento de páginas correto, com exceção do CTA “comprar” e “compre junto”, que direcionam para a “sacola” e não para o checkout. Assim, a usuária consegue atingir o objetivo de comprar um colar para o seu aniversário. 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ária acessa a lupa de “busca” e digita “colar”.

2 - Usuária clica em “ver todos os resultados” e direcionada à página de resultados.

3 - Usuária dá alguns scrolls e se interessa pelo colar da “coleção semear”, clica e é direcionada à página do produto.

4 - Usuária insere o CEP para calcular o frete e clica em “comprar”, aparecendo o modal da “sacola”.

5 - Usuária clica em “finalizar compra” no modal e é direcionada à página de “sacola” e, fica confusa porque tem que clicar novamente em “finalizar compra”.

6 - Usuária insere e-mail, seus dados pessoais e verifica se o resumo do pedido está correto.

Jornada
Jornada