ArcelorMittal

Explore

Desktop

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 / Barra de Pesquisa / Régua de vantagens

Pontos observados:

O menu do header, em “Cercamento” >> “Telas Galvanizadas” está direcionando para uma página vazia, pois o url do link está com um erro ortográfico.

URL correto (Telas Galvanizadas):
https://loja.arcelormittal.com.br/cercamento/telas-galvanizadas⁠
⁠

URL atual (Telas "Galvalizadas"):
https://loja.arcelormittal.com.br/cercamento/telas-galvalizadas⁠
⁠

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

O texto "Retire aqui mesmo" não está claro.

Em telas menores, o banner está ocupando o espaço inteiro da tela.

O banner 3/4 (Tela Belgo), por ter 3 linhas de título, mudou a disposição dos outros itens do banner, deixando tudo mais abaixo, inclusive cortando o botão "Comprar".

⁠

Sugestões de melhoria:

Ajustar o url do link da categoria “Telas Galvanizadas” no menu do header.

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.

Certificar que páginas vazias dão ao usuário opção de direcionamento para outra página que possa servi-lo (e correção ou alteração do texto).

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.

O ideal é que o banner não ocupe a tela inteira, deixando outras informações mais visíveis na primeira dobra.

O design deve ser responsivo, para que adaptações como a do banner 3/4 não prejudiquem a visibilidade de informações ou a experiência.

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

Ponto observado:

Design apresentando inconsistência - setas indicativas quebradas.

⁠
⁠
⁠

Sugestão de melhoria:

Padronizar o design.

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.

Padronizar o uso de caixa alta ou baixa nas iniciais dos títulos das páginas no footer.

Heurísticas de Nielsen atendidas: 4ª, dando consistência e padronização ao design.

Impacto: Baixo

⁠

Alto

⁠

Página de Resultado de Busca

Pontos observados:

Ao informar o resultado da busca, o termo utilizado não está destacado.

Após a busca feita, a barra de pesquisa some e não é possível realizar outra busca.

O “X” ao lado do menu de “Ordenar por” é o único recurso para fazer uma nova busca, mas além de não ser intuitivo, a ação deste botão é levar o usuário para a página anterior.

⁠

Sugestões de melhoria:

Na página de busca, destacar a quantidade de resultados e o termo de busca.

Deixar a barra de pesquisa acessível, mesmo depois da pesquisa realizada.

Retirar o “X” pois, deixando a barra de pesquisa acessível na página de resultado de busca, ele se torna desnecessário.

Heurísticas de Nielsen atendidas: 1ª, dando visibilidade do status do sistema ao usuário; 3ª possibilitando 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.

Impacto: Baixo

⁠

Alto

⁠

Página de Categoria

Pontos observados:

O ideal é que o filtro já esteja aberto quando o usuário entra na página, que ele tenha a opção de fechar.

Os filtros não mostram a quantidade de produtos encontrados dentro de cada critério.

Há poucas (uma ou duas) opções de filtro, e os preços dos filtros estão incoerentes em relação aos produtos exibidos.

Em algumas categorias (”Barras”

A página de categoria mostra apenas a foto do produto embalado.

A fonte de “Produto esgotado” é a mesma do título do produto, o que a princípio pode confundir o usuário.

O ideal é padronizar o estilo, espaçamento, tamanho e fonte dos menus dropdown, que em diversas páginas seguem estilos diferentes (por exemplo: o de ordenar produtos nas categorias e o de selecionar estado na página "Nossas lojas" são parecidos, mas um está em caixa alta e o outro em caixa mista - imagens abaixo)

⁠

Sugestões de melhoria:

Abrir a página já com os filtros abertos, informando a quantidade de itens em cada filtro.

Incluir no card de cada produto (mouse hover na imagem, por exemplo) fotos do produto no contexto de uso, para facilitar a visualização e o entendimento do usuário. - 1h (UI)

Inserir texto da categoria, a fim de melhorar o rankeamento de SEO. - 1h (UI)

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

Ajustar os filtros de acordo com as faixas de preço dos produtos ofertados.

Adequar o design do card de produto esgotado. - 1h (UI)

Padronizar os menus dropdown de todas as seções conforme identidade visual do site, gerando consistência no design. - 2h (UI)

Impacto: Baixo

⁠

Alto

Referência:

⁠

Página de Produto

Pontos observados:

Apenas uma imagem (produto embalado) disponível.

Há um espaço para avaliações, mas ele não é utilizado.

Pop-up “Não vá embora” possui um botão “Eu quero” que, quando clicado, recarrega a página, mas não executa nenhuma ação.

O menu do header é grande demais e em alguns momentos, abre com mouse hover sem querer, atrapalhando a navegação, principalmente quando o usuário já está na página de produto.

⁠

⁠
⁠
⁠

⁠

Sugestões de melhoria:

Incluir na galeria fotos do uso e aplicação do produto. - Cliente

Incluir avaliações do produto - solicitar por e-mail após a compra, que usuários avaliem a compra - ou retirar o espaço, que está vazio na página de vários produtos. A avaliação pode ter uma nota média, além de comentários. - 3h (UI) - Componente nativo vtex IO.

O ideal seria botão “Eu quero” da pop-up “Não vá embora” executar uma ação, como incluir o produto diretamente no carrinho ou já aplicar o cupom de desconto sugerido (ou ambas) - Verificar se é possível mexer (SmartHint). - (App third party)

Redesenhar o menu pop-up do header, abrindo apenas uma lista com as opções de subcategorias, ou uma versão menor do “painel”. E com a navegação, o header pode se recolher, se tornando uma faixa menor e ampliando a área de tela para o usuário. - 2h (UI) - Redesenho completo do Header 5h

É interessante deixar um CTA flutuante de “adicionar ao carrinho” acompanhando o usuário conforme ele dá scrolls pela página. - 1h (UI)

Heurísticas de Nielsen atendidas: 1ª, dando visibilidade do status do sistema ao usuário; 3ª possibilitando 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.

Impacto: Baixo

⁠

Alto

Referência:

⁠