Projeto Visual
Maria Alice Grigas Varella Ferreira
EP-USP
Abril 2003
1
Projeto Visual
Afeta:
 Impressão inicial do usuário
 Usabilidade a longo prazo
Procura atingir:
 Clareza visual
 Codificação visual
 Consistência visual
Maria Alice Grigas Varella Ferreira – EP-USP
2
Projeto Visual
Inclui:
 Todos os elementos gráficos da interface:
 layout da tela,
 menus,
 formulários,
 Imagens, etc
Maria Alice Grigas Varella Ferreira – EP-USP
3
Clareza visual
Clareza visual:
“ O significado da imagem deve ser claro
para o usuário”
“ É necessário organizar visualmente a
informação para reforçar a organização
lógica”
Maria Alice Grigas Varella Ferreira – EP-USP
4
Clareza Visual
Regras para a organização visual : (Wertheimer
– 1930)
 Ênfase no todo, e não nas partes (Gestalt)
 Similaridade
 Proximidade
 Fechamento (closure)
 Continuidade
Maria Alice Grigas Varella Ferreira – EP-USP
5
Clareza Visual
SIMILARIDADE – Dois estímulos que
apresentam uma propriedade comum são
vistos da mesma forma
PROXIMIDADE – Dois estímulos visuais que
estão próximos são vistos juntos
Exemplos:
Maria Alice Grigas Varella Ferreira – EP-USP
6
Similaridade e proximidade
Regras de Gestalt : no quadro da esquerda, os elementos
estão próximos (uniformidade total); à direita, a proximidade
induz o agrupamento horizontal.
Maria Alice Grigas Varella Ferreira – EP-USP
7
Similaridade e proximidade
Regras de Gestalt : no quadro da esquerda, os elementos
estão próximos (uniformidade total); à direita, a proximidade
induz o agrupamento vertical.
Maria Alice Grigas Varella Ferreira – EP-USP
8
Similaridade e cor
Regras de Gestalt : no quadro da esquerda, os elementos
estão próximos (uniformidade total); à direita, a cor induz o
agrupamento vertical.
Maria Alice Grigas Varella Ferreira – EP-USP
9
Similaridade, proximidade e
cor
Regras de Gestalt : no quadro da esquerda, os elementos estão
próximos (uniformidade total); à direita, a cor induz o agrupamento horizontal, que é reforçado ainda mais pela proximidade.
Maria Alice Grigas Varella Ferreira – EP-USP
10
Similaridade, proximidade e
cor
Regras de Gestalt : no quadro da esquerda, os elementos são iguais
e estão próximos, mas foram diferenciados pela cor que induz o
agrupamento horizontal; à direita o agrupamento foi reforçado pelo
distanciamento.
Maria Alice Grigas Varella Ferreira – EP-USP
11
Fechamento
FECHAMENTO – se um conjunto de estímulos quase delimitam uma área ou podem ser
assim interpretados, o observador enxerga
esta área
Foley et al., 1990
Maria Alice Grigas Varella Ferreira – EP-USP
12
Continuidade
CONTINUIDADE – as linhas que se juntam
num arranjo de linhas, são vistas como
contínuas, quanto maior for a regularidade da
junção
Janelas
superpostas
Maria Alice Grigas Varella Ferreira – EP-USP
13
Continuidade
Mas, poderia ser isso!
Foley et al., 1990
Maria Alice Grigas Varella Ferreira – EP-USP
14
Projeto visual
Cor da Área
Automático
Invisível
Cor da Borda
Automático
Invisível
Largura da Borda
Projeto Visual pobre, sem maiores preocupações com o projeto da tela e
das caixas de seleção
Maria Alice Grigas Varella Ferreira – EP-USP
15
Uso de fechamento e de agrupamento no projeto visual da tela
Cor da Área
Automático
Invisível
Cor da Borda
Automático
Invisível
Largura da Borda
Maria Alice Grigas Varella Ferreira – EP-USP
16
Proximidade, reforçando o
alinhamento horizontal
Alinhamento de objetos:
Esquerda
Centralizado
Direita
Topo
Centralizado
Base
Sugere alinhamento
vertical
Alinhamento de objetos:
Esquerda
Centralizado
Direita
Topo
Centralizado
Base
Maria Alice Grigas Varella Ferreira – EP-USP
Mas o alinhamento é
horizontal
17
Uso de correspondência espacial para reforçar o significado
Alinhamento de objetos:
Esquerda
Centralizado
Direita
Topo
Centralizado
Base
Alinhamento de objetos:
Topo
Centralizado
Base
Esquerda
Maria Alice Grigas Varella Ferreira – EP-USP
Centralizado
Direita
18
Clareza Visual
Cuidado. Regras mal usadas podem enganar
real
o usuário!
ATE
BITE
DOG
FAR
GET
HAT
BATE
CAT
EAST
FAT
GOT
HIGH
BET
CUP
EASY
FITS
GUT
HIT
Maria Alice Grigas Varella Ferreira – EP-USP
ATE
BATE
BET
BITE
CAT
CUP
DOG
EAST
EASY
FAR
FAT
FITS
GET
GOT
GUT
HAT
HIGH
HIT
19
Organização aplicada a
menus
Aplicação das regras na organização de um
menu
ROTATE X
ROTATE Y
ROTATE Z
TRANSLATE X
TRANSLATE Y
TRANSLATE Z
ROTATE X
ROTATE Y
ROTATE Z
TRANSLATE X
TRANSLATE Y
TRANSLATE Z
Maria Alice Grigas Varella Ferreira – EP-USP
ROTATE
X
Y
Z
TRANSLATE
X
Y
Z
20
Organização de Menus
Menu típico do sistema
Microsoft PowerPoint: A
organização é padronizada para todos os
programas do pacote
(Office). Os itens têm o
mesmo significado para
cada programa do pacote; os itens são colocados
sempre na mesma ordem
(consistência)
Maria Alice Grigas Varella Ferreira – EP-USP
Itens de mesma
categorias são
apresentados juntos
21
Codificação Visual
Codificação visual
“Criar distinção entre os diferentes tipos de
objetos”
Quantas categorias diferentes uma técnica
pode codificar
Maria Alice Grigas Varella Ferreira – EP-USP
22
Codificação Visual
Técnicas:
 Cor
 Forma
 Tamanho / extensão
 Aspecto
 Intensidade
 Textura
 Espessura / estilo de linha
Maria Alice Grigas Varella Ferreira – EP-USP
23
Codificação Visual
A má codificação pode induzir à confusão e
erro
Maria Alice Grigas Varella Ferreira – EP-USP
24
Codificação Visual
Uso de legendas
 10 cores
 6 tamanhos de áreas
 6 extensões
(tamanho/comprimentos)
 4 intensidades
 24 ângulos
 15 formas geométricas
Desempenho
com 95% de
acertos, sem
legendas
Van Cott and Kinkade (72) apud Foley et al. (90)
Maria Alice Grigas Varella Ferreira – EP-USP
25
Codificação Visual
Redundância
 Dois códigos representando a mesma
informação
 Cor é de uso redundante, quase sempre
Maria Alice Grigas Varella Ferreira – EP-USP
26
Codificação Visual
Seleção do código
 Quantos códigos são necessários?
 Qual o tipo de informação?
 Nominativa – dá nomes a elementos;
não há noção de ordem
 Ordinária – apresenta relação de ordem;
não há métrica definindo esta relação
 Proporcional (ratio) – apresenta uma
métrica; ex: temperatura, peso
Maria Alice Grigas Varella Ferreira – EP-USP
27
Codificação Visual
Seleção de código
 Número fixo de códigos:
 Cor é melhor que forma ou tamanho
 8% dos homens têm problemas com
cores!  contornar através do uso de
redundância
 Intensidade – importante para vídeos
preto e branco
Maria Alice Grigas Varella Ferreira – EP-USP
28
Codificação Visual
Apresentação da informação nominativa
 Não inferir ordem
 Melhores técnicas
 Formas
 Estilos de linhas
 Texturas
 Aspectos do texto
 2 ou 3 técnicas no máximo para não
causar confusão
Maria Alice Grigas Varella Ferreira – EP-USP
29
Codificação Visual
Apresentação da informação ordinária
(ordenada?)
 Sugerir ordem
 Melhores técnicas
 Texturas com densidade variável
 Tamanho do texto
 Técnicas que reforcem o peso visual
(negrito)
 Hierarquia topográfica
Maria Alice Grigas Varella Ferreira – EP-USP
30
Apresentação da informação
NÍVEL PRINCIPAL
NIVEL SECUNDÁRIO
NÍVEL TERCIÁRIO
NÍVEL TERCIÁRIO
NÍVEL QUATERNÁRIO
NÍVEL QUATERNÁRIO
NÍVEL TERCIÁRIO
NÍVEL PRINCIPAL
NIVEL SECUNDÁRIO
NÍVEL TERCIÁRIO
NÍVEL TERCIÁRIO
NÍVEL QUATERNÁRIO
NÍVEL QUATERNÁRIO
NÍVEL TERCIÁRIO
NÍVEL PRINCIPAL
NIVEL SECUNDÁRIO
Indentação
NÍVEL TERCIÁRIO
NÍVEL TERCIÁRIO
NÍVEL QUATERNÁRIO
NÍVEL QUATERNÁRIO
NÍVEL TERCIÁRIO
Maria Alice Grigas Varella Ferreira – EP-USP
Hierarquia de estilos
tipográficos
31
Codificação Visual
Apresentação da informação proporcional
 Código que varie proporcionalmente
 Melhores técnicas
 Tamanho
 Extensão
 Orientação
Maria Alice Grigas Varella Ferreira – EP-USP
32
Codificação Visual
Técnicas especiais
 Posicionamento em escala
 Posicionamento em identidade, em escalas não
alinhadas
 Extensão
 Ângulo entre 2 linhas / inclinação de linhas
 Área
 Volume, densidade, saturação da cor
 Matiz
Cleveland e McGill (84), Cleveland e McGill (85)
apud Foley et al. (90)
Maria Alice Grigas Varella Ferreira – EP-USP
33
Codificação Visual
Cuidados
 Verificar regras de similaridade na codificação
 Verificar agrupamentos lógicos
Apresentação de dados quantitativos
 Gráfico de barras
 Gráficos de pizza
 Tendências
(Vários autores estudam o assunto)
Maria Alice Grigas Varella Ferreira – EP-USP
34
Gráfico de Barras
Maria Alice Grigas Varella Ferreira – EP-USP
35
Codificação Visual
Mecanismos de atenção
 Única cor / forma
 Cursor rotativo / pulsante
 Vídeo reverso
Maria Alice Grigas Varella Ferreira – EP-USP
36
Consistência Visual
“Uso consistente das regras de organização
visual, de combinação dos elementos visuais
em objetos / ícones”.
Aspecto do tópico Consistência
Elementos visuais = letras
alfabeto visual
Maria Alice Grigas Varella Ferreira – EP-USP
alfabeto
37
Consistência Visual
Ex. de alfabetos
Maria Alice Grigas Varella Ferreira – EP-USP
38
Projeto da tela
Menus
Área de prompts
Área de trabalho
Maria Alice Grigas Varella Ferreira – EP-USP
39
Projeto Visual - Princípios
Balanceamento – o centro da tela coincide
com a posição natural da vista do observador
Exemplo: Word
Maria Alice Grigas Varella Ferreira – EP-USP
40
Maria Alice Grigas Varella Ferreira – EP-USP
41
Projeto Visual - Princípios
Grade (gridding) – alinhamento dos objetos
segundo uma grade
Maria Alice Grigas Varella Ferreira – EP-USP
42
Alinhamento dos botões na
grade
Maria Alice Grigas Varella Ferreira – EP-USP
43
Alinhamento de objetos
Janela Modal
Maria Alice Grigas Varella Ferreira – EP-USP
44
Projeto Visual - Princípios
Proporção – tamanho das áreas
retangulares, devem obedecer a proporções
bem determinadas
 1:1
 1:sqrt (2) = 1:1.414
 1:1.618 (retângulo áureo)
Maria Alice Grigas Varella Ferreira – EP-USP
45
Projeto
antropomórfico
antropomorfismo . [De antropomorfo + ismo.] S. m. 1. Tendência para atribuir, ou a
forma de pensamento que atribui formas ou
características humanas a Deus, deuses, ou
quaisquer outros entes naturais ou
sobrenaturais. 2. Filos. Aplicação a algum
domínio da realidade (social, biológico, físico,
etc.) de linguagem ou de conceitos próprios
do homem ou do seu comportamento.
Maria Alice Grigas Varella Ferreira – EP-USP
46
Projeto
antropomórfico
“A sugestão de que computadores pensam,
conhecem ou entendem [da mesma forma
como seres humanos] dá aos usuários um
modelo errôneo de como os computadores
trabalham e o que de fato são as
capacidades das máquinas. No final, a
decepção se torna aparente e os usuários se
sentem tratados, miseravelmente”.
(Schneiderman, 1998)
Maria Alice Grigas Varella Ferreira – EP-USP
47
Projeto
antropomórfico
“Relações entre pessoas são diferentes de relações
entre pessoas e computadores”.
“Usuários e projetistas necessitam aceitar a
responsabilidade pelo mau uso dos computadores ao
invés de blasfemarem contra os erros da máquina”
Existem regras para tratar com o antropomorfismo
(ver Box 11.2).
(Schneiderman, 1998)
Maria Alice Grigas Varella Ferreira – EP-USP
48
Projeto
antropomórfico
“Interfaces antropomórficas podem causar ansiedade
em algumas pessoas. Muitas pessoas sentem
ansiedade em relação ao uso de computadores e
acham que os computadores fazem com que sintam
“emudecidos”. Apresentar o computador com suas
funções reais (específicas) pode ser um estímulo
mais poderoso para a aceitação por parte do usuário
do que a promoção da fantasia de que o computador
é um parente, amigo ou parceiro”.
(Schneiderman, 1998)
Maria Alice Grigas Varella Ferreira – EP-USP
49
Regras de Ouro de projeto
Mullet e Sano (1995) apud Schneiderman (1998) seis categorias:
 Elegância e simplicidade
 Escala, contraste e proporção
 Organização e estrutura visual
 Programa e modularidade
 Imagem e representaçào
 Estilo
Exemplos: ver Box 11.3
Maria Alice Grigas Varella Ferreira – EP-USP
50
Regras para uso da cor
“Vídeos coloridos são atraentes para os
usuários, mas o perigo do uso indevido é
alto”.
Exemplos de diretivas: Box 11.4
Maria Alice Grigas Varella Ferreira – EP-USP
51
Referências Bibliográficas
Foley et al. 1990.
Schneiderman, 1998 – cap. 11.
Maria Alice Grigas Varella Ferreira – EP-USP
52