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.

Inconsistência dos botões “sale” (header) e “off” (filtro) na página de resultados (significam a mesma coisa).

Opções de ordenamento (lançamentos, menor preço etc.) já pré-definido com “lançamentos”.

⁠

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.

Deixar o campo apenas com “Buscar por”/”Ordenar por”, para que o usuário selecione a opção que ele quiser.

Padronizar os botões em “sale” ou “off”.

Oferecer mais filtros, facilitando a visualização e dando liberdade ao usuário de escolher o que realmente deseja.

Deixar os preços mais evidentes, aumento o peso e o contraste da fonte - desktop, o mínimo é 12px, utilizado apenas para informações não tão relevantes.

No lugar do botão de “comprar”, o ideal é ter um botão de “adicionar à sacola”, facilitando a jornada do usuário e dando liberdade para que ele escolha o que deseja.

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; 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 (Top Menu) / Banners

Pontos observados:

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

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.

Deixar banners full 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, deixando imagens ou textos “visualmente incompletos”, sinalizando para o usuário que há mais conteúdo para baixo, evitando, assim o efeito False Floor.

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ágina Inicial / Cards de vitrine (outras categorias)

Pontos observados:

Título da vitrine "infantil” com essa imagem pode indicar que se trata de produtos para bebês, somente.

Vitrine “para ele” não é inclusivo, podendo causar constrangimento a usuários que sejam da comunidade LGBTQIA+.

⁠

Sugestões de melhoria:

Como a categoria possui produtos para crianças maiores, o ideal é deixar um título mais abrangente como “kids”.

Ideal é pensar em uma vitrine mais inclusiva, deixando para os usuários definirem quais os produtos são para eles. Além disso, há mulheres que gostam e usam carteiras, relógios e joias masculinas, por ex. - quanto mais opções forem dadas ao público, melhor.

Deixar os cards mais interativos quando em hover.

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; 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 dos bullets, não possui setas e com o card de produto ao lado e com setas, pode confundir o usuário que não irá arrastar o banner para o lado.

Banners sem CTA padrão.

⁠

Sugestão de melhoria:

Deixar o carrossel dos banners automático com a mudança do card de produto também ou acrescentar setas indicativas nos banners 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.

Estado de hover com design inconsistente e dependendo do card sem destaque quando em hover.

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

⁠

Sugestões de melhoria:

Deixar os valores e descontos mais destacados.

Padronizar design do card em estado de hover para todos.

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” / Informações

Pontos observados:

Banner de “canais de venda” é clicável, mas não tem estado de hover nem CTA - usuário pode entender apenas que o banner é informativo.

Informações abaixo do banner, apesar de serem clicáveis não têm estado de hover, não sendo intuitivo para o usuário clicar.

⁠

Sugestões de melhoria:

Deixar um CTA no banner de “canais de venda”, indicando ser clicável, ajudando o usuário caso esteja atrás destas informações.

Aplicar estado de hover nos cards de informações abaixo do banner, facilitando a jornada do usuário que está em busca de informações sobre a 1ª troca, por ex..

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

Impacto: Baixo

⁠

Alto

⁠

Página Inicial / Newsletter / 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.

⁠

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.

Impacto: Baixo

⁠

Alto

⁠

Página de Resultados Busca

Pontos observados:

Cards de produtos com fundo igual ao do site, não deixando o produto em destaque.

Ordenamento (lançamentos, menor preço etc.) já pré-definido em lançamentos - design inconsistente, pois em algumas páginas de categoria aparece como “lançamentos” e em outras “ordenar por”.

Estado de hover com design inconsistente e dependendo do card sem destaque quando em hover.

Inconsistência dos botões “sale” (header) e “off” (filtro) na página de resultados (significam a mesma coisa).

⁠

Sugestões de melhoria:

Deixar os cards de produtos com fundo diferente ao do site, dando mais destaque aos produtos.

Padronizar a opção de ordenamento (lançamentos, menor preço etc.) como “ordenar por”, dando liberdade ao usuário para escolher o que deseja.

Padronizar design do card em estado de hover para todos.

Padronizar os botões em “sale” ou “off”.

Impacto: Baixo

⁠

Alto

Referência:

⁠

Páginas de Categoria

Pontos observados:

Breadcrumb inexistente na página de “novidades” e inconsistente em outras, prejudicando a jornada do usuário.

Filtro à esquerda com design inconsistente, podendo ocasionar desconfiança ao usuário.

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”, com design inconsistente dos filtros na lateral, 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.

Padronizar o ordenamento (lançamentos, menor preço etc.) em “ordenar por”, dando liberdade ao usuário.

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

Padronizar o design das opções de filtro à esquerda 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ências:

⁠

Páginas de produto

Ponto observado:

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ágina 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” acompanhando o usuário conforme ele dá scrolls pela página.

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:

⁠