Sergio Avaliacao Interface PDF

Metodologias para
Avaliao de Interfaces
Humano Computador
Srgio Furgeri
Tcnicas de Avaliao
Tcnicas de Avaliao Ergonmica
Tcnicas Empricas
Tcnicas Diagnsticas
Inspeo via Checklists
Avaliao Heurstica
Percurso Cognitivo
Avaliao Semitica
Uso de Cores
Testes de Usabilidade
MetodologiasparaAvaliaodeInterfaces.CEUNSPITUNov/2005
Avaliar interfaces?
Quando?
Numa fase nica?
No final do projeto?
Se der tempo?
Com ou sem o usurio?
Quando avaliar interfaces?

A interface deve ser avaliada durante o ciclo
de vida do design.
Especificao
de
requisitos
Anlise
funcional
Design conceitual
Design formal
AVALIAO
Implementao
Prototipao
CiclodevidaEstrela
(adaptadoporHixe
Hartson,1993).
preciso avaliar a interface constantemente.

Algumas Caractersticas da avaliao

Tempo: depende da
complexidade do
sistema
Verbalizao
Constrangimento
Custo: 1 a 10% do
projeto da interface
Incerteza mesmo
aps testes
exaustivos
Local da Inspeo
Objetivos da avaliao?
Descobrir as preferncias do
usurio.
Cada usurio pode apresentar

diferentes necessidades.
Levantar os problemas que os

usurios encontram.
Objetivos da avaliao?
De forma geral a avaliao pretende verificar:
1. A funcionalidade Fazer o que necessita da
forma mais eficiente.
2. O impacto do design Avaliar a usabilidade
(fcil de aprender, fcil de usar, agradvel,
fcil de lembrar operaes anteriores).
3. Detectar os problemas no design Relativo a
confuso entre os usurios.
A maioria dos mtodos de inspeo tero um efeito
significativo na interface final somente se forem usados
durante o ciclo de vida do projeto. Nielsen (1993)
Tcnicas Empricas
Buscam a opinio do usurio sobre a
interao com o sistema
Avaliam a satisfao ou insatisfao dos
usurios de forma direta
Possibilitam aos usurios apresentarem suas
sugestes de melhoria
Baseada na aplicao de questionrios e
entrevistas com o usurio
Ensaios de interao (simulao do uso do
sistema pelos usurios).
Inspeo por Checklist

So vistorias baseadas em listas de
verificao
No necessitam ser executadas por
especialistas
Garante resultados mais estveis, mesmo
considerandose diversos avaliadores (reduo
da subjetividade)
Maior facilidade na identificao de problemas
Reduo do custo da avaliao (mais rpida)
Heursticas de Nielsen
o principal mtodo proposto para avaliao
de interfaces.
Deve ser feita por vrios avaliadores um
nico no consegue encontrar todos os
problemas de usabilidade de uma interface.
feita num primeiro momento individualmente.
Cada avaliador percorre a interface diversas
vezes, inspecionando os diferentes componentes
do dilogo e ao detectar problemas os relata
associandoos claramente com as heursticas
violadas.
10
Quem realiza a avaliao?

Especialistas em
usabilidade.
Consultores de
desenvolvimento de
software.
Usurios finais.
http://www.useit.com/papers/heuristic/heuristic_evaluation.html
Equipede
Desenvolvimento
Designers
Avaliadores
Redesign
11
1. Visibilidade do status do sistema.
2. Compatibilidade do sistema com o mundo real.
3. Controle do usurio e liberdade.
4. Consistncia e padres.
5. Preveno de erros.
6. Reconhecimento em lugar de lembrana.
7. Flexibilidade e eficincia de uso.
8. Esttica e design minimalista.
9. Ajudar os usurios a reconhecer, diagnosticar
e corrigir erros.
10. Ajuda e documentao.
12
1.VisibilidadedoStatusdoSistema
O sistema precisa manter os usurios informados sobre o que
est acontecendo.
Aplicandoumafunogeramos
umresultadonainterface3D,
masseainterface3Destiver
ocultaporoutrasjanelas?
Outros exemplos: Gravando dados no arquivo...

Instalando...
Atualizando arquivos...
13
1.VisibilidadedoStatusdoSistema
O usurio est sendo informado sobre o processo de download.

14
2.CompatibilidadedoSistemacomoMundoReal
O sistema precisa falar a linguagem do usurio, com palavras,
frases e conceitos familiares ao usurio, ao invs de termos
orientados ao sistema.
Outros:
Backup
Password
Firewall
Anonymous
FTP
Session
15
3.ControledoUsurioeLiberdade
Usurios freqentemente escolhem por engano funes do
sistema e precisam ter claras as sadas de emergncia para sair
do estado no desejado sem perdas.
Os usurios podem ficar

experimentando as aes
at encontrar a que lhe
atende a necessidade.
Cancelar impresso...
16
4.ConsistnciaePadres
A organizao dos botes no consistente.

Termos despadronizados
Usurios no precisam adivinhar que diferentes palavras ou aes

significam a mesma coisa. O sistema deve seguir convenes de
plataformas.
17
5.PrevenodeErros
Melhor que uma boa mensagem de erro um design cuidadoso que
previne o erro antes dele acontecer.
O sistema no previne a
ocorrncia de erros
enquanto o usurio est
digitando uma expresso.
18
6.ReconhecimentoaoInvsdeRelembrana
Tornar objetos, aes e opes visveis. O usurio no deve ter
que lembrar informao de uma para outra parte do dilogo.
Se o usurio for inexperiente, ser difcil reconhecer ou lembrar que

para inserir um cabealho no documento necessrio usar o menu
Exibir.
19
7.FlexibilidadeeEficinciadeUso
Usurios Novatos se tornam
peritos com o uso. Prover
aceleradores de forma a
aumentar a velocidade da
interao.
A existncia de atalhos
(shortcuts) torna mais rpida
a execuo da tarefa, caso o
usurio j seja experiente na
Ferramenta.
20
8.EstticaeDesignMinimalista
Janelas e dilogos no devem conter informao irrelevante ou
raramente necessria.
ConstrutordeConsultas
Viso geral do calendrio de um dia. Observe a quantidade de
botes na parte superior. Para adicionar um appointment surge
uma nova tela.
21
9.AjudarosUsuriosaReconhecer,Diagnosticare
CorrigirErros
Mensagens de erro devem ser expressas em linguagem clara
(sem cdigos), indicando precisamente o problema e
construtivamente sugerindo uma soluo.
Mensagem de Erro
muito tcnica. A
mensagem deve
informar o usurio
sobre o que est
acontecendo e
sugerir uma
soluo
Muito simplista: Erro ao gravar arquivo.

Mais correto: No foi possvel gravar dados no disquete, verifique
se ele no est protegido contra gravao, ou substitua o disquete
e tente novamente.
22
10.AjudaeDocumentao
Embora seja melhor um

sistema que possa ser usado
sem documentao,
necessrio prover ajuda e
documentao.
Tpicos de Ajuda
do PowerPoint
23
Heursticas de Nielsen Como Avaliar?

Provendo cenrios tpicos de uso.
Listando os vrios passos que um usurio
deveria efetuar para realizar um conjunto de
tarefas reais.
Anlise individual ou com o usurio
24

1.Visibilidadedostatusdosistema
Ver ificao:
Osusuriossomantidosinformadossobreo
progressodosistemacomapropriado
feedbackemumtemporazovel?
Gr audesever idade
Pr oblema:
()Semimportncia 0
()Cosmtico 1
()Simples 2
()Grave 3
()Catastrfico 4
Gr audesever idade
Tipo
Descr io
Semimportncia
Noafetaaoperaodainterface
Cosmtico
Nohnecessidadeimediatadesoluo
Simples
Problemadebaixaprioridade(podeserreparado)
Grave
Problemadealtaprioridade(deveserreparado)
Catastrfico
Muitograve,deveserreparadodequalquerforma.
25

2.Compatibilidadeentr eosistemaeomundor eal
Ver ificao:
Osistemautilizaconceitoselinguagemfamiliar
comousurioemvezdetermosorientadosao
sistema?
Osistemautilizaconvenesdomundoreal,
exibindoinformaescomumaordemlgicae
natural?
Gr audesever idade
Pr oblema:
()Semimportncia 0
()Cosmtico 1
()Simples 2
()Grave 3
()Catastrfico 4
26
Heursticas de Nielsen Resultados

O resultado de cada avaliador consolidado
num resumo geral.
O resultado de uma avaliao heurstica uma
lista de problemas de usabilidade da interface
com referncias aos princpios de usabilidade que
foram violados e com sugestes de correo.
O diagnstico de um problema associado com as
heursticas traz possibilidades concretas de
redesign.
Fazer uma sesso de discusso final envolvendo
a equipe de avaliadores e representantes da
equipe de desenvolvimento.
27
Heursticas de Nielsen Resultados

Os Resultados podem contribuir para se levantar
aspectos positivos do design. Aspectos positivos
so todas as caractersticas importantes da
interface que de forma alguma deveriam ser
alteradas ou eliminadas em um redesign.
http://mega.ist.utl.pt/~pcml/ipm/avaliacao1.html
28
Heursticas Especficas Comparao

Mensagensdescritivas(hint)
No possui qualquer tipo de

mensagem explicando para o
usurio a funo do boto ou o
que digitar no campo.
29

Campos ordenadosemseqncia ENTERcomoTAB
1
2
1
2
3
Dados de mesma natureza

no esto agrupados de forma
seqencial.
A tecla ENTER no funciona
como TAB.
Dados de mesma natureza

esto agrupados de forma
seqencial.
A tecla ENTER funciona
como TAB.
30

Camposobrigatriosdiferenciados
Os campos obrigatrios no
possuem nenhum tipo de
diferenciao, como a
indicao de cor ou smbolos.
Os rtulos dos campos

obrigatrios possuem
asteriscos e os campos
recebem obrigatrios
possuem cores diferentes.
31

ImagensemBotes
No possui imagens nos

botes. Dessa forma o usurio
ter de ler o rtulo de cada boto
para saber o que ele dever
fazer.
cones nos botes que

identificam a ao a ser
executada. O cone torna
instintiva a ao a ser executada
pelo boto.
32

CamposdeSeleo
Os campos assinalados
possibilitam que o usurio digite
um valor indevido (fora do
domnio).
Utilizao de campos de
seleo, o usurio seleciona
uma opo existente na lista.
No h como escolher ou
digitar algo incorreto.
33

Mscarasdedigitao
No utiliza nenhum tipo de

mscara para a digitao de
data e telefone, nem mesmo
verifica se o campo deve
receber apenas algarismos
numricos.
Utilizao de mscaras nos

campos data e telefone
impedem contedos indevidos
e ajudam o usurio a
identificar o formato do dado.
34

Controledeboteshabilitados
No existe nenhum controle

do acionamento dos botes.
Possibilita que o usurio realize
aes indevidas.
Controle de botes
habilitados e desabilitados.
Por exemplo, ao clicar sobre o
boto Novo somente os
botes Gravar e Cancelar
estaro habilitados.
35

Valorescomcontedopadronizado(default)
Ao inserir um novo registro no

existe nenhum tipo de
preenchimento prdefinido
(default).
Ao pressionar o boto Novo,

aparece um contedo padro
nos campos apontados.
36

BotoLocalizarDados
Ao localizar um usurio
necessrio digitar a palavra e
pressionar o boto Localizar.
A localizao do usurio
ocorre durante a digitao,
economizando esforo e tempo
do usurio. Alm disso, a
busca pode ser feita de 2
formas.
37
Avaliao Heurstica Concluses

Segundo Nielsen, os principais componentes de
uma avaliao heurstica podem ser assim
resumidos:
Avaliadores devem percorrer a interface pelo menos duas
vezes. (no fluxo e nos componentes individuais do dilogo).
A interface deve ser inspecionada com base em uma lista de
heursticas, e todos os problemas devem ser justificados e
detalhados o mximo possvel.
Os avaliadores devem trabalhar individualmente (sem que
um influencie o outro).
Consolidar os problemas encontrados por 3 a 5 avaliadores.
Usar o mtodo, no somente melhora a interface sob
anlise, como tambm beneficia futuros projetos, o que um
efeito colateral da inspeo que julgamos extremamente
importante.
38
Percurso Cognitivo: definies

O percurso cognitivo um mtodo de inspeo
que tem como foco principal avaliar o design
quanto sua facilidade de aprendizagem,
particularmente por explorao.
39
Percurso Cognitivo: definies

Usurios preferem aprender a
usar um software por explorao.
Ao invs de investir tempo em
treinamento formal ou leitura de
extensivo material de apoio para
ir adquirindo conhecimento sobre
as caractersticas do software
medida que dele necessitem.
O percurso pode ser um
processo individual ou em grupo.
Usa o feedback da avaliao
para modificar ou fortalecer o
redesign.
Selecionar
Compar ar
Associar
Classificar
40
Percurso Cognitivo: fases da avaliao

Os revisores avaliam a interface proposta no
contexto de uma ou mais tarefas do usurio.
Grupo de avaliadores imaginam o que
o usurio tentaria fazer nesse ponto a
partir das aes que a interface deixa
disponveis. Se o design da interface
for bom, a inteno do usurio far
com que ele selecione a ao
apropriada e tenha conhecimento
disso.
A Avaliao composta por:
1. Fase Preparatria
2. Fase de Anlise
41
Percurso Cognitivo: fase preparatria

Nessa fase devem ser definidos:
1. O pblico alvo (quem sero os usurios?)
Qual a experincia e o conhecimento tcnico que podem
influenciar os usurios na interao com uma nova interface.
2. As tarefas a serem avaliadas

Uma ou vrias tarefas? Para sistemas complexos, a anlise
poder constituir uma razovel coleo de tarefas.
3. A seqncia de aes para cada tarefa

Definir como se espera que o usurio veja a tarefa antes de
aprender sobre a interface (pressionar Enter para mudar de
campo, acionar File antes de Imprimir)
4. O tipo de interface esperada

Definir os recursos que devem estar disponveis para cada ao
que o usurio necessitar desenvolver (tempo de resposta, cores,
temporizao, fala, interaes fsicas, etc.)
42
Percurso Cognitivo: fase preparatria

Exemplo:
1. O pblico alvo (quem sero os usurios?)
Usurios com experincia em Sistema Operacional Windows e
pacote Office.
2. As tarefas a serem avaliadas

Sero avaliadas as interfaces referentes ao cadastro de usurios e
emprstimos de livros.
3. A seqncia de aes para cada tarefa

Tarefa: emprestar livros. O usurio vai supor que para emprestar
um livro o usurio dever estar cadastrado no sistema.
4. O tipo de interface esperada

Esperase que a interface emita um aviso sonoro quando o
emprstimo for feito por usurio ainda no cadastrado ou quando
o usurio j possui mais de dois livros emprestados.
43
Percurso Cognitivo: fase de anlise

Consiste em examinar cada tarefa e pressupor
como o usurio, provavelmente, efetuar as aes
para realizla.
Objetiva contar estrias (de fracasso ou
sucesso) que informem sobre o conhecimento do
usurio e o entendimento do processo de
resoluo de problemas que leva o usurio
soluo correta.
44
Percurso Cognitivo: fase de anlise

Questes a serem analisadas:
Os usurios faro a ao correta?
Os usurios percebero que a ao correta est
disponvel?
Os usurios iro associar a ao correta com o efeito
desejado?
Se a ao correta for executada, os usurios percebero
que foi feito um progresso em relao tarefa desejada?
Explorao de problemas realizados pelo usurio:
(BaseadaemsuposiesdePolsoneLewis,1990).
1. Visualiza, de forma grosseira, a tarefa a ser realizada

2. Explora a interface e seleciona as aes que ele imagina
ser a mais adequada para efetuar a tarefa
3. Observa a reao da interface para verificar se suas aes
tiveram o efeito desejado
4. Determina qual ao efetuar a seguir.
45
Percurso Cognitivo: problemas reais

Tarefa: Desligar o Computador.
Um usurio sem experincia em uso de
computadores provavelmente no relacionaria
a tarefa de desligar o computador com o boto
Iniciar.
Os usurios
percebero
que a ao
correta est
disponvel ?
46

Tarefa: inserir nmeros de pgina.
Um usurio, mesmo com experincia em
Windows, provavelmente no relacionaria a
tarefa de inserir um nmero de pgina com o
menu Exibir Cabealho e Rodap.
Os usurios
faro a ao
correta ?
47

Tarefa: acessar email no IG.
48

Tarefa: encontrar a declarao de IR.
49
Percurso Cognitivo: coleta de dados

importante registrar todas as
informaes geradas durante a
avaliao.
recomendado que sejam

usados mtodos visuais na
avaliao em grupo, ou gravar
todo o processo de avaliao na
forma de videoteipe.
50
Cognio na Web
O conhecimento no se baseia numa ordem
seqencial, mas na associao entre idias e
conceitos, mas no modo natural de lidar com as
informaes.
Possibilidade de ter diferentes caminhos para

a explorao de informaes.
Associaes de idias / ligaes (Hipertexto).

51
Nestor: uma interface cognitiva
52
Percurso Cognitivo: concluses

O percurso cognitivo como nico mtodo de
avaliao pode conduzir o design a um forte
compromisso com a facilidade de aprendizagem.
Esse fator pode estar em desacordo com
outros aspectos mais globais da interface como,
por exemplo, o aumento de produtividade.
53
Avaliao Semitica: introduo

A semitica analisa as relaes entre uma
coisa e seu significado.
54
Avaliao Semitica: introduo

As interfaces so vistas como artefatos de meta
comunicao, atravs do qual o designer envia uma
mensagem ao usurio, contendo funcionalidade (o
que o usurio pode fazer) e interatividade (como o
usurio pode fazer).
Exemplodemensagemtextualincorreta:
Sistema:Forneaoprimeironmero
Usurio: 5.3
Sistema:Vocdeveriafornecerapenasnmerosinteiros
55
Avaliao Semitica: signos

So os elementos da interface que podem
adquirir significados para o usurio.
Qualquer coisa na interface tem o potencial de
ser um signo.
Permite ao usurio associar o signo com o objeto
real ou com a ao a ser executada.
56
Avaliao Semitica: significados
NoClicar
Informaes
Clicarpara
executar
Digitar
Selecionar
57
Avaliao pelo uso de Cores

A utilizao correta de cores nas interfaces
pode oferecer os seguintes benefcios:
Mostrar as coisas conforme so vistas na natureza
(imagens realistas)
Representar associaes simblicas
Chamar e direcionar a ATENO
Enfatizar alguns aspectos da interface
Diminuir a ocorrncia de erros
Tornar uma interface mais fcil de ser memorizada
Criar um padro para telas, garantindo maior conforto.
58

O uso incorreto das cores pode apresentar
impacto negativo sobre a interface:
Interferir na legibilidade
59

Causar fadiga nos olhos do usurio
60

Deixar o usurio confuso
61

Induzir a aes erradas, caso elementos que
no possuem nenhuma relao entre si estejam
agrupados
62

Associaes ao Branco
Neve
Pureza
Inocncia
Paz
Leveza
Limpeza
Frio
Hospital
Vulnerabilidade
Palidez fnebre
Rendio
Esterilidade
Associaes ao Preto
Noite
Carvo
Poder
Estabilidade
Formalidade
Solidez
Anonimato
Vazio
Medo
Morte
Segredo
Maldio
63

Uma cor mal aplicada pode resultar de forma
negativa em relao ao tempo de resposta do
usurio.
D.C.Brown,E.Burbano,J.Minski&I.F.Cruz.
ComputerScienceDept.,WPI,Worcester,MA01609,USA
64
Algumas regras para o uso de Cores

1. Usar no mximo cinco cores.
As pessoas se sentem mais confortveis com, no
mximo, sete cores
Com usurios novatos, o ideal o uso de quatro cores
distintas isso libera a memria de curta durao para
armazenar outras informaes.
2. Usar cores centrais e perifricas de forma

apropriada.
Se isso no ocorrer a fronteira entre elas se torna
imprecisa.
65
Algumas regras para o uso de Cores

3. Usar texto preto em fundo claro ou texto claro
em fundo escuro.
4. No usar cores fortes simultaneamente.
ver melho
amar elo
ver de
ver melho
5. Usar cores para realar avisos.
66

Mostrarascoisasconformesovistasnanatureza.
67
68
Uso de Cores: concluses

O uso de cores no implica que os
usurios aprendam mais a partir de uma
tela colorida.
O que acontece que o uso de cores
pode tornar a interface mais agradvel,
mais atraente e mais gostosa de ser usada.
Pode ajudar na reduo do tempo de
resposta.
A cor mais fcil de ser recordada.
69
Livros:
Referncias
1.DesigneAvaliaodeInterfaceshumanocomputador
HelosaVieiradaRochaM.eCecliaC.Baranauskas.
2.UsabilidadenaWebCludiaDiasEd.AltaBooks
Sites:
http://www.useit.com
http://www.baddesigns.com/
http://www.usabilidoido.com.br/
http://www.dcc.ufmg.br/~clarindo/disciplinas/eu/material/
http://www.webpagesthatsuck.com/stupidversionsofthehomepage.html
http://www.webpagesthatsuck.com/speeches.html#video
http://www.webpagesthatsuck.com/
http://www.cs.wpi.edu/~dcb/MQPs/MinskiBurbano/paper.html
Avaliaes:1.Botoback/HistorydoNetscape
2.InterfaceOculta
70

Sergio Avaliacao Interface PDF

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Sergio Avaliacao Interface PDF

Enviado por

Direitos autorais:

Formatos disponíveis

Metodologias para

Quando avaliar interfaces?

preciso avaliar a interface constantemente.

Algumas Caractersticas da avaliao

Cada usurio pode apresentar

Levantar os problemas que os

Inspeo por Checklist

Quem realiza a avaliao?

Outros exemplos: Gravando dados no arquivo...

O usurio est sendo informado sobre o processo de download.

Os usurios podem ficar

A organizao dos botes no consistente.

Usurios no precisam adivinhar que diferentes palavras ou aes

Se o usurio for inexperiente, ser difcil reconhecer ou lembrar que

Muito simplista: Erro ao gravar arquivo.

Embora seja melhor um

Heursticas de Nielsen Como Avaliar?

Heursticas de Nielsen Como Avaliar?

Heursticas de Nielsen Como Avaliar?

Heursticas de Nielsen Resultados

Heursticas de Nielsen Resultados

Heursticas Especficas Comparao

No possui qualquer tipo de

Heursticas Especficas Comparao

Dados de mesma natureza

Dados de mesma natureza

Heursticas Especficas Comparao

Os rtulos dos campos

Heursticas Especficas Comparao

No possui imagens nos

cones nos botes que

Heursticas Especficas Comparao

Heursticas Especficas Comparao

No utiliza nenhum tipo de

Utilizao de mscaras nos

Heursticas Especficas Comparao

No existe nenhum controle

Heursticas Especficas Comparao

Ao inserir um novo registro no

Ao pressionar o boto Novo,

Heursticas Especficas Comparao

Avaliao Heurstica Concluses

Percurso Cognitivo: definies

Percurso Cognitivo: definies

Percurso Cognitivo: fases da avaliao

Percurso Cognitivo: fase preparatria

2. As tarefas a serem avaliadas

3. A seqncia de aes para cada tarefa

4. O tipo de interface esperada

Percurso Cognitivo: fase preparatria

2. As tarefas a serem avaliadas

3. A seqncia de aes para cada tarefa

4. O tipo de interface esperada

Percurso Cognitivo: fase de anlise

Percurso Cognitivo: fase de anlise

1. Visualiza, de forma grosseira, a tarefa a ser realizada

Percurso Cognitivo: problemas reais

Percurso Cognitivo: problemas reais

Percurso Cognitivo: problemas reais

Percurso Cognitivo: problemas reais

Percurso Cognitivo: coleta de dados

recomendado que sejam

Possibilidade de ter diferentes caminhos para