Avaliação heurística no clube de café Have a Coffee

by

A avaliação no site http://www.haveacoffee.com.br foi há cerca de 4 meses mas só agora consegui adicionar aqui. O site deles já está com outra proposta.

Esta avaliação foi feita com o objetivo de detectar os principais problemas do site relacionados à experiência do usuário. Feita essa avaliação, seria necessário uma correção dos problemas e, assim, mais uma avaliação poderia ser feita ou um teste de usabilidade no site também poderia ser feita.

A princípio, a avaliação foi feita apenas com um avaliador. Um avaliador sozinho não encontra todos os problemas em um site, na verdade, encontra apenas cerca de 35% dos problemas (Nielsen). É bem provável que cada avaliador encontrará problemas diferentes no site, assim, uma avaliação heurística com 4-5 avaliadores encontra cerca de 70-75% dos problemas em um site.

Então, antes de partir para um teste ou colocar o site no ar, vale realizar uma avaliação, correção dos problemas, teste, correção dos novos problemas! Vale a pena gastar um tempinho aqui antes de lançar o site.

O que foi analisado?

  • Página inicial
  • Página do clube
  • Página do produto
  • Página da loja
  • Cadastro no site

Regras heurísticas

Fiz a minha lista de regras heurísticas com base nas 10 Regras heurísticas de Nielsen e nos critérios ergonômicos de Bastien e Scapin.

  • #1 Controle e liberdade para o usuário
  • #2 Consistência e padrões
  • #3 Prevenção de erros
  • #4 Reconhecimento ao invés de recordação
  • #5 Flexibilidade e eficiência no uso
  • #6 Design e estética minimalistas
  • #7 Feedback Imediato
  • #8 Carga de Trabalho: Densidade Informacional

Níveis de Criticidade:

0 = não é encarado como um problema de usabilidade.
1 = problema estético. Não necessita ser corrigido, a menos que haja tempo disponível.
2 = problema menor de usabilidade. Baixa prioridade para sua correção.
3 = problema maior de usabilidade. Alta prioridade para sua correção.
4 = catástrofe de usabilidade. É imperativo corrigir.

A listagem abaixo está dividido por páginas e não por criticidade.

Página inicial 1/7

haveacoffee1

Ocorrência Criticidade Evidência Recomendações
  • Fontes estouradas. As imagens principais estão com texto, ao acessar de um monitor maior do que o notebook comum, é possível ver as fontes estouradas (“pixeladas”).
  • Imagens com texto embutidos.
2
  • #5 Flexibilidade e eficiência no uso
  • #6 Design e estética minimalistas
  • A imagem com texto nem sempre ficará boa em todas as resoluções de monitores.
  • O rastreador do Google não reconhece texto contido em imagens.
  • Texto e imagem em formatos responsivos: ao reduzir ou aumentar a tela do monitor, o texto também ficará maior ou menor, deixando o site mais flexível e com imagens agradáveis.
  • Em vez de imagens, tente usar texto para exibir nomes, conteúdo ou links importantes. Se você precisa usar imagens no seu conteúdo textual, considere usar o atributo ALT para incluir algumas palavras de texto descritivo.” (Fonte: Diretrizes do Google).

Página inicial 2/7

haveacoffee2

Ocorrência Criticidade Evidência Recomendações
  • A área para assinar a seleção especial e a foto estão parecendo banner publicitário. Muita informação logo na área primeira área do site.
  • O box com tipos de compras no clube não se adapta ao tipo de monitor/dispositivo utilizado.

4

  • #5 Flexibilidade e eficiência no uso
  • #8 Carga de Trabalho: Densidade Informacional
  • Na maioria das tarefas, a performance dos usuários é piorada quando a densidade de informação é muito alta ou muito baixa. Nestes casos, é mais provável a ocorrência de erros. (Fonte: Critérios Ergonômicos de Bastien & Scapin)
  • É necessário ver os dados de mapa de calor da página inicial no Google Analytics ou em outra ferramenta utilizada para ver mais detalhes sobre o comportamento na página para visualizar os possíveis problemas. De qualquer forma, organizar a informação na home é muito importante, o teste A/B também poderá auxiliar na melhor forma de arquitetar a informação!

Página inicial 3/7

haveacoffee3

Ocorrência Criticidade Evidência Recomendações
Quando a tela é reduzida o box de assinatura não aparece mais. Este é o serviço mais importante do site.

4

  • #1 Controle e liberdade para o usuário
  • Ao ocultar informações sobre a assinatura do clube no mobile ou tablet pode reduzir o número de assinantes uma vez que o número de acesso e buscas em mobile em sites só vem aumentando.
Rever o call to action para o clube e inserir na página este box de assinatura mesmo se ela for acessada via celular ou tablet.

Página inicial 4/7

Imagem1

Ocorrência Criticidade Evidência Recomendações
Não existem links para as redes sociais do Haveacoffee.

3

  • #2 Consistência e padrões. As redes sociais costumam ser fixadas no rodapé e/ou cabeçalho do site.
  • A interação nas redes sociais é crescente além de ser a forma mais rápida para comunicação entre a empresa e o cliente.
  • O Haveacoffee tem ótima interação nas redes sociais, é um ótimo canal para inserir no site e passar mais confiança para os clientes e curiosos. O site passa mais credibilidade para o usuário ao mostrar quem (amigo/conhecido) que já curtiu o site.
Inserir os botões das redes sociais no site no rodapé e/ou no cabeçalho.

Página inicial 5/7

Imagem2

Ocorrência Criticidade Evidência Recomendações
Não estão sendo mostrados os métodos de pagamento e não informa se o site é seguro.

4

  • #3 Prevenção de erros uma vez que o cartão de crédito do usuário pode não ser aceito neste e-commerce.
  • #2 Consistência e padrões: deixar o site com design mais voltado para o e-commerce/clube anexando imagens que mostrem o cartões aceitos e site seguro.
  • Os clientes precisam confiar no site o suficiente para inserir todos os detalhes de cartão de crédito. Um elemento-chave para qualquer site e página de checkout é ter vários de sinais de confiança. Símbolos simples dos métodos de pagamentos, cadeados de segurança e ícones que informando entrega ou retorno grátis são valiosos para o cultivo de confiança com os clientes. (Fonte: Elto.com)
Inserir meios de pagamento e informar ao usuário que o site é seguro. Tais itens precisam estar no rodapé (em todo o site) e no checkout.

Página inicial 6/7

Imagem3

Ocorrência Criticidade Evidência Recomendações
Poucas informações importantes e que transmitam confiança no e-commerce na primeira parte do site.

4

  • #4 Reconhecimento ao invés de recordação
  • Detalhes e informações essenciais para os clientes passam confiança e deixa o site mais atraente/convidativo.
Inserir informações sobre frete, cancelamento do clube, troca em caso de envio incorreto, ajuda, além dos links para as redes sociais (já citados).

Página inicial 7/7

Imagem4

Ocorrência Criticidade Evidência Recomendações
Não tem formulário para contato ou dúvidas frequentes.

4

  • #2 Consistência e padrões
  • #8 Carga de Trabalho: Densidade Informacional
  • Apenas o e-mail no rodapé não funciona como comunicação direta com o usuário. Ao invés do usuário copiar e colar o email do site, um formulário de contato é um bom lugar para construir confiança com o usuário e pode aumentar as chances de seus visitantes entrar em contato.
Criar uma página para contato onde o usuário tenha acesso ao formulário, endereço, telefone, e-mail e redes sociais.

Página do Clube 1/2

Imagem5

Ocorrência Criticidade Evidência Recomendações
A parte de “exclusividade e qualidade garantida” são excelentes pontos mas estão escondidos na área de Clube > Assine

4

  • #1 Controle e liberdade para o usuário
  • #8 Carga de Trabalho
  • Mais uma vez passar confiança e mostrar que sabe tudo sobre café é importantíssimo para o cliente comprar um produto com segurança.
  • Também informar o frete grátis para o clube é mostrar mais uma vantagem em assinar o haveacoffee. Mostrar o que o cliente ganha assinando é importante para obter mais clientes.
Inserir na página inicial ou destacar mais as vantagens em fazer parte do clube e não mostrar sobre qual o processo de escolha dos grãos.

Página do Clube 2/2

Imagem6

Ocorrência Criticidade Evidência Recomendações
A apresentação da seleção do mês precisa estar na primeira parte do site.

3

  • #2 Consistência e padrões
  • A seleção do mês mostra o que o assinante receberá e mostra para aqueles que ainda não fazem parte do clube o que poderá receber em sua casa caso faça parte do clube (vantagens + curiosidade em saber mais).
  • Mostrar o resumo do tipo de café selecionado, mais uma vez, passa confiança e conhecimento sobre o café.
Apresentar a seleção do mês logo na capa (ou menos escondido) e mostrar qual o resumo do tipo de café da mesma forma como está na página interna.

Página da loja 1/2

Imagem7

Ocorrência Criticidade Evidência Recomendações
Pic Nic Store não contem produtos disponíveis.

4

  • #2 Consistência e padrões
  • #3 Prevenção de erros
  • #7 Feedback Imediato
  • Algumas marcas estão sem produtos. Ao clicar, o usuário ficará insatisfeito ao perceber que não há produtos disponíveis.
  • As interrupções provocadas pelos erros tem consequências negativas sobre a atividade do usuário. Geralmente, elas prolongam as transações e perturbam a planificação.
  • Quanto menor é a possibilidade de erros, menos interrupções ocorrem e melhor é o desempenho. (Fonte: Regras Ergonômicas de Batien & Scapin)
Inserir uma área abaixo das marcas disponíveis de “em breve no haveacoffee”. Disponibilizar cadastro para o usuário receber uma mensagem quando os produtos da marca estiverem disponíveis.

Página da loja 2/2

Imagem8

Ocorrência Criticidade Evidência Recomendações
Não existem filtros para selecionar por tipo, grão ou torrado, localização, ano de coleta, café gelado, etc.

4

  • #1 Controle e liberdade para o usuário
  • #5 Flexibilidade e eficiência no uso
  • #8 Carga de Trabalho
  • A performance melhora quando a apresentação da informação leva em conta as características cognitivas e perceptivas dos usuários. Uma boa legibilidade facilita a leitura da informação apresentada. Deixar ao usuário o controle do ritmo de suas entradas de dados auxilia na escolha do produto que realmente está interessado, fazendo com que encontre tal produto rapidamente sem interrupções desnecessárias (ex.:cessar uma página de uma marca e ver que não é o que deseja ou acessar um produto que não estava buscando).
  • “A primeira lei do e-commerce é, se o usuário não pode encontrar o produto, o usuário não pode comprá-lo.” (Nielsen Norman Group)
Inserir um filtro lateral para o cliente buscar as informações de acordo com o que deseja. Nem todas as marcas vendem café, algumas vendem acessórios para fazer um bom café. Deixar o filtro na lateral auxilia na busca pelo produto ideal para ele.

Página da marca de café 1/1

Imagem9

Ocorrência Criticidade Evidência Recomendações
Os três produtos acima estão indisponíveis.

4

  • #2 Consistência e padrões
  • #3 Prevenção de erros
  • #7 Feedback Imediato
  • Da mesma forma que acontece com as marcas sem produtos, ao clicar nestes produtos que aparecem com o botão Comprar, o usuário ficará insatisfeito ao perceber que não está disponível.
  • As interrupções provocadas pelos erros tem consequências negativas sobre a atividade do usuário. Geralmente, elas prolongam as transações e causam insatisfação.
  • Quanto menor é a possibilidade de erros, menos interrupções ocorrem e melhor é o desempenho. (Fonte: Regras Ergonômicas de Batien & Scapin)
  • Deve ser informado que o produto está indisponível e inserir um botão para acessar o produto sem o título Comprar.
  • Na página do produto disponibilizar cadastro para receber mensagem assim que o produto estiver disponível.
  • Na capa está o Cold Brew Clássico e não está sendo informado que ele está indisponível, neste caso é melhor retirá-lo da capa e inserir um produto disponível.

Página do produto 1/1

Imagem10

Ocorrência Criticidade Evidência Recomendações
O haveacoffee tem a missão de ser o “seu barista online” mas não existem informações sobre os cafés vendidos em nenhum produto disponível no site (informações que devem ser passadas pelo barista).

3

  • #2 Consistência e padrões
    #3 Prevenção de erros
    #8 Carga de Trabalho
  • Os usuários contam com informações sobre o produto de um site uma vez que eles não tem a oportunidade de tocar o produto, ler a embalagem, experimentá-lo, ou perguntar a um vendedor antes de comprar.
  • Páginas de produtos clean e com descrições diretas são essenciais. Nos estudos feitos pelo NN/Group, 20% das falhas de todas as tarefas no estudo – quando os usuários não conseguiam concluir com êxito uma compra quando solicitada – pode ser atribuída à informação de produto incompleta ou inexata.
  • Deixar perguntas dos compradores sem resposta pode inviabilizar a venda ou, pior ainda, fazer os compradores não apenas abandonem a compra, mas o site também. As descrições dos produtos precisam ser completas.
  • Compradores contam com as descrições do produto para assegurar-lhes que eles estão fazendo a decisão certa de compra. As descrições dos produtos pode facilmente fazer ou acabar com uma venda. (Fonte: Nielsen Norman Group)
  • Ter uma barra lateral para a pessoa navegar por outras áreas caso o produto visitado não seja o que procurado.
  • Disponibilizar o máximo de informações possíveis sobre o produto.

Cadastro no site 1/2

Imagem12

Ocorrência Criticidade Evidência Recomendações
É necessário estar logado para realizar a compra

4

  • #1 Controle e liberdade para o usuário
  • Nem sempre o usuário quer se cadastrar para realizar uma compra. Pesquisa publicada no User Interface Engineering comprovou que muitos preferem comprar sem se cadastrar e, caso queiram, o cadastro é realizado após efetuar a compra

Link da pesquisa.

Adicionar a opção de Comprar sem cadastro prévio “Comprar como convidado / Comprar sem cadastro / Guest / New Customer”.

Cadastro no site 2/2

Imagem13

Ocorrência Criticidade Evidência Recomendações
As telas de checkout e assinar o clube são iguais. No checkout eu vou só comprar ou também assino o clube?

4

  • #2 Consistência e padrões
  • #4 Reconhecimento ao invés de recordação
  • Ter uma página diferenciada para o cliente que deseja assinar o clube é importante para mostrar as vantagens e mostrar, mesmo que de forma online, o “atendimento diferenciado”. Todas as informações sobre os planos precisam estar 100% especificados para que o cliente não tenha dúvidas, se ele tiver dúvidas não assinará o plano e, provavelmente, não enviará e-mails solicitando ajuda, apenas sairá da página.
  • Uma boa presteza guia o usuário e lhe poupa o aprendizado. Ela permite, também, que o usuário saiba em que modo ou em que estado ele está. Uma boa presteza facilita a navegação e diminui a ocorrência de erros e insatisfação”. (Fonte: Regras Ergonômicas de Bastien & Scapin)
Na página de clube inserir o cadastro somente para o clube e informar quais são os benefícios, criar uma tela diferenciada para quem quer ser do clube.

No checkout inserir um call to action para o clube Haveacoffee e mostrar os passos para finalizar a compra (ex.: cadastro > endereço > pagamento > confirmação > finalizar compra).

Os pontos acima foram entregue à equipe. O grupo decidiu quais eram as prioridades deles e hoje estão com novo site com outros objetivos além da venda do café especial.

Até mais,

Caroline Zambon!

Comments are closed.