ArcelorMittal

Explore

Mobile

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 / Header (Menu lateral) / Meu Carrinho

Pontos observados:

Menu aberto só fecha quando o menu hambúrguer é clicado.

Informação do CTA (fale conosco) do “meu carrinho” não está adequado.

Pop-up questionando o motivo por não ter finalizado a compra quando o carrinho está vazio não está fazendo sentido e pode causar estranheza ao usuário.

⁠

Sugestões de melhoria:

Ideal é dar liberdade ao usuário para fechar o menu ao clicar fora dele. - 2h (UI)

O CTA indicado seria o “escolher produtos” e, não “fale conosco”, pois a intenção é que o usuário retorne ao site e compre um produto. - 1h (UI)

Verificar se há bug na programação do pop-up questionando o motivo por não ter finalizado a compra, pois o ideal é que ele apareça quando o usuário sai do checkout e não quando nem efetuou a compra.

Heurísticas de Nielsen atendidas: 2ª, apresentando compatibilidade entre o sistema e o mundo real; à 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.

Impacto: Baixo

⁠

Alto

Referência:

⁠

Página Inicial / Busca

Pontos observados:

Estado primário da busca é fechado, obrigando o usuário a efetuar alguns cliques para conseguir realizar a pesquisa.

Na barra de pesquisa não há sugestões de buscas para ajudar o usuário.

⁠

Sugestões de melhoria:

Ideal é que a busca seja exibida aberta e com destaque, facilitando o reconhecimento pelo usuário e sua navegação. - 1h (UI)

Para auxiliar e facilitar a jornada, o ideal seria já trazer os termos mais buscados quando o usuário clicar para escrever e/ou dar a opção de autocomplete. - 1h (UI)

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; 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 / Fullbanner / Régua de vantagens

Pontos observados:

Fullbanner está ocupando muito espaço, sendo que o preço e o CTA não estão visíveis na primeira dobra, ficando para um primeiro scroll.

Régua de vantagens ocupando espaço que poderia ser melhor aproveitado, além de o design apresentar inconsistências.

O texto "Retire aqui mesmo" não está claro e pode gerar confusão, já que há várias lojas físicas.

⁠

Sugestões de melhoria:

Ideal é o que o fullbanner seja mais estreito, deixando à vista outras informações relevantes na primeira dobra, e contenha todas as informações com CTA padrão e seja responsivo. - 2h (UI) - Componente CTA + Valor fixo.

Ideal é padronizar o design da régua de vantagens e otimizar o espaço. - 2h (UI)

Substituir o texto e subtexto “Retire aqui mesmo/Retire seu produto” por “Retire na loja/Seu produto na loja mais próxima”, se for o caso. - Deve Direto

Heurísticas de Nielsen atendidas: 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

Referências:

⁠

Página Inicial / Vitrine de Produtos

Pontos observados:

Botões de lupa e carrinho atrapalham a leitura das vitrines e navegação do usuário.

Card de produto apresentando inconsistências no design.

Setas indicativas ao lado dos bullets - local não é o mais usual para o usuário.

⁠

Sugestões de melhoria:

Ideal é que a lupa e carrinho fiquem localizados no header, no qual o usuário já está acostumado. - 1h (UI)

Padronizar o card de produto. - 1h (UI)

Ideal é que as setas indicativas estejam localizadas onde o usuário já está familiarizado. - 1h (UI)

Heurísticas de Nielsen atendidas: 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

Referências:

⁠

Página Inicial / Carrossel de Categorias

Pontos observados:

Card de categoria apresentando inconsistências no design.

Setas indicativas ao lado dos bullets - local não é o mais usual para o usuário.

⁠

Sugestões de melhoria:

Padronizar o card de categoria e, o ideal é que tivesse mais destaque para atrair o usuário durante a navegação. - 2h (UI)

Ideal é que as setas indicativas estejam localizadas onde o usuário já está familiarizado. - 1h (UI)

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 / Depoimentos

Ponto observado:

Design apresentando inconsistência - setas indicativas quebradas.

⁠

Sugestão de melhoria:

Padronizar o design. - 1h (UI)

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

Pontos observados:

O footer está sem o ano.

Os títulos das páginas no footer estão variando entre caixa alta e caixa baixa e essa falta de padrão deixa o design inconsistente.

⁠

Sugestões de melhoria:

Atualizar o footer com o ano, para gerar mais confiabilidade com o usuário. - Dev direto

Padronizar o uso de caixa alta ou baixa nas iniciais dos títulos das páginas no footer. - 2h (UI)

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 Resultado de Busca

Pontos observados:

Banner de Resultado da Busca está ocupando muito espaço, deixando os resultados para a segunda dobra.

Não há informação da quantidade de itens encontrados.

Não há opções de filtro para facilitar a navegação pelo usuário.

Card do produto com inconsistências: cores da tarja de desconto semelhantes às do CTA; botão CTA sem destaque e sem formato de botão; as cores não passam no teste de acessibilidade, pois falta contraste.

⁠

Sugestão de melhoria:

Aconselhável repensar o design para deixar os resultados (produtos) mais visíveis na primeira dobra. - 2h (UI)

Ideal é apresentar a quantidade de produtos encontrados. - 1h (UI)

É o ideal dar opções de filtro para facilitar a jornada e melhorar a experiência do usuário. - 2h (UI)

Ideal é redesenhar o card de produto, deixando-o consistente e dando destaque para o CTA. - 1h (UI)

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

Referência:

⁠

Página de Categoria

Pontos observados:

Botões de “ocultar filtros” e “limpar” não fazem sentido quando o filtro está em estado fechado.

Dropdown de “ordenar por” é diferente do dropdown do filtro, deixando o design inconsistente.

O filtro não mostra a quantidade de produtos encontrados dentro de cada critério.

Há poucas (uma ou duas) opções de filtro.

Banner da categoria, botões de “ocultar filtros” e “limpar” e filtro estão ocupando o espaço inteiro da primeira dobra, deixando os produtos, que são o que realmente importa para a segunda dobra.

Botões de lupa e carrinho atrapalham na hora de abrir o filtro “marca”.

⁠

Sugestões de melhoria:

Ideal é otimizar o espaço com botões de filtrar e ordenar, deixando os produtos visíveis logo na primeira dobra.

Padronizar os botões de dropdown.

Ideal é dar mais opções de filtro ao usuário.

Mostrar no filtro quantidade de produtos disponíveis dentro daquele critério.

Deixar o campo de pesquisa e carrinho no header, para não atrapalhar a navegação e experiência no e-commerce.

Inserir texto da categoria, a fim de melhorar o rankeamento de SEO.

* Estimativa já completadas em pontos acima.

Heurísticas de Nielsen atendidas: 4ª, dando consistência e padronização ao design; 5ª, prevenindo erros; 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 de Produto

Pontos observados:

Breadcrumb mal posicionado.

Imagem do produto ocupando muito espaço, deixando as informações relevantes como preço e descrição para a segunda dobra.

Design apresentando algumas inconsistências: paleta de cores utilizadas no CTA também é utilizada para descontos; formato do CTA é o mesmo da tarja de desconto; vitrine “quem comprou” com design dos bullets quebrado (junto com as setas indicativas).

Espaço de avaliação sem qualquer avaliação.

Feedback do cálculo de CEP sem destaque.

⁠