1 Projeto Visual Maria Alice Grigas Varella Ferreira EP-USP Abril 2003

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


Projeto Visual

Inclui:Todos os elementos gráficos da interface:

layout da tela,menus,formulários,Imagens, etc


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”


Clareza Visual

Regras para a organização visual : (Wertheimer – 1930)Ênfase no todo, e não nas partes (Gestalt)

SimilaridadeProximidadeFechamento (closure)Continuidade


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:


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.


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.


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.


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.


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.


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


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


Continuidade

Mas, poderia ser isso!

Foley et al., 1990


Projeto visual

Cor da Área

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


Uso de fechamento e de agru-pamento no projeto visual da tela


Cor da Borda


Cor da Área

Largura da Borda


Proximidade, reforçando o alinhamento horizontal

Esquerda Centralizado Direita

Topo Centralizado Base

Alinhamento de objetos:



Alinhamento de objetos: Sugere ali-nhamento vertical

Mas o ali-nhamento éhorizontal


Uso de correspondência espa-cial para reforçar o significado





Topo

Centralizado

Base



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


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


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


Codificação Visual

Codificação visual

“Criar distinção entre os diferentes tipos de objetos”

Quantas categorias diferentes uma técnica pode codificar



Técnicas:CorFormaTamanho / extensãoAspecto IntensidadeTexturaEspessura / estilo de linha



A má codificação pode induzir à confusão e erro



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)



RedundânciaDois códigos representando a mesma

informaçãoCor é de uso redundante, quase sempre



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



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



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



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


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



Apresentação da informação proporcionalCódigo que varie proporcionalmenteMelhores técnicas

TamanhoExtensãoOrientação


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)



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)


Gráfico de Barras



Mecanismos de atençãoÚnica cor / formaCursor rotativo / pulsanteVídeo reverso


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


Consistência Visual

Ex. de alfabetos


Projeto da tela

Área de trabalho

Área de promptsMenus


Projeto Visual - Princípios

Balanceamento – o centro da tela coincide com a posição natural da vista do observador

Exemplo: Word




Grade (gridding) – alinhamento dos objetos segundo uma grade


Alinhamento dos botões na grade


Alinhamento de objetosJanela Modal



Proporção – tamanho das áreas retangulares, devem obedecer a proporções bem determinadas1:11:sqrt (2) = 1:1.4141:1.618 (retângulo áureo)


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.



“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)



“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).



“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”.




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


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


Referências Bibliográficas

Foley et al. 1990.

Schneiderman, 1998 – cap. 11.

Documents

1 Projeto Visual Maria Alice Grigas Varella Ferreira EP-USP Abril 2003