Asics

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

⁠

Página de Produto

Pontos observados:

Breadcrumb incompleto e inconsistente - departamento Feminino/Calçados/Corrida - Running. Segundo o estudo de CRO, os usuários estão clicando no título (feminino) e nas informações abaixo do título do produto, por acharem se tratar de breadcrumb.

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

Verificar possível bug com relação ao CEP, pois fazendo testes, verificou-se que a informação não está correta - no lugar de SEDEX, era para ser PAC. Além disso não há feedback de estado de erro quando o CEP é inválido, pois no sistema atual todos os CEPs, até aqueles que não existem, estão como válidos.

Descrição do produto, Características e Tecnologia do produto não estão com o destaque necessário - na verdade aparece somente a descrição e aí o usuário clica no dropdown e verifica que há mais informações importantes, além de estarem com erro de diagramação.

⁠

Sugestões de melhoria:

Ajustar e padronizar o breadcrumb da PDP.

O ideal é ajustar o tamanho do card e a hierarquia das informações com título, modelo e preço, aumentando a fonte, dando mais destaque para o título e preço, com o intuito de elevar o rankeamento de SEO no Google.

É interessante ter uma tabela de medidas, pois dependendo da forma, o tamanho pode variar.

Corrigir o bug com relação ao CEP, pois pode passar uma informação equivocada para o usuário e no final ele ficará confuso e bravo pois era outra informação. Obs.: Questionamos o cliente sobre isso e eles disseram que não sabem informar, pois a antiga agência é que subiu essa informação/a planilha de CEPs. Então, o ideal é corrigir esse erro mesmo para evitar transtornos. Além disso, é importante ter feedback de estado de erro quando o CEP é inválido ou inexistente. *Falar com as Especialistas Vtex.

É interessante ter espaço para avaliações do produto, pois os usuários levam em consideração a avaliação de outras pessoas na tomada de decisão.

O ideal é que fique aparente ao usuário que há Descrição do produto, Características e Tecnologia do produto, podendo deixar o dropdown aberto de cara para a descrição do produto, mas logo abaixo as outras opções para que ele abra também. Corrigir a diagramação também.

É interessante ter um botão de “adicionar à sacola”, além do botão de “comprar” para dar opção ao usuário que deseja continuar comprando.

É ideal que no botão flutuante tenha também o título do produto, além do valor + CTA, para ajudar o usuário a lembrar qual o produto que ele está visualizando quando estiver lendo as características, por ex..

É interessante ter uma vitrine de Produtos Semelhantes/Similares também, pois auxilia o usuário que não ficou satisfeito com aquele produto que está vendo, encurtando sua jornada. Verificamos pelas gravações do Hotjar, que os usuários utilizam muito a barra de buscas dentro das páginas de produtos, então, uma vitrine com produtos semelhantes facilitaria essa busca.

Redesign da PDP (com botão flutuante + alerta para o usuário sobre o tamanho - Jornada). UI - 6h / Dev - 18h

Impacto: Baixo

⁠

Alto

Referências:

⁠