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.

IMG_8118.jpeg
IMG_8119.jpeg
image.png
image.png
image.png
IMG_8120.jpeg
IMG_8121.jpeg
IMG_8122.jpeg
image.png
IMG_8123.jpeg
IMG_8156.jpeg
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:
image.png
image.png
image.png
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.

IMG_8118.jpeg
IMG_8124.jpeg
IMG_8125.jpeg
IMG_8126.jpeg
image.png
image.png
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:
image.png
image.png
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.

IMG_8128.jpeg
IMG_8130.jpeg
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:
image.png
image.png
image.png
image.png
image.png
Página Inicial / Banners
Ponto observado:
Tamanho dos banners não é compatível com o mobile, ocupando uma dobra inteira.

IMG_8129.jpeg
IMG_8131.jpeg
IMG_8132.jpeg
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:
image.png
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.
IMG_8133.jpeg
IMG_8134.jpeg
IMG_8135.jpeg
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:
v
image.png
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.

IMG_8127.jpeg
image.png
image.png
image.png
image.png
image.png
image.png
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:
image.png
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.

IMG_8136.jpeg
IMG_8137.jpeg
IMG_8138.jpeg
IMG_8139.jpeg
IMG_8140.jpeg
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
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:
image.png
image.png
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.

image.png
IMG_8141.jpeg
image.png
IMG_8142.jpeg
IMG_8143.jpeg
image.png
IMG_8144.jpeg
image.png
image.png
image.png
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

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ências:
image.png
image.png
image.png
image.png
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.