1 projeto visual maria alice grigas varella ferreira ep-usp abril 2003

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

Centralizado

Clareza Visual

Cuidado. Regras mal usadas podem enganar o usuário!

ATEBITEDOGFARGETHAT

BATECATEASTFATGOTHIGH

BETCUPEASYFITSGUTHIT

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.

1 projeto visual maria alice grigas varella ferreira ep-usp abril 2003

Documents

curso bÁsico de matlab carlos alberto alves varella, prof....

introduÇÃo ao uso do programa computacional matlab carlos...

drauzio varella

paulo ricardo varella

autor: rafael rodrigues varella concurso de monografia ·...

grasas 62, 60 ep, 61 ep, 62 ep y 63 ep - grupomunoz.com.ar

ep rotundas

fernando arena varella classificadores baseados em regras

augusto varella - 31000 - vereador de natal

loteria santander · .soôenr ep zees ep opb1se opejjed ue...

padrão x-windows maria alice grigas varella ferreira ep-usp

carlos alberto alves varella

1 visual basic maria alice grigas varella ferreira ep-usp...

saude.assis.sp.gov.br · ept)es ep lednunn euelê]oes epd...

direção-geral do património cultural · ep 0?5ea0jde ep...

1 modelos de implementação maria alice grigas varella...

projetando interfaces homem-máquina - conceitos maria alice...

misael varella - 2505

342ncer de mama | dr. drauzio varella)

visita à radio recreio emef fagundes varella