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

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:

⁠

Página Inicial / Banners

Ponto observado:

Tamanho dos banners não é compatível com o mobile, ocupando uma dobra inteira.

⁠

Sugestão de melhoria:

Ideal que os banners sejam mais estreitos e responsivos. UI - 1h

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

Referência:

⁠

Página Inicial / Newsletter / Footer

Pontos observados:

Estado primário do footer está fechado, dificultando a jornada do usuário que está buscando as informações de que necessita.

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:

Ideal que o estado primário do footer seja aberto, deixando todas as informações em evidência, facilitando a jornada do usuário.

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

Redesign do footer + newsletter (deixar aberta).

UI - 3h (de tudo) / Dev - 3h

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

Pontos observados:

Páginas de Resultado com design inconsistente, alguns exibem “resultado da busca”, outros um banner e, outros, o título da categoria.

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

⁠

Sugestões de melhoria:

O ideal é padronizar o design das Páginas de Resultado, pois a consistência transmite seriedade e passa segurança ao usuário. UI - 1h / Dev - 1h

Ideal é apresentar a quantidade de produtos encontrados. UI/Dev - incluído no ponto acima

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 Departamento/Categoria

Pontos observados:

Breadcrumb inexistente.

Ausência de texto para aumentar a pesquisa orgânica (SEO).

Botão de “Fechar” em filtros não faz sentido.

Inexistente botões de aplicar e limpar filtros.

Opções de filtros não são complementares umas às outras, podendo causar frustração no usuário.

Frase “Não encontramos resultados...” está mal diagramado, usuário enxerga apenas “Não encontramos” primeiro e depois o restante da frase.

Após escolher os filtros e clicar em “fechar” o usuário é direcionado ao footer, sendo obrigado a clicar em “voltar ao topo”, o que pode gerar confusão e frustração.

Design inconsistente - títulos de algumas páginas de categoria do menu hambúrguer não são iguais quando clicados - Casual/Sportstyle; Corrida/Running - pode causar confusão ao usuário.

⁠

Sugestões de melhoria:

Em razão de alguns departamentos possuírem várias páginas de categoria e subcategorias, é ideal que haja breadcrumb para facilitar a navegação do usuário.

É interessante e ideal que as páginas de categorias tenham um texto de SEO, para elevar o rankeamento na pesquisa orgânica dentro do Google.

Ideal é substituir o botão “fechar” por “aplicar filtro” e, adicionar também o botão de “limpar filtro” - que deverá aparecer após a seleção de algum filtro.

Sugerimos, para evitar frustrações por parte do usuário, o bloqueio das opções de filtro conforme o usuário for escolhendo, mostrando apenas as opções compatíveis com os filtros já selecionados, conforme a referência da Madesa.

Adequar a diagramação da frase “Não encontramos resultados...”.

Corrigir o bug de direcionamento após a aplicação de filtro.

Padronizar o design, deixando os títulos das categorias iguais no menu e nas páginas.

Redesign das páginas de departamento/categoria/resultado de busca (com filtros acompanhando o scroll - Jornada). UI - 4h / Dev - 18h

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

⁠

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.