[email protected] rangelde [email protected]
DSC/CCT/UFCG
[email protected] [email protected]
DSC/CCT/UFCG
“Good design is based on eye flow.
The more eye movement required
within a visual field, the less
information can be received and
processed.”
[Lemay, Duff & Mohler, Graphics & Web Page Design (1996)]
2
Projeto Gráfico
I
DSC/CCT/UFCG
 “Visual” da interface com o usuário, quer
para aplicações stand-alone ou web
[email protected] [email protected]
 Composição visual contendo fontes de texto,
imagens, cores e layouts
de uma “cara” e
impressivo” para um produto
 Criação
um
“visual
 Estabelecimento de um framework destinado
à compreensão do conteúdo
3
DSC/CCT/UFCG
Projeto Gráfico
II
[email protected] [email protected]
Fontes de texto
Cores
Imagens
Layout
4
DSC/CCT/UFCG
Projeto Gráfico III
[email protected] [email protected]
Fontes de texto
Cores
Imagens
Layout
5
DSC/CCT/UFCG
Projeto Gráfico IV
[email protected] [email protected]
 Compartilhamento de aspectos de práticas de
projeto em Engenharia e Ciência da
Computação
com
foco
em
aspectos
cognitivos,
culturais,
simbólicos
e
emocionais
 Relação direta com os aspectos Utilidade,
Usabilidade e Preferência
6
DSC/CCT/UFCG
Projeto Gráfico
V
[email protected] [email protected]
 Prática adotada pelas diferentes sociedades
humanas há milhares de anos
7
DSC/CCT/UFCG
Projeto Gráfico
VI
 Diversificação da arte e do projeto visual a
partir da Revolução Industrial
[email protected] [email protected]
 Projeto de impressos e artefatos para a
produção em massa
http://www.ebroadcast.com.au/dir/Arts/Illustration/Historic_Illustrators/
8
Projeto Gráfico
VII
DSC/CCT/UFCG
 Desenvolvimento do projeto gráfico como
profissão sobretudo após a II Guerra Mundial.
Fonte INSIGNIA
[email protected] [email protected]
Neville BRODY
Logomarcas
Projeto visual
Fonte ONDINA
Adrian FRUTIGER
Poster (1989)
Fonte ZAPF ESSENTIALS OFFICE
Hermann ZAPF
Fonte ZAPFINO EXTRA
Cartaz Publicitário da
FIRESTONE (1999)
9
Projeto Gráfico
VIII
DSC/CCT/UFCG
[email protected] [email protected]
 Fundamentação no EQUILÍBRIO e na
INTEGRAÇÃO de aspectos objetivos e
subjetivos
Projeto Gráfico
Aspectos
Objetivos
Aspectos
Subjetivos
10
Projeto Gráfico
IX
DSC/CCT/UFCG
 Aspectos Objetivos
 Fundamentação em estudos quantitativos,
e.g. testes de usabilidade
[email protected] [email protected]
 O “visual” funciona?
 Aspectos Subjetivos
 Fundamentação no julgamento qualitativo
de especialistas, e.g. avaliação heurística
 Dependência de fatores contextuais
11
Projeto Gráfico
X
DSC/CCT/UFCG
 Caráter contextual do “visual” da interface
 Fundamentação na cultura
 Diferenças nos significados culturais
[email protected] [email protected]
 Multiplicidade de significados
 Valorização
da
rigorosidade
singularidade
e
da
12
Projeto Gráfico
XI
DSC/CCT/UFCG
 Conhecimento
de
princípios
de
projeto
gráfico
 Aprimoramento
[email protected] [email protected]
da
capacidade
comunicação com projetistas gráficos
de
 Capacitação para a concepção de interfaces
mais usáveis
13
Projeto Gráfico
XI
DSC/CCT/UFCG
 Diversidade de filosofias e pontos de vista de projeto
gráfico
 Ponto de vista consensual
 Economia de elementos visuais
[email protected] [email protected]
 Fundamentação na máxima menos é mais
 Concepção de telas “limpas” e bem organizadas
 Uso de formas inerentes à aplicação (Die Form folgt
aus der Funktion - Bauhaus )
14
DSC/CCT/UFCG
Princípios de Projeto
Gráfico I
 Clareza
 Uso de Metáforas Adequadas
 Manutenção da Consistência
[email protected] [email protected]
 Consideração do Alinhamento
 Observação da Proximidade
 Exploração do Contraste
15
DSC/CCT/UFCG
Princípios de Projeto Gráfico
II
 Clareza I
 Justificação da inserção de cada elemento
[email protected] [email protected]
planejado para a composição gráfica de uma
interface
 Fundamentação do projeto visual na máxima
Menos é mais
16
DSC/CCT/UFCG
Princípios de Projeto Gráfico
III
 Clareza II
 Espaços em branco (Espaço negativo)
[email protected] [email protected]
 Condução dos olhos para as áreas contendo
informações (Espaço positivo)
 Direcionamento
dos olhos por entre os
elementos ativos do diálogo
 Provisão de simetria e equilíbrio ao projeto,
mediante o uso adequado
 Reforço do impacto da mensagem
 Uso associado à simplicidade, elegância,
classe e refinamento do projeto gráfico
17
DSC/CCT/UFCG
Princípios de Projeto Gráfico
IV
 Clareza III
 Exemplo 1
[email protected] [email protected]
 Em sua opinião,
há clareza na
apresentação da
informação?
18
DSC/CCT/UFCG
Princípios de Projeto Gráfico
V
 Clareza IV

Exemplo 2
[email protected] [email protected]

Em sua opinião,
há clareza na
apresentação da
informação?
19
DSC/CCT/UFCG
Princípios de Projeto Gráfico
VI
 Clareza V
 Exemplo 3
[email protected] [email protected]
 Em sua opinião,
há clareza na
apresentação da
informação?
20
DSC/CCT/UFCG
Princípios de Projeto Gráfico
VII
 Clareza VI
 Exemplo 4
[email protected] [email protected]
 Em sua opinião,
há clareza na
apresentação da
informação?
21
DSC/CCT/UFCG
Princípios de Projeto Gráfico
VIII
 Uso de Metáforas Adequadas I
 Limitação da apresentação visual ao mínimo
possível de itens familiares relevantes
[email protected] [email protected]
 Uso de metáforas familiares  Consideração
do conhecimento e das experiências do
usuário
 Interfaceamento direto e intuitivo do usuário
com a aplicação durante a realização de
tarefas
 Facilidade de previsão e aprendizado dos
comportamentos
das
baseadas em software
representações
22
DSC/CCT/UFCG
Princípios de Projeto Gráfico
IX
 Uso de Metáforas Adequadas II
[email protected] [email protected]
 Compreensão
mais efetiva do uso dos
diferentes elementos visuais da interface e
da navegação pelos níveis de informação
nela existentes
 Consideração de que NENHUMA metáfora é
perfeita
 Adoção de uma combinação equilibrada das
melhores partes de várias metáforas
 Consideração do contexto de uso
 Focalização no ponto de vista do usuário
23
DSC/CCT/UFCG
Princípios de Projeto Gráfico
X
 Uso de Metáforas Adequadas III
 Categorias de Metáforas
 Associação com a
estruturação existente de um grupo, sistema
ou organização
[email protected] [email protected]
 Organizacionais
 Exemplo
 Criação
de um site para o comércio
eletrônico de livros  Metáfora de uma
livraria, na qual os produtos aparecem
agrupados por tipo (e.g. profissional, ficção)
e subtipo (e.g. ciência da computação,
história, ficção científica)
24
DSC/CCT/UFCG
Princípios de Projeto Gráfico
XI
 Uso de Metáforas Adequadas IV - Exemplo 5
 Qual
[email protected] [email protected]
a sua opinião sobre
organizacional usada neste site?
http://www.worldwidestore.com/SclothingM.htm
a
metáfora
25
DSC/CCT/UFCG
Princípios de Projeto Gráfico
XII
 Uso de Metáforas Adequadas V
 Categorias de Metáforas
 Relação entre tarefas
passíveis de execução com a aplicação e
tarefas passíveis de serem executadas em
outras aplicações
[email protected] [email protected]
 Funcionais
 Exemplo
 Criação da interface para um ambiente de
processamento gráfico  Uso de metáforas
que possibilitem a execução de tarefas (e.g.
recorte, cópia e colagem de representações
gráficas) de modo similar ao que ocorre em
outros ambientes não necessariamente
destinados ao processamento gráfico
26
DSC/CCT/UFCG
Princípios de Projeto Gráfico
XIII
 Uso de Metáforas Adequadas VI - Exemplo 6
 Qual a sua opinião sobre as metáforas funcionais
[email protected] [email protected]
destacadas nesta aplicação?
27
DSC/CCT/UFCG
Princípios de Projeto Gráfico
XIV
 Uso de Metáforas Adequadas VII
 Categorias de Metáforas
 Visuais  Fundamentação em elementos
[email protected] [email protected]
gráficos culturais comuns,
maioria dos usuários
familiares
à
 Exemplo
 Concepção da interface para um CD player
virtual  Uso das metáforas icônicas start,
stop, previous, next e pause existentes
em CD players do mundo inteiro
28
DSC/CCT/UFCG
Princípios de Projeto Gráfico
XV
 Uso de Metáforas Adequadas VIII - Exemplo 7
 Qual a sua opinião sobre as metáforas visuais
[email protected] [email protected]
utilizadas nesta aplicação?
29
DSC/CCT/UFCG
Princípios de Projeto Gráfico
XVI
 Uso de Metáforas Adequadas VII
 Recomendações
 Coletar opiniões de usuários
[email protected] [email protected]
 Revisar e avaliar cada metáfora coletada/
planejada
 Evitar
desencorajar quaisquer sugestões
oferecidas pelos usuários (pelo menos não
de imediato)
 Tentar
mapear as principais seções da
aplicação, conectando os elementos dos
níveis de informação associados a cada
metáfora
30
DSC/CCT/UFCG
Princípios de Projeto Gráfico
XVII
 Consistência I
 De
[email protected] [email protected]
layout, cromática, visual, icônica,
tipográfica, textual, metafórica, semântica e
sintática
 Em cada tela e ao longo de diferentes telas
 Adoção das recomendações do guia de estilo
da plataforma para a qual a aplicação se
destina
31
DSC/CCT/UFCG
Princípios de Projeto Gráfico
XVIII
[email protected] [email protected]
 Consistência II - Exemplo 8
Página principal
Página 1
www.santafean.com
Página 2
32
DSC/CCT/UFCG
Princípios de Projeto Gráfico
XVIII
 Consistência III - Exemplo 9
 Qual
[email protected] [email protected]
a sua
opinião sobre
a consistência
deste projeto?
33
DSC/CCT/UFCG
Princípios de Projeto Gráfico
XIX
 Alinhamento I
 Convenção da civilização ocidental
 Início no topo, à esquerda
[email protected] [email protected]
 Acompanhamento da informação de cima
para baixo, da esquerda para a direita
 Auxílio ao sistema visual no tocante ao
escrutínio mais
visualização
fácil
do
dispositivo
de
34
DSC/CCT/UFCG
Princípios de Projeto Gráfico
XX
 Alinhamento II
 Uso de grades I
[email protected] [email protected]
 Auxílio à localização de componentes da tela
a partir de linhas horizontais e verticais
(ocultas)
 Associação de itens relacionados
 Agrupamento lógico de itens
 Minimização
redução
informações
do número de controles e
do
congestionamento
de
35
DSC/CCT/UFCG
Princípios de Projeto Gráfico
XXI
 Alinhamento III
 Uso de grades II
[email protected] [email protected]
 Exemplo 9
http://webmonkey.wired.com/webmonkey/98/28/index4a_page2.html?tw=design
36
DSC/CCT/UFCG
Princípios de Projeto Gráfico
XXII
 Alinhamento IV
 Uso de grades III
[email protected] [email protected]
 Exemplo 10
37
DSC/CCT/UFCG
Princípios de Projeto Gráfico
XXII
 Alinhamento V
 Uso de grades IV
[email protected] [email protected]
 Exemplo 11
38
DSC/CCT/UFCG
Princípios de Projeto Gráfico
XXIII
 Alinhamento V
 À esquerda, centralizado ou à direita
[email protected] [email protected]
Eis um texto
alinhado
à esquerda
Eis um texto
alinhado
pelo centro
Eis um texto
alinhado
à direita
 Seleção de um modo de alinhamento e uso
consistente em todo o projeto
 Tendência
à centralização de itens por
principiantes
 Indefinição, calma, formalidade
39
DSC/CCT/UFCG
Princípios de Projeto Gráfico
XXIV
 Proximidade I
 Contigüidade de itens causa a sensação
[email protected] [email protected]
visual/ mental da existência de uma relação
entre eles
 Distanciamento implica usualmente ausência
de relação entre itens
40
DSC/CCT/UFCG
Princípios de Projeto Gráfico
XXV
 Proximidade II
 Exemplo 12
Nome
[email protected] [email protected]
Endereço 1
Endereço 2
Cidade
Nome
Endereço 1
Endereço 2
Cidade
Estado
Estado
Fone
Fax
Nome
Endereço 1
Endereço 2
Cidade
Estado
Fone
Fone
Fax
Fax
41
DSC/CCT/UFCG
Princípios de Projeto Gráfico
XXVI
 Proximidade III
[email protected] [email protected]
 Exemplo 13 – Quadro de Diálogo I
42
DSC/CCT/UFCG
Princípios de Projeto Gráfico
XXVII
 Proximidade IV
[email protected] [email protected]
 Exemplo 14 – Quadro de Diálogo II
43
DSC/CCT/UFCG
Princípios de Projeto Gráfico
XXVIII
 Proximidade V
[email protected] [email protected]
 Exemplo 15 – Quadro de Diálogo III
44
DSC/CCT/UFCG
Princípios de Projeto Gráfico
XXIX
 Proximidade VI
[email protected] [email protected]
 Exemplo 16 – Quadro de Diálogo IV
45
DSC/CCT/UFCG
Princípios de Projeto Gráfico
XXX
 Contraste I
 Retenção da atenção
[email protected] [email protected]
 Condução dos olhos em torno da interface
 Possibilidade de focalização do olho na
informação mais
apresentado
relevante
do
contexto
 Possibilidade de uso para o direcionamento
do olho para o item mais importante
 Dominância da idéia principal do contexto
visualizado
46
DSC/CCT/UFCG
Princípios de Projeto Gráfico
XXXI
 Contraste II
 Diretrizes relevantes
[email protected] [email protected]
 Definir
qual o item mais importante na
interface e destacá-lo dos demais itens
presentes
 Usar
a
geometria
para
auxiliar
o
seqüenciamento da informação apresentada
47
DSC/CCT/UFCG
Princípios de Projeto Gráfico
XXXII
 Contraste III - Exemplo 17
 Qual
sua
opinião sobre
o
uso
do
contraste nesta
página?
[email protected] [email protected]
a
Uso
de
contraste
para a discriminação
de diferentes níveis
de informação
48
DSC/CCT/UFCG
Princípios de Projeto Gráfico
XXXIII
 Exercício 01
 Observe a interface da transparência 48 e
responda:
[email protected] [email protected]
 Para
onde o seu olho é
direcionado (O que domina?)
inicialmente
 Qual é o componente mais importante nesta
interface?
49
DSC/CCT/UFCG
Princípios de Projeto Gráfico
XXXIII
[email protected] [email protected]
 Exercício 01
50
DSC/CCT/UFCG
Princípios de Projeto Gráfico
XXIV
 Exercício 02
 Diagnostique o excerto de interface exibido a
[email protected] [email protected]
seguir.
51
DSC/CCT/UFCG
Economia de Elementos
Visuais I
 Princípios
 Fundamentação na máxima menos é mais
[email protected] [email protected]
 Minimização
de
bordas,
delineamento
maciço e fronteiras de seções (Uso de
espaço em branco)
 Minimização do ruído visual
 Minimização do número de controles
52
DSC/CCT/UFCG
Economia de Elementos
Visuais II
 Economia de Elementos Visuais I - Exemplo 18
[email protected] [email protected]
 Qual
a sua
opinião sobre
a
economia
de elementos
visuais deste
projeto?
53
DSC/CCT/UFCG
Economia de Elementos
Visuais II
 Economia de Elementos Visuais II - Exemplo 19
 Qual a sua opinião
[email protected] [email protected]
sobre a economia de
elementos
visuais
deste projeto?
54
Técnicas de
Codificação I
DSC/CCT/UFCG
 Vídeo Piscante
 Recurso adequado para atrair a atenção do
observador para um alvo de interesse
[email protected] [email protected]
 Uso moderado e cauteloso
 Vídeo Reverso
 Recurso adequado para destacar um alvo de
interesse
 Uso moderado e cauteloso
55
Técnicas de
Codificação II
DSC/CCT/UFCG
 Luz e Cor I
 Percepção Artística da Cor I
[email protected] [email protected]
 Fundamentação na fusão de branco e preto
às cores puras
 Tinta
 Cor pura + Branco
 Sombra  Cor pura + Preto
 Tom
 Cor pura + Preto + Branco
56
Técnicas de
Codificação III
DSC/CCT/UFCG
 Luz e Cor II
 Percepção Artística da Cor II
SATURAÇÃO
BRILHO
[email protected] [email protected]
Branco
Tons
de Cinza
Tintas
Cor Pura
Tons
Sombras
Preto
57
Técnicas de
Codificação IV
DSC/CCT/UFCG
 Luz e Cor III
 Características para a Discriminação da Cor
 Matiz (Hue)
[email protected] [email protected]
 Cor dominante conforme percepção do
observador
 Saturação (Saturation)
 Pureza relativa da cor
 Cores puras  Saturação de 100%
SATURAÇÃO
58
Técnicas de
Codificação V
DSC/CCT/UFCG
 Modelo Cromático HSV I
 HSV (H ue S aturation V alue)
 Uso comum em aplicações de computação
[email protected] [email protected]
gráfica
 Seleção de cores por um usuário para
aplicação a elementos gráficos
 Uso do disco de cores HSV
120° G
60° Y
Escala de Saturação
180° C
0° R
Escala de Brilho
240° B
300° M
59
Técnicas de
Codificação VI
DSC/CCT/UFCG
 Modelo Cromático HSV II
 HSV (H ue S aturation V alue) ou HSB (H ue
S aturation B rightness)
 Disco de Cores
 Saturação e Valor  Região triangular
separada (Triângulo retângulo)
 Saturação  Eixo horizontal do triângulo
 Valor  Eixo vertical do triângulo
Saturação
Matiz
Valor
[email protected] [email protected]
 Matiz  Região circular
60
DSC/CCT/UFCG
Técnicas de Codificação
VII
 Modelo Cromático HSV III
 Método
[email protected] [email protected]
cônico
(ou
hexacônico)
de
visualização  Uso de uma formação cônica
(ou hexacônica) do disco de cores
 Saturação  Distância do centro de uma
seção circular do cone
 Valor  Distância da ponta do cone ao ponto
de interesse, sobre o eixo vertical
61
DSC/CCT/UFCG
Técnicas de Codificação
VIII
 Modelo Cromático HSV IV
[email protected] [email protected]
 Visões cônica e hexacônica
120° Verde
180° Ciano
240° Azul
V
60° Amarelo
H
1.0 Branco
0° Vermelho
S
300° Magenta
0.0 Preto
62
DSC/CCT/UFCG
Técnicas de Codificação
IX
 Modelo Cromático HSV V
 Método cilíndrico de visualização
 Modelo matematicamente mais acurado do
[email protected] [email protected]
espaço cromático HSV
 Limitações de caráter prático
 Decréscimo
do número de níveis de
saturação
e
matizes
visualmente
distinguíveis à medida que o valor tende para
0 (Preto)
 Limitação da faixa de precisão no processo
típico de armazenamento de valores RGB em
sistemas computacionais
63
Técnicas de
Codificação X
DSC/CCT/UFCG
 Modelo Cromático HSV VI
 Método
cilíndrico
visualização
(ou
hexacilíndrico)
120° Verde
[email protected] [email protected]
180° Ciano
V
60° Amarelo
H
1.0 Branco
240° Azul
de
0° Vermelho
S
300° Magenta
0.0 Preto
64
Técnicas de
Codificação XI
DSC/CCT/UFCG
 Modelo Cromático HSV VII
 Tintas  Adição de pigmento BRANCO
 Redução de S com V constante
[email protected] [email protected]
 Sombras  Adição de pigmento PRETO
 Redução de V com S constante
 Tons  Redução de S e V
 Exemplo
 VERMELHO (Puro)
H =0
S =1
V =1
0° Vermelho
65
Técnicas de Codificação
XII
DSC/CCT/UFCG
 Matiz
 Comprimento de onda dominante (vermelho, verde,
amarelo, azul)
[email protected] [email protected]
 Espectro cromático (VIBGYOR)
 Saturação
 Pastel versus quente (azul bebê, azul celeste, azul
real)
 Valor
 Quantidade de energia (branco, cinza claro, cinza
escuro, preto)
 Usualmente V = 0.299*R+0.587*G+0.114*B
66
Técnicas de Codificação
XIII
DSC/CCT/UFCG
 Ferramentas típicas para a seleção de cores
V
H
[email protected] [email protected]
S
Mapinfo Professional v. 7
Corel Photopaint 12
67
DSC/CCT/UFCG
Técnicas de Codificação
XIV
 Cor Refletida e Emitida I
 Visão do mundo  Cor refletida
[email protected] [email protected]
 Incidência da luz (natural ou artificial) sobre
superfícies e reflexão para os sensores
visuais segundo propriedades da superfície
 Exemplo: Imagem impressa em uma folha de
papel a partir de uma impressora
de jato de tinta  Uso do modelo
cromático subtrativo CMYK
(Primárias
Cyan,
Magenta,
Yellow e BlacK)
68
DSC/CCT/UFCG
Técnicas de
Codificação XV
 Cor Refletida e Emitida II
 Visão do mundo  Cor emitida
[email protected] [email protected]
 Emissão da luz (por superfícies geradoras de
radiação luminosa) diretamente para os
sensores visuais segundo propriedades da
superfície emissora
 Exemplo: Imagem
visualizada
em
um
terminal de vídeo (CRT ou LCD) 
Uso do modelo cromático aditivo
RGB (Primárias
e Blue)
Red, Green
69
DSC/CCT/UFCG
Técnicas de Codificação
XVI
 Diretrizes para Uso de Cor I
 Usar cor cuidadosa e moderadamente
 Projetar em P&B e, só então, adicionar cor
[email protected] [email protected]
onde se mostrar pertinente e apropriado
 Empregar
cor para atrair a atenção,
expressar organização, indicar status,
estabelecer relações entre níveis de
informação ou entre elementos de um
mesmo nível de informação
 Evitar o uso de recursos cromáticos sem
relação com a tarefa
70
DSC/CCT/UFCG
Técnicas de Codificação
XVII
 Diretrizes para Uso de Cor II
 Usar cor para auxiliar o usuário em tarefas de
busca
[email protected] [email protected]
 Evitar o uso de cor em situações em que não
haja um recurso alternativo (redundante)
para evidenciar a informação codificada via
cor
 Cegueira
cromática
(protanopsia,
deuteranopsia, acianoblepsia/acianopsia )
 Monocromaticidade dos terminais de vídeo
 Elevação do desempenho do processo de
codificação em função da redundância
71
DSC/CCT/UFCG
Técnicas de Codificação
XVIII
 Diretrizes para Uso de Cor III
 Manter
a consistência com associações
cromáticas de profissões e culturas
[email protected] [email protected]
 Apresentar imagens coloridas sobre fundos
preto, branco ou cinza
 Assegurar o contraste entre as cores do
plano frontal de informação (foreground), e
as cores do plano de fundo (background),
tanto em nível de brilho quanto de matiz
 Usar cor com um propósito, não apenas
como adereço para o projeto
72
DSC/CCT/UFCG
Técnicas de Codificação
XIX
 Exemplo 20 – Discriminação de Formas I
 Quantos retângulos menores compõem o
[email protected] [email protected]
grupo de formas abaixo ilustrado?
73
DSC/CCT/UFCG
Técnicas de
Codificação XX
 Exemplo 21 – Discriminação de Formas II
 Quantos retângulos menores compõem o
[email protected] [email protected]
grupo de formas abaixo ilustrado?
74
DSC/CCT/UFCG
Técnicas de Codificação
XXI
 Exemplo 22 – Discriminação de Formas III
 Quantos retângulos menores compõem o
[email protected] [email protected]
grupo de formas abaixo ilustrado?
75
DSC/CCT/UFCG
Técnicas de Codificação
XXII
 Exercício 02 – Discriminação de objetos
coloridos I
[email protected] [email protected]
 Localize uma letra vermelha
E V UB
U
W
F
O
A
C
C
B
Z E L
L
K
M
X
R
H
I
J
H
N
T
G
S RT
G
V
V
P
D
O
Q
Q
X F
D
I
V
W
S
X
K
N Y W
D
Y V
Z
S
Z W K S R P
M
J
76
DSC/CCT/UFCG
Técnicas de Codificação
XXIII
 Exercício 03 – Discriminação de objetos
coloridos II
[email protected] [email protected]
 Localize um A e dois Y
E V UB
U
W
F
O
A
C
C
B
Z E L
L
K
M
X
R
H
I
J
H
N
T
G
S RT
G
V
V
P
D
O
Q
Q
X F
M
I
V
W
S
X
K
N Y W
D
Y V
Z
S
Z W K S R P
M
J
77
Técnicas de Codificação
XXIV
DSC/CCT/UFCG
 Exercício 03 – Discriminação de objetos
coloridos III
[email protected] [email protected]
 Localize um Q e um M
H
C
V
M
R
T
U
F
D
P
Q
A
O
S
K
Y
J
G
Z
W
E
D
78
DSC/CCT/UFCG
Técnicas de Codificação
XXV
 Cor e Busca I
 Auxílio
[email protected] [email protected]
em tarefas de
específicos
em
um
visualização
busca de itens
dispositivo
de
 Aceleração do processo de localização
 Formas (60%)
 Tamanhos (40%)
 Brilho (40%)
 Caracteres Alfanuméricos (40%)
 Letras (10%)
79
DSC/CCT/UFCG
Técnicas de Codificação
XXVI
 Cor e Busca II
 Determinação do Escore
[email protected] [email protected]
E = (TBA – TBC)/TBA
TBA – Tempo de Busca Acromática
TBC – Tempo de Busca Cromática
 Decréscimo inicial do tempo de busca com a
adição de um número reduzido de cores ao
contexto da tarefa
 Acréscimo progressivo do tempo de busca
com o crescimento do número de cores
adicionadas
80
Técnicas de Codificação
XXVII
DSC/CCT/UFCG
 Acurácia e Codificação por Cor I
 Aumento da Discriminação  Redundância
na codificação
[email protected] [email protected]
 Formas Geométricas

Círculo amarelo

Retângulo azul
81
DSC/CCT/UFCG
Técnicas de Codificação
XXVIII
 Acurácia e Codificação por Cor II
 Aceleração do processo de localização 
Indicações visuais de reforço
[email protected] [email protected]
 Resultados
 Brilho e Cor (104%)
 Tamanho, Brilho e Cor (61%)
 Tamanho e Cor (60%)
82
DSC/CCT/UFCG
Técnicas de Codificação
XXIX
 Acurácia e Codificação por Cor III
 Determinação do Escore
[email protected] [email protected]
E = (R – C)/C
R – Cor + Redundância
C – Apenas Cor
83
DSC/CCT/UFCG
Técnicas de Codificação
XXX
 Diretrizes para Uso de Cor IV
 Usar cores contrastantes para expressar
[email protected] [email protected]
diferença (vice-versa)
 Assegurar-se de que as cores utilizadas nos
planos de frente (foreground) e de fundo
(background) não “vibram”
Par de cores escolhidas “vibra” 
Fadiga ocular e dor de cabeça
84
DSC/CCT/UFCG
Técnicas de Codificação
XXXI
 Diretrizes para Uso de Cor IV
 Usar cores contrastantes para expressar
[email protected] [email protected]
diferença (vice-versa)
 Assegurar-se de que as cores utilizadas nos
planos de frente (foreground) e de fundo
(background) não “vibram”
Par de cores escolhidas “vibra” 
Fadiga ocular e dor de cabeça
85
Técnicas de Codificação
XXXII
DSC/CCT/UFCG
 Significado da Cor
[email protected] [email protected]
Cor
Significado Contextual
Vermelho
Amor, agressão, perigo, erro, calor, paixão
Cor de rosa
Feminilidade, delicadeza, romance
Laranja
Calor, coragem, advertência, outono
Azul
Frieza, desligado, poder, confiança
Amarelo
Felicidade, precaução, alegria, covardia
Marrom
Estabilidade, Terra, outono, sujeira, morno
Verde
Ligado, inveja, siga, segurança, natureza
Púrpura
Realeza, sofisticação, artificialidade
Branco
Luminosidade, pureza, inocência, bem
Preto
Escuridão, mistério, mal, sobriedade, medo
http://www.color-wheel-pro.com/color-meaning.html
86
DSC/CCT/UFCG
Técnicas de Codificação
XXXIII
 Significado Cultural da Cor I
[email protected] [email protected]
Cor
EUA & Europa
Perigo
Ira
Aristocracia
Covardia
Precaução
Calor
Segurança
Inveja
Meio Ambiente
Masculinidade
Calma
Autoridade
Frieza
Pureza
Virtude
Bem
Luto
Mal
Japão
China
Brasil
Perigo
Ira
Felicidade
Festividade
Ira
Ódio
Alegria
Nobreza
Graça
Juventude
Futuro
Energia
Traição
Frieza
Honra
Realeza
Dinheiro
Ouro
Riqueza
Esperança
Riqueza
Força
Poder
Alegria
Luto
Lamentação
Tristeza
Mal
Lamentação
Humilhação
Pureza
Paz
Bem
Luto
Mal
Juventude
Crescimento
Mal
http://www.cs.uu.nl/people/markov/gmaker/feldman/chapter07.pdf
87
Técnicas de Codificação
XXXIV
DSC/CCT/UFCG
 Significado Cultural da Cor II
Cor
Nigéria
Perigo
[email protected] [email protected]
Luz solar
Brilho
Riqueza
Calma
Paz
Coréia
Oriente Médio
Perigo
Ira
Mal
Riqueza
Perigo
Mal
Natureza
Paz
Frescor
Frieza
Frescor
Fertilidade
Poder
Felicidade
Prosperidade
Pureza
Inocência
Pureza
Virtude
Fé
Verdade
Pureza
Luto
Mal
Mal
Escuridão
Mal
Mistério
http://www.netmechanic.com/news/vol6/design_no10.htm
88
DSC/CCT/UFCG
Técnicas de Codificação
XXXV
 Diretrizes para Uso de Cor V
 Adotar uma paleta (gama de cores utilizada
em uma tela) consistente
[email protected] [email protected]
 Selecionar uma paleta do espaço HSV, a partir
da variação de suas dimensões (H, S e V)
 Evitar a variação simultânea do matiz, da
saturação e do brilho
 Usar apenas 4-6 cores por tela, a menos que
se trate de um efeito artístico ou de um
conjunto de tons contínuos
89
DSC/CCT/UFCG
Técnicas de Codificação
XXXVI
 Diretrizes para Uso de Cor VI
 Empregar cores pastéis e primárias
[email protected] [email protected]
 Levar em conta que as cores dos objetos se
tornam menos visíveis e distintas quando
suas dimensões se tornam menores
 Evitar o uso de cores saturadas ou muito
intensas em áreas ou objetos de grandes
dimensões
 Considerar
as conotações contextuais e
culturais das cores no ato da escolha da
paleta
90
DSC/CCT/UFCG
Técnicas de Codificação
XXXVII
 Uso de Cor versus Faixa Etária
 Influência Significativa
[email protected] [email protected]
 Percepção/ Interpretação/ Resposta às paletas
utilizadas em projetos gráficos
 Aceitação/Preferência pelas paletas de cores
empregadas
gráficas
em
projetos
de
interfaces
91
DSC/CCT/UFCG
Técnicas de Codificação
XXXVIII
 Uso de Cor versus Faixa Etária II
 Resposta/ Preferência cromática de usuários
[email protected] [email protected]
de diferentes faixas etárias
 Crianças mais jovens  Associação de cores
quentes à sensação de alegria
mais velhas e adolescentes 
Melhor resposta a cores brilhantes e quentes
do que a cores opacas e frias
 Crianças
92
DSC/CCT/UFCG
Técnicas de Codificação
XXXIX
 Uso de Cor versus Faixa Etária III
 Resposta/ Preferência cromática de usuários
de diferentes faixas etárias
[email protected] [email protected]
 Adultos  Preferência por cores mais frias e
more suaves em relação a cores quentes e
saturadas
 Adultos mais velhos  Melhor resposta a
cores mais brilhantes (devido à degradação
do sistema visual, crescente com o aumento
da idade)
http://www.hypermedic.com/color/index.php
93
DSC/CCT/UFCG
Técnicas de
Codificação XL
 Efeito de Texto Colorido sobre Fundo Colorido I
Texto BRANCO
Fundo
VERMELHO
Texto CINZA
Texto AMARELO
[email protected] [email protected]
Texto AMARELO CLARO
Texto VERDE
Texto VERDE CLARO
Texto AZUL
Texto AZUL CLARO
Texto VERMELHO ESCURO
Texto VERMELHO PÁLIDO
Texto COR DE ROSA
Texto PRETO
94
DSC/CCT/UFCG
Técnicas de Codificação
XLI
 Efeito de Texto Colorido sobre Fundo Colorido II
Texto BRANCO
Fundo
AZUL
Texto CINZA
Texto AMARELO
[email protected] [email protected]
Texto AMARELO CLARO
Texto VERDE
Texto VERDE CLARO
Texto AZUL ESCURO
Texto AZUL CLARO
Texto VERMELHO ESCURO
Texto VERMELHO
Texto COR DE ROSA
Texto PRETO
95
DSC/CCT/UFCG
Técnicas de Codificação
XLII
 Efeito de Texto Colorido sobre Fundo Colorido III
Texto BRANCO
Fundo
VERDE
Texto CINZA
Texto AMARELO
[email protected] [email protected]
Texto AMARELO CLARO
Texto VERDE ESCURO
Texto VERDE CLARO
Texto AZUL ESCURO
Texto AZUL CLARO
Texto VERMELHO ESCURO
Texto VERMELHO
Texto COR DE ROSA
Texto PRETO
96
DSC/CCT/UFCG
Técnicas de Codificação
XLIII
 Exercício 03 - Efeito de Texto Colorido sobre
Fundo Colorido
 Observe a interface da transparência 98 e
[email protected] [email protected]
responda:
 Para
onde o
direcionado?
seu
olho
é
inicialmente
 Qual é o componente mais importante nesta
interface?
 Qual o diagnóstico do contraste entre os
diferentes elementos de tal componente?
97
DSC/CCT/UFCG
Técnicas de Codificação
XLIV
[email protected] [email protected]
 Exercício 03
98
Técnicas de Codificação
XLV
DSC/CCT/UFCG
 Ícone
 Representação
[email protected] [email protected]
comunicação
específica
gráfica
destinada
à
visual de uma mensagem
 Símbolo
gráfico (usualmente uma figura
estilizada) projetado para denotar um
conceito em uma interface gráfica com o
usuário
 Programa, objeto ou ação
 Símbolo gráfico associado a um link em
aplicações Web
99
DSC/CCT/UFCG
Técnicas de Codificação
XLVI
 Diretrizes para o Projeto de Ícones I
 Representar objetos ou ações de um modo
familiar e reconhecível para o usuário
[email protected] [email protected]
 Limitar o número de ícones diferentes ao
mínimo possível
 Evitar detalhamento excessivo dos ícones
 Garantir a discriminação dos ícones tanto
entre si quanto destes e o fundo da tela
100
DSC/CCT/UFCG
Técnicas de Codificação
XLVII
 Diretrizes para o Projeto de Ícones II
 Considerar a necessidade de habilidade para
o desenho no ato de projetar/criar ícones
[email protected] [email protected]
 Contratar um projetista de ícones, caso se
sinta incapaz de criá-los satisfatoriamente
(lembrar-se de que há padrões e modos de
projetar/criar ícones críticos)
 Evitar o uso gratuito e sem significado de
ícones
 Assegurar a legibilidade dos ícones criados
independentemente da resolução do vídeo
101
DSC/CCT/UFCG
Técnicas de Codificação
XLVIII
 Exercício 04
[email protected] [email protected]
 O que significa cada um dos ícones abaixo?
102
DSC/CCT/UFCG
Técnicas de Codificação
XLIX
 Diretrizes para o Projeto de Ícones III
 Usar uma família de representações gráficas
[email protected] [email protected]
como base para a criação dos ícones do
projeto
 Exemplo 1
Perspectiva
Famílias de Ícones 3D Planos
Frontal
Arquivo
(JAVATM Sun Microsystems)
Pasta
http://java.sun.com/products/jlf/ed2/book/index.html
103
Técnicas de
Codificação L
DSC/CCT/UFCG
 Diretrizes para o Projeto de Ícones IV
 Usar uma família de representações gráficas
[email protected] [email protected]
como base para a criação dos ícones do
projeto
 Exemplo 2 – Ícones criados a partir de
famílias
Folder
Folder Open
My Documents
My Favorites
http://msdn.microsoft.com/library/default.asp?
url=/library/en-us/dnwxp/html/winxpicons.asp
104
Técnicas de
Codificação LI
DSC/CCT/UFCG
 Coisas a EVITAR em um Projeto Gráfico
 Texto piscante
 Imagens animadas
[email protected] [email protected]
 Imagens de fundo texturizadas
 Quadros (frames)
 Paletas com mais de 5 cores para cada
cenário de uso
 Mistura de fontes de texto
105
Técnicas de
Codificação LII
DSC/CCT/UFCG
 Coisas a LEMBRAR em um Projeto Gráfico
 Simplicidade
 Template de página
[email protected] [email protected]
 Sombras de uma única cor
 Consistência com relação à navegação, aos
elementos do template e à estrutura de
páginas
 Concisão
106
DSC/CCT/UFCG
Técnicas de Codificação
LIII
 Coisas a LEMBRAR em um Projeto Gráfico
 Índice ou mapa de site
 Formato simples para a impressão da página
[email protected] [email protected]
ou do site, se necessário
 Planejamento cuidadoso da página ou do site
107
DSC/CCT/UFCG
José Eustáquio Rangel de Queiroz
UNIVERSIDADE FEDERAL DE CAMPINA GRANDE
DEPARTAMENTO DE SISTEMAS E COMPUTAÇÃO
[email protected] rangelde [email protected]
GRUPO DE INTERFACES HOMEM-MÁQUINA