Mobile

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 / Menu lateral/hambúrguer
Pontos observados:
A fonte na barra de busca e dentro do menu lateral/hambúrguer está com tamanho 12px, quando o ideal para esses componentes é de 16px, para facilitar a leitura pelo usuário.
Não foi possível clicar no menu hambúrguer quando o recurso de acessibilidade para cegos, no iPhone, estava ativo, somente na barra de busca, retornando como “busca, elipses” e, aí o restante é em inglês, aliás a página inteira está com a leitura em inglês. Já no Android, há uma mistura de português, com sotaque em inglês e, também, de espanhol, com o botão de busca longo e confuso.

IMG_8118.jpeg
IMG_8120.jpeg
image.png
Sugestões de melhoria:
Aumentar a fonte dos elementos para o tamanho ideal de leitura, deixando apenas em 12px aquelas informações menos importantes. UI/Dev - absorvido em Usabilidade
Ideal, para facilitar a navegação das pessoas cegas, é pensar em uma forma de deixar o retorno mais acessível, em português, e mais fácil de entender como: "menu/botão” e, “busca/botão”. Dev - 8h

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
Ponto observado:
A leitura dos resultados da busca quando o usuário digita o item procurado é quase ilegível, dependendo da tela do mobile.

image.png
Sugestão de melhoria:
Ideal redesenhar a tela de resultados dentro da barra de busca, deixando mais legível, melhorando a experiência do usuário. UI/Dev - absorvido no redesign da busca

Heurísticas de Nielsen atendidas: 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:
image.png
image.png
image.png
Página Inicial / Card de Produtos
Ponto observado:
Além da fonte estar com tamanho inadequado para a leiturabilidade pelo usuário, está faltando contraste, o que pode impossibilitar a legibilidade em alguns dispositivos móveis.

image.png
Sugestão de melhoria:
Aumentar o tamanho da fonte e o contraste dos textos dentro do card. UI/Dev - absorvido no redesign do card Usabilidade

Heurísticas de Nielsen atendidas: 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ágina Inicial / Banners
Ponto observado:
Banners com baixo contraste, dificultando a leitura e, segundo o estudo de CRO os usuários não estão interagindo muito com os banners.

IMG_8129.jpeg
IMG_8131.jpeg
image.png
Sugestão de melhoria:
Aumentar o contraste dos textos e CTAs, melhorando a leiturabilidade pelo usuário.
Obs.: Mexemos apenas no tamanho do banner, caso o cliente queira banners customizados, nós podemos fazer, mas com estimativa de horas.
Heurísticas de Nielsen atendidas: 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ágina Inicial / Newsletter / Footer
Ponto observado:
Encontramos tamanhos de fonte muito abaixo do mínimo exigido para mobile (12px), o que dificulta a leitura pelo usuário.

IMG_8133.jpeg
IMG_8134.jpeg
IMG_8135.jpeg
image.png
image.png
image.png
image.png
image.png
Sugestões de melhoria:
Aumentar o tamanho das fontes, deixando a leitura agradável ao usuário. UI/Dev - absorvido no redesign Usabilidade

Heurísticas de Nielsen atendidas: 4ª, dando consistência e padronização ao design.
Impacto: Baixo
Alto
Página de Categoria
Ponto observado:
A fonte no dropdown de filtro está com tamanho 12px e o checkbox está com tamanho pequeno (8px) para o toque com o dedo.

IMG_8138.jpeg
Sugestão de melhoria:
Aumentar o tamanho da fonte e do checkbox, possibilitando uma boa leitura e diminuindo a chance do usuário clicar equivocadamente na opção de filtro. UI/Dev - absorvido no redesign Usabilidade

Heurísticas de Nielsen atendidas: 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ágina de Produto
Ponto observado:
Alguns textos na cor cinza, além de estarem com tamanho abaixo do mínimo ideal para mobile, estão sem o contraste necessário para uma boa leitura. Além disso, o tamanho da fonte do texto de descrição/característica/tecnologia está muito pequeno, dificultando a leitura - foi observado, no Estudo de CRO, que os usuários realizaram vários cliques e a leitura desses textos.

image.png
image.png
IMG_8144.jpeg
Sugestão de melhoria:
Ajustar o tamanho da fonte dos textos da PDP, bem como aumentar o contraste, facilitando e melhorando a experiência do usuário. UI/Dev - absorvido no redesign Usabilidade

Heurísticas de Nielsen atendidas: 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ências:
image.png
image.png
image.png
image.png
image.png
image.png
Página de Sacola
Ponto observado:
Os tons de cinza não têm o contraste adequado para o fundo branco, dificultando a leitura para tamanho de fonte pequeno.

image.png
Sugestão de melhoria:
Ajustar as tonalidades, deixando as informações importantes com contraste adequado, além de ajustar o tamanho da fonte. UI/Dev - absorvido

Heurísticas de Nielsen atendidas: 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ágina de Checkout
Ponto observado:
Os tons de cinza não têm o contraste adequado para o fundo branco, dificultando a leitura, bem como a cor laranja.

image.png
image.png
image.png
image.png
Sugestão de melhoria:
Ajustar as tonalidades, deixando as informações importantes com contraste adequado, além de ajustar o tamanho da fonte dos textos. UI/Dev - absorvido

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


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.