Asics

Estudo de CRO

Dispositivos

Visão dos Usuários

Nova Análise/Estrutura UX/UI em acordo com o Digital Guidelines e Site Global ASICS

Estimativas

Dúvidas

Configurações 🔒

Heurísticas de Nielsen

Explore

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.

⁠

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.

⁠

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:

⁠

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.

⁠

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.

⁠

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.

⁠

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.

⁠

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.

⁠

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:

⁠