O documento descreve uma avaliação heurística de um e-commerce de moda, focando na usabilidade e na arquitetura da informação, realizada com base nas heurísticas de Nielsen. Os resultados indicam que apenas 30% dos problemas de usabilidade identificados são considerados críticos, sendo a maioria classificada como menor ou estética, com 50% das questões críticas relacionadas à consistência. A avaliação ressalta a importância de melhorar a experiência do usuário, especialmente em áreas como filtros de produtos e navegação no site.

1. Avaliação Heurística
Professor: Edson Rufino
Aluna: Fernanda Sarmento
PUC - Rio | Pontifícia Universidade Católica do Rio de Janeiro
Pós-graduação em Ergodesign de Interfaces: Usabilidade e Arquitetura de Informação
Maio/2016

2. Avaliação Heurística
A avaliação heurística (Nielsen e Molich, 1990; Nielsen 1994) é um método para encontrar possíveis problemas
de usabilidade em uma interface que consiste em recrutar um conjunto de avaliadores que examinarão a
interface e avaliarão a sua conformidade com princípios de usabilidade já reconhecidos (chamados de
"heurística").
Vantagens do uso do método: Feedback rápido e barato quando comparado a um teste de usabilidade; é possível
executá-lo bem no início do processo de design, pode ser usado em conjunto com outras técnicas.
Desvantagens: Demanda conhecimento/experiência para aplicar as heurísticas de forma eficaz, portanto, pode
ser difícil encontrar profissionais qualificados, a avaliação pode acabar identificando apenas problemas
“menores”.
Redigido a partir de:
https://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/ + http://www.usability.gov/how-to-and-tools/methods/heuristic-evaluation.html

3. Proposta de Atividade
M - atividades do moderador
A - atividades do avaliador
1 Escopo de
avaliação
➔ M - Determinar
o site ou app a
ser avaliado;
➔ M - Determinar
tarefa e telas (3
para sites e 6
para apps).
2 Mapeamento dos
problemas
➔ M - Seleção dos 3
avaliadores;
➔ M - Envio de tabela a
ser preenchida;
➔ A - Entrar no site e
realizar a tarefa 2
vezes: uma
exploratória e a
segunda fazendo o
mapeamento dos
problemas conforme
heurísticas de Nielsen.
➔ A - Preencher a
planilha com questões
mapeadas.
3 Consolidação
e notas
➔ M - Consolidar
problemas encontrados
pelos diversos
avaliadores em uma
única planilha;
➔ M - Enviar a planilha
para avaliadores darem
nota de 0 a 4 de acordo
com a gravidade do
problema.
➔ A - Preencher a
planilha com as notas e
devolvê-la ao
moderador.
4 Elaboração de
relatório
➔ M - Fazer a média
das notas e
consolidar o
resultado em uma
única avaliação;
➔ M - preparar
relatório com
detalhamento dos
10 erros mais graves,
com proposta de
solução para os
mesmos.

4. Relatório Final
Apresentação dos resultados encontrados

5. Sumário
1. Resumo Executivo
2. Introdução
3. Sobre o produto
4. Metodologia
5. Resultados gerais
6. Análise TOP 10 problemas

6. Resumo Executivo
➔ Apenas 30% das oportunidades de melhoria foram identificadas como problemas maiores de usabilidade,
os demais sendo classificados como menores ou estéticos. Isso é positivo para a rápida implementação e
início dos testes de usabilidade com usuários;
➔ 50% dos problemas críticos envolvem infração à heurística de consistência, indicando a necessidade de
mais atenção na aplicação das terminologias e também no uso excessivo de redundância de termos e
caminhos navegáveis.
➔ Há alguns problemas que se localizam no menu, e, portanto, acabam impactando o site como um todo.
➔ Em função da natureza deste e-commerce as questões mais urgentes dizem respeito à questão de filtros,
que devem ser precisos e claros, permitindo uma experiência de compra prazerosa e o mais similar
possível a quando se tem as roupas disponíveis para visualização e um atende para informá-lo dos
estoques.

7. Introdução
Segundo o último relatório Webshoppers a categoria Moda e
Acessórios continua liderando o ranking do e-commerce brasileiro
em número de pedidos, com uma fatia de 14% do mercado.
Com a tendência de desaceleração do mercado, torna-se cada vez
mais relevante a assertividade no momento da intenção de compra
do cliente:
Dados e tabelas retirados de:
http://img.ebit.com.br/webshoppers/pdf/33_webshoppers.pdf e http://ecommercenews.com.br/artigos/cases/os-desafios-do-setor-de-moda-no-e-commerce
“Muitos aspectos podem levar à desistência da compra. Por este motivo, a usabilidade do site
é de extrema importância. Entregue ao seu consumidor informações rápidas e claras desde as
características do produto (tamanho, cor, funcionalidades), até a compra, entrega, formas de
pagamento e os processos de devolução.” - Samantha Schwarz
Diante disso, optou-se por desenvolver este trabalho com um e-commerce de moda, a saber, loja online da Cantão.

8. Sobre o produto
Loja online da Cantão

9. Sobre o produto
➔ A marca Cantão existe desde 1967 e vende exclusivamente roupas femininas;
➔ O endereço www.cantao.com.br está no ar desde 2000, mas apenas em 2014 a Loja Virtual passou a ser o
conteúdo principal do site;
➔ Obteve mais de 119 k visitas no mês de abril, com tempo médio de 06:41 no site, média de 10,15 páginas
por visita com bounce de apenas 28,98%.
Dados e tabelas retirados de:
http://web.archive.org/web/20161001000000*/http://www.cantao.com.br e https://www.similarweb.com/website/cantao.com.br

10. Metodologia
➔ A metodologia utilizada para a avaliação do site foi a Avaliação Heurística que consiste em:
◆ Mapeamento de problemas de usabilidade por especialistas de acordo com heurísticas de Nielsen
(1. visibilidade do estado do sistema; 2. compatibilidade do sistema com o mundo real; 3. controle e
liberdade do usuário; 4. consistência e padrões; 5. prevenção de erros; 6. reconhecimento ao invés de
lembrança; 7. flexibilidade e eficiência de uso; 8. estética e design minimalista; 9. auxiliar usuários a
reconhecer, diagnosticar e corrigir erros; 10. ajuda e documentação.) e
◆ Avaliação do impacto de cada um dos problemas de acordo com escala de 0 a 4 (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 usabilidae (é
imperativo corrigir)).

11. Metodologia
➔ Abaixo o perfil dos especialistas envolvidos na presente Avaliação Heurística:
Danilo Blum
Designer com Especialização,
Ergodesign de Interfaces:
Usabilidade e Arquitetura de
Informação. Atualmente
trabalhando com games como sócio
fundador da Duckbill
Luana Penedo
Designer com Especialização,
Ergodesign de Interfaces:
Usabilidade e Arquitetura de
Informação. Possui também MBA e
vcerificação SCRUM. Atualmente
trabalhando como UX na Sirius
Interativa
Veronica Sartori
Designer com Especialização,
Ergodesign de Interfaces:
Usabilidade e Arquitetura de
Informação. Atualmente
trabalhando como UX na Fiocruz.

12. Resultados Gerais

13. Resultados Gerais

14. Resultados Gerais

15. Análise TOP 10 problemas
➔ A seguir o detalhamento dos 10 problemas avaliados com maior pontuação em relação à sua criticidade.

16. #1 ➔ Não há feedback visual consistente no mouseover do carrosel de produtos nas setas de navegação,
nem na imagem com linkagem (linha com produtos sem feedback de mouse over nos produtos e
nas setinhas, outros elementos em destaque tambem muito estáticos sem um feedback como um
mouse over, o feedback do mouse over nos ítens do menu são muito discretos)
➔ Princípio(s) violado(s): 1. visibilidade do estado do sistema; 4. consistência e padrões
➔ Criticidade: 3
➔ Tela(s): 1 - Home
Atual:
Sem mouse over Com mouse over (cinza
levemente mais claro)
Com mouse
over
(imagem não
se altera)
Sugestão:
Sem mouse over Com mouse over (Fica
vermelho e negrito)
VESTIDOS
Sem
mouse
over
Com mouse
over (Imagem
da modelo se
altera para
outra posição e
aparece
margem
vermelha)

17. #2 ➔ O ítem "meu cantão" está confuso, pois o nome se repete no primeiro e segundo nível hierarquico
e me levam para páginas diferentes
➔ Princípio(s) violado(s): 4. consistência e padrões
➔ Criticidade: 3
➔ Tela(s): 1 - Home
Atual: Sugestão:
Mesmo nome para item e subitem de menu
PARA
CLIENTES
PROGRAMA
MEU CANTÃO
Ajuste de texto para esclarecer a função de cada um dos itens

18. #3 ➔ No menu de navegação, há duas categorias de ordem hierarquica maior em relação as outras categorias disponibilizadas na mesma linha
("Ver todas" e "Bazar"). As 4 categorias apresentadas ao lado esquedo de "Ver Todas", estão inseridas nesta categoria de ordem maior, e
aparecem novamente quando o usuário selecionar "Ver Todas". Essas 4 categorias não são as únicas que compõe a categoria "Ver Todas" //
Os ítens dos produtos no menu estão repetidos em "ver todas" com o título de "novos artesãos", mas levam para o mesmo lugar.
➔ Princípio(s) violado(s): 4. consistência e padrões, 6. reconhecimento ao invés de lembrança, 8.
estética e design minimalista
➔ Criticidade: 3
➔ Tela(s): 1 - Home, 2 - Calças e 3 - Detalhe Calça B Boy Cleo
Atual: Sugestão:
VER
OUTRAS
BOLSAS E
ACESSÓRIOS
BOUTIQUE
CALÇADOS
CASACOS
SHORTS E
SAIAS
UNDERWEAR
Trocar “ver todas” por “ver outras” e reduzir
o menu, retirando as categorias que já estão
no primeiro nível.
Mudar o nome da coleção para “categorias”
e “especiais” para “coleções especiais”
CATEGORIAS

19. #4 ➔ Primeira passada com o mouse sobre os produtos demoraram a carregar o feedback
➔ Princípio(s) violado(s): 1. visibilidade do estado do sistema
➔ Criticidade: 3
➔ Tela(s): 2 - Calças
Atual: Sugestão:
Sem mouse over e com mouse over (primeira calça: com mouse over
aparece de costas).
Melhorar tempo de carregamento. Caso não seja possível é viável
pensar em outro tipo de feedback, como, por exemplo, apenas aparecer
uma moldura vermelha em torno do produto.

20. #5 ➔ Nos filtros, as cores são indicadas por nomes que o usuário pode não reconhecer, e esta é a única
opção de seleção por cor. Ex: Bordeaux, Castor, Stone, Única
➔ Princípio(s) violado(s): 2. compatibilidade do sistema com o mundo real, 6. reconhecimento ao
invés de lembrança
➔ Criticidade: 3
➔ Tela(s): 2 - Calças
Atual: Sugestão:
Passar a exibir “amostra” de cor (referência - similiar a como a Netshoes exibe produtos na busca)

21. #6 ➔ Não consigo aplicar mais de um filtro do mesmo tipo como cor, tamanho por exemplo
➔ Princípio(s) violado(s): 3. controle e liberdade do usuário
➔ Criticidade: 3
➔ Tela(s): 2 - Calças
Esse erro não foi localizado, conforme print abaixo. Pode ter sido uma atualização do site ou algum outro
tipo de dificuldade particular enfrentada pelo avaliador que não conseguimos reproduzir.

22. #7 ➔ Depois que seleciona uma cor, todas as outras opções somem do menu dropdown, ficando apenas
as opções "cor" e a cor selecionada. Clicando em "cor" o usuário volta a ver novamente todas as
opções, e retira o filtro que fora aplicado anteriormente.
➔ Princípio(s) violado(s): 3. controle e liberdade do usuário, 7. flexibilidade e eficiência de uso
➔ Criticidade: 3
➔ Tela(s): 2 - Calças
Atual: Sugestão:
Dropdown continuar exibindo todas as cores originais e permitindo edição do filtro sem necessidade de
“reset”

23. #8 ➔ Os filtros não se adaptam entre si. Escolhi uma cor e o filtro de tamanho continuou mostrando
todos, mesmo nao tendo alguns tamanhos o que me obrigou a ter que cair no aviso de "NENHUM
PRODUTO ENCONTRADO COM O FILTRO SELECIONADO"
➔ Princípio(s) violado(s): 5. prevenção de erros
➔ Criticidade: 3
➔ Tela(s): 2 - Calças
Atual: Sugestão:
Já adaptar demais dropdown de acordo com a disponibilidade de estoque.
Após filtro inicial continua exibindo a possibilidade de todos os filtros,
mesmo que não haja em estoque (direcionando aí para uma tela de erro)
34
36
42
46

24. #9 ➔ Um mesmo termo sendo utilizado 3 vezes no mesmo menu de navegação, porém para ações
diferentes. (ex.: Calças - Aparece como uma opção de categoria, como opção de subcategoria
inserida dentro da categoria "Ver Todas", e como opção de subcategoria inserida dentro da
categoria "Bazar")
➔ Princípio(s) violado(s): 4. consistência e padrões, 6. reconhecimento ao invés de lembrança
➔ Criticidade: 3
➔ Tela(s): 1 - Home, 2 - Calças e 3 - Detalhe Calça B Boy Cleo
Será solucionado parcialmente com a resolução proposta para o problema #3.
Em relação à redundância abaixo do menu “bazar” não concordo em realizar a alteração
pois de fato trata-se de conteúdo diferente e um ambiente separado da loja.

25. #10 ➔ O Breadcrumb mostra o termo "Home > Novos Artesãoes" > "Calças", sendo que a categoria de
ordem hierárquica acima de "calças" não aparece em primeira instância no menu de navegação,
pois o termo está localizado dentro da opção "Ver Todas".
➔ Princípio(s) violado(s): 4. consistência e padrões
➔ Criticidade: 3
➔ Tela(s): 2 - Calças e 3 - Detalhe Calça B Boy Cleo
Atual:
Como existem vários caminhos para se chegar na mesma página a sugestão é adaptar o
bredcrumb ao cainho efetivamente realizado pelo usuário.
Sugestão:

26. Boas compras! ;)
fernanda.davila.melo.sarmento@gmail.com