Desktop

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 / Fullbanner
Pontos observados:
Fullbanner ocupando quase a primeira dobra inteira. Além disso, as setas indicativas não estão com contraste adequado.
Menu de categorias com algumas inconsistências - o título “Sportstyle” não aparece nas subcategorias.

image.png
image.png
image.png
image.png
image.png
image.png
Sugestões de melhoria:
Ideal que o fullbanner seja mais estreito, deixando outros elementos importantes já na primeira dobra, pois conforme se verificou no Hotjar, os usuários não estão clicando nos banners, mas sim nas subcategorias no dorpdown.
Ideal que o menu de categoria tenha design consistente, deixando a navegação fluída para o usuário. Além de ser interessante pensar em categorias para os departamentos que não possuem dropdown, como Infantil/Lançamentos/Ofertas, conforme vemos no site da Nike.
Redesign de tudo. UI - 5h / Dev - 6h

Heurísticas de Nielsen atendidas: 2ª, apresentando compatibilidade entre o sistema e o mundo real; 4ª, dando consistência e padronização ao design; 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:
image.png
image.png
image.png
Página Inicial / Busca
Pontos observados:
Barra de pesquisa somente oferece opções de resultado depois que o usuário digita a palavra inteira.
Na barra de pesquisa não há sugestões de buscas para ajudar o usuário.
Existência de categoria “undefined” que não descreve a categoria correta para o usuário, além de estar com problema na hora do scroll.

image.png
image.png
Sugestões de melhoria:
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. Verificamos que a barra de busca é mais utilizada pelos usuários quando estão na PDP, por isso, facilitar a navegação é o indicado.
Corrigir os bugs.
UI/Dev - absorvido mobile
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:
image.png
image.png
Página Inicial / Vitrine de Produtos
Pontos observados:
Setas indicativas possivelmente com bug, pois estão fora da localização usual.
Estado de hover muito sutil na primeira vitrine e inexistente na segunda.
CTA no card não faz sentido, pois o direcionamento está incorreto, ele leva para a PDP, pois lá o usuário precisa escolher o tamanho primeiro.

image.png
image.png
image.png
Sugestões de melhoria:
Corrigir bug das setas indicativas da vitrine.
Ideal é dar um destaque maior no estado de hover para os cards das vitrines. UI - 1h / Dev - 1h
Ideal é deixar sem o CTA comprar, fazendo com que o usuário clique no card para conferir o produto e escolher o tamanho que deseja, conforme os concorrentes fazem também. Ou ainda, deixar um CTA de “Ver Detalhes”, abrindo um modal já com as informações necessárias, com seletor de tamanho e botão “comprar”, encurtando a jornada do usuário e facilitando a jornada.

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ência:
image.png
image.png
Página Inicial / Newsletter / Footer
Pontos observados:
Estado primário da Newsletter está fechado, gerando clicks a mais para o usuário que deseja assinar e receber as novidades.
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.
Checkbox com a informação equivocada.
image.png
image.png
Sugestões de melhoria:
Ideal que o estado primário da Newsletter seja aberto, se o desejo for de captar leads, encurtando a jornada para assinar as novidades.
Padronizar o uso de caixa alta ou baixa nas iniciais dos títulos das páginas no footer.
Para a LGPD, o ideal é que o checkbox contenha a frase que está abaixo dele, declarando que ele está de acordo com a Política, além de deixar o CTA somente ativado após o checkbox preenchido.
UI/Dev - absorvido em Mobile
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
Página de Resultado de Busca
Ponto observado além daqueles apontados em Mobile:
Verificar bug - layout quebrado (resultados | 628 Ordenar por:).

image.png
image.png
image.png
Sugestão de melhoria:
Corrigir o bug do layout.
Adequação do DS. UI - 1h

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 Departamento/Categoria
Ponto observado além daqueles apontados em Mobile:
Quantidade de produtos está longe do Título da categoria - verificar possível bug.

image.png
image.png
image.png
Sugestão de melhoria:
Corrigir bug.
Adequação do DS. UI - 4h

Heurísticas de Nielsen atendidas: 4ª, dando consistência e padronização ao design.
Impacto: Baixo
Alto
Página de Produto
Pontos observados além daqueles apontados em Mobile:
Breadcrumb sem o devido destaque de onde o usuário se encontra - departamento Feminino/Calçados/Corrida - Running. Segundo o estudo de CRO, os usuários estão clicando no título (tênis) por acharem se tratar de breadcrumb.
A opção de “Permaneça conectado” não é tão usual e não há muita interação dos usuários, conforme se verifica pelos dados colhidos no Hotjar.

image.png
image.png

image.png
Sugestões de melhoria:
Ajustar e padronizar o breadcrumb da PDP, dando mais destaque para em qual página o usuário se encontra - deixar o Running/Corrida em bold, por ex..
É interessante que no lugar de “Permaneça conectado” haja a opção de compartilhar aquele produto nas redes sociais ou via whatsapp.
É interessante seguir o modelo de PDP dos concorrentes Nike e New Balance, pois o Hotjar mostrou que os usuários passam grande parte do tempo visualizando as imagens do produto, então, deixar as imagens maiores e com destaque, ajudará na navegação e experiência do usuário dentro da PDP, auxiliando ainda mais na tomada de decisão.
UI - 5h / Dev - 3h (tudo)
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ências:
image.png
image.png
image.png
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.