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.
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.
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 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.
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.
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.
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.
Referência:
Página de Departamento/Categoria
Pontos observados:
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.
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
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.
Referências:
Usabilidade
