Anda di halaman 1dari 257
Professor: Geraldo Xexéo, D.Sc. DCC/IM/UFRJ PESC/COPPE/UFRJ Conteúdo: Interface com o Usuário
Professor:
Geraldo Xexéo, D.Sc.
DCC/IM/UFRJ
PESC/COPPE/UFRJ
Conteúdo:
Interface com o
Usuário
2 Sumário Entendendo o ser humano Cores Qualidade de interface Princípios de desenvolvimento Como fazer Projeto
2
Sumário
Entendendo o ser humano
Cores
Qualidade de interface
Princípios de desenvolvimento
Como fazer
Projeto centrado no usuário
Os usuários
As tarefas
3 Sumário Modelo Conceitual Modal x não-modal Protótipos de baixa fidelidade Prototipagem rápida Regras de Projeto
3
Sumário
Modelo Conceitual
Modal x não-modal
Protótipos de baixa fidelidade
Prototipagem rápida
Regras de Projeto
Teste com o usuário
Conclusão
4 Fama ou Lama?
4
Fama ou Lama?
5 Ilusões visuais Qual a idade dessa mulher?
5
Ilusões visuais
Qual a idade dessa mulher?
Professor: Como funciona o ser humano, sua memória e sua percepção Conteúdo: Entendendo o Ser Humano
Professor:
Como funciona o ser
humano, sua memória
e sua percepção
Conteúdo:
Entendendo o
Ser Humano
7 Interação Homem-Computador Humano usuário do programa Computador onde o computador funciona Interação o usuário diz
7
Interação Homem-Computador
Humano
usuário do programa
Computador
onde o computador funciona
Interação
o usuário diz ao computador o que fazer
o computador comunica o resultado
8 Que fatores estão envolvidos Tarefas Design Tecnologia Humanos
8
Que fatores estão envolvidos
Tarefas
Design
Tecnologia
Humanos

Fatores Sociais e Organizacionais

9 Exemplos de influências Tecnológicos uso de mouse Tarefas influenciando humanos repetição de uma tarefa causa
9
Exemplos de influências
Tecnológicos
uso de mouse
Tarefas influenciando humanos
repetição de uma tarefa causa
aprendizado
10 Interface com o usuário Parte do software que permite o usuário interagir com o computador
10
Interface com o usuário
Parte do software que permite
o usuário interagir com o computador
o usuário executar sua tarefa
11 O que é a Interação Homem/Computador Um sistema não é composto apenas pelo programa de
11
O que é a Interação
Homem/Computador
Um sistema não é composto apenas pelo
programa de computador, mas também 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 não
podemos mudar os seres humanos.
Precisamos compreendê-los melhor!
12 Conhecendo o Ser Humano Percepção Sistema Cognitivo Estruturas de Memória Curto Prazo (MCP) (7 ±
12
Conhecendo o Ser Humano
Percepção
Sistema Cognitivo
Estruturas de Memória
Curto Prazo (MCP) (7 ± 2 itens)
Longo Prazo (MLP)
Processamento de Informação
Sistema Motor
13 O que é a Interação Homem- Computador Responder Ler I n t Pensar e COMPU
13
O que é a Interação Homem-
Computador
Responder
Ler
I
n
t
Pensar
e
COMPU
Pensar
HOMEM
r
TADOR
f
a
c
e
Ler
Responder
14 Model Human Processor Memória de Longo Prazo Memória de Trabalho Armazem de Imagens Visuais Armazem
14
Model Human Processor
Memória de Longo Prazo
Memória de Trabalho
Armazem de
Imagens Visuais
Armazem de
Imagens Sonoras
Olhos
Processador
Processador
Processador
Motor
Cognitivo
de Percepção
Ouvidos
Dedos, etc.
15 Sistema Cognitivo MLP infinita MLP infinita MCP limitada MCP limitada MLP complexa MLP complexa MCP
15
Sistema Cognitivo
MLP infinita
MLP infinita
MCP limitada
MCP limitada
MLP complexa
MLP complexa
MCP de pequena
MCP de pequena
Aprendizado
Aprendizado
duração
duração
Reconhecimento
Reconhecimento
Dado a erros
Dado a erros
de Padrões
de Padrões
Acesso a MLP não é
Acesso a MLP não é
confiável
confiável
Processamento Lento
Processamento Lento
16 A Memória de Curto Prazo Rimas são difíceis de diferenciar Perdida com a menor distração
16
A Memória de Curto Prazo
Rimas são difíceis de diferenciar
Perdida com a menor distração
Taxa de esquecimento aumenta
com a complexidade
com a quantidade de informação
com a semelhança (confusão?)
Nomes são melhor lembrados quando associados
a imagens do que a palavras
Idade diminui quantidade de informação
17 Ainda as Memórias Memória de Curto prazo 6174591765 vs. (617) 459-1765 DECIBMGMC vs. DEC IBM
17
Ainda as Memórias
Memória de Curto prazo
6174591765 vs. (617) 459-1765
DECIBMGMC vs. DEC IBM GMC
Acesso rápido (~ 70ms)
Memória de Longo Prazo
Episódica e semântiva
muito grande (se não for ilimitada)
Acesso lento (>100ms)
Memória Sensorial!!
Ao toque, por exemplo
18 Um Modelo Linguístico Nível Conceitual { Nível Funcional ou Semântico Significado Nível Sintático { }
18
Um Modelo Linguístico
Nível Conceitual
{
Nível Funcional ou Semântico
Significado
Nível Sintático
{
}
“Look and Fee
Nível Léxico
Forma
19 Porque a qualidade da IU é importante Mais pessoas podem utilizar o computador. Ensinar computadores
19
Porque a qualidade da IU é
importante
Mais pessoas podem utilizar o computador.
Ensinar computadores sobre as pessoas, ao
invés de ensinar as pessoas sobre
computadores
Mais fácil de utilizar, mais formas de utilizar
Economia de tempo, economia de dinheiro
Mas ...
O que é Qualidade ?
20 Percepção Estímulos que ocorrem muito rapidamente podem se fundir cinema Causalidade (por percepção) dois estímulos
20
Percepção
Estímulos que ocorrem muito
rapidamente podem se fundir
cinema
Causalidade (por percepção)
dois estímulos distintos podem se fundir
se o primeiro parece causar o segundo
21 Experiência Voluntários Leitor Cronometrista Quando o slide aparecer Diga as cores o mais rápido possível
21
Experiência
Voluntários
Leitor
Cronometrista
Quando o slide aparecer
Diga as cores o mais rápido possível
Quando acabar diga “pronto”
Professor: Um caso especial da interface homem- computador Conteúdo: Cores
Professor:
Um caso especial da
interface homem-
computador
Conteúdo:
Cores
23 Espectro Visível
23
Espectro Visível
24 O olho humano Luz passa pelas lentes Foco é feito na retina
24
O olho humano
Luz passa pelas lentes
Foco é feito na retina
25 Retina Retina coberta com receptores foto sensíveis Bastonetes visão noturna e movimento amplo espectro de
25
Retina
Retina coberta com receptores foto sensíveis
Bastonetes
visão noturna e movimento
amplo espectro de luz
não diferencia cores
diferencia níveis de cinza
Cones
sensíveis a cores
26 Retina
26
Retina
27 Retina Centro da retina tem a maioria dos cones objetos no centro são vistos com
27
Retina
Centro da retina tem a maioria dos
cones
objetos no centro são vistos com precisão
Periferia dominada por bastonetes
detecção de movimento
28 Os Cones “Fotopigmentos ” usados para detectar cor3 tipos: azul, verde, vermelho cada um sensível
28
Os Cones
“Fotopigmentos ” usados para detectar
cor3
tipos: azul, verde, vermelho
cada um sensível a uma banda do
espectro
outras cores por combinação
29 Sensibilidade a cores Really yellow from: http://www.cs.gsu.edu/classes/hypgraph/color/coloreff.htm
29
Sensibilidade a cores
Really yellow
from: http://www.cs.gsu.edu/classes/hypgraph/color/coloreff.htm
30 Distribuição dos fotopigmentos Não é bem distribuída muitos vermelhos (64%) e poucos azuis (4%) insensibilidade
30
Distribuição dos fotopigmentos
Não é bem distribuída
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 não tem cones azuis
detalhes em azul desaparecem!
31 Sensibilidade a cor e detecção de imagem Mais sensível no centro do espectro Brilho é
31
Sensibilidade a cor e detecção
de imagem
Mais sensível no centro do espectro
Brilho é R+G
escala de luminância
Formas detectadas pela detecção das bordas
brilho
diferenças de cores
Implicações:
bordas e formas azuis são piores de trabalhar
32 … Quando envelhecemos lentes amarelam e absorvem ondas curtas vemos menos azuis fluido entre lente
32
Quando envelhecemos
lentes amarelam e absorvem ondas curtas
vemos menos azuis
fluido entre lente e retina absorve mais luz
menos brilho
Conclusão
não use azul em objetos e textos
pequenos
33 Foco Cada freqüência de onda necessita de um foco diferente quanto mais precisamos mudar o
33
Foco
Cada freqüência de onda necessita de um
foco diferente
quanto mais precisamos mudar o foco, mais
ficamos cansados
cuidado com combinações 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 população Respostas diferentes nos fotopigmentos dificulta diferenças
34
Daltonismo
Dificuldade em discriminar cores
afeta 9% da população
Respostas diferentes nos fotopigmentos
dificulta diferenças de cores
principalmente de pouco brilho
Mais comum: verde e vermelho
influencia todas as cores dependentes de verde e
vermelho
35 Fama ou Lama
35
Fama ou Lama
36 Componentes das cores Tonalidade sensação visual de uma freqüência de onda, a cor Luminância quanta
36
Componentes das cores
Tonalidade
sensação visual de uma freqüência de onda, a cor
Luminância
quanta luz parece ser refletida por uma superfície
algumas tonalidades são inerentemente mais escuras ou
mais claras
Saturação
pureza da tonalidade
vermelho é mais saturado que rosa
cor é uma mistura de tonalidades puras e cor acromática
porção pura é o grau de saturação
37 ... Luminância Saturação
37
...
Luminância
Saturação
38 Trabalhando com cores por causa do re-foco cores de saturação fraca são melhores (pastéis) Cores
38
Trabalhando com cores
por causa do re-foco
cores de saturação fraca são melhores (pastéis)
Cores opostas vão bem juntas
verde e vermelho (olha o daltonismo!)
azul e amarelo

Evite escolher simultaneamentes cores altamente saturadas e em extremos do espectro

39 Escolhas cores não adjacentes
39
Escolhas cores não adjacentes
40 ... Capacidade de detectar mudança de cor varia difícil para vermelhos, púrpuras e verdes fácil
40
...
Capacidade de detectar mudança de cor
varia
difícil para vermelhos, púrpuras e verdes
fácil em amarelos e azuis-verdes
Quanto mais velho, mais brilho é necessário
Difícil 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
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 diferença seja o
azul

Em geral, evite que duas cores difiram apenas na saturação de uma cor

Professor: Conteúdo: Qualidade
Professor:
Conteúdo:
Qualidade
43 Compatibilidade com o Usuário Designer Designer
43
Compatibilidade com o Usuário
Designer
Designer
44 Compatibilidade entre Produtos Expert Ver. 1 Manual Manual Ver. 2 Ver. 1 Novice Expert Ver.
44
Compatibilidade entre
Produtos
Expert
Ver. 1
Manual
Manual
Ver. 2
Ver. 1
Novice
Expert
Ver. 2
Expert
45 Compatibilidade com as Tarefas Escolha Um Gráfico Editor Banco de Dados Planilha Escolha Um Relatório
45
Compatibilidade com as
Tarefas
Escolha Um
Gráfico
Editor
Banco de Dados
Planilha
Escolha Um
Relatório Anual
Memorandos
Plano de Vendas
46 Compatibilidade com o Fluxo de Trabalho Memo Relat. Escolha Um!! Relatório Anual Memorandos Agenda Telefones
46
Compatibilidade com o Fluxo
de Trabalho
Memo
Relat.
Escolha Um!!
Relatório Anual
Memorandos
Agenda
Telefones
Jun 1
Jun 1
Memo
Relat.
47 Consistência OK! OK! Comando Mover Ilegal OK! Mover Mover Mover
47
Consistência
OK!
OK!
Comando
Mover
Ilegal
OK!
Mover
Mover
Mover
48 Familiaridade Volume X ????? Trilha 2 Espaço Y
48
Familiaridade
Volume X
?????
Trilha 2
Espaço Y
49 Simplicidade Memo Espaço Proporcional? Justificação? Qual Fonte? Cabeçalho? Quais Cores? Mexidos ou Fritos? Memo Memo:
49
Simplicidade
Memo
Espaço Proporcional?
Justificação?
Qual Fonte?
Cabeçalho?
Quais Cores?
Mexidos ou Fritos?
Memo
Memo: entre com o texto
(Opções)
50 Manipulação Direta Troque “Cadeia” na linha 10 por “Prisão” Cadeia
50
Manipulação Direta
Troque
“Cadeia”
na linha 10
por “Prisão”
Cadeia
51 Controle Entre com o comando! Comando Ilegal! Pronto ... Comando não reconhecido ...
51
Controle
Entre com o
comando!
Comando
Ilegal!
Pronto ...
Comando não
reconhecido ...
52 WYSIWYG A A B A
52
WYSIWYG
A
A
B
A
53 Respostas e Feedback Formatando Disco ... Formatando Disco ... 30% Executado 2 min. para acabar
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
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
55
Robustez
BAD FILE!!!
ABORTAR
PROGRAMA!!
Erro: registro 32
Pressione:
C para continuar
P para parar
56 Proteção TODOS OS ARQUIVOS APAGADOS Você confirma o comando? (Pressione S ou N) UNDO
56
Proteção
TODOS
OS
ARQUIVOS
APAGADOS
Você confirma
o comando?
(Pressione S ou N)
UNDO
57 Facilidade de Aprendizado PRONTO ... Como fazer:
57
Facilidade de Aprendizado
PRONTO ...
Como fazer:
58 Facilidade de Uso MENU MENU MENU MENU EXPERT NOVICE NOVICE Ready >Delete X EXPERT
58
Facilidade de Uso
MENU MENU
MENU MENU
EXPERT
NOVICE
NOVICE
Ready
>Delete X
EXPERT
59 A lista não acaba ... Produtividade Baixa taxa de erros Satisfação pessoal Confiança no sucesso
59
A lista não acaba ...
Produtividade
Baixa taxa de erros
Satisfação pessoal
Confiança no sucesso
...
60 Melhorando as Interfaces Mudar a atitude do profissional Conhecer a literatura de Interação Homem/Computador Integrar
60
Melhorando as Interfaces
Mudar a atitude do profissional
Conhecer a literatura de Interação
Homem/Computador
Integrar os métodos de
desenvolvimento de Interface de
Usuário com a Metodologia de
Desenvolvimento
Professor: Conteúdo: 14 Princípios
Professor:
Conteúdo:
14 Princípios
62 1. Levante o perfil do usuário “Saiba quem é seu usuário” Antes de saber como
62
1. Levante o perfil do usuário
“Saiba quem é seu usuário”
Antes de saber como melhorar a interface, é
melhor saber para quem.
Possibilidade de criar “modelos de usuário”
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 usuário e criar
uma interface que o auxilie a alcançar seu objetivo
63 … Perfil do usuário Em caso de muitos usuário, crie uma lista de contradições velho
63
… Perfil do usuário
Em caso de muitos usuário, crie uma
lista de contradições
velho x novo, instruído x não-instruído…
Contate o usuário diretamente
64 2. Use (ou não) uma Metáfora “Use comportamentos de sistemas familiares aos seus usuários” Fatores
64
2. Use (ou não) uma Metáfora
“Use comportamentos de sistemas
familiares aos seus usuários”
Fatores a considerar
deve estar em toda a interface, não use
metáforas que aparecerão em apenas um lugar. Se
possível, use-a em várias aplicações
Várias metáforas podem ser utilizadas
simultaneamente se não forem competitivas
Nem sempre são necessárias, pode ser mais
simples sem a metáfora
Não abuse da metáfora
Não mude o programa por causa da metáfora
65 3. Exponha a funcionalidade “Deixe claro ao usuário que funções estão disponíveis” Ajude o modelo
65
3. Exponha a funcionalidade
“Deixe claro ao usuário que funções
estão disponíveis”
Ajude o modelo mental
Nem tudo pode precisar sem exposto
completamente
Níveis de exposição
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
66
4. Seja coerente
“O comportamento do programa deve
ser consistente externa e internamente”
Interna: comportamento de partes do
programa faz sentido em relação a
outras partes (não surpreenda o usuário)
Externa: o programa é consistente com
seu ambiente
67 5. Demonstre o estado “Mudanças de comportamento devem refletir na aparência do programa” “Modos” devem
67
5. Demonstre o estado
“Mudanças de comportamento devem
refletir na aparência do programa”
“Modos” devem ser distinguíveis
Se um programa troca de aparência,
deve haver uma mudança de
comportamento
Atenção a seleção atual
68 6. Providencie atalhos Forneça meios concretos e abstratos de realizar uma tarefa Uma vez que
68
6. Providencie atalhos
Forneça meios concretos e abstratos de
realizar uma tarefa
Uma vez que o usuário começa a ficar
experiente com uma aplicação, começa também
a montar o seu modelo mental da aplicação
passa a prever quais serão os resultados de uma
ação específica
olha cada vez menos para a interface antes de
realizar uma ação
Providenciando atalhos, apoiamos esse
aprendizado
69 7. Atenção ao foco Alguns detalhes da IU atraem mais a atenção áreas animadas atraem
69
7. Atenção ao foco
Alguns detalhes da IU atraem mais a
atenção
áreas animadas atraem mais que áreas
estáticas
Mouse: movimento mais hábito
Cursor de texto
70 8. Tenha uma gramática A interface com o usuário é como uma linguagem, saiba quais
70
8. Tenha uma gramática
A interface com o usuário é como uma
linguagem, saiba quais são suas regras
sujeito + verbo (objeto + ação)
Duas gramáticas mais comuns
ação -> objeto (interface modal)
objeto -> ação (interface não-modal)
71 9. Forneça ajuda Entenda os diferentes tipos de ajuda necessários ao usuário O que posso
71
9. Forneça ajuda
Entenda os diferentes tipos de ajuda
necessários ao usuário
O que posso fazer com o programa?
O que é isso? O quê isso faz?
Como faço isso?
Por que isso acontece?
Onde estou?
72 10. Proteja o usuário Deixe o usuário desenvolver confiança fornecendo uma rede de segurança Cada
72
10. Proteja o usuário
Deixe o usuário desenvolver confiança
fornecendo uma rede de segurança
Cada pessoa tem um “nível de risco” para o
qual se sente confortável
Novatos se sentem estúpidos (subestimam
sua própria capacidade)
Algumas coisas não podem ser fáceis
(apagar tudo que você fez até agora)
73 11. Mantenha o contexto Limite a atividade do usuário a um contexto bem definido a
73
11. Mantenha o contexto
Limite a atividade do usuário a um
contexto bem definido
a não ser que haja uma boa razão
Evite misturar níveis contextuais
Cuidado com as mudanças de
contexto
caixas de diálogos, por exemplo
74 12. Mantenha a estética “Crie um programa bonito” “Nunca faça algo que pareça um erro
74
12. Mantenha a estética
“Crie um programa bonito”
“Nunca faça algo que pareça um erro
para outra pessoa”
75 13. Teste com o usuário “Tenha auxílio para encontrar os defeitos inevitáveis do seu projeto”
75
13. Teste com o usuário
“Tenha auxílio para encontrar os
defeitos inevitáveis do seu projeto”
Veja como testar
76 14. Seja humilde “Escute as pessoas comuns” Olhe as pessoas usando o seu programa Usuário
76
14. Seja humilde
“Escute as pessoas comuns”
Olhe as pessoas usando o seu programa
Usuário e desenvolvedor vêm apenas parte do
problema
uma solução que não agrada totalmente a muitos
pode agradar o máximo possível a todos
Um programa apenas baseado na idéia do
usuário pode ser medíocre
mas sua intuição não basta
Usuário tem algo mais importante a fazer que
tentar entender seu programa
77 Uma conclusão geral Você não deve facilitar o uso do seu programa, mas sim facilitar
77
Uma conclusão geral
Você não deve facilitar
o uso do seu
programa, mas sim
facilitar a execução
da tarefa do usuário
Professor: Conteúdo: Como Fazer?
Professor:
Conteúdo:
Como Fazer?
79 Como projetar e construir IUs Ciclo de projeto Projeto centrado no usuário Análise de tarefas
79
Como projetar e construir IUs
Ciclo de projeto
Projeto centrado no usuário
Análise de tarefas
Prototipagem rápida
Avaliação
Programação
Iteração
80 Ciclo de Projeto de IU Projeto Avaliação Protótipo
80
Ciclo de Projeto de IU
Projeto
Avaliação
Protótipo
81 Projeto centrado no usuário “Conheça seu usuário” Habilidades cognitivas percepção manipulação memória Organização Habilidades dos
81
Projeto centrado no usuário
“Conheça seu usuário”
Habilidades cognitivas
percepção
manipulação
memória
Organização
Habilidades dos cargos e tarefas
Mantenha os usuários envolvidos ao longo do
projeto
82 Análise de tarefas Observe as práticas de trabalho Crie exemplos e cenários baseados na realidade
82
Análise de tarefas
Observe as práticas de trabalho
Crie exemplos e cenários baseados na
realidade
Tente as novas idéias antes de
construir o software
83 Prototipagem rápida Construa uma simulação do projeto Técnicas de baixa fidelidade papel Ferramentas de prototipagem
83
Prototipagem rápida
Construa uma simulação do projeto
Técnicas de baixa fidelidade
papel
Ferramentas de prototipagem iterativa
Visual Basic, HyperCard, Director, etc.
Construtores de interface
Powerbuilder, etc.
84 Avaliação Teste com usuários reais Construa modelos Use técnicas de baixo custo avaliação especialista walkthroughs
84
Avaliação
Teste com usuários reais
Construa modelos
Use técnicas de baixo custo
avaliação especialista
walkthroughs
85 Programação Pegue tudo que foi feit o e faça seu programa
85
Programação
Pegue tudo que foi feit o e faça seu
programa
86 Iteração Em todos os estágios! Projete Avalie Prototipe
86
Iteração
Em todos os estágios!
Projete
Avalie
Prototipe
Professor: Conteúdo: Projeto Centrado no Usuário
Professor:
Conteúdo:
Projeto Centrado
no Usuário
88 O que é Projeto-centrado no usuário Desenvolvedores trabalham com os usuários-alvo ajudam a definir o
88
O que é Projeto-centrado no
usuário
Desenvolvedores trabalham com os usuários-alvo
ajudam a definir o que o sistema fará e como
muita exploração iterativa e feedback
Pensar o mundo nos termos do usuário
usuário e comprador não são a mesma pessoa?
Não projete para o trabalho do gerente
Entenda o processo de trabalho
pontos onde humanos e computadores interagem
Não seja levado pela tecnologia
89 Problemas Políticos agentes de mudança podem causar controvérsia entenda a organização é importante que todos
89
Problemas
Políticos
agentes de mudança podem causar controvérsia
entenda a organização
é importante que todos “comprem” seu sistema
Só projeto, nenhum protótipo
Faça o protótipo e avalie
Seja ITERATIVO (e não apenas interativo)
90 Observando o Mundo ao Redor Usuários Tarefas Processos Necessários para as Tarefas Modelos de Tarefas
90
Observando o Mundo ao
Redor
Usuários
Tarefas
Processos Necessários para as
Tarefas
Modelos de Tarefas
Professor: Quem são eles? Conteúdo: Os Usuários
Professor:
Quem são eles?
Conteúdo:
Os Usuários
92 Tipos de Usuários Novatos Sem conhecimento sintático Pouco conhecimento semântico Com conhecimento, mas usuários intermitentes
92
Tipos de Usuários
Novatos
Sem conhecimento sintático
Pouco conhecimento semântico
Com conhecimento, mas usuários intermitentes
Conhecimento semântico razoável
Pequena lembrança do conhecimento sintático
necessário
Com conhecimento, usuários freqüentes
Bom conhecimento sintático e semântico
Síndrome do “Power-User”: busca de atalhos e
formas abreviadas
93 Entendendo o Usuário Como seu usuário trabalho? Como seu usuário pensa? entenda a cognição humana
93
Entendendo o Usuário
Como seu usuário trabalho?
Como seu usuário pensa?
entenda a cognição humana
observe-os realizando as tarefas
Como usuários interagem com a IU?
observe!
94 Técnicas de observação no lugar de trabalho cadernos de notas gravadores e cameras Peça para
94
Técnicas de observação
no lugar de trabalho
cadernos de notas
gravadores e cameras
Peça para os usuários pensarem alto enquanto
trabalham
aprenda terminologia
aprenda procedimentos
Mostre suas anotações ao usuário e pergunte
sobre elas
95 O que eles dizem ? “É muito difícil” “Você não tem os passos na ordem
95
O que eles dizem
?
“É muito difícil”
“Você não tem os passos na ordem que
fazemos”
Não leve os comentários de forma pessoal
O objetivo é que o sistema seja fácil de usar
96 Fama ou Lama E se o disco for grande? E se não souber o tamanho
96
Fama ou Lama
E se o disco for grande?
E se não souber o tamanho do disco?
Professor: O que nossos usuários fazem e como eles fazem Conteúdo: As Tarefas
Professor:
O que nossos usuários
fazem e como eles
fazem
Conteúdo:
As Tarefas
98 Fama ou Lama?
98
Fama ou Lama?
99 Perguntas Quem vai usar o sistema? Que tarefas executam agora? Que tarefas são desejadas? Como
99
Perguntas
Quem vai usar o sistema?
Que tarefas executam agora?
Que tarefas são desejadas?
Como as tarefas são aprendidas?
Onde as tarefas são realizadas?
Qual a relação entre usuário e dados?
100 ... Que outras ferramentas tem o usuário? Como usuário se comunicam? Qual a freqüência da
100
...
Que outras ferramentas tem o usuário?
Como usuário se comunicam?
Qual a freqüência da realização da tarefa?
Quais são as restrições de tempo da
tarefa?
O que acontece se as coisas forem
erradas?
101 Quem? Identidade? Usuários internos são fáceis de caracterizar Quanto mais amplo o produto, mais usuários
101
Quem?
Identidade?
Usuários internos são fáceis de caracterizar
Quanto mais amplo o produto, mais usuários típicos
são necessários
Background
Capacidades
Hábitos de trabalho e preferência
Características físicas
peso?
102 Converse com eles Ache usuários reais Converse com eles o que eles fazem como seu
102
Converse com eles
Ache usuários reais
Converse com eles
o que eles fazem
como seu sistema se encaixa
Eles estão muito ocupados?
Compre o interesse
camisetas, etc ...
103 Que tarefas? Importantes pela automação e pela nova funcionalidade Importância relativa das tarefas Observe o
103
Que tarefas?
Importantes pela automação e pela
nova funcionalidade
Importância relativa das tarefas
Observe o usuário
descontentamentos
desvios do padrão (anotações extras,
etc…)
104 Como as tarefas são aprendidas? O que o usuário precisa saber? Ele precisa de treinamento
104
Como as tarefas são
aprendidas?
O que o usuário precisa saber?
Ele precisa de treinamento
acadêmico
geral
especial
105 Onde a tarefa é realizada? Escritório, laboratório, ponto de venda Mãos sujas, suadas? Bebidas? Efeitos
105
Onde a tarefa é realizada?
Escritório,
laboratório, ponto de
venda
Mãos sujas,
suadas?
Bebidas?
Efeitos do
ambiente
Iluminação?
Barulho?
Stress
Confidencialidade
106 Qual a relação entre usuários e dados? Dados pessoais sempre na mesma máquina? Usuários movem
106
Qual a relação entre usuários e
dados?
Dados pessoais
sempre na mesma máquina?
Usuários movem entre máquinas?
Dados comuns
usados concorrentemente?
Usados sequencialmente?
Dados remotos?
Dados restritos?
107 Outras ferramentas? Mais que compatibilidade Como o usuário trabalha com uma coleção de ferramentas
107
Outras ferramentas?
Mais que compatibilidade
Como o usuário trabalha com uma
coleção de ferramentas
108 Como se comunicam? Quem se comunica com quem? Sobre o que? Seguem as linhas da
108
Como se comunicam?
Quem se comunica com quem?
Sobre o que?
Seguem as linhas da organização?
Vão contra elas?
109 Freqüência? Usuários frequentes lembram de mais detalhes Usuários infrequentes necessitam de mais ajuda mesmo nas
109
Freqüência?
Usuários frequentes lembram de mais
detalhes
Usuários infrequentes necessitam de mais
ajuda
mesmo nas operações mais simples
Que função é executada…
mais frequentemente?
por quais usuários
otimizando o sistema para essas tarefas dará uma
imagem de bom desempenho
110 Quais as retrições de tempo? Onde o usuário tem pressa? O que pode esperar?
110
Quais as retrições de tempo?
Onde o usuário tem pressa?
O que pode esperar?
111 Se as coisas derem erradas? Como as pessoas lidam com erros relacionados a tarefas dificuldades
111
Se as coisas derem erradas?
Como as pessoas lidam com
erros relacionados a tarefas
dificuldades práticas
catástrofes
Backup?
112 Selecionando tarefas Tarefas reais que usuários já realizaram colete o material necessário Tente cobrir razoavelmente
112
Selecionando tarefas
Tarefas reais que usuários já realizaram
colete o material necessário
Tente cobrir razoavelmente o sistema
compare com lista de funções a executar
Misture tarefas simples e complexas
Mais tarde…
descarte características que não apoiam suas tarefas
tenha uma tarefa real que exercite cada característica
113 Como as tarefas devem parecer? Dizem o que o usuário quer fazer, mas não como
113
Como as tarefas devem
parecer?
Dizem o que o usuário quer fazer, mas
não como
permite comparar alternativas de projeto
Devem ser bastante específicas
Devem descrever completamente um
trabalho
114 ... Descreve de onde vêm as entradas Quem são os usuários projeto pode mudar se
114
...
Descreve de onde vêm as entradas
Quem são os usuários
projeto pode mudar
se possível, dê nomes
115 ... Refletem interesses de usuários em potencial Usuários não estão sempre certos não conseguem prever
115
...
Refletem interesses de usuários em potencial
Usuários não estão sempre certos
não conseguem prever a tecnologia
O usuário deve desejar o sistema construído
Se você não consegue deixar o usuário
interessado em uma idéia “quente”, você não está
entendendo algo
116 Usando a tarefa no projeto Escreva uma descrição da tarefa formal ou informal feita pelos
116
Usando a tarefa no projeto
Escreva uma descrição da tarefa
formal ou informal
feita pelos usuários junto com a equipe de desenv.
Faça um rascunho da interface
tela principais e funções (sem detalhe)
a mão
Faça cenários para cada tarefa
o qeu o usuário deve fazer e o que vai ver
execução passo-a-passo (chinês)
117 Cenários Cenários estão ligados especificamente ao projeto, as tarefas não Obrigam que discutamos como as
117
Cenários
Cenários estão ligados especificamente ao
projeto, as tarefas não
Obrigam que
discutamos como as coisas vão funcionar juntas
decidamos questões de projeto
Storyboard
seqüência de desenhos
simulação da resposta as ações do usuário
118 Storyboards
118
Storyboards
119 Tarefas Tarefas de Comunicação Tarefas de Diálogo Tarefas Cognitivas Tarefas de Controle
119
Tarefas
Tarefas de Comunicação
Tarefas de Diálogo
Tarefas Cognitivas
Tarefas de Controle
120 Processos necessários para as tarefas Transporte Transformação Tomada de Decisão Algoritmica Baseada em Julgamento Correlação
120
Processos necessários para as
tarefas
Transporte
Transformação
Tomada de Decisão
Algoritmica
Baseada em Julgamento
Correlação de Informação
Análise de Informação
Comunicação
Criação de Informação
121 Análise de cada Tarefa Estabelecer os objetivos e intenções da tarefa Mapear cada objetivo ou
121
Análise de cada Tarefa
Estabelecer os objetivos e intenções
da tarefa
Mapear cada objetivo ou intenção para
uma sequência específica de ações
Especificar a sequência de ações a ser
executada no nível de interface
Indicar o estado do sistema, i.e., como
a interface está quando as ações são
executadas
122 … Definir os mecanismos de controle Mostrar como os mecanismos alteram o estado Indicar como
122
Definir os mecanismos de controle
Mostrar como os mecanismos alteram
o estado
Indicar como o usuário interpreta o
estado do sistema a partir das
informações dadas pela interface
Professor: Crie um modelo conceitual e desenvolva protótipos Conteúdo: O Projeto
Professor:
Crie um modelo
conceitual e
desenvolva protótipos
Conteúdo:
O Projeto
Professor: O Modelo Conceitual Conteúdo:
Professor:
O Modelo Conceitual
Conteúdo:
125 Modelo Conceitual Usuários respondem ao sistema de forma ativa. Sistemas são compostos de partes e
125
Modelo Conceitual
Usuários respondem ao sistema de forma ativa.
Sistemas são compostos de partes e processos.
Se uma parte ou processo está invisível, o
usuário cria um modelo mental para representá-lo.
Logo, um modelo mental inclui hipóteses e
teorias sobre as partes e processos invisíveis em
um sistema e como eles se relacionam com as
partes e processos visíveis no sistema.
126 Modelo Conceitual Representação mental de como os objetos funcionam e como a interface os controla
126
Modelo Conceitual
Representação mental de como os objetos
funcionam e como a interface os controla
Alguns modelos pré-concebidos podem ser
impossíveis 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 não deve ser necessário
127 Exemplo de Modelo Mental Proprietário de um carro tanque de gasolina, chave, motor, marchas, óleo,
127
Exemplo de Modelo Mental
Proprietário de um carro
tanque de gasolina, chave, motor,
marchas, óleo, água ...
128 Exemplo de Modelo Mental Proprietário de um carro - tanque de gasolina, chave, motor, marchas,
128
Exemplo de Modelo Mental
Proprietário de um carro
- tanque de gasolina, chave, motor, marchas,
óleo, água ...
Mecânico
visão mais completa e especializada do
automóvel
129 Os Usuários Formam objetivos Formam intenções Formam expectativas Fazem inferências Fazem e testam predições Cometem
129
Os Usuários
Formam objetivos
Formam intenções
Formam expectativas
Fazem inferências
Fazem e testam predições
Cometem erros
130 O Modelo Mental É o estado atual de conhecimento do usuário, tanto sobre fatos como
130
O Modelo Mental
É o estado atual de conhecimento do usuário,
tanto sobre fatos como sobre procedimentos.
Usuários 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.
131 Projetando o Modelo Conceitual Faça partes e processos invisíveis se tornarem visíveis Dê feedback Construa
131
Projetando o Modelo
Conceitual
Faça partes e processos
invisíveis se tornarem visíveis
Dê feedback
Construa com consistência
Apresente as funcionalidades por
uma metáfora familiar
132 Exemplos de Modelos Conceituais Mesa de Trabalho Arquivo de Cartões Agenda Mapas Modelos 3D
132
Exemplos de Modelos
Conceituais
Mesa de Trabalho
Arquivo de Cartões
Agenda
Mapas
Modelos 3D
133 Exemplo de Modelo Conceitual: Reserva de lugar
133
Exemplo de Modelo
Conceitual:
Reserva de lugar
134 Dicas visuais Objetos bem projetados dão dicas visuais do seu funcionamento Objetos mal desenhados não
134
Dicas visuais
Objetos bem projetados dão dicas
visuais do seu funcionamento
Objetos mal desenhados não dão essa
dica ou dão dicas falsas
135 Refrigerador freezer geladeira Problema: freezer muito frio, geladeira ok
135
Refrigerador
freezer
geladeira
Problema: freezer muito frio, geladeira ok
136 Controles A B C D E 7 6 5 4 3 Qual o seu modelo
136
Controles
A
B
C
D
E
7
6
5
4
3
Qual o seu modelo conceitual?
137 Será esse? A B C D E cooling unit 7 6 5 4 3 cooling
137
Será esse?
A
B
C
D
E
cooling
unit
7
6
5
4
3
cooling
unit
Controles independentes
138 O correto 7 6 5 4 3 cooling unit A B C D E Como
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 Usuário Modelo de Projeto Modelo de Usuário Imagem do
139
Modelo de Projeto e Modelo de
Usuário
Modelo de
Projeto
Modelo de
Usuário
Imagem do
Sistema
Usuários criam seu modelo a partir do uso e experiência
pela imagem do sistema
E se os dois modelos não casarem?
140 Fama ou Lama?
140
Fama ou Lama?
Professor: Conteúdo:
Professor:
Conteúdo:
Professor: Conteúdo: Explorando Metáforas Construindo a arquitetura da informação a partir de uma metáfora: o passo

Explorando Metáforas

Construindo a arquitetura da informação a partir de uma metáfora: o passo inicial

142 O que é uma Metáfora É uma figura de discurso onde o contexto ou frase
142
O que é uma Metáfora
É uma figura de discurso onde o
contexto ou frase não deve ser tomado
literalmente
É uma comparação
143 Tipos de Metáfora Organizacional utilizam a familiaridade com a estrutura da organização Funcional fazem uma
143
Tipos de Metáfora
Organizacional
utilizam a familiaridade com a estrutura da
organização
Funcional
fazem uma conexão entre as tarefas
executadas no mundo real e no mundo virtual
Visual
usam elementos gráficos familiares
144 Metáfora Organizacional Concessionária de Carros Exposição Vendedores Partes e Peças Manutenção
144
Metáfora Organizacional
Concessionária de Carros
Exposição
Vendedores
Partes e Peças
Manutenção
145 Metáfora Funcional Biblioteca Passeie pelas prateleiras Consulte um catálogo Retire um livro Peça uma informação
145
Metáfora Funcional
Biblioteca
Passeie pelas
prateleiras
Consulte um
catálogo
Retire um livro
Peça uma
informação
146 Metáfora Visual Lista Telefônica Páginas brancas - telefones pessoais Páginas amarelas - telefones comerciais Típica
146
Metáfora Visual
Lista Telefônica
Páginas brancas - telefones pessoais
Páginas amarelas - telefones comerciais
Típica de Ícones
Cuidado!
147 Brainstorm! Reunião de livre pensar Não são admitidas críticas Coleciona-se soluções Voto por eliminação, diminuindo
147
Brainstorm!
Reunião de livre pensar
Não são admitidas críticas
Coleciona-se soluções
Voto por eliminação, diminuindo o
conflito
148 Revisão Crítica Estude a metáfora Popule a arquitetura em alguns pontos para ver como fica
148
Revisão Crítica
Estude a metáfora
Popule a arquitetura em alguns pontos
para ver como fica
Cuidado: em muitos casos, metáforas
dificultam a usabilidade
Professor: Modal x Não-modal Conteúdo:
Professor:
Modal x Não-modal
Conteúdo:
150 Int. com usuário Modal Modal? Ações tem significados diferentes dependendo do estado atual da aplicação
150
Int. com usuário Modal
Modal?
Ações tem significados diferentes
dependendo do estado atual da aplicação
151 Examplos de interfaces modais? Algumas caixas de diálogo vi modo de comando x modo de
151
Examplos de interfaces
modais?
Algumas caixas de diálogo
vi
modo de comando x modo de inserção
152 Problemas com IUs Modais? Erros de modo você pensa que esta em um modo e
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 são ruins? Não necessariamente podem fazer um iu muito grande parecer mais fácil
153
Ius Modais são ruins?
Não necessariamente
podem fazer um iu muito grande parecer
mais fácil de usar
precisamos de menos comandos
modo iniciante
Só é mal se feito errado
Caixas de diálogo modais
Modos que não são visíveis
Professor: Conteúdo: Protótipo Protótipo dede baixa baixa Fidelidade Fidelidade
Professor:
Conteúdo:
Protótipo
Protótipo dede baixa
baixa
Fidelidade
Fidelidade
155 Porque protótipos Feedback rápido do projeto diminui custos Experimento com projetos alternativos Corrige problemas antes
155
Porque protótipos
Feedback rápido do projeto
diminui custos
Experimento com projetos alternativos
Corrige problemas antes que
apareçam
Mantém o projeto centrado no usuário
156 Fidelidade na prototipação É o nível de detalhe Baixa fidelidade falta de detalhes construção manual
156
Fidelidade na prototipação
É o nível de detalhe
Baixa fidelidade
falta de detalhes
construção manual
157 Porque usar BF métodos tradicionais podem levar muito tempo elimina a programação Pode simular o
157
Porque usar BF
métodos tradicionais podem levar
muito tempo
elimina a programação
Pode simular o protótipo
Não precisa de muitos conhecimentos
não programadores podem participar
158 Crítica a Alta-fidelidade Testador acha que é o produto final comenta nos detalhes Perde-se a
158
Crítica a Alta-fidelidade
Testador acha que é o produto final
comenta nos detalhes
Perde-se a visão global
Tempo é gasto no acerto de detalhes
Afeta a criatividade
159 O Básico Papel largo, branco Cartões grande tesoura, cola, fita adesiva, corretivo canetais e marcadores
159
O Básico
Papel largo, branco
Cartões grande
tesoura, cola, fita adesiva, corretivo
canetais e marcadores de várias cores
e tamanhos
160 Construindo o Modelo Determine um cronograma não pense muito tempo, faça Desenhe uma janela no
160
Construindo o Modelo
Determine um cronograma
não pense muito tempo, faça
Desenhe uma janela no papel grande
regiões da tela em cartões
tudo que se move, aparece e desaparece
Tenha a resposta para qualquer ação do usuário
menus prontos
Use a copiadora para ter mais de uma versão
161
161
162 Testando com o usuário Selecione o usuário entenda o background busque usuário com questionário Prepare
162
Testando com o usuário
Selecione o usuário
entenda o background
busque usuário com questionário
Prepare os cenários
descreva o uso do programa
faça o protótipo suportar isso
Evite os bugs com a prática
163 Conduzindo o teste 4 testadores recepcionista - recebe o usuário e o deixa a vontade
163
Conduzindo o teste
4 testadores
recepcionista - recebe o usuário e o deixa a
vontade
facilitador - único que fala
dá instruções e encoraja opiniões
Computador - executa o protótipo
observador - toma notas
Sessão típica: 1 hora
164 ... Recepção preencha os formulários, garanta segredo, ... Teste tarefas entregues escritas ao usuário claras
164
...
Recepção
preencha os formulários, garanta segredo, ...
Teste
tarefas entregues escritas ao usuário
claras e detalhadas
“pensar alto”
sem risadas!
Finalização
faça perguntas, obtenha impressões
agradeça
165 Avaliando resultados Ordene e coloque em ordem de prioridade as observaçòes muitos problemas numa mesma
165
Avaliando resultados
Ordene e coloque em ordem de
prioridade as observaçòes
muitos problemas numa mesma área?
Faça um relatório escrito dos achados
Faça as mudanças e interaja
166 Vantagens Poucas horas Pouco equipamento, e barato Múltiplas alternativas rapidamente Iterações rápida Número de iterações
166
Vantagens
Poucas horas
Pouco equipamento, e barato
Múltiplas alternativas rapidamente
Iterações rápida
Número de iterações está ligado a
qualidade final
Quase tudo pode ser imitado
167 No início: explorar/informal Brainstorming considere idéias rapidamente dê uma forma as idéias Projetos incompletos não
167
No início: explorar/informal
Brainstorming
considere idéias rapidamente
dê uma forma as idéias
Projetos incompletos
não cobrem todos os casos
ilustram os conceitos mais importantes
Apresente muitos projetos
168 Fama ou Lama?
168
Fama ou Lama?
Professor: Conteúdo: Prototipagem rápida
Professor:
Conteúdo:
Prototipagem
rápida
170 Problemas com BF Não dão muito certo na tela (realismo da implementação) Tempo não é
170
Problemas com BF
Não dão muito certo na tela (realismo da
implementação)
Tempo não é real
Algumas coisas não podem ser simuladas
brilhos
Outros?
Mouse, teclado, etc…
171 Protótipos? Teste da idéia no ambiente computacional Ainda é muito cedo para construir a aplicação
171
Protótipos?
Teste da idéia no ambiente
computacional
Ainda é muito cedo para construir a
aplicação
O ideal é uma ferramenta de
prototipagem
172 Prototyping Tools Director usada por designers para multimedia -> não tem widgets Boa para IU
172
Prototyping Tools
Director
usada por designers
para multimedia -> não tem widgets
Boa para IU sem widgets
Boa para simular comportamento
HyperCard ou Toolbook
metáfora:transição de tela ao clicar
com widget
Tem linguagens de script
173 UI Builders Visual Basic NeXT UIB SpecTCL PowerBuilder ...
173
UI Builders
Visual Basic
NeXT UIB
SpecTCL
PowerBuilder ...
174 Diferença? Desempenho Widgets Modelagem do comportamente
174
Diferença?
Desempenho
Widgets
Modelagem do comportamente
175 Widgets Buttons (several types) Scroll bars and sliders Pulldown menus
175
Widgets
Buttons (several types)
Scroll bars and sliders
Pulldown menus
176 Widgets (cont.) Palettes Dialog boxes Windows e muito mais ...
176
Widgets (cont.)
Palettes
Dialog boxes
Windows e muito mais ...
Professor: Regras de Projeto Conteúdo:
Professor:
Regras de Projeto
Conteúdo:
178 Slogans (de Nielsen’s Usability Engineering) Seu melhor palpite não é bom suficiente O usuário está
178
Slogans
(de Nielsen’s Usability Engineering)
Seu melhor palpite não é bom suficiente
O usuário está sempre certo
O usuário não está sempre certo
Usuários não são projetistas
Projetistas não são usuários
Menos é mais
Detalhes importam
179 Regras de Projeto Regras a sere, seguidas Aplicadas em vários níveis de projeto Incompletas e
179
Regras de Projeto
Regras a sere, seguidas
Aplicadas em vários níveis de projeto
Incompletas e correlacionadas

Não devem ser ignoradas quando a data de entrega se aproxima

180 Regras básicas Siga princípios de projeto gráfico Use as convenções da linguagem Minimize o uso
180
Regras básicas
Siga princípios de projeto gráfico
Use as convenções da linguagem
Minimize o uso da memória de curto prazo
Dê feedback
Previna erros
Permita a correção de erros
Use um modelo conceitual razoável
181 Projeto Gráfico Chama a atenção do usuário de forma apropriada? Use cor e layout Preto
181
Projeto Gráfico
Chama a atenção do usuário de forma apropriada?
Use cor e layout
Preto em preto!
Não devia ter um rótulo para avisar que é um botão
182 ... Grupo objetos relacionados Alinhamento e espaçamento Decorações Balanço e espaço em branco Poucas fontes
182
...
Grupo objetos relacionados
Alinhamento e espaçamento
Decorações
Balanço e espaço em branco
Poucas fontes e cores
Lembre dos daltônicos
183 Fale a linguagem do usuário Use palavras comum, não use jargão Referencie objetos do usuário
183
Fale a linguagem do usuário
Use palavras comum, não use jargão
Referencie objetos do usuário no feedback
Permite nomes completos
Evite conversões espaço-linguagem
duas partes diferentes do cérebro
184 Menos é mais Problema? “Mantenha simples” Linguagem concisa Evite imagens e informação inúteis menus opções
184
Menos é mais
Problema?
“Mantenha simples”
Linguagem concisa
Evite imagens e informação inúteis
menus opções e escolhas de menu
185 Diminua a carga cognitiva Memória de curto prazo capacidade of 7+-2; decaimento of 30 seg.
185
Diminua a carga cognitiva
Memória de curto prazo
capacidade of 7+-2;
decaimento of 30 seg. to 2 min.
Reconhecer, não lembrar
Menus em vez de digitação
“Prompts” fornecem formatos
Não exija redigitar informação
Regras genéricas
cut/copy/paste
186 Seja consistente Tamanho, cor, palavras, posição, ordem…. Evite casos especiais e regras complexas Mesmo comando,
186
Seja consistente
Tamanho, cor, palavras, posição, ordem….
Evite casos especiais e regras complexas
Mesmo comando, mesmo efeito
Sigue os padrões
e.g., Cut/Copy/Paste
permite o usuário generalizar
187 Consistência léxica Seja consistente com a usagem comum vermelho = ruim, Verde = bom (*)
187
Consistência léxica
Seja consistente com a usagem comum
vermelho = ruim, Verde = bom (*)
esquerda=menos , direita=mais
Abreviações consistentes
tamanhos iguais
Nomes mnemônicos e não códigos
Dispositivos não mudam de função
delete é sempre a mesma tecla
188 Consistência sintática Mensagens de erro sempre no mesmo local Objeto-Ação ou Ação-Objeto, nunca misture Itens
188
Consistência sintática
Mensagens de erro sempre no mesmo
local
Objeto-Ação ou Ação-Objeto, nunca
misture
Itens de menu sempre no mesmo local
189 Consistência semântica Comandos globais sempre disponíveis ajuda interrompa desfaz Operações válidas sempre que razoável X
189
Consistência semântica
Comandos globais sempre disponíveis
ajuda
interrompa
desfaz
Operações válidas sempre que
razoável
X pode ser duplicado, Y também pode
190 Feedback Léxico Movimento do cursor Eco do keybord Intensificação da seleção
190
Feedback Léxico
Movimento do cursor
Eco do keybord
Intensificação da seleção
191 Feedback Sintático Teste da validade da palavra sendo digitada Brilho da opção do menu que
191
Feedback Sintático
Teste da validade da palavra sendo
digitada
Brilho da opção do menu que está
sendo escolhida
192 Feedback Semântico Comando compreendido repetir o comando Comando em execução barra de progresso contagem regressiva
192
Feedback Semântico
Comando compreendido
repetir o comando
Comando em execução
barra de progresso
contagem regressiva
193 ... Comando completo resultados prompt para o próximo comando Unix: silêncio significa OK Nem sempre
193
...
Comando completo
resultados
prompt para o próximo comando
Unix: silêncio significa OK
Nem sempre os 3 são necessários
194 Localização do Feedback Onde estão os olhos ponto de inserção cursor Audio quando pode não
194
Localização do Feedback
Onde estão os olhos
ponto de inserção
cursor
Audio
quando pode não ser uma boa idéia?
195 Prevenindo erros Porque ? Evita o “medo do fracasso” permite acelerar o trabalho Considere posição
195
Prevenindo erros
Porque ?
Evita o “medo do fracasso”
permite acelerar o trabalho
Considere
posição do comando
distância de outros comandos
Suprima comandos não disponíveis
Confirme ações irreversíveis
196 Correção de erros Léxica erros de digitação Sintática re-especifique apenas o parâmetro errado re-inicie o
196
Correção de erros
Léxica
erros de digitação
Sintática
re-especifique apenas o parâmetro errado
re-inicie o comando do início
Semântico
interromper
desfazer
197 Teste? Controle deve imitar o mundo real O que é melhor para o balanço das
197
Teste?
Controle deve imitar o mundo real
O que é melhor para o balanço das
caixas de som?
198 Fama ou Lama?
198
Fama ou Lama?
199 O Layout? Posição dos widgets na janela O que acontece quando a janela muda de
199
O Layout?
Posição dos widgets na janela
O que acontece quando a janela muda
de tamanho
200 Como não fazer layout Antes Depois
200
Como não fazer layout
Antes
Depois
201 Maus exemplos  Netscape  xv
201
Maus exemplos
 Netscape
 xv
202 Caixas de diálogo pequenas Netscape
202
Caixas de diálogo pequenas
Netscape
203 Dependência de plataforma  Windows 95  Motif
203
Dependência de plataforma
 Windows 95
 Motif
204 Modelos de Layout Posição fixa Visual Basic Molas e NeXTStep, SUIT Tk packer (sort of)
204
Modelos de Layout
Posição fixa
Visual Basic
Molas e
NeXTStep, SUIT
Tk packer (sort of)
Intrinsic Size + Variable Intrinsic Size
InterViews, Fresco
205 Mostrando Informação Mostre apenas a informação relevante no contexto Não afogue o usuário com dados
205
Mostrando Informação
Mostre apenas a informação relevante
no contexto
Não afogue o usuário com dados
Use rótulos e abreviações consistentes
Use cores previsíveis
206 ... Reduza a quantidade de dados a serem memorizados entre ações Seja eficiente no uso
206
...
Reduza a quantidade de dados a serem
memorizados entre ações
Seja eficiente no uso de diálogos,
movimentos e pensamento
Categorize atividades por funções e
divida a tela
Ofereça help
Use frase e nomes simples
207 ... Facilite a manutenção de um contexto visual Produza mensagens de erro significativas Use as
207
...
Facilite a manutenção de um contexto visual
Produza mensagens de erro significativas
Use as características das fontes de
caracteres
Use janelas para separar informação
Use dispositivos analógicos para representar
informação
208 Entrada de Dados Minimize o número de ações requeridas do usuário Mantenha a consistência entre
208
Entrada de Dados
Minimize o número de ações requeridas
do usuário
Mantenha a consistência entre a
informação mostrada e os dados entrados
Permita a individualização da entrada de
dados
Seja flexível
209 ... Desative comandos não apropriados no contexto Deixe o usuário controlar o fluxo Elimine entradas
209
...
Desative comandos não apropriados
no contexto
Deixe o usuário controlar o fluxo
Elimine entradas de dados “idiotas”
Forneça help
210 Tipos de Interações no Windows Manipulação Direta Menus Formulários
210
Tipos de Interações no
Windows
Manipulação Direta
Menus
Formulários
211 Manipulação Direta Fácil de aprender e relembrar WYSIWYG Flexível Ações facilmente reversíveis Explora o uso
211
Manipulação Direta
Fácil de aprender e relembrar
WYSIWYG
Flexível
Ações facilmente reversíveis
Explora o uso de dicas visual-espaciais
Pode ser ineficiente
212 Quando utilizar manipulação direta Usuário atitude negativa motivação baixa Conhecimento e Experiência digitação fraca experiência
212
Quando utilizar manipulação
direta
Usuário
atitude negativa
motivação baixa
Conhecimento e Experiência
digitação fraca
experiência moderado com o sistema e com a
aplicação
grande experiência com a tarefa
pouco conhecimento de computadores
213 ... Características das Tarefas uso esporádico e discreto treino moderado baixa importância e pouca estrutura
213
...
Características das Tarefas
uso esporádico e discreto
treino moderado
baixa importância e pouca estrutura na
tarefa
214 Manipulação Direta: Princípios e Dicas Minimizar distância semântica Dar feedback visual para posição, seleção e
214
Manipulação Direta: Princípios
e Dicas
Minimizar distância semântica
Dar feedback visual para posição, seleção e
movimento
Dar feedback físico para modos
Dar alternativas para usuários “experts”
Utilizar ícones consistentes, familiares e
concretos, além de visualmente distintos
Seguir princípios básicos de projeto de tela
215 Menus Auto-explanatórios Fáceis de lembrar Economizam digitação Facilitam o controle de erros Melhorias são rapidamente
215
Menus
Auto-explanatórios
Fáceis de lembrar
Economizam digitação
Facilitam o controle de erros
Melhorias são rapidamente visíveis
Ineficientes quando em hierarquias
Inflexíveis
216 Menus: quando utilizar Usuário atitude negativa motivação baixa Conhecimento e experiência Digitação fraca Pouca experiência
216
Menus: quando utilizar
Usuário
atitude negativa
motivação baixa
Conhecimento e experiência
Digitação fraca
Pouca experiência com o sistema, com a
tarefa e com a aplicação
Pequeno conhecimento de comutadores
217 ... Características das tarefas Estruturadas Pouco importantes Baixa frequencia de uso
217
...
Características das tarefas
Estruturadas
Pouco importantes
Baixa frequencia de uso
218 Menus: Príncipios e Dicas Casar a estrutura do menu com as estruturas das tarefas Providencias
218
Menus: Príncipios e Dicas
Casar a estrutura do menu com as estruturas das
tarefas
Providencias meios para individualizar a estrutura do
menu
Diminuir profundidade das hierarquias
Apresentar opções verticalmente
Apagar ou “acinzentar” opções não permitidas
Ser conciso
Providenciar defaults
219 Formulários Auto-explanatórios Requerem pouca memória Bom uso da tela Acomoda parâmetros com muitos valores possíveis
219
Formulários
Auto-explanatórios
Requerem pouca memória
Bom uso da tela
Acomoda parâmetros com muitos valores possíveis
Melhorias são visíveis
Assume conhecimentos
Permite erros
Inflexíveis
220 Formulários: quando utilizar Usuário atitude negativa a moderada Motivação baixa a moderada Conhecimento e Experiência
220
Formulários: quando utilizar
Usuário
atitude negativa a moderada
Motivação baixa a moderada
Conhecimento e Experiência
Boa digitação
Pouca ou moderada experiência com o sistema
Moderada ou alta experiência com a tarefa
Baixa ou moderada experiência com a aplicação
221 ... Tarefas Alta ou moderada frequência Pouco treino Importância moderada Estruturadas
221
...
Tarefas
Alta ou moderada frequência
Pouco treino
Importância moderada
Estruturadas
222 Formulários: Princípios e Dicas Projete de acordo com a tarefa Organize em grupos semânticos Balanceie
222
Formulários: Princípios e Dicas
Projete de acordo com a tarefa
Organize em grupos semânticos
Balanceie com espaços em branco
Utilize separadores
Use descritores de campos
Indique campos opcionais e obrigatórios
Evite regras complexas
Forneça defaults
Faça as áreas protegidas realmente
inacessíveis
223 Projetando Telas Projeto geral Textos Números Codificação Cor
223
Projetando Telas
Projeto geral
Textos
Números
Codificação
Cor
224 Projeto Geral Só inclua a informação essencial para tomada de decisões Inclua toda a informação
224
Projeto Geral
Só inclua a informação essencial para tomada de
decisões
Inclua toda a informação essencial para a tomada
de decisões
Inicie no canto superior esquerdo
Siga o guia de estilo
Grupe os itens logicamente
Forneça simetria e balanço com o uso de espaços
em branco
225 Projeto Geral Evite o uso de todas as letras em maiúsculas Torne rótulos e campos
225
Projeto Geral
Evite o uso de todas as letras em
maiúsculas
Torne rótulos e campos distintos (não
os confunda)
226 Textos Mensagens Avisos Instruções
226
Textos
Mensagens
Avisos
Instruções
227 Mensagens Seja conciso Projete o nível de detalhe de acordo com a experiência do usuário
227
Mensagens
Seja conciso
Projete o nível de detalhe de acordo com a
experiência do usuário
Utilize a forma afirmativa
Seja construtivo, não seja crítico
Seja específico e claro
Indique implicitamente que o usuário tem o controle
Quando exigir uma ação, deixe isso claro
228 Avisos (Prompts) Utilize quando e onde forem necessários Projete de acordo com a experiência do
228
Avisos (Prompts)
Utilize quando e onde forem necessários
Projete de acordo com a experiência do
usuário
Use a voz ativa
Evite negações
Organize-os cronológicamente
Use formatação
Seja consistente
229 Instruções Seja simples e claro use sentenças com palavras familiares mantenha os parágrafos curtos Limite
229
Instruções
Seja simples e claro
use sentenças com palavras familiares
mantenha os parágrafos curtos
Limite as linhas a 50 ou 55 caracteres
Evite hífens
Evite justificar a direita ou espaços desbalanceados
Evite linhas com menos de 26 caracteres
Use espaço entre linhas igual ou levemente maior
que o tamanho dos caracteres (1,2 vezes!)
230 Números Justifique pela direita Alinhe pela vírgula decimal Evite zeros na frente Quando muito longo,
230
Números
Justifique pela direita
Alinhe pela vírgula decimal
Evite zeros na frente
Quando muito longo, quebre em
grupos de 3 dígitos
Indique a unidade
231 Codificação Utilize técnicas para gerar atenção de forma apropriadas piscar: chamar a atenção quando o
231
Codificação
Utilize técnicas para gerar atenção de
forma apropriadas
piscar: chamar a atenção quando o olhar
deveria estar em outro ponto
negrito: fazer itens, como títulos, aparecerem.
Use como ponto de referência em uma tela
vídeo reverso: ponto de referência
tamanho: facilita a busca
232 ... fonte: chamar atenção, facilitar busca proximidade: indica associação de idéias linhas: criam grupos formas:
232
...
fonte: chamar atenção, facilitar busca
proximidade: indica associação de idéias
linhas: criam grupos
formas: como sinais de trânsito. Fornecem
significados associados
233 Cores Cuidado com daltonismo Use com economia Use para chamar atenção Use para indicar status
233
Cores
Cuidado com daltonismo
Use com economia
Use para chamar atenção
Use para indicar status ou relacionamentos
Use para auxiliar buscas
Tenha sempre uma outra forma de indicar a mesma
informação
Assegure-se de utilizar brilho e saturação diferente,
além da cor
234 Cores Seja consistente com sua cultura verde: ok, siga, tudo certo vermelho: perigo, pare, quente,
234
Cores
Seja consistente com sua cultura
verde: ok, siga, tudo certo
vermelho: perigo, pare, quente, perda,
emergência
amarelo: atenção, morno, perigo
azul: frio, desligado
235 ... Use ao máximo oito cores distintas e bem espaçadas De preferência a um máximode
235
...
Use ao máximo oito cores distintas e
bem espaçadas
De preferência a um máximode 4 cores
Utilize legenda se as cores forem
muitas ou não óbvias
Evite cor em itens muito pequenos
236 Cores Atenção a escolha de cores de fundo e de frente Lembre-se que cores afetam
236
Cores
Atenção a escolha de cores de
fundo e de frente
Lembre-se que cores afetam a
resolução
Cores quentes aumentam o
tamanho
Cores frias diminuem o tamanho
237 ... Use contrastes para indicar diferenças Considera ângulo e distância do usuário Cuidado com uso
237
...
Use contrastes para indicar diferenças
Considera ângulo e distância do
usuário
Cuidado com uso pesado de contraste,
saturação e oposições de cores
Use brilho para enfatizar
Use escuros para desenfatizar
238 Padrões Windows Menus Padronizados File, Edit, ... , Help Barra de ícones em cima (agora
238
Padrões Windows
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 ... Réguas em cima e a esquerda Pergunta se salva antes de fechar “Sim” salva,
239
...
Réguas em cima e a esquerda
Pergunta se salva antes de fechar
“Sim” salva, “Não” não salva, “Cancela”
não fecha
Aceleradores padronizados
Cores e sons configuráveis
Professor: Conteúdo: Teste Teste com com oo Usuário Usuário
Professor:
Conteúdo:
Teste
Teste com
com oo
Usuário
Usuário
241 Porque fazer teste com o usuário? Não podemos saber se a interface é boa até
241
Porque fazer teste com o
usuário?
Não podemos saber se a interface é boa até
que alguém use
Outros métodos são baseados em
avaliadores:
podem saber de mais
podem saber de menos
Em resumo:
É difícil predizer o que usuários reais farão
242 Envolvendo o usuário Usuário ajudam equipe a aprender o que está envolvido no seu trabalho
242
Envolvendo o usuário
Usuário ajudam equipe a aprender
o que está envolvido no seu trabalho
que ferramentas ele usam
o que eles fazem
Desenvolvedores revelam capacidades técnicas
construção do respeito mútuo
idéia do possível
Prototipagem, teste e mudança incrementais
243 Escolhendo participantes Representam os usuários em função função e conhecimento tarefas Se não pode ter
243
Escolhendo participantes
Representam os usuários em função
função e conhecimento
tarefas
Se não pode ter usuários, use uma
aproximação
estudantes do assunto
Use incentivos para conseguir participantes
244 Ética Algumas vezes os testes podem ser estressante usuários podem até chorar (embaraçados pelos erros)
244
Ética
Algumas vezes os testes podem ser
estressante
usuários podem até chorar (embaraçados pelos
erros)
É sua responsabilidade evitar isso
evite a pressão para participar
use voluntários
avise que eles podem parar se necessário
faça os dados coletados serem anônimos
Enfatize que o sistema é que está em teste
não eles
245 Propostas de teste Objetivo Descrição do sistema Ambiente e materiais da tarefa Participantes Metodologia Tarefa
245
Propostas de teste
Objetivo
Descrição do sistema
Ambiente e materiais da tarefa
Participantes
Metodologia
Tarefa
Medidas
246 Selecionando tarefas Devem refletir as tarefas reais Podem ser tiradas da análise e projeto podem
246
Selecionando tarefas
Devem refletir as tarefas reais
Podem ser tiradas da análise e projeto
podem ser modificadas se:
levam muito tempo
exigem algo que o usuário não saiba
Evite escolher as tarefas que seu sistema faz
melhor
Não escolha tarefas muito fragmentadas
247 Decidindo que dados obter Dois tipos de dados dados do processo observações de que os
247
Decidindo que dados obter
Dois tipos de dados
dados do processo
observações de que os usuários estão fazendo
e pensando
Dados básicos
sumário do que acontecei
– tempo
– erros
– sucessos
248 Processo x Básicos Primeiro use o processo dão uma visão melhor dos problemas Dados básicos
248
Processo x Básicos
Primeiro use o processo
dão uma visão melhor dos problemas
Dados básicos não te dizem o que
concertar, apenas identificam problemas
Dados básicos podem variar muito
com usuário
249 Método “Pensando alto” Precisamos saber não só o que o usuário faz, mas o que
249
Método “Pensando alto”
Precisamos saber não só o que o usuário
faz, mas o que pensa
Solicite que o usuário
diga o que está pensando
diga o que planeja fazer
diga que questões desejaria fazer
diga o que está vendo e lendo
Faça uma gravação ou anotações muito boas
250 …pensando alto Mantenha o usuário falando “o que você está tentando fazer?” Ajude apenas em
250
…pensando alto
Mantenha o usuário falando
“o que você está tentando fazer?”
Ajude apenas em itens pré-decididos
anote todas suas ajudas
Use um relógio digital
Tome notas de qualquer maneira
grave ou filme se possível
251 Usando os resultados Faça um resumo dos dados lista de todos incidentes críticos (IC) positivos
251
Usando os resultados
Faça um resumo dos dados
lista de todos incidentes críticos (IC)
positivos e negativos
Inclua referência 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 análise de tarefas e repense o projeto (de interface) de
252
… usando resultados
Atualize a análise de tarefas e repense o
projeto (de interface)
de uma grau de severidade e facilidade para cada
IC
modifique IC fáceis e difíceis
Pensar alto dá as respostas certas
nem sempre
se você faz uma pergunta, sempre terá uma
resposta, mesmo que não tenha relação que os
fatos
evite respostas específicas
253 Raking de Gravidade Usado para alocar recursos para resolver problema Indica a necessidade de esforços
253
Raking de Gravidade
Usado para alocar recursos para resolver
problema
Indica a necessidade de esforços de
usabilidade
Combinação de
freqüência
impacto
persistência
254 ... 0 - não é um problema 1 - problema cosmético 2 - problema menor
254
...
0
- não é um problema
1 - problema cosmético
2
- problema menor
3
- problema grave, deve ser consertado
4
- catástrofe, conserto é imprescindível
255 Conclusão Devemos seguir padrões Devemos atender as necessidades do usuário quais são essas necessidades? Como
255
Conclusão
Devemos seguir padrões
Devemos atender as necessidades do usuário
quais são essas necessidades?
Como podemos colaborar?
Devemos respeitar as limitações do usuário
Devemos pesquisar soluções melhores para o
usuário
Devemos facilitar a execução das tarefas do
usuário
256 Conclusão Seres humanos são muito mais complexos que programas de computador. É muito mais fácil
256
Conclusão
Seres humanos são muito mais complexos que
programas de computador. É muito mais fácil
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,
estão fadados ao fracasso
257 Conclusão É necessário trocar o crença na tecnologia pela crença no usuário. Nada é mais
257
Conclusão
É necessário trocar o crença na
tecnologia pela crença no usuário. Nada é
mais importante que fornecer uma solução
que não só atenda as expectativas do
usuário, mas que possivelmente as
superem, tornando a tarefas mais fáceis,
mais rápidas e mais agradáveis de serem
realizadas