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:

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