Embed Size (px)
Citation preview
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
Avaliação HeurísticaA 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
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.
Relatório FinalApresentação dos resultados encontrados
Sumário1. Resumo Executivo
2. Introdução
3. Sobre o produto
4. Metodologia
5. Resultados gerais
6. Análise TOP 10 problemas
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.
IntroduçãoSegundo 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.
Sobre o produto
Loja online da Cantão
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
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)).
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.
Resultados Gerais
Resultados Gerais
Resultados Gerais
Análise TOP 10 problemas➔ A seguir o detalhamento dos 10 problemas avaliados com maior pontuação em relação à sua criticidade.
#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)
#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
#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ÓRIOSBOUTIQUECALÇADOSCASACOSSHORTS E SAIASUNDERWEAR
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
#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.
#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)
#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.
#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”
#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)
34364246
#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.
#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:
