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 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
Teste com o usuário
Conclusão
 4

Fama ou Lama?
 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
 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

Fatores Sociais e
Tarefas Organizacionais

Design

Tecnologia Humanos
 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
o usuário executar sua tarefa
 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 ± 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 Pensar
HOMEM r
f TADOR
a
c
e

Ler Responder
 14

Model Human Processor

Memória de Longo Prazo

Memória de Trabalho
Armazem de Armazem de
Imagens Visuais Imagens Sonoras

Olhos

Processador Processador Processador

de Percepção Motor Cognitivo
Ouvidos

Dedos, etc.
 15

Sistema Cognitivo

MCP limitada
MCP de pequena
MLP infinita duração
MLP complexa Dado a erros
Aprendizado Acesso a MLP não é
Reconhecimento confiável
de Padrões Processamento Lento
 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 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

{ }
Nível Sintático
“Look and Feel”

Nível Léxico
 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 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
Quando acabar diga “pronto”
 Professor:
Um caso especial da
interface homem-
computador

Conteúdo:

Cores
 23

Espectro Visível
 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 luz
não diferencia cores
diferencia níveis de cinza

Cones
sensíveis a cores
 26

Retina
 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 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
 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 é 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 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 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 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
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
 38

Trabalhando com cores

Evite escolher simultaneamentes cores
altamente saturadas e em extremos do espectro
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
 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 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 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
 43

Compatibilidade com o Usuário

Designer

Designer
 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 Anual
Memorandos
Plano de Vendas
 46

Compatibilidade com o Fluxo

de Trabalho
Memo
Relat.

Escolha Um!! Jun 1

Relatório Anual
Memorandos
Agenda
Telefones

Jun 1 Memo

Relat.
 47

Consistência
OK!

Comando OK!
Ilegal
Mover

OK! Mover
Mover

Mover
 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: entre com o texto

(Opções)
 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...
 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

Proteção

TODOS
OS
ARQUIVOS
APAGADOS

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

Facilidade de Aprendizado

PRONTO...

Como fazer:
 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
...
 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
 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 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 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 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 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 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 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 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 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 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 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 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
para outra pessoa”
 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 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 a
execução da tarefa
do usuário
 Professor:

Conteúdo:

Como Fazer?
 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
 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
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 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
 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
 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 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 “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
 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
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
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 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 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 do disco?
 Professor:
O que nossos usuários
fazem e como eles
fazem

Conteúdo:

As Tarefas
 98

Fama ou Lama?
 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 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 típicos são necessários
Background
Capacidades
Hábitos de trabalho e preferência
 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 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
acadêmico
geral
especial
 105

Onde a tarefa é realizada?

Escritório, Mãos sujas,
laboratório, ponto de suadas?
venda Bebidas?
Efeitos do ambiente Iluminação?
Stress Barulho?
Confidencialidade
 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
 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 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?
 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 o sistema
compare com lista de funções a executar
Misture tarefas simples e complexas
Mais tarde…
descarte características que não apoiam
 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 possível, dê nomes
 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
 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 coisas vão funcionar
juntas
decidamos questões de projeto
Storyboard
 118

Storyboards
 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 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 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 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:

O Modelo Conceitual

Conteúdo:
 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
 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
 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,
ó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
 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 com consistência
Apresente as
funcionalidades por uma
 132

Exemplos de Modelos
Conceituais
Mesa de Trabalho
Arquivo de Cartões
Agenda
Mapas
 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 dão essa
dica ou dão dicas falsas
 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 conceitual?
 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 consertar o problema?

 139
Modelo de Projeto e Modelo de
Usuário
Modelo de Modelo de
Projeto 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?
Explorando Metáforas
Professor:
Construindo a arquitetura da informação a partir de uma metáfora: o
passo inicial

Conteúdo:
 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 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
 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 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 o
conflito
 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:
 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 inserção
 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 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 de baixa
Fidelidade
 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
 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 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 de várias cores
e tamanhos
 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
161
 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
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 e detalhadas
“pensar alto”
sem risadas!
Finalização
 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 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 cobrem todos os casos
ilustram os conceitos mais importantes
Apresente muitos projetos
 168

Fama ou Lama?
 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 é 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
O ideal é uma ferramenta de
prototipagem
 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
 173

UI Builders
Visual Basic
NeXT UIB
SpecTCL
PowerBuilder...
 174

Diferença?
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

Conteúdo:
 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
Não devem ser ignoradas quando a data
de entrega se aproxima
Incompletas e correlacionadas
 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 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 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 no

feedback
Permite nomes completos
Evite conversões espaço-linguagem
duas partes diferentes do cérebro
 184

Menos é mais

“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.
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
 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 (*)
esquerda=menos , direita=mais
Abreviações consistentes
tamanhos iguais
Nomes mnemônicos e não códigos
Dispositivos não mudam de função
 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 pode ser duplicado, Y também pode
 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 está
sendo escolhida
 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 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 ser uma boa idéia?
 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 comando do início
Semântico
interromper
desfazer
 197

Teste?
Controle deve imitar o mundo real
O que é melhor para o balanço das
caixas de som?
 198

Fama ou Lama?
 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
 201

Maus exemplos
 Netscape  xv
 202

Caixas de diálogo pequenas

Netscape
 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)
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
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 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 características das fontes de
caracteres
Use janelas para separar informação
Use dispositivos analógicos para
 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 de dados “idiotas”
Forneça help
 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 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 moderado com o sistema e
com a aplicação
grande experiência com a tarefa
 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 movimento
Dar feedback físico para modos
Dar alternativas para usuários “experts”
Utilizar ícones consistentes, familiares
e concretos, além de visualmente
distintos
 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 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
 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
 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
 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
 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 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
 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
 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
 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 usuário
Use a voz ativa
Evite negações
Organize-os cronológicamente
Use formatação
 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, 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 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: 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 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, 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 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 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 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 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, “Não” não salva, “Cancela”
não fecha
Aceleradores padronizados
Cores e sons configuráveis
 Professor:

Conteúdo:
Teste com o
Usuário
 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
 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 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)
É 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
Medidas
 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
 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 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 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
 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 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?
 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 de
usabilidade
Combinação de
freqüência
impacto
persistência
 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 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
 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
 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