Este documento descreve um projeto para criar uma ferramenta online para avaliação de usabilidade chamada Projeto Heurísticos. A ferramenta permitirá avaliações heurísticas remotas de interfaces por avaliadores indicados e gerará relatórios automáticos. O projeto inclui pesquisas, testes de validação de wireframes e um plano de lançamento em várias fases.

1. Projeto Heurísticos
Pós graduação em Arquitetura da Informação - 2012

2. Projeto Heurísticos
 Criação de uma ferramenta online para
avaliação de usabilidade;
 Análise heurística remota por avaliadores
indicados pelo cliente
 Avaliação de interfaces para profissionais
(webdesigners, arquitetos da informação,
designer de interação e etc)
 Relatórios automáticos

3. Avaliação Heurística

4. Avaliação heurística
 Segundo Nielsen: “O objetivo da avaliação
heurística é encontrar os problemas de
utilização na concepção de modo que eles
podem ser atendidos como parte de um
processo iterativo de design.” (Nielsen, 2005).
 Avaliadores: 3 a 5 profissionais
 10 heurísticas de Jakob Nielsen

5. 10 Heurísticas de Jakob Nielsen
1. Visibilidade do status de sistema
 Maior abrangência dos
pontos de usabilidade
2. Correspondência entre o sistema
e o mundo real
 Flexibilidade para avaliação
3. Controle e liberdade do usuário de vários tipos de interfaces
4. Coerência e padrões
5. Prevenção de erro
 Mais conhecidas e
difundidas
6. Mais reconhecimento que
recordação
7. Flexibilidade e eficiência de uso
8. Projeto estético e minimalista
9. Ajuda ao usuário, diagnóstico e
recuperação dos erros
10. Ajuda e documentação

6. Desenvolvimento do projeto
Pesquisas e testes

7. Pesquisa quantitativa
 2 questionários on-
line:
 primeiro questionário
para profissionais que
fizeram ou fazem
avaliações heurísticas
 segundo para
profissionais que
nunca fizeram mas
que possuíam
conhecimento da
avaliação.

8. Dados profissionais

9. Heurísticas avaliadas
“Elaboro um roteiro de acordo com a
natureza do projeto e uso as heurísticas de
Nielsen, mas também levo em conta minha
própria experiência profissional.”

10. Como faz a avaliação?

11. Importância da avalição

12. Validação de Wireframes
 Os wireframes foram testados através do site
Usabilla entre os dias 15 e 17 de Agosto
 Para cada página foi solicitado uma “tarefa”
 Os usuários podiam inserir comentários sobre as
páginas

13. Validação de Wireframes
Comentários dos usuários
Cadastro 1. legal ser bem simples. Descrição é
obrigatória?
2. Os passos para a avaliação estão
claros e objetivos.
3. Muito boa a divisão das etapas
para gerar a nova avaliação.
4. Faltou o campo endereço do site
(URL) que estou avaliando, não
precisa ser um campo obrigatório
para preenchimento.
5. não entendi o que iria em 'arquivo'
6. a principio não entendi o que seria
cada passo..vou subir que tipo de
arquivo? não posso avaliar uma
página já pronta? sem saber o que
dá pra fazer, talvez nem
cadastraria o projeto

14. Validação de Wireframes
Comentários dos usuários
Arquivo 1. o nome "Arquivo" não deixou claro
quais opções eu teria (URL por
exemplo)
2. Talvez uma opção para teste de
um vídeo.
3. poderia subir todo o html gerado
pelo Axure? ficaria em dúvida
entre protótipo e wireframe.
4. Eu acho que as opções estão
condizentes com a proposta de
avaliação utilizando as Heurísticas
5. Achei que aqui eu já faria upload...
não?
6. Cadê o item 3 ???????
7. Acho que protótipo e imagens
seria a mesma coisa no critério de
avaliação.

15. Validação de Wireframes
Comentários dos usuários
Avaliação 1. Muito bom ver o andamento da
análise.
2. O que menos gosto é a
nomenclatura "encerrar", talvez a
nomenclatura fique mais simples se
for "Encerrar análise".
3. Esta barra significa o que ?
4. A barra aqui em cima, o drop de
Wireframes o "Proximo Wire" e essa
barra de heurísticas fazem parte do
site de avaliação e o resto é o wire
que estou avaliando, é isso? achei
que está tudo meio misturado... A
barrinha de progresso ali em cima
é a indicação de que tenho 6 wires
pra avaliar? posso navegar entre
eles só indo pra frente ou
escolhendo no drop? achei uma
opcao muito longe da outra

16. Validação de Wireframes
Avaliação Comentários dos usuários
5. Aproximaria de alguma forma a
caixa wireframes da navegação
(proximo wire), pois uma
complementa a funcionalidade da
outra.
6. só olhando assim não entendi
como isso vai funcionar
7. nao entendi essa barra numerada
8. Minhas compras recentes
9. Mais gosto da opção de avaliação
já na página indicada

17. Validação de Wireframes
Comentários dos usuários
Avaliação 1. Achei válida a idéia de ter esse
acompanhamento de estágio do
processo... Mas acho que deveria ter
algo explicando o que significa esse
campo... algum termo que represente
o significado desse campo
2. esta barra está estranha, não sei se
está mostrando o processo de
compra, muito confusa.
3. Desnecessário o botão estas na cor
laranja. Não acho que está de
acordo com o layout da página.
4. Gostei da possibilidade de poder
visualizar as telas que estão sendo
avaliadas
5. Ver as próximas páginas para analisar
é muito bom para controlarmos o
tempo e cronograma das tarefas.

18. Validação de Wireframes
Comentários dos usuários
Avaliação 6. Não gostei desta opção de
visualizar os wireframes.
7. pra cada heurística marco se
está ok ou não? legal.
8. Muito bom a indicação visual
sobre a análise.
9. Legal ter a descrição de cada
heurística
10. Gostei muito da possibilidade de
colocar o comentário no local
específico da avaliação.
11. se tiver duas coisas na página
que violam a heurística 1, devo
posicionar o comentário perto de
1 delas só?

19. Validação de Wireframes
Comentários dos usuários
Avaliação 12. acho que esse box por cima do
wire vai atrapalhar na hora de
avaliar o que está por baixo
dele...não vale a pena por do
lado? pra sempre enxergar o wire
todo que estou avaliando e a
checklist ao lado mostrando tudo
que já avaliei ou não.
13. Acho que este menu não
deveria ficar neste lado direito

20. Validação de Wireframes
Comentários dos usuários
Minhas Avaliações 1. Como não consegui voltar para
a tela anterior... não recordo se
esse topo estava presente nela,
na primeira tela lembro que esse
topo aparece. Se não, acho que
deveria continuar seguindo esse
padrão.
2. Poderia indicar a porcentagem
de conclusão da avaliação,
assim o avaliador pode começar
um projeto, parar e retomar,
sabendo por essa tela o quanto
avaliou de cada projeto.
3. Possibilidade de gerar o relatório
é ótima.
4. Poder editar é super importante.
As vezes precisamos ajustar
algum comentário ou nota.

21. Validação de Wireframes
Comentários dos usuários
Minhas Avaliações 5. nao entendi a principio o que
são respostas...quantas
heuristicas daquela listinha eu ja
preenchi que está OK ou não?
6. eu colocaria ícone de lápis para
editar e lixeira para apagar
7. Fiquei com dúvida nessa coluna,
o item "Resposta" seria a
quantidade de pessoas que
testou, ou a quantidade de
respostas que o avaliador deu?
8. Acho que estes botões na cor
laranja não combina com o
layout da página.
9. gostei que as opcoes estao bem
claras, bem destacado o que é
mais importante.

22. Validação de Wireframes
Comentários dos usuários
Relatório 1. avaliações = respostas?
avaliações fez mais sentido
2. faltou mostrar um relatório
quantitativo.
3. Os ícones ficaram perdidos na
tela, uma legenda pode ajudar
nesse momento, a legenda pode
ter a cor e o ícone
correspondente.
4. isso quer dizer que das 4
avaliações realizadas, 3 disseram
que a ajuda está ruim e 1 disse
que a ajuda está OK? estranhei
essa variação toda nas barras

23. Validação de Wireframes
Comentários dos usuários
Relatório 5. acho que seria legal no final do
prazo das avaliacoes receber
esse grafico geral por email e vir
para o site ver mais detalhes se
quisesse... ou antes do prazo final
vir acompanhando no site como
está indo
6. Achei mais interessante essa
forma de exibição do relatório,
pois consigo ter o resultado
acesso além das estatística,
também é possível visualizar os
comentários.
7. legal a forma de mostrar os
pontos e os comentarios...o 10
está maior e aparecendo primeiro
porque teve mais votos negativos,
é isso? legal se for assim.

24. Validação de Wireframes
Comentários dos usuários
Relatório 8. Se existirem muitos cometários o
relatório pode fica muito
comprido, talvez incluiria um
collapse e contract nos itens dos
comentários.
9. Como será a exibição dos
comentários, será de todas as
pessoas avaliadoras ou será de
uma pessoa só?
10. nao entendi o porquê das cores
diferentes
11. Acho que nessa parte pode
diferenciar os comentários de
cada avaliador. Podendo ser
uma cor na numeração para
cada avaliador, mas isso ser
mostrado somente no wireframe
e nos comentários ao lado.

25. Validação de Wireframes
Comentários dos usuários
Upgrade 1. Faria o upgrade sim!
2. sim
3. não. porque eu não costumo fazer
análises heurísticas. eu navego pelo site
livremente e anoto o que me chama
atenção de ruim e de bom num
caderno. ao mesmo tempo, faço
inventário de conteúdo. depois faço
bench e converso com o cliente para ter
mais detalhes das expectativas em
relação ao projeto.
4. Faria um estagiário para testar e depois
de testado contrataria o freelancer para
relatórios mais completos.
5. nao sei pq nao costumo usar esse tipo de
avaliacao, mas me parece atrativo
poder subir html e ter mais telas pra
avaliar por projeto
6. Não gostei do layout desta página.
Muita informação. Pode confundir os
usuários.

26. Validação de Wireframes
Homepage
 Tarefa: Nova avaliação
“Você se interessou pelo Proj.
Heurísticos e gostaria de avaliar
seus wires com essa ferramenta.”

27. Plano de release
Fases do projeto

28. Passos
 Primeiro release: Validação do produto/negócio
Processo: testes com usuários, entrevistas e questionários.
Entrega: Protótipo navegável.
 Segundo release: Lançamento Produto Beta
Processo: Implementação da versão "beta", cadastramento de usuários e análise de feedback (sugestões de melhorias)
Entrega: Versão Beta (site com com versão free, Júnior e Pleno)
 Terceiro release: Produto - Fase 2
Processo: Cadastro de uma quantidade de clientes, melhoria na interface seguindo os feedbacks, implementação de cadastro
de avaliadores.
Entrega: Versão 2 do produto com as versões Free, Junior, Pleno e Sênior.
 Quarto Release: Produto fase - 3
Processo: Cadastramento de usuários nas versões Pleno e Sênior, base de avaliadores suficiente.
Entrega: Versão 3 do produto com as versões Free, Junior, Pleno, Senior e Freela com a opção de utilizar os avaliadores
cadastrados no site.
 Possíveis próximos releases:
- Integração com outros sistemas de avaliação (por tarefas, testes de 5 segundos e etc)
- Integração de ferramentas: gravação de testes (navegação do usuário)
- Integração de sistemas de avaliação automáticos.

29. Conclusão
 A ferramenta consiste em basicamente unir profissionais
de usabilidade e afins aos outros profissionais que não
tenham conhecimento específico
 Em nossas pesquisas descobrimos que a maioria dos
profissionais relacionados veem a importância nas
validações heurísticas, mas não possuem um
mecanismos para tal ação, fazendo assim de forma
manual
 Criar mecanismos para a qualidade dos novos projetos
web, começando assim por validações com base nas
heurísticas criadas por Jakob Nielsen e progredindo
conforme a experiência adquirida com a evolução do
projeto

30. Obrigado!
CARLOS ALBERTO DA SILVA
CAROLINA ARLINDO
ROBSON MOULIN DA SILVA
RODRIGO YOSHIOKA