Monte Carlo

Explore

Análise geral

Usabilidade
Usabilidade

Analisamos o e-commerce e as funcionalidades para saber se estão intuitivos para navegar e proporcionando ao usuário facilidade ao completar a jornada de compra.

⁠

Página Inicial / Barra de pesquisa

Pontos observados:

Barra de pesquisa sem o ícone de lupa, podendo deixar o usuário em dúvida se vai conseguir realizar a busca ou não.

Opções de resultados com imagens de fundo igual ao background, sem contraste e de difícil visualização.

Página de resultados diferente dependendo do item buscado (aliança e colar, por ex.).

Cards de produtos com design inconsistente.

Na busca realizada com iPhone, quando o teclado está ativo não é possível realizar scroll dos resultados sugeridos e, quando o teclado é fechado, os resultados sugeridos somem - o que pode ocasionar frustração e irritação no usuário.

⁠

Sugestões de melhoria:

O ideal é 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 e, também, apresentando o ícone de lupa, dando certeza ao usuário de que irá realizar a busca.

Padronizar a página de resultados para todas as buscas.

Padronizar o design dos cards de produtos.

Em conversa com o nosso Tech Lead ficou explicado que o problema da busca em iPhone se trata de um comportamento específico que ocorre em iPhones, mas que pode ser resolvido. No Android o comportamento é normal, sendo possível visualizar os resultados sugeridos.

Heurísticas de Nielsen atendidas: 1ª, dando visibilidade do status do sistema ao usuário; 4ª, dando consistência e padronização ao design; 6ª, promovendo o reconhecimento em vez de memorização; 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ência:

⁠

Página Inicial / Tarja “Pague com AME” / Header (Menu lateral) / Banners

Pontos observados:

Tarja de “cashback” quando clicada some, usuário pode tentar clicar para consultar o regulamento e, ao clicar a tarja fecha.

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

Banner de “sale” com informação cortada (*Consulte o regulamento).

Banners sem CTA padrão (”conheça>” e “aproveite”).

Página gerando o efeito de

False Floor⁠

⁠

Sugestões de melhoria:

Deixar a tarja de “cashback” fixa e com opção de “clique aqui” para o usuário consultar o regulamento - segundo análise de clicks, os usuários estão fechando a tarja em decorrência do ícone “x”, que acaba atraindo este tipo de comportamento.

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

Deixar banners com destaque para CTA (padrão), levando em consideração o resultado apontado no estudo de CRO - usuários não estão clicando nos banners.

Pensar em um design para a página, diminuindo o tamanho dos banners, deixando imagens ou textos “visualmente incompletos”, sinalizando para o usuário que há mais conteúdo para baixo e, de preferência até a faixa azul do mapa de calor, evitando, assim o efeito False Floor.

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; 8ª, com estética e design minimalista que ajuda o usuário.

Impacto: Baixo

⁠

Alto

⁠

Página Inicial / Vitrine “Coleções Jolie”

Pontos observados:

Banner da coleção, apesar do efeito cascata, não possui setas indicativas e, se o usuário tenta arrastar para a esquerda, o card não muda com facilidade, podendo causar frustração no usuário.

Banners sem CTA padrão.

⁠

Sugestão de melhoria:

Deixar a cascata dos banners automático ou acrescentar setas indicativas para que o usuário consiga clicar e visualizar outros banners.

Padronizar e deixar CTA em destaque nos banners.

Heurísticas de Nielsen atendidas: 1ª, dando visibilidade do status do sistema ao 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.

Impacto: Baixo

⁠

Alto

⁠

Página Inicial / Cards de vitrine “Presentes com preços especiais”

Pontos observados:

Cards de produtos com design inconsistente e muito longos.

Valores e descontos sem destaque.

CTA que direciona para a “sacola” e não checkout.

⁠

Sugestões de melhoria:

Padronizar os cards de produtos, deixando-os mais curtos, facilitando a leitura em padrão F realizada pelo usuário.

Deixar os valores e descontos mais destacados.

Ideal é deixar o CTA como “adicionar à sacola” e um botão para “comprar”, dando mais liberdade ao usuário e corrigindo o direcionamento.

Impacto: Baixo

⁠

Alto

⁠

Página Inicial / “Canais de venda”

Ponto observado:

Banner de “canais de venda” com tamanho (longo) incompatível para mobile - não é comportamento padrão do usuário dar muito scroll.

⁠

Sugestão de melhoria:

Deixar banner mais curto, compatível com mobile, facilitando o scroll pelo usuário.

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

⁠

Página Inicial / Footer

Pontos observados:

Newsletter pedindo a data de nascimento pode causar desconfiança no usuário, pois a maioria dos usuários está acostumada a informar apenas o e-mail.

Alguns selos não estão legíveis.

Falta indicação do ano no footer, o que pode ocasionar insegurança ao usuário.

Quem tem iOS não consegue clicar no acordeom em razão dos botões flutuantes de Whatsapp e “de volta ao topo”.

Ícones dos acordeons abertos não mudam.

⁠

Sugestões de melhoria:

Pensar se é necessário pedir a data de nascimento e, se for, explicar para o usuário o motivo pelo qual está pedindo esta informação.

Deixar os selos mais legíveis.

Atualizar o ano no footer.

Verificar se os usuários de iOS clicam no acordeom ou em “formas de pagamento” e, dependendo pensar em um design com os ícones de acordeom mais pertos do texto.

Corrigir os ícones dos acordeons abertos (seta para cima).

Heurísticas de Nielsen atendidas: 1ª, dando visibilidade do status do sistema ao usuário; 4ª, dando consistência e padronização ao design; 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

⁠

Páginas de Categoria

Pontos observados:

Breadcrumb inexistente nas páginas de “novidades”, “casamento” e “presentes” e inconsistente em outras, prejudicando a jornada do usuário.

Botão de “ordenar” da página de “novidades” diferente dos botões das outras páginas.

Títulos dos banners de algumas páginas inconsistente com o breadcrumb ou com o título da categoria.

Banners são clicáveis mas não direcionam para outra página.

Opções de filtro no topo, da página de “sale”, não funcionam quando clicados, além de terem design inconsistente do botão de “filtrar”, podendo causar confusão ao usuário, com duas opções de filtros em lugares diferentes na página.

⁠

Sugestões de melhoria:

Padronizar o breadcrumb das páginas, inserindo corretamente, e facilitando a jornada do usuário e melhorando sua experiência.

Padronizar o design dos banners com título igual ao da categoria e do breadcrumb, passando reconhecimento ao usuário.

Deixar os banners clicáveis apenas se houver direcionamento para outra página.

Padronizar o design das opções de filtro em todas as páginas, mostrando a quantidade de itens para cada 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; 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; 8ª, com estética e design minimalista que ajuda o usuário.

Impacto: Baixo

⁠

Alto

Referência:

⁠

Páginas de produto

Pontos observados:

Breadcrumbs de algumas páginas não estão corretos, além de não seguir um padrão (caixa alta, primeira letra maiúscula).

Imagens iguais do produto e sem o devido destaque.

Textos do card (título do produto, modelo, preço, detalhes e informações, compartilhe) sem destaque e com design inconsistente.

CTA “comprar” direcionando para “sacola”, podendo causar confusão e frustração ao usuário.

Páginas gerando o efeito de

False Floor⁠

⁠

Sugestões de melhoria:

Padronizar e corrigir os breadcrumbs das páginas de produto.

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”, além do botão de “comprar” com direcionamento para o checkout.

Interessante trazer uma Vitrine de Produtos Similares, além das “sugestões”, facilitando e encurtando a jornada do usuário.

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:

⁠