Análise geral

icon picker
Acessibilidade

Em nossa análise verificamos se as cores estão adequadas para todos os tipos de percepção da cor ou para a ausência dela, como a discromatopsia hereditária, também conhecida por daltonismo; se o tipo de fonte (serifada ou sem serifa) e texto (justificado, por ex) estão adequados; se o peso da fonte está possibilitando uma boa leitura para todos os tipos de pessoas, como jovens e idosos, bem como àqueles com algum tipo de deficiência visual (miopia, astigmatismo ou da idade mesmo).

Página Inicial / Header / Banners

Pontos observados:
Ícones do header sem contraste com o fundo em degrade.
As informações contidas no banner “sale” estão sem contraste, impossibilitando a leitura pelo usuário.

image.png
image.png
image.png
Sugestões de melhoria:
Aumentar o contraste dos ícones, facilitando a leitura pelo usuário.
Corrigir o contraste das informações do banner “sale”, melhorando a leiturabilidade.

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

Página Inicial / Barra de Busca

Pontos observados:
A cor da frase “Faça sua busca” está muito clara, quase ilegível.
Opções de resultado com imagens e fonte pequenas, sem contraste, dificultando a leitura.

image.png
image.png

Sugestões de melhoria:
Melhorar o contraste da frase “Faça sua busca” ou deixar o espaço em branco com o ícone de lupa do lado direito.
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ências:
image.png
image.png

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

Pontos observados:
Banners da coleção com textos sem contraste, dificultando a leitura.
Botões “confira a coleção>” sem contraste, prejudicando a leitura pelo usuário.

image.png
Sugestão de melhoria:
Aumentar o contraste dos textos dentro dos banners, bem como do botão “confira a coleção>”.

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

Página Inicial / Footer

Pontos observados:
Newsletter sem contraste, com placeholders nos inputs quase ilegíveis de tão clara que está a fonte.
Alguns selos não estão legíveis.

image.png
image.png
Sugestões de melhoria:
Melhorar o contraste e pensar em outra cor para os placeholders, facilitando a leitura pelo usuário.
Deixar os selos mais legíveis.

Heurísticas de Nielsen atendidas: 1ª, dando visibilidade do status do sistema ao usuário; 4ª, dando consistência e padronização ao design; 8ª, com estética e design minimalista que ajuda o usuário.
Impacto: Baixo
Alto

Páginas de Categoria

Pontos observados:
Breadcrumbs sem contraste, dificultando a leitura.
Cards de produtos com fundo igual ao background, informações com tamanhos pequenos e sem contraste e, dependendo da tela de mobile dificulta muito a visualização pelo usuário.

image.png
image.png
image.png
image.png
image.png
image.png

Sugestões de melhoria:
Aumentar o contraste dos breadcrumbs.
Melhorar o design dos cards de produtos, aumentando a visibilidade e melhorando a experiência do usuário.

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

Páginas de produto

Ponto observado:
Breadcrumb sem contraste, dificultando a leitura.
Imagens com fundo igual ao do background, e por serem as joias muito finas (em alguns casos) não têm contraste, dificultando a visibilidade pelo usuário.
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 mobile dificulta a leitura.

image.png
image.png
image.png
image.png
Sugestões de melhoria:
Aumentar o contraste do breadcrumb, facilitando a leitura.
Ideal é trazer imagens de diferentes ângulos do produto e com fundo de outra tonalidade ou cor, em modelos, em 360 graus e, em realidade aumentada, melhorando a experiência do usuário.
Ideal é ajustar a hierarquia no card com título, modelo e preço, aumentando a fonte, dando mais contraste para o título e preço, e para detalhes e informações do produto, facilitando a jornada do usuário que busca saber as informações.

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:
image.png
image.png
image.png



Próxima Página →

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.