Explore

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 / Menu lateral/hambúrguer / Meu Carrinho

Pontos observados:

Fullbanner desproporcional para mobile, gerando efeito false floor e ocupando a primeira dobra inteira.

Header com bug no layout - componentes não estão alinhados.

Menu lateral apresentando bug - ícone do avatar muito próximo ao texto “entrar”, no iPhone. Em celulares Android sem problemas.

Menu lateral apresentando design inconsistente entre as páginas de categoria.

Carrinho apresentando inconsistência no design - é uma sacola, mas quando o usuário abre está escrito carrinho.

⁠

Sugestões de melhoria:

Ideal que o fullbanner seja responsivo para mobile e estreito, deixando outros elementos importantes já na primeira dobra e, com design que mostra ao usuário que há mais conteúdo para baixo. UI - 1h / Dev - 1h

Redesign do header + menu hambúrguer, com a busca mostrando opções para o usuário. UI - 3h / Dev - 3h

Corrigir os bugs. Dev - 1h

Ideal que o menu lateral tenha design consistente, deixando a navegação fluída para o usuário. Dev - 1h

Ideal que o ícone represente exatamente o que é, por ser uma loja de uma marca e não uma loja que vende várias marcas, como a Centauro e Netshoes (que vendem atacado), o ícone mais adequado é de sacola, com a indicação correta no modal, apresentando consistência no design. UI - 1h / Dev - 1h

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ência:

⁠

Página Inicial / Busca

Pontos observados:

Ao clicar na barra de busca, o Safari dá um zoom e acaba quebrando o layout.

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 bug na realização da busca, quebrando o layout.

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.

⁠

Sugestões de melhoria:

É interessante alterar o texto “Busca...” por uma frase mais clara, convidando o usuário, por ex. “O que você está buscando?”. UI/Dev - absorvido no redesign do Header

Verificar possível bug do Safari (layout) quando o usuário realiza a busca. Dev - 1h

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. UI/Dev - absorvido no redesign do Header

Corrigir os bugs. Dev - 1h

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 / Vitrine de Produtos

Pontos observados:

Vitrines com inconsistência no design - caixa alta.

Card de produto apresentando bug no design.

Utilização da mesma cor para tarja de desconto e CTA - usuário enxerga a mesma coisa e acaba não visualizando o desconto.

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.

⁠

Sugestões de melhoria:

Padronizar o design das vitrines (Camelar). Dev - 1h

Corrigir bugs. Dev - 1h

Redesign do card de produto e indicar com bullets que há mais opções de produtos, no mobile, como os usuários já estão acostumados a realizar o scroll horizontal, não há a necessidade das setas indicativas. Ideal é deixar intuitivo ao usuário de que há mais elementos, como na referência.

Verificar se há outras cores que podem ser utilizadas para diferenciar os elementos no manual da marca.

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.

É interessante fazer uma vitrine diferenciada para “Mais Vendidos”, com opções de categoria como Feminino/Masculino/Infantil. UI - 6h / Dev - 8h

UI - 3h (todos os 3 pontos acima) / Dev - 3h

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:

⁠