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: o usuário está buscando um par de alianças de ouro com diamante para pedir sua noiva em casamento.

1 - Usuário acessa o menu lateral e clica em “Casamento”, sendo direcionado à página.

Pontos observados:

Ícone “X” da tarja de cashback (Pague com AME), segundo mapa de calor foi o mais clicado - as pessoas têm a tendência de clicar em “X” quando está em evidência, como é o caso.

Menu lateral não apresenta subcategorias, direcionando o usuário para a página da categoria.

Introdução da página de categoria muito longa e já com CTA, gerando o efeito de

False Floor⁠

Ícones e textos sem contraste com a imagem de fundo, dificultando a leitura.

Texto sobre casamento justificado ao meio dificulta a leitura feita em

Padrão F⁠

pelo usuário.

⁠

Sugestões de melhoria:

Pensar em uma forma de dar destaque ao pagamento com AME dentro da página de categoria ou do produto ou deixar a tarja sem o ícone “x”.

Apresentar subcategorias no menu lateral, facilitando a busca pelo usuário e sua jornada de cliques.

Para evitar o efeito False Floor, o ideal é deixar um banner que apresente a ideia da página de categoria, com tamanho ideal para mobile e deixar imagens ou textos “visualmente incompletos”, sinalizando para o usuário que há mais conteúdo para baixo.

Deixar ícones e textos com contraste, facilitando a leitura pelo usuário.

Deixar textos justificados à esquerda, pois a leitura do usuário é realizada em

Padrão F⁠

. Títulos e destaques justificados ao meio somente quando forem curtos e objetivos.

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ário clica no botão “confira” e é direcionado à página de categoria.

Pontos observados:

Texto do banner com fonte muito pequena e sem contraste com o fundo, dificultando a leitura pelo usuário. Além de estar fora da leitura padrão F.

Breadcrumb com peso e tamanho 10px, dificultando a leitura, além de estar fora do tamanho mínimo para o toque (de

1cm x 1cm⁠

- segundo o estudo conduzido por Parhi, Karlson and Bederson).

⁠

Sugestões de melhoria:

Aconselhável um banner que represente exatamente o que será encontrado na página (por ex. alianças de noivado, meias alianças de diamante, anéis solitários etc.) e, se houver texto, ideal é deixar justificado à esquerda, seguindo o padrão de leitura em F e com peso e contraste da fonte, facilitando a leitura pelo usuário.

Ideal que o breadcrumb seja o mais curto possível, segundo a

Guideline do NN/g⁠

, e, com touch point adequado para o tamanho do dedo (mínimo de 1cm x 1cm).

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 categoria/subcategoria); 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:

⁠

3 - Usuário dá 6 scrolls procurando o par de alianças que aparece no banner, tenta clicar no banner, mas não funciona. Então resolve clicar em “filtros” e encontra a subcategoria “alianças” e clica.

Ponto observado:

O peso da fonte das subcategorias está pequeno e o contraste é quase nulo, deixando a leitura muito difícil pelo usuário, principalmente em algumas telas de mobile.

⁠

Sugestão de melhoria:

Aumentar o peso da fonte das subcategorias e melhorar o contraste, facilitando a busca pelo usuário e sua experiência.

Heurísticas de Nielsen atendidas: 1ª, dando visibilidade do status do sistema ao usuário; 4ª, dando consistência e padronização ao design.

Impacto: Baixo

⁠

Alto

Referências:

⁠

4 - Usuário clica em “aliança de noivado”, sendo direcionado à página de “alianças”.

Pontos observados:

Banner com imagens de alianças que não aparecem no primeiro scroll, podendo causar frustração ao usuário.

Breadcrumb com peso e tamanho 10px, dificultando a leitura, além de estar fora do tamanho mínimo para o toque (de

1cm x 1cm⁠

- segundo o estudo conduzido por Parhi, Karlson and Bederson).

⁠

Sugestões de melhoria:

Aconselhável um banner que represente exatamente o que será encontrado na página (por ex. alianças de noivado, meias alianças de diamante, anéis solitários etc.) e, de preferência deixar as opções que aparecem no banner logo no primeiro scroll, facilitando a jornada do usuário.

Ideal que o breadcrumb seja o mais curto possível, segundo a

Guideline do NN/g⁠

, e, com touch point adequado para o tamanho do dedo (mínimo de 1cm x 1cm).

Impacto: Baixo

⁠

Alto

Referência:

⁠

5 - Usuário não encontra o par de alianças do banner e resolve tentar em “filtros”, encontrando a opção de pedra e clica em “diamante”, depois no CTA “aplicar” e é direcionado à página de resultado.

Ponto observado:

O peso da fonte do filtro está pequeno e o contraste é quase nulo, deixando a leitura muito difícil pelo usuário, principalmente em algumas telas de mobile.

⁠

Sugestões de melhoria:

Aumentar o peso da fonte dos filtros e melhorar o contraste, facilitando a busca pelo usuário e sua experiência.

Opção de filtro mostrando a quantidade de itens para cada item/subcategoria, indicando ao usuário a quantidade de produtos que irá encontrar, evitando que se frustre.

Heurísticas de Nielsen atendidas: 1ª, dando visibilidade do status do sistema ao usuário; 3ª, dando controle e liberdade para o usuário; 6ª, promovendo o reconhecimento em vez de memorização.

Impacto: Baixo

⁠

Alto

Referência:

⁠

6 - Como não encontra as alianças do banner, o usuário se interessa pela “coleção Madri” e clica sobre a imagem, sendo direcionado à página do produto.

Pontos observados:

Fonte no card de produtos/input de tamanho/CTA (página de resultado) está com tamanho e peso pequenos, sem contraste, dificultando a leitura.

Breadcrumb da página de produto, além de estar pequeno (fonte e touch point), está mostrando a informação “montecarlo mobile” no lugar de “Casamento”.

“Detalhes e Informações” sobre o produto com textos sem espaço (ex. ColeçãoMADRI) e em tamanho pequeno.

⁠

Sugestões de melhoria:

Aumentar o tamanho/peso/contraste da fonte no card de produtos (página de categoria/resultado) e, na página de produto, melhorando a experiência e leiturabilidade pelo usuário.

Breadcrumb com touch point adequado para o tamanho do dedo (mínimo de 1cm x 1cm) e, mostrando a página correta, no caso “Casamento”.

Outro ponto a ser considerado é a posição do título do produto, para elevar o rankeamento de SEO no Google, o ideal é seguir uma hierarquia e, deixar o título acima da imagem do produto. Interessante já 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 as informações referentes ao produto em destaque, com tamanho de fonte grande, e bom contraste, melhorando a experiência do usuário ao verificar as características do produto.

Impacto: Baixo

⁠

Alto

Referências:

⁠

7 - Usuário verifica as informações relativas ao tamanho.

Pontos observados:

Fonte dos tamanhos sem o contraste adequado para todas as telas de mobile.

Opções de tamanho não intuitivas - nem todos os usuários sabem o tamanho certo.

Guia de Medidas com texto longo, tamanho da fonte pequeno, sem contraste e com tabela ilegível.

⁠

Sugestões de melhoria:

Melhorar o contraste da fonte dos tamanhos.

Facilitar a jornada e experiência do usuário em um clique para descobrir/selecionar o tamanho do dedo, com um guia com imagens e textos curtos e legíveis, mostrando ao usuário o tamanho correspondente em cm.

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; 5ª, prevenindo eventual equívoco por parte do usuário; 6ª, promovendo o reconhecimento em vez de memorização; 7ª, apresentando eficiência e dando flexibilidade de uso.

Impacto: Baixo

⁠

Alto

Referência:

⁠

8 - Usuário tenta calcular o frete, mas o retorno é “NULL”.

Ponto observado:

Informação NULL não deve aparecer em hipótese alguma para o usuário, ainda mais quando está calculando o frete - pode ocasionar a fuga do usuário da página e até irritação.

⁠

Sugestão de melhoria:

Verificar eventual bug no código, evitando que o usuário se depare com essa informação novamente.

Heurística de Nielsen atendida: 1ª, dando visibilidade do status do sistema ao usuário.

Impacto: Baixo

⁠

Alto

⁠

9 - Usuário verifica opções de “comprar junto” e “sugestões”.

Pontos observados:

Cards de produtos de “aproveite e compre junto” com design (descrição do produto) diferente do card de “sugestões”.

Opções de alianças em “sugestões” que não apareceram na página de categoria e resultado (alianças com diamantes) - 2 usuárias reclamaram no Instagram que não conseguiram encontrar produtos na loja online (esse pode ser um dos motivos).

⁠

Sugestão de melhoria:

Padronizar o design de cards, dando destaque para o tamanho das alianças (13/16) nos cards de “aproveite e compre junto”.

Ideal é deixar todos os produtos visíveis ao usuário, em especial aqueles que aparecem em banners de páginas de categoria/subcategorias/resultados, facilitando a jornada e a experiência do usuário.

Impacto: Baixo

⁠

Alto

⁠

10 - Usuário encontra a aliança que havia gostado no banner e clica, sendo direcionado à página do produto.

Pontos observados:

Breadcrumb da página de produto, além de estar pequeno (fonte e touch point), está mostrando a informação “montecarlo mobile” no lugar de “Casamento”.

Fonte das informações relativas ao produto (título/descrição/modelo/preço) com tamanho e peso pequenos e pouco contraste, dificultando a leitura.

⁠

Sugestões de melhoria:

Breadcrumb com touch point adequado para o tamanho do dedo (mínimo de 1cm x 1cm) e, mostrando a página correta, no caso “Casamento”.

Aumentar o tamanho/peso/contraste da fonte relativa ao produto, melhorando a experiência e leiturabilidade pelo usuário.

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 e clica em “Casamento”, sendo direcionado à página.

2 - Usuário clica no botão “confira” e é direcionado à página de categoria.

3 - Usuário dá 6 scrolls procurando o par de alianças que aparece no banner, tenta clicar no banner, mas não funciona. Então resolve clicar em “filtros” e encontra a subcategoria “alianças” e clica.

4 - Usuário clica em “aliança de noivado”, sendo direcionado à página de “alianças”.

5 - Usuário não encontra o par de alianças do banner e resolve tentar em “filtros”, encontrando a opção de pedra e clica em “diamante”, depois no CTA “aplicar” e é direcionado à página de resultado.

6 - Como não encontra as alianças do banner, o usuário se interessa pela “coleção Madri” e clica sobre a imagem, sendo direcionado à página do produto.

7 - Usuário verifica as informações relativas ao tamanho.

8 - Usuário tenta calcular o frete, mas o retorno é “NULL”.

9 - Usuário verifica opções de “comprar junto” e “sugestões”.

10 - Usuário encontra a aliança que havia gostado no banner e clica, sendo direcionado à página do produto.

Jornada
Jornada