Professor:

Geraldo Xexo, D.Sc.

DCC/IM/UFRJ
PESC/COPPE/UFRJ

Contedo:

Interface com o
Usurio

Sumrio
Entendendo o ser humano
Cores

Qualidade de interface
Princpios de desenvolvimento
Como fazer
Projeto centrado no usurio
Os usurios
As tarefas

Sumrio
Modelo Conceitual
Modal x no-modal
Prottipos de baixa fidelidade
Prototipagem rpida
Regras de Projeto
Teste com o usurio
Concluso

Fama ou Lama?

Iluses visuais
Qual a idade dessa mulher?

Professor:
Como funciona o ser
humano, sua memria
e sua percepo

Contedo:

Entendendo o
Ser Humano

Interao Homem-Computador
Humano
usurio do programa

Computador
onde o computador funciona

Interao
o usurio diz ao computador o que fazer
o computador comunica o resultado

Que fatores esto envolvidos

Tarefas

Fatores Sociais e
Organizacionais

Design
Tecnologia

Humanos

Exemplos de influncias
Tecnolgicos
uso de mouse

Tarefas influenciando humanos

repetio de uma tarefa causa
aprendizado

10

Interface com o usurio

Parte do software que permite
o usurio interagir com o computador
o usurio executar sua tarefa

O que a Interao
Homem/Computador

Um sistema no composto apenas pelo

programa de computador, mas tambm por
aqueles que se comunicam de programa,
sejam eles humanos ou outros programas.
Podemos mudar o projeto de um
computador ou de um programa, mas no
podemos mudar os seres humanos.
Precisamos compreend-los melhor!

11

Conhecendo o Ser Humano

Percepo
Sistema Cognitivo
Estruturas de Memria
Curto Prazo (MCP) (7 2 itens)
Longo Prazo (MLP)

Processamento de Informao

Sistema Motor

12

O que a Interao HomemComputador

Ler

Responder

Pensar

HOMEM

Ler

I
n
t
e
r
f
a
c
e

COMPU
TADOR

Responder

Pensar

13

14

Model Human Processor

Memria de Longo Prazo
Memria de Trabalho
Armazem de
Imagens Visuais

Armazem de
Imagens Sonoras

Olhos

Ouvidos

Processador
de Percepo

Processador
Motor
Dedos, etc.

Processador
Cognitivo

Sistema Cognitivo

MLP infinita
MLP infinita
MLP complexa
MLP complexa
Aprendizado
Aprendizado
Reconhecimento
Reconhecimento
de Padres
de Padres

15

MCP limitada
MCP limitada
MCP de pequena
MCP de pequena
durao
durao
Dado a erros
Dado a erros
Acesso a MLP no
Acesso a MLP no
confivel
confivel
Processamento Lento
Processamento Lento

A Memria de Curto Prazo

16

Rimas so difceis de diferenciar

Perdida com a menor distrao
Taxa de esquecimento aumenta
com a complexidade
com a quantidade de informao
com a semelhana (confuso?)

Nomes so melhor lembrados quando associados

a imagens do que a palavras
Idade diminui quantidade de informao

17

Ainda as Memrias
Memria de Curto prazo
6174591765 vs. (617) 459-1765
DECIBMGMC vs. DEC IBM GMC
Acesso rpido (~ 70ms)

Memria de Longo Prazo

Episdica e semntiva
muito grande (se no for ilimitada)
Acesso lento (>100ms)

Memria Sensorial!!
Ao toque, por exemplo

18

Um Modelo Lingustico
g
i
S

i
n

o
d
a
c
fi

Nvel Conceitual

Nvel Sinttico

Nvel Funcional ou Semntico

m
r
Fo

Look and Fee

Nvel Lxico

Porque a qualidade da IU
importante

19

Mais pessoas podem utilizar o computador.

Ensinar computadores sobre as pessoas, ao

invs de ensinar as pessoas sobre
computadores
Mais fcil de utilizar, mais formas de utilizar
Economia de tempo, economia de dinheiro
Mas...
O que Qualidade ?

20

Percepo
Estmulos que ocorrem muito
rapidamente podem se fundir
cinema

Causalidade (por percepo)

dois estmulos distintos podem se fundir
se o primeiro parece causar o segundo

21

Experincia
Voluntrios
Leitor
Cronometrista

Quando o slide aparecer

Diga as cores o mais rpido possvel
Quando acabar diga pronto

Professor:
Um caso especial da
interface homemcomputador

Contedo:

Cores

23

Espectro Visvel

24

O olho humano

Luz passa pelas lentes

Foco feito na retina

25

Retina
Retina coberta com receptores foto sensveis
Bastonetes
viso noturna e movimento
amplo espectro de luz
no diferencia cores
diferencia nveis de cinza

Cones
sensveis a cores

26

Retina

27

Retina
Centro da retina tem a maioria dos
cones
objetos no centro so vistos com preciso

Periferia dominada por bastonetes

deteco de movimento

28

Os Cones
Fotopigmentos usados para detectar
cor3
tipos: azul, verde, vermelho
cada um sensvel a uma banda do
espectro
outras cores por combinao

29

Sensibilidade a cores
Really yellow

from: http://www.cs.gsu.edu/classes/hypgraph/color/coloreff.htm

30

Distribuio dos fotopigmentos

No bem distribuda
muitos vermelhos (64%) e poucos azuis (4%)
insensibilidade a ondas curtas
ciano a azul escuro

alta sensibilidade a ondas longas

amarelo e laranja

Centro da retina no tem cones azuis

detalhes em azul desaparecem!

31

Sensibilidade a cor e deteco

de imagem
Mais sensvel no centro do espectro
Brilho R+G
escala de luminncia

Formas detectadas pela deteco das bordas

brilho
diferenas de cores

Implicaes:
bordas e formas azuis so piores de trabalhar

32

Quando envelhecemos
lentes amarelam e absorvem ondas curtas
vemos menos azuis

fluido entre lente e retina absorve mais luz

menos brilho

Concluso
no use azul em objetos e textos
pequenos

33

Foco
Cada freqncia de onda necessita de um
foco diferente
quanto mais precisamos mudar o foco, mais
ficamos cansados
cuidado com combinaes de cores

Vermelho parece mais perto que azul

Cores puras exigem mais foco que cores
menos saturadas

34

Daltonismo
Dificuldade em discriminar cores
afeta 9% da populao

Respostas diferentes nos fotopigmentos

dificulta diferenas de cores
principalmente de pouco brilho

Mais comum: verde e vermelho

influencia todas as cores dependentes de verde e
vermelho

35

Fama ou Lama

36

Componentes das cores

Tonalidade
sensao visual de uma freqncia de onda, a cor

Luminncia
quanta luz parece ser refletida por uma superfcie
algumas tonalidades so inerentemente mais escuras ou
mais claras

Saturao
pureza da tonalidade
vermelho mais saturado que rosa

cor uma mistura de tonalidades puras e cor acromtica

poro pura o grau de saturao

37

...
Luminncia

Saturao

38

Trabalhando com cores

Evite escolher simultaneamentes cores
altamente saturadas e em extremos do espectro
por causa do re-foco
cores de saturao fraca so melhores (pastis)

Cores opostas vo bem juntas

verde e vermelho (olha o daltonismo!)
azul e amarelo

39

Escolhas cores no adjacentes

40

...
Capacidade de detectar mudana de cor
varia
difcil para vermelhos, prpuras e verdes
fcil em amarelos e azuis-verdes

Quanto mais velho, mais brilho necessrio

Difcil focar em margens criadas apenas por
cor
use o brilho

41

...
Evite vermelhos e verdes na periferia
use amarelos e azuis

Evite texto, linhas e formas em azul

azul bom para o background
evite cores adjacentes cuja nica diferena seja o
azul

Em geral, evite que duas cores difiram apenas

na saturao de uma cor

Professor:

Contedo:

Qualidade

43

Compatibilidade com o Usurio

Designer

Designer

44

Compatibilidade entre
Produtos
Expert
Ver. 1

Manual
Manual
Ver. 2

Ver. 1

Novice
Expert

Ver. 2
Expert

Compatibilidade com as
Tarefas
Escolha Um
Grfico
Editor
Banco de Dados
Planilha

Escolha Um
Relatrio Anual
Memorandos
Plano de Vendas

45

Compatibilidade com o Fluxo

de Trabalho
Memo
Relat.

Escolha Um!!

Jun 1

Relatrio Anual
Memorandos
Agenda
Telefones

Jun 1

Memo

Relat.

46

47

Consistncia
OK!

Comando
Ilegal

Mover

OK!

Mover

OK!

Mover

Mover

48

Familiaridade
?????

Volume X
Trilha 2
Espao Y

49

Simplicidade
Memo
Espao Proporcional?
Justificao?
Qual Fonte?
Cabealho?
Quais Cores?
Mexidos ou Fritos?

Memo

Memo: entre com o texto

(Opes)

50

Manipulao Direta
Troque
Cadeia
na linha 10
por Priso

Cadeia

51

Controle
Entre com o
comando!
Comando
Ilegal!

Pronto...
Comando no
reconhecido...

52

WYSIWYG

A
B

A
A

53

Respostas e Feedback
Formatando Disco...

Formatando Disco...
30% Executado
2 min. para acabar

54

Encapsulamento da Tecnologia
Byte
Node
Trilha
Block

Escolha Um
1. Criar
2. Editar
3. Imprimir

55

Robustez
BAD FILE!!!
ABORTAR
PROGRAMA!!

Erro: registro 32
Pressione:
C para continuar
P para parar

56

Proteo
TODOS
OS
ARQUIVOS
APAGADOS

Voc confirma
o comando?
(Pressione S ou N)
UNDO

Facilidade de Aprendizado
PRONTO...

Como fazer:

57

58

Facilidade de Uso
MENU
MENU
MENU
MENU
EXPERT

NOVICE

NOVICE

Ready
>Delete X
EXPERT

59

A lista no acaba...
Produtividade
Baixa taxa de erros
Satisfao pessoal
Confiana no sucesso
...

Melhorando as Interfaces
Mudar a atitude do profissional
Conhecer a literatura de Interao
Homem/Computador
Integrar os mtodos de
desenvolvimento de Interface de
Usurio com a Metodologia de
Desenvolvimento

60

Professor:

Contedo:

14 Princpios

62

1. Levante o perfil do usurio

Saiba quem seu usurio
Antes de saber como melhorar a interface,
melhor saber para quem.
Possibilidade de criar modelos de usurio
What are the user's goals?
What are the user's skills and experience?
What are the user's needs?

Como alavancar as vantagens do usurio e criar

uma interface que o auxilie a alcanar seu objetivo

63

Perfil do usurio
Em caso de muitos usurio, crie uma
lista de contradies
velho x novo, instrudo x no-instrudo

Contate o usurio diretamente

64

2. Use (ou no) uma Metfora

Use comportamentos de sistemas
familiares aos seus usurios
Fatores a considerar
deve estar em toda a interface, no use
metforas que aparecero em apenas um lugar. Se
possvel, use-a em vrias aplicaes
Vrias metforas podem ser utilizadas
simultaneamente se no forem competitivas
Nem sempre so necessrias, pode ser mais
simples sem a metfora
No abuse da metfora
No mude o programa por causa da metfora

65

3. Exponha a funcionalidade
Deixe claro ao usurio que funes
esto disponveis
Ajude o modelo mental
Nem tudo pode precisar sem exposto
completamente
Nveis de exposio
Toolbar, Menu item, Submenu item,
Dialog box, Secondary dialog box,
"Advanced user mode, Scripted functions

66

4. Seja coerente
O comportamento do programa deve
ser consistente externa e internamente
Interna: comportamento de partes do
programa faz sentido em relao a
outras partes (no surpreenda o usurio)
Externa: o programa consistente com
seu ambiente

67

5. Demonstre o estado
Mudanas de comportamento devem
refletir na aparncia do programa
Modos devem ser distinguveis
Se um programa troca de aparncia,
deve haver uma mudana de
comportamento
Ateno a seleo atual

68

6. Providencie atalhos
Fornea meios concretos e abstratos de
realizar uma tarefa
Uma vez que o usurio comea a ficar
experiente com uma aplicao, comea tambm
a montar o seu modelo mental da aplicao
passa a prever quais sero os resultados de uma
ao especfica
olha cada vez menos para a interface antes de
realizar uma ao

Providenciando atalhos, apoiamos esse

aprendizado

69

7. Ateno ao foco
Alguns detalhes da IU atraem mais a
ateno
reas animadas atraem mais que reas
estticas
Mouse: movimento mais hbito
Cursor de texto

70

8. Tenha uma gramtica

A interface com o usurio como uma
linguagem, saiba quais so suas regras
sujeito + verbo (objeto + ao)

Duas gramticas mais comuns

ao -> objeto (interface modal)
objeto -> ao (interface no-modal)

71

9. Fornea ajuda
Entenda os diferentes tipos de ajuda
necessrios ao usurio
O que posso fazer com o programa?
O que isso? O qu isso faz?
Como fao isso?
Por que isso acontece?
Onde estou?

72

10. Proteja o usurio

Deixe o usurio desenvolver confiana
fornecendo uma rede de segurana
Cada pessoa tem um nvel de risco para o
qual se sente confortvel
Novatos se sentem estpidos (subestimam
sua prpria capacidade)
Algumas coisas no podem ser fceis
(apagar tudo que voc fez at agora)

73

11. Mantenha o contexto

Limite a atividade do usurio a um
contexto bem definido
a no ser que haja uma boa razo

Evite misturar nveis contextuais

Cuidado com as mudanas de
contexto
caixas de dilogos, por exemplo

74

12. Mantenha a esttica

Crie um programa bonito
Nunca faa algo que parea um erro
para outra pessoa

75

13. Teste com o usurio

Tenha auxlio para encontrar os
defeitos inevitveis do seu projeto
Veja como testar

76

14. Seja humilde

Escute as pessoas comuns
Olhe as pessoas usando o seu programa
Usurio e desenvolvedor vm apenas parte do
problema
uma soluo que no agrada totalmente a muitos
pode agradar o mximo possvel a todos

Um programa apenas baseado na idia do

usurio pode ser medocre
mas sua intuio no basta

Usurio tem algo mais importante a fazer que

tentar entender seu programa

77

Uma concluso geral

Voc no deve facilitar

o uso do seu
programa, mas sim
facilitar a execuo
da tarefa do usurio

Professor:

Contedo:

Como Fazer?

79

Como projetar e construir IUs

Ciclo de projeto
Projeto centrado no usurio
Anlise de tarefas
Prototipagem rpida
Avaliao
Programao
Iterao

80

Ciclo de Projeto de IU
Projeto

Avaliao

Prottipo

81

Projeto centrado no usurio

Conhea seu usurio
Habilidades cognitivas
percepo
manipulao
memria

Organizao
Habilidades dos cargos e tarefas
Mantenha os usurios envolvidos ao longo do
projeto

82

Anlise de tarefas
Observe as prticas de trabalho
Crie exemplos e cenrios baseados na
realidade
Tente as novas idias antes de
construir o software

83

Prototipagem rpida
Construa uma simulao do projeto
Tcnicas de baixa fidelidade
papel

Ferramentas de prototipagem iterativa

Visual Basic, HyperCard, Director, etc.

Construtores de interface
Powerbuilder, etc.

84

Avaliao
Teste com usurios reais
Construa modelos
Use tcnicas de baixo custo
avaliao especialista
walkthroughs

85

Programao
Pegue tudo que foi feit o e faa seu
programa

86

Iterao
Em todos os estgios!
Projete

Avalie

Prototipe

Professor:

Contedo:

Projeto Centrado
no Usurio

O que Projeto-centrado no
usurio
Desenvolvedores trabalham com os usurios-alvo
ajudam a definir o que o sistema far e como
muita explorao iterativa e feedback

Pensar o mundo nos termos do usurio

usurio e comprador no so a mesma pessoa?
No projete para o trabalho do gerente

Entenda o processo de trabalho

pontos onde humanos e computadores interagem

No seja levado pela tecnologia

88

89

Problemas
Polticos
agentes de mudana podem causar controvrsia
entenda a organizao
importante que todos comprem seu sistema

S projeto, nenhum prottipo

Faa o prottipo e avalie
Seja ITERATIVO (e no apenas interativo)

Observando o Mundo ao
Redor
Usurios
Tarefas
Processos Necessrios para as
Tarefas
Modelos de Tarefas

90

Professor:
Quem so eles?

Contedo:

Os Usurios

Tipos de Usurios

92

Novatos
Sem conhecimento sinttico
Pouco conhecimento semntico

Com conhecimento, mas usurios intermitentes

Conhecimento semntico razovel
Pequena lembrana do conhecimento sinttico
necessrio

Com conhecimento, usurios freqentes

Bom conhecimento sinttico e semntico
Sndrome do Power-User: busca de atalhos e
formas abreviadas

93

Entendendo o Usurio
Como seu usurio trabalho?
Como seu usurio pensa?
entenda a cognio humana
observe-os realizando as tarefas

Como usurios interagem com a IU?

observe!

94

Tcnicas de observao
no lugar de trabalho
cadernos de notas
gravadores e cameras

Pea para os usurios pensarem alto enquanto

trabalham
aprenda terminologia
aprenda procedimentos

Mostre suas anotaes ao usurio e pergunte

sobre elas

95

O que eles dizem

?
muito difcil
Voc no tem os passos na ordem que
fazemos
No leve os comentrios de forma pessoal
O objetivo que o sistema seja fcil de usar

96

Fama ou Lama

E se o disco for grande?

E se no souber o tamanho do disco?

Professor:
O que nossos usurios
fazem e como eles
fazem

Contedo:

As Tarefas

98

Fama ou Lama?

99

Perguntas
Quem vai usar o sistema?
Que tarefas executam agora?
Que tarefas so desejadas?
Como as tarefas so aprendidas?
Onde as tarefas so realizadas?
Qual a relao entre usurio e dados?

100

...
Que outras ferramentas tem o usurio?
Como usurio se comunicam?
Qual a freqncia da realizao da tarefa?
Quais so as restries de tempo da
tarefa?
O que acontece se as coisas forem
erradas?

101

Quem?
Identidade?
Usurios internos so fceis de caracterizar
Quanto mais amplo o produto, mais usurios tpicos
so necessrios

Background
Capacidades
Hbitos de trabalho e preferncia
Caractersticas fsicas
peso?

102

Converse com eles

Ache usurios reais
Converse com eles
o que eles fazem
como seu sistema se encaixa

Eles esto muito ocupados?

Compre o interesse
camisetas, etc...

103

Que tarefas?
Importantes pela automao e pela
nova funcionalidade
Importncia relativa das tarefas
Observe o usurio
descontentamentos
desvios do padro (anotaes extras,
etc)

Como as tarefas so
aprendidas?

O que o usurio precisa saber?

Ele precisa de treinamento
acadmico
geral
especial

104

105

Onde a tarefa realizada?

Escritrio,
laboratrio, ponto de
venda
Efeitos do
ambiente
Stress
Confidencialidade

Mos sujas,
suadas?
Bebidas?
Iluminao?
Barulho?

106

Qual a relao entre usurios e

dados?
Dados pessoais

sempre na mesma mquina?

Usurios movem entre mquinas?

Dados comuns
usados concorrentemente?
Usados sequencialmente?

Dados remotos?
Dados restritos?

107

Outras ferramentas?
Mais que compatibilidade
Como o usurio trabalha com uma
coleo de ferramentas

108

Como se comunicam?
Quem se comunica com quem?
Sobre o que?
Seguem as linhas da organizao?
Vo contra elas?

109

Freqncia?
Usurios frequentes lembram de mais
detalhes
Usurios infrequentes necessitam de mais
ajuda
mesmo nas operaes mais simples

Que funo executada

mais frequentemente?
por quais usurios
otimizando o sistema para essas tarefas dar uma
imagem de bom desempenho

110

Quais as retries de tempo?

Onde o usurio tem pressa?
O que pode esperar?

111

Se as coisas derem erradas?

Como as pessoas lidam com
erros relacionados a tarefas
dificuldades prticas
catstrofes

Backup?

112

Selecionando tarefas
Tarefas reais que usurios j realizaram
colete o material necessrio

Tente cobrir razoavelmente o sistema

compare com lista de funes a executar

Misture tarefas simples e complexas

Mais tarde
descarte caractersticas que no apoiam suas tarefas
tenha uma tarefa real que exercite cada caracterstica

Como as tarefas devem

parecer?

113

Dizem o que o usurio quer fazer, mas

no como
permite comparar alternativas de projeto

Devem ser bastante especficas

Devem descrever completamente um
trabalho

114

...
Descreve de onde vm as entradas
Quem so os usurios
projeto pode mudar
se possvel, d nomes

115

...
Refletem interesses de usurios em potencial
Usurios no esto sempre certos
no conseguem prever a tecnologia

O usurio deve desejar o sistema construdo

Se voc no consegue deixar o usurio
interessado em uma idia quente, voc no est
entendendo algo

116

Usando a tarefa no projeto

Escreva uma descrio da tarefa
formal ou informal
feita pelos usurios junto com a equipe de desenv.

Faa um rascunho da interface

tela principais e funes (sem detalhe)
a mo

Faa cenrios para cada tarefa

o qeu o usurio deve fazer e o que vai ver
execuo passo-a-passo (chins)

117

Cenrios
Cenrios esto ligados especificamente ao
projeto, as tarefas no
Obrigam que
discutamos como as coisas vo funcionar juntas
decidamos questes de projeto

Storyboard
seqncia de desenhos
simulao da resposta as aes do usurio

118

Storyboards

Tarefas
Tarefas de Comunicao
Tarefas de Dilogo
Tarefas Cognitivas
Tarefas de Controle

119

120

Processos necessrios para as

tarefas
Transporte

Transformao
Tomada de Deciso
Algoritmica
Baseada em Julgamento

Correlao de Informao
Anlise de Informao
Comunicao
Criao de Informao

Anlise de cada Tarefa

121

Estabelecer os objetivos e intenes

da tarefa
Mapear cada objetivo ou inteno para
uma sequncia especfica de aes
Especificar a sequncia de aes a ser
executada no nvel de interface
Indicar o estado do sistema, i.e., como
a interface est quando as aes so
executadas

122

Definir os mecanismos de controle

Mostrar como os mecanismos alteram
o estado
Indicar como o usurio interpreta o
estado do sistema a partir das
informaes dadas pela interface

Professor:
Crie um modelo
conceitual e
desenvolva prottipos

Contedo:

O Projeto

Professor:

O Modelo Conceitual

Contedo:

Modelo Conceitual

125

Usurios respondem ao sistema de forma ativa.

Sistemas so compostos de partes e processos.
Se uma parte ou processo est invisvel, o
usurio cria um modelo mental para represent-lo.
Logo, um modelo mental inclui hipteses e
teorias sobre as partes e processos invisveis em
um sistema e como eles se relacionam com as
partes e processos visveis no sistema.

126

Modelo Conceitual
Representao mental de como os objetos
funcionam e como a interface os controla
Alguns modelos pr-concebidos podem ser
impossveis de serem alterados
calculadores HP vs. resto do mundo
jogar no lixo apaga o arquivo

A interface deve comunicar o modelo

help pode ajudar, mas no deve ser necessrio

Exemplo de Modelo Mental

Proprietrio de um carro
tanque de gasolina, chave, motor,
marchas, leo, gua...

127

Exemplo de Modelo Mental

128

Proprietrio de um carro
- tanque de gasolina, chave, motor, marchas,
leo, gua...

Mecnico
viso mais completa e especializada do
automvel

Os Usurios
Formam objetivos
Formam intenes
Formam expectativas
Fazem inferncias
Fazem e testam predies
Cometem erros

129

O Modelo Mental

130

o estado atual de conhecimento do usurio,

tanto sobre fatos como sobre procedimentos.
Usurios sempre possuem e modificam seu
modelo mental, qualquer que seja o projeto do
sistema.
O objetivo de produzir uma interface ...

Facilitar o processo de
desenvolvimento de um modelo
mental eficiente.

Projetando o Modelo
Conceitual

131

Faa partes e processos

invisveis se tornarem visveis
D feedback
Construa com consistncia
Apresente as funcionalidades por
uma metfora familiar

Exemplos de Modelos
Conceituais
Mesa de Trabalho
Arquivo de Cartes
Agenda
Mapas
Modelos 3D

132

Exemplo de Modelo
Conceitual:
Reserva de lugar

133

134

Dicas visuais
Objetos bem projetados do dicas
visuais do seu funcionamento
Objetos mal desenhados no do essa
dica ou do dicas falsas

135

Refrigerador
freezer

geladeira

Problema: freezer muito frio, geladeira ok

136

Controles

A B C D E

5 4

Qual o seu modelo conceitual?

137

Ser esse?
A B C D E

7 6

5 4 3

Controles independentes

cooling
unit

cooling
unit

138

O correto
7 6

5 4 3
cooling
unit

A B C D E

Como consertar o problema?

139

Modelo de Projeto e Modelo de

Usurio
Modelo de
Usurio

Modelo de
Projeto
Imagem do
Sistema

Usurios criam seu modelo a partir do uso e experincia

pela imagem do sistema

E se os dois modelos no casarem?

140

Fama ou Lama?

Explorando Metforas
Professor:
Construindo a arquitetura da informao a partir de uma metfora: o
passo inicial

Contedo:

142

O que uma Metfora

uma figura de discurso onde o
contexto ou frase no deve ser tomado
literalmente
uma comparao

143

Tipos de Metfora
Organizacional
utilizam a familiaridade com a estrutura da
organizao

Funcional
fazem uma conexo entre as tarefas
executadas no mundo real e no mundo virtual

Visual
usam elementos grficos familiares

144

Metfora Organizacional
Concessionria de Carros
Exposio
Vendedores
Partes e Peas
Manuteno

145

Metfora Funcional
Biblioteca
Passeie pelas
prateleiras
Consulte um
catlogo
Retire um livro
Pea uma
informao

146

Metfora Visual
Lista Telefnica
Pginas brancas - telefones pessoais
Pginas amarelas - telefones comerciais

Tpica de cones
Cuidado!

147

Brainstorm!
Reunio de livre pensar
No so admitidas crticas
Coleciona-se solues
Voto por eliminao, diminuindo o
conflito

148

Reviso Crtica
Estude a metfora
Popule a arquitetura em alguns pontos
para ver como fica
Cuidado: em muitos casos, metforas
dificultam a usabilidade

Professor:

Modal x No-modal
Contedo:

150

Int. com usurio Modal

Modal?
Aes tem significados diferentes
dependendo do estado atual da aplicao

Examplos de interfaces
modais?
Algumas caixas de dilogo
vi
modo de comando x modo de insero

151

152

Problemas com IUs Modais?

Erros de modo
voc pensa que esta em um modo e est
em outro

Modo esconde a funcionalidade que

desejamos
Mudar de modo pode ser vagaroso

153

Ius Modais so ruins?

No necessariamente
podem fazer um iu muito grande parecer
mais fcil de usar
precisamos de menos comandos
modo iniciante

S mal se feito errado

Caixas de dilogo modais
Modos que no so visveis

Professor:

Contedo:

Prottipo de baixa
Fidelidade

155

Porque prottipos
Feedback rpido do projeto
diminui custos

Experimento com projetos alternativos

Corrige problemas antes que
apaream
Mantm o projeto centrado no usurio

156

Fidelidade na prototipao
o nvel de detalhe
Baixa fidelidade
falta de detalhes
construo manual

157

Porque usar BF
mtodos tradicionais podem levar
muito tempo
elimina a programao

Pode simular o prottipo

No precisa de muitos conhecimentos
no programadores podem participar

158

Crtica a Alta-fidelidade
Testador acha que o produto final
comenta nos detalhes

Perde-se a viso global

Tempo gasto no acerto de detalhes
Afeta a criatividade

159

O Bsico
Papel largo, branco
Cartes grande
tesoura, cola, fita adesiva, corretivo
canetais e marcadores de vrias cores
e tamanhos

160

Construindo o Modelo
Determine um cronograma
no pense muito tempo, faa

Desenhe uma janela no papel grande

regies da tela em cartes
tudo que se move, aparece e desaparece

Tenha a resposta para qualquer ao do usurio

menus prontos

Use a copiadora para ter mais de uma verso

161

162

Testando com o usurio

Selecione o usurio
entenda o background
busque usurio com questionrio

Prepare os cenrios
descreva o uso do programa
faa o prottipo suportar isso

Evite os bugs com a prtica

163

Conduzindo o teste
4 testadores
recepcionista - recebe o usurio e o deixa a
vontade
facilitador - nico que fala
d instrues e encoraja opinies

Computador - executa o prottipo

observador - toma notas

Sesso tpica: 1 hora

164

...
Recepo
preencha os formulrios, garanta segredo, ...

Teste
tarefas entregues escritas ao usurio
claras e detalhadas
pensar alto

sem risadas!

Finalizao
faa perguntas, obtenha impresses
agradea

165

Avaliando resultados
Ordene e coloque em ordem de
prioridade as observaes
muitos problemas numa mesma rea?

Faa um relatrio escrito dos achados

Faa as mudanas e interaja

166

Vantagens
Poucas horas
Pouco equipamento, e barato
Mltiplas alternativas rapidamente
Iteraes rpida
Nmero de iteraes est ligado a
qualidade final

Quase tudo pode ser imitado

167

No incio: explorar/informal
Brainstorming
considere idias rapidamente
d uma forma as idias

Projetos incompletos
no cobrem todos os casos
ilustram os conceitos mais importantes

Apresente muitos projetos

168

Fama ou Lama?

Professor:

Contedo:

Prototipagem
rpida

170

Problemas com BF
No do muito certo na tela (realismo da
implementao)
Tempo no real
Algumas coisas no podem ser simuladas
brilhos

Outros?
Mouse, teclado, etc

171

Prottipos?
Teste da idia no ambiente
computacional
Ainda muito cedo para construir a
aplicao
O ideal uma ferramenta de
prototipagem

172

Prototyping Tools
Director
usada por designers
para multimedia -> no tem widgets
Boa para IU sem widgets
Boa para simular comportamento

HyperCard ou Toolbook
metfora:transio de tela ao clicar
com widget
Tem linguagens de script

173

UI Builders
Visual Basic
NeXT UIB
SpecTCL
PowerBuilder...

174

Diferena?
Desempenho
Widgets
Modelagem do comportamente

175

Widgets
Buttons (several types)

Scroll bars and sliders

Pulldown menus

176

Widgets (cont.)
Palettes
Dialog boxes

Windows e muito mais...

Professor:

Regras de Projeto
Contedo:

Slogans
(de Nielsens Usability Engineering)

Seu melhor palpite no bom suficiente

O usurio est sempre certo
O usurio no est sempre certo
Usurios no so projetistas
Projetistas no so usurios
Menos mais
Detalhes importam

178

179

Regras de Projeto
Regras a sere, seguidas
Aplicadas em vrios nveis de projeto
No devem ser ignoradas quando a data
de entrega se aproxima
Incompletas e correlacionadas

180

Regras bsicas
Siga princpios de projeto grfico
Use as convenes da linguagem
Minimize o uso da memria de curto prazo
D feedback
Previna erros
Permita a correo de erros
Use um modelo conceitual razovel

181

Projeto Grfico
Chama a ateno do usurio de forma apropriada?
Use cor e layout

Preto em preto!
No devia ter um rtulo para avisar que um boto

182

...
Grupo objetos relacionados
Alinhamento e espaamento
Decoraes

Balano e espao em branco

Poucas fontes e cores
Lembre dos daltnicos

183

Fale a linguagem do usurio

Use palavras comum, no use jargo
Referencie objetos do usurio no feedback
Permite nomes completos
Evite converses espao-linguagem
duas partes diferentes do crebro

184

Menos mais
Mantenha simples
Linguagem concisa

Prob
le

Evite imagens e informao inteis

menus opes e escolhas de menu

ma?

185

Diminua a carga cognitiva

Memria de curto prazo
capacidade of 7+-2; decaimento of 30 seg. to 2 min.

Reconhecer, no lembrar
Menus em vez de digitao
Prompts fornecem formatos
No exija redigitar informao
Regras genricas
cut/copy/paste

186

Seja consistente
Tamanho, cor, palavras, posio, ordem.
Evite casos especiais e regras complexas
Mesmo comando, mesmo efeito
Sigue os padres
e.g., Cut/Copy/Paste

permite o usurio generalizar

187

Consistncia lxica
Seja consistente com a usagem comum
vermelho = ruim, Verde = bom (*)
esquerda=menos , direita=mais

Abreviaes consistentes
tamanhos iguais

Nomes mnemnicos e no cdigos

Dispositivos no mudam de funo
delete sempre a mesma tecla

188

Consistncia sinttica
Mensagens de erro sempre no mesmo
local
Objeto-Ao ou Ao-Objeto, nunca
misture
Itens de menu sempre no mesmo local

189

Consistncia semntica
Comandos globais sempre disponveis
ajuda
interrompa
desfaz

Operaes vlidas sempre que

razovel
X pode ser duplicado, Y tambm pode

190

Feedback Lxico
Movimento do cursor
Eco do keybord
Intensificao da seleo

191

Feedback Sinttico
Teste da validade da palavra sendo
digitada
Brilho da opo do menu que est
sendo escolhida

192

Feedback Semntico
Comando compreendido
repetir o comando

Comando em execuo
barra de progresso
contagem regressiva

193

...
Comando completo
resultados
prompt para o prximo comando
Unix: silncio significa OK

Nem sempre os 3 so necessrios

194

Localizao do Feedback
Onde esto os olhos
ponto de insero
cursor

Audio
quando pode no ser uma boa idia?

195

Prevenindo erros
Porque ?
Evita o medo do fracasso
permite acelerar o trabalho

Considere
posio do comando
distncia de outros comandos

Suprima comandos no disponveis

Confirme aes irreversveis

196

Correo de erros
Lxica
erros de digitao

Sinttica
re-especifique apenas o parmetro errado
re-inicie o comando do incio

Semntico
interromper
desfazer

197

Teste?
Controle deve imitar o mundo real
O que melhor para o balano das
caixas de som?

198

Fama ou Lama?

199

O Layout?
Posio dos widgets na janela
O que acontece quando a janela muda
de tamanho

200

Como no fazer layout

Antes

Depois

201

Maus exemplos

Netscape

xv

202

Caixas de dilogo pequenas

Netscape

203

Dependncia de plataforma

Windows 95

Motif

204

Modelos de Layout
Posio fixa
Visual Basic

Molas e
NeXTStep, SUIT
Tk packer (sort of)

Intrinsic Size + Variable Intrinsic Size

InterViews, Fresco

Mostrando Informao

205

Mostre apenas a informao relevante

no contexto
No afogue o usurio com dados
Use rtulos e abreviaes consistentes
Use cores previsveis

206

...
Reduza a quantidade de dados a serem
memorizados entre aes
Seja eficiente no uso de dilogos,
movimentos e pensamento
Categorize atividades por funes e
divida a tela
Oferea help
Use frase e nomes simples

207

...
Facilite a manuteno de um contexto visual
Produza mensagens de erro significativas
Use as caractersticas das fontes de
caracteres
Use janelas para separar informao
Use dispositivos analgicos para representar
informao

Entrada de Dados

208

Minimize o nmero de aes requeridas

do usurio
Mantenha a consistncia entre a
informao mostrada e os dados entrados
Permita a individualizao da entrada de
dados
Seja flexvel

209

...
Desative comandos no apropriados
no contexto
Deixe o usurio controlar o fluxo
Elimine entradas de dados idiotas
Fornea help

Tipos de Interaes no
Windows
Manipulao Direta
Menus
Formulrios

210

Manipulao Direta

211

Fcil de aprender e relembrar

WYSIWYG
Flexvel
Aes facilmente reversveis
Explora o uso de dicas visual-espaciais
Pode ser ineficiente

Quando utilizar manipulao

direta
Usurio

atitude negativa
motivao baixa

Conhecimento e Experincia
digitao fraca
experincia moderado com o sistema e com a
aplicao
grande experincia com a tarefa
pouco conhecimento de computadores

212

213

...
Caractersticas das Tarefas
uso espordico e discreto
treino moderado
baixa importncia e pouca estrutura na
tarefa

214

Manipulao Direta: Princpios

e Dicas
Minimizar distncia semntica

Dar feedback visual para posio, seleo e

movimento
Dar feedback fsico para modos
Dar alternativas para usurios experts
Utilizar cones consistentes, familiares e
concretos, alm de visualmente distintos
Seguir princpios bsicos de projeto de tela

Menus
Auto-explanatrios
Fceis de lembrar
Economizam digitao
Facilitam o controle de erros
Melhorias so rapidamente visveis
Ineficientes quando em hierarquias
Inflexveis

215

Menus: quando utilizar

Usurio
atitude negativa
motivao baixa

Conhecimento e experincia
Digitao fraca
Pouca experincia com o sistema, com a
tarefa e com a aplicao
Pequeno conhecimento de comutadores

216

217

...
Caractersticas das tarefas
Estruturadas
Pouco importantes
Baixa frequencia de uso

Menus: Prncipios e Dicas

218

Casar a estrutura do menu com as estruturas das

tarefas
Providencias meios para individualizar a estrutura do
menu
Diminuir profundidade das hierarquias
Apresentar opes verticalmente
Apagar ou acinzentar opes no permitidas
Ser conciso
Providenciar defaults

Formulrios

219

Auto-explanatrios
Requerem pouca memria
Bom uso da tela
Acomoda parmetros com muitos valores possveis
Melhorias so visveis
Assume conhecimentos
Permite erros
Inflexveis

220

Formulrios: quando utilizar

Usurio
atitude negativa a moderada
Motivao baixa a moderada

Conhecimento e Experincia
Boa digitao
Pouca ou moderada experincia com o sistema
Moderada ou alta experincia com a tarefa
Baixa ou moderada experincia com a aplicao

221

...
Tarefas
Alta ou moderada frequncia
Pouco treino
Importncia moderada
Estruturadas

222

Formulrios: Princpios e Dicas

Projete de acordo com a tarefa
Organize em grupos semnticos
Balanceie com espaos em branco
Utilize separadores
Use descritores de campos
Indique campos opcionais e obrigatrios
Evite regras complexas
Fornea defaults
Faa as reas protegidas realmente
inacessveis

Projetando Telas
Projeto geral
Textos
Nmeros
Codificao
Cor

223

Projeto Geral

224

S inclua a informao essencial para tomada de

decises
Inclua toda a informao essencial para a tomada
de decises
Inicie no canto superior esquerdo
Siga o guia de estilo
Grupe os itens logicamente
Fornea simetria e balano com o uso de espaos
em branco

Projeto Geral
Evite o uso de todas as letras em
maisculas
Torne rtulos e campos distintos (no
os confunda)

225

Textos
Mensagens
Avisos
Instrues

226

227

Mensagens
Seja conciso
Projete o nvel de detalhe de acordo com a
experincia do usurio
Utilize a forma afirmativa
Seja construtivo, no seja crtico
Seja especfico e claro
Indique implicitamente que o usurio tem o controle
Quando exigir uma ao, deixe isso claro

Avisos (Prompts)
Utilize quando e onde forem necessrios
Projete de acordo com a experincia do
usurio
Use a voz ativa
Evite negaes
Organize-os cronolgicamente
Use formatao
Seja consistente

228

Instrues

229

Seja simples e claro

use sentenas com palavras familiares
mantenha os pargrafos curtos
Limite as linhas a 50 ou 55 caracteres
Evite hfens
Evite justificar a direita ou espaos desbalanceados
Evite linhas com menos de 26 caracteres
Use espao entre linhas igual ou levemente maior
que o tamanho dos caracteres (1,2 vezes!)

Nmeros
Justifique pela direita
Alinhe pela vrgula decimal
Evite zeros na frente
Quando muito longo, quebre em
grupos de 3 dgitos
Indique a unidade

230

Codificao

231

Utilize tcnicas para gerar ateno de

forma apropriadas
piscar: chamar a ateno quando o olhar
deveria estar em outro ponto
negrito: fazer itens, como ttulos, aparecerem.
Use como ponto de referncia em uma tela
vdeo reverso: ponto de referncia
tamanho: facilita a busca

232

...
fonte: chamar ateno, facilitar busca
proximidade: indica associao de idias
linhas: criam grupos
formas: como sinais de trnsito. Fornecem
significados associados

Cores

233

Cuidado com daltonismo

Use com economia
Use para chamar ateno
Use para indicar status ou relacionamentos
Use para auxiliar buscas
Tenha sempre uma outra forma de indicar a mesma
informao
Assegure-se de utilizar brilho e saturao diferente,
alm da cor

Cores
Seja consistente com sua cultura
verde: ok, siga, tudo certo
vermelho: perigo, pare, quente, perda,
emergncia
amarelo: ateno, morno, perigo
azul: frio, desligado

234

235

...
Use ao mximo oito cores distintas e
bem espaadas
De preferncia a um mximode 4 cores
Utilize legenda se as cores forem
muitas ou no bvias
Evite cor em itens muito pequenos

236

Cores
Ateno a escolha de cores de
fundo e de frente
Lembre-se que cores afetam a
resoluo
Cores quentes aumentam o
tamanho
Cores frias diminuem o tamanho

237

...
Use contrastes para indicar diferenas
Considera ngulo e distncia do
usurio
Cuidado com uso pesado de contraste,
saturao e oposies de cores
Use brilho para enfatizar
Use escuros para desenfatizar

Padres Windows

238

Menus Padronizados
File, Edit, ..., Help

Barra de cones em cima (agora em

3D)
Barra de status em baixo
Barras de rolagem a direita e em baixo

239

...
Rguas em cima e a esquerda
Pergunta se salva antes de fechar
Sim salva, No no salva, Cancela
no fecha

Aceleradores padronizados
Cores e sons configurveis

Professor:

Contedo:

Teste com o
Usurio

Porque fazer teste com o

usurio?

241

No podemos saber se a interface boa at

que algum use
Outros mtodos so baseados em
avaliadores:
podem saber de mais
podem saber de menos

Em resumo:
difcil predizer o que usurios reais faro

242

Envolvendo o usurio
Usurio ajudam equipe a aprender
o que est envolvido no seu trabalho
que ferramentas ele usam
o que eles fazem

Desenvolvedores revelam capacidades tcnicas

construo do respeito mtuo
idia do possvel

Prototipagem, teste e mudana incrementais

243

Escolhendo participantes
Representam os usurios em funo
funo e conhecimento
tarefas

Se no pode ter usurios, use uma

aproximao
estudantes do assunto

Use incentivos para conseguir participantes

244

tica
Algumas vezes os testes podem ser
estressante
usurios podem at chorar (embaraados pelos
erros)

sua responsabilidade evitar isso

evite a presso para participar
use voluntrios
avise que eles podem parar se necessrio
faa os dados coletados serem annimos
Enfatize que o sistema que est em teste
no eles

245

Propostas de teste
Objetivo
Descrio do sistema
Ambiente e materiais da tarefa
Participantes
Metodologia
Tarefa
Medidas

246

Selecionando tarefas
Devem refletir as tarefas reais
Podem ser tiradas da anlise e projeto
podem ser modificadas se:
levam muito tempo
exigem algo que o usurio no saiba

Evite escolher as tarefas que seu sistema faz

melhor
No escolha tarefas muito fragmentadas

247

Decidindo que dados obter

Dois tipos de dados
dados do processo
observaes de que os usurios esto fazendo
e pensando

Dados bsicos
sumrio do que acontecei
tempo
erros
sucessos

Processo x Bsicos

248

Primeiro use o processo

do uma viso melhor dos problemas

Dados bsicos no te dizem o que

concertar, apenas identificam problemas
Dados bsicos podem variar muito
com usurio

249

Mtodo Pensando alto

Precisamos saber no s o que o usurio
faz, mas o que pensa
Solicite que o usurio
diga o que est pensando
diga o que planeja fazer
diga que questes desejaria fazer
diga o que est vendo e lendo

Faa uma gravao ou anotaes muito boas

250

pensando alto
Mantenha o usurio falando
o que voc est tentando fazer?

Ajude apenas em itens pr-decididos

anote todas suas ajudas

Use um relgio digital

Tome notas de qualquer maneira
grave ou filme se possvel

251

Usando os resultados
Faa um resumo dos dados
lista de todos incidentes crticos (IC)
positivos e negativos

Inclua referncia a outras partes e outros testes

Tente julgar o motivo das dificuldades

O que os dados te dizem?
A interface funcionou do jeito pensado?
Perdemos alguma coisa?

252

usando resultados
Atualize a anlise de tarefas e repense o
projeto (de interface)
de uma grau de severidade e facilidade para cada
IC
modifique IC fceis e difceis

Pensar alto d as respostas certas

nem sempre
se voc faz uma pergunta, sempre ter uma
resposta, mesmo que no tenha relao que os
fatos
evite respostas especficas

253

Raking de Gravidade
Usado para alocar recursos para resolver
problema
Indica a necessidade de esforos de
usabilidade
Combinao de
freqncia
impacto
persistncia

254

...
0 - no um problema
1 - problema cosmtico
2 - problema menor
3 - problema grave, deve ser consertado
4 - catstrofe, conserto imprescindvel

255

Concluso
Devemos seguir padres
Devemos atender as necessidades do usurio
quais so essas necessidades?
Como podemos colaborar?

Devemos respeitar as limitaes do usurio

Devemos pesquisar solues melhores para o
usurio
Devemos facilitar a execuo das tarefas do
usurio

256

Concluso
Seres humanos so muito mais complexos que
programas de computador. muito mais fcil
mudar o comportamento de um programa de
computador que o comportamento do ser
humano
Programas de computador que ofendem de
alguma forma as capacidades dos seres
humanos, sejam elas objetivas ou subjetivas,
esto fadados ao fracasso

257

Concluso
necessrio trocar o crena na
tecnologia pela crena no usurio. Nada
mais importante que fornecer uma soluo
que no s atenda as expectativas do
usurio, mas que possivelmente as
superem, tornando a tarefas mais fceis,
mais rpidas e mais agradveis de serem
realizadas