Upload
internet
View
110
Download
0
Embed Size (px)
Citation preview
1
Projeto Visual
Maria Alice Grigas Varella Ferreira
EP-USP
Abril 2003
2Maria Alice Grigas Varella Ferreira – EP-USP
Projeto Visual
Afeta: Impressão inicial do usuárioUsabilidade a longo prazo
Procura atingir:Clareza visualCodificação visualConsistência visual
3Maria Alice Grigas Varella Ferreira – EP-USP
Projeto Visual
Inclui:Todos os elementos gráficos da interface:
layout da tela,menus,formulários,Imagens, etc
4Maria Alice Grigas Varella Ferreira – EP-USP
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”
5Maria Alice Grigas Varella Ferreira – EP-USP
Clareza Visual
Regras para a organização visual : (Wertheimer – 1930)Ênfase no todo, e não nas partes (Gestalt)
SimilaridadeProximidadeFechamento (closure)Continuidade
6Maria Alice Grigas Varella Ferreira – EP-USP
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 juntosExemplos:
7Maria Alice Grigas Varella Ferreira – EP-USP
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.
8Maria Alice Grigas Varella Ferreira – EP-USP
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.
9Maria Alice Grigas Varella Ferreira – EP-USP
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.
10Maria Alice Grigas Varella Ferreira – EP-USP
Similaridade, proximidade e cor
Regras de Gestalt : no quadro da esquerda, os elementos estão próximos (uniformidade total); à direita, a cor induz o agrupa-mento horizontal, que é reforçado ainda mais pela proximidade.
11Maria Alice Grigas Varella Ferreira – EP-USP
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.
12Maria Alice Grigas Varella Ferreira – EP-USP
Fechamento
FECHAMENTO – se um conjunto de estímu-los quase delimitam uma área ou podem ser assim interpretados, o observador enxerga esta área
Foley et al., 1990
13Maria Alice Grigas Varella Ferreira – EP-USP
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
Janelassuperpostas
14Maria Alice Grigas Varella Ferreira – EP-USP
Continuidade
Mas, poderia ser isso!
Foley et al., 1990
15Maria Alice Grigas Varella Ferreira – EP-USP
Projeto visual
Cor da Área
Cor da Borda
Automático Invisível
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
16Maria Alice Grigas Varella Ferreira – EP-USP
Uso de fechamento e de agru-pamento no projeto visual da tela
Automático Invisível
Cor da Borda
Automático Invisível
Cor da Área
Largura da Borda
17Maria Alice Grigas Varella Ferreira – EP-USP
Proximidade, reforçando o alinhamento horizontal
Esquerda Centralizado Direita
Topo Centralizado Base
Alinhamento de objetos:
Esquerda Centralizado Direita
Topo Centralizado Base
Alinhamento de objetos: Sugere ali-nhamento vertical
Mas o ali-nhamento éhorizontal
18Maria Alice Grigas Varella Ferreira – EP-USP
Uso de correspondência espa-cial para reforçar o significado
Esquerda Centralizado Direita
Topo Centralizado Base
Alinhamento de objetos:
Esquerda Centralizado Direita
Topo
Centralizado
Base
Alinhamento de objetos:
19Maria Alice Grigas Varella Ferreira – EP-USP
Clareza Visual
Cuidado. Regras mal usadas podem enganar o usuário!
ATEBITEDOGFARGETHAT
BATECATEASTFATGOTHIGH
BETCUPEASYFITSGUTHIT
ATE
BITE
DOG
FAR
GET
HAT
BATE
CAT
EAST
FAT
GOT
HIGH
BET
CUP
EASY
FITS
GUT
HIT
real
20Maria Alice Grigas Varella Ferreira – EP-USP
Organização aplicada a menus
Aplicação das regras na organização de um menu
ROTATE XROTATE YROTATE ZTRANSLATE XTRANSLATE YTRANSLATE Z
ROTATE X ROTATE Y ROTATE Z
TRANSLATE X TRANSLATE Y TRANSLATE Z
ROTATE XYZ
TRANSLATE XYZ
21Maria Alice Grigas Varella Ferreira – EP-USP
Organização de Menus
Menu típico do sistema Microsoft PowerPoint: A organização é padro-nizada para todos os programas do pacote (Office). Os itens têm o mesmo significado para cada programa do paco-te; os itens são colocados sempre na mesma ordem (consistência)
Itens de mesma categorias são apresentados juntos
22Maria Alice Grigas Varella Ferreira – EP-USP
Codificação Visual
Codificação visual
“Criar distinção entre os diferentes tipos de objetos”
Quantas categorias diferentes uma técnica pode codificar
23Maria Alice Grigas Varella Ferreira – EP-USP
Codificação Visual
Técnicas:CorFormaTamanho / extensãoAspecto IntensidadeTexturaEspessura / estilo de linha
24Maria Alice Grigas Varella Ferreira – EP-USP
Codificação Visual
A má codificação pode induzir à confusão e erro
25Maria Alice Grigas Varella Ferreira – EP-USP
Codificação Visual
Uso de legendas10 cores6 tamanhos de áreas6 extensões
(tamanho/comprimentos)4 intensidades24 ângulos15 formas geométricas
Desempenho com 95% de acertos, sem legendas
Van Cott and Kinkade (72) apud Foley et al. (90)
26Maria Alice Grigas Varella Ferreira – EP-USP
Codificação Visual
RedundânciaDois códigos representando a mesma
informaçãoCor é de uso redundante, quase sempre
27Maria Alice Grigas Varella Ferreira – EP-USP
Codificação Visual
Seleção do códigoQuantos 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
28Maria Alice Grigas Varella Ferreira – EP-USP
Codificação Visual
Seleção de códigoNúmero fixo de códigos:
Cor é melhor que forma ou tamanho8% dos homens têm problemas com
cores! contornar através do uso de redundância
Intensidade – importante para vídeos preto e branco
29Maria Alice Grigas Varella Ferreira – EP-USP
Codificação Visual
Apresentação da informação nominativaNão inferir ordemMelhores técnicas
FormasEstilos de linhasTexturasAspectos do texto
2 ou 3 técnicas no máximo para não causar confusão
30Maria Alice Grigas Varella Ferreira – EP-USP
Codificação Visual
Apresentação da informação ordinária (ordenada?) Sugerir ordem Melhores técnicas
Texturas com densidade variávelTamanho do textoTécnicas que reforcem o peso visual
(negrito)Hierarquia topográfica
31Maria Alice Grigas Varella Ferreira – EP-USP
Apresentação da informação
NÍVEL PRINCIPALNIVEL SECUNDÁRIONÍVEL TERCIÁRIONÍVEL TERCIÁRIONÍVEL QUATERNÁRIONÍVEL QUATERNÁRIONÍVEL TERCIÁRIO
NÍVEL PRINCIPALNIVEL SECUNDÁRIONÍVEL TERCIÁRIONÍVEL TERCIÁRIONÍVEL QUATERNÁRIONÍ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
Indentação
Hierarquia de estilostipográficos
32Maria Alice Grigas Varella Ferreira – EP-USP
Codificação Visual
Apresentação da informação proporcionalCódigo que varie proporcionalmenteMelhores técnicas
TamanhoExtensãoOrientação
33Maria Alice Grigas Varella Ferreira – EP-USP
Codificação VisualTé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)
34Maria Alice Grigas Varella Ferreira – EP-USP
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)
35Maria Alice Grigas Varella Ferreira – EP-USP
Gráfico de Barras
36Maria Alice Grigas Varella Ferreira – EP-USP
Codificação Visual
Mecanismos de atençãoÚnica cor / formaCursor rotativo / pulsanteVídeo reverso
37Maria Alice Grigas Varella Ferreira – EP-USP
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 alfabeto
38Maria Alice Grigas Varella Ferreira – EP-USP
Consistência Visual
Ex. de alfabetos
39Maria Alice Grigas Varella Ferreira – EP-USP
Projeto da tela
Área de trabalho
Área de promptsMenus
40Maria Alice Grigas Varella Ferreira – EP-USP
Projeto Visual - Princípios
Balanceamento – o centro da tela coincide com a posição natural da vista do observador
Exemplo: Word
41Maria Alice Grigas Varella Ferreira – EP-USP
42Maria Alice Grigas Varella Ferreira – EP-USP
Projeto Visual - Princípios
Grade (gridding) – alinhamento dos objetos segundo uma grade
43Maria Alice Grigas Varella Ferreira – EP-USP
Alinhamento dos botões na grade
44Maria Alice Grigas Varella Ferreira – EP-USP
Alinhamento de objetosJanela Modal
45Maria Alice Grigas Varella Ferreira – EP-USP
Projeto Visual - Princípios
Proporção – tamanho das áreas retangulares, devem obedecer a proporções bem determinadas1:11:sqrt (2) = 1:1.4141:1.618 (retângulo áureo)
46Maria Alice Grigas Varella Ferreira – EP-USP
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.
47Maria Alice Grigas Varella Ferreira – EP-USP
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)
48Maria Alice Grigas Varella Ferreira – EP-USP
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)
49Maria Alice Grigas Varella Ferreira – EP-USP
“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)
Projeto antropomórfico
50Maria Alice Grigas Varella Ferreira – EP-USP
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
51Maria Alice Grigas Varella Ferreira – EP-USP
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
52Maria Alice Grigas Varella Ferreira – EP-USP
Referências Bibliográficas
Foley et al. 1990.
Schneiderman, 1998 – cap. 11.