1 / 52

Projeto Visual

Projeto Visual. Maria Alice Grigas Varella Ferreira EP-USP Abril 2003. Projeto Visual. Afeta: Impressão inicial do usuário Usabilidade a longo prazo Procura atingir: Clareza visual Codificação visual Consistência visual. Projeto Visual. Inclui:

amos
Download Presentation

Projeto Visual

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Projeto Visual • Afeta: • Impressão inicial do usuário • Usabilidade a longo prazo • Procura atingir: • Clareza visual • Codificação visual • Consistência visual

  3. Projeto Visual • Inclui: • Todos os elementos gráficos da interface: • layout da tela, • menus, • formulários, • Imagens, etc

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

  5. Clareza Visual • Regras para a organização visual : (Wertheimer – 1930) • Ênfase no todo, e não nas partes (Gestalt) • Similaridade • Proximidade • Fechamento (closure) • Continuidade

  6. 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:

  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 horizontal.

  8. 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.

  9. 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.

  10. 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.

  11. 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.

  12. 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

  13. 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

  14. Continuidade • Mas, poderia ser isso! Foley et al., 1990

  15. Cor da Área Cor da Borda Largura da Borda Automático Invisível Automático Invisível Projeto visual Projeto Visual pobre, sem maiores preocupações com o projeto da tela e das caixas de seleção

  16. Cor da Borda Cor da Área Largura da Borda Automático Invisível Automático Invisível Uso de fechamento e de agru-pamento no projeto visual da tela

  17. Alinhamento de objetos: Centralizado Topo Direita Centralizado Base Base Topo Direita Centralizado Esquerda Esquerda Centralizado Proximidade, reforçando o alinhamento horizontal Alinhamento de objetos: Sugere ali- nhamento vertical Mas o ali- nhamento é horizontal

  18. Alinhamento de objetos: Esquerda Centralizado Direita Topo Centralizado Base Esquerda Centralizado Direita Topo Centralizado Base Alinhamento de objetos: Uso de correspondência espa-cial para reforçar o significado

  19. ATE BITE DOG FAR GET HAT BATE CAT EAST FAT GOT HIGH BET CUP EASY FITS GUT HIT ATEBITE DOGFAR GET HAT BATE CATEASTFATGOTHIGH BETCUPEASYFITSGUTHIT Clareza Visual • Cuidado. Regras mal usadas podem enganar o usuário! real

  20. Organização aplicada a menus • Aplicação das regras na organização de um menu ROTATE XYZ TRANSLATE XYZ ROTATE X ROTATE Y ROTATE Z TRANSLATE X TRANSLATE Y TRANSLATE Z ROTATE XROTATE YROTATE Z TRANSLATE XTRANSLATE YTRANSLATE Z

  21. 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

  22. Codificação Visual • Codificação visual “Criar distinção entre os diferentes tipos de objetos” • Quantas categorias diferentes uma técnica pode codificar

  23. Codificação Visual Técnicas: • Cor • Forma • Tamanho / extensão • Aspecto • Intensidade • Textura • Espessura / estilo de linha

  24. Codificação Visual • A má codificação pode induzir à confusão e erro

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

  26. Codificação Visual • Redundância • Dois códigos representando a mesma informação • Cor é de uso redundante, quase sempre

  27. 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

  28. 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

  29. 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

  30. 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

  31. 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 NÍVEL TERCIÁRIO NÍVEL TERCIÁRIO NÍVEL QUATERNÁRIO NÍVEL QUATERNÁRIO NÍVEL TERCIÁRIO Indentação Hierarquia de estilos tipográficos

  32. Codificação Visual • Apresentação da informação proporcional • Código que varie proporcionalmente • Melhores técnicas • Tamanho • Extensão • Orientação

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

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

  35. Gráfico de Barras

  36. Codificação Visual • Mecanismos de atenção • Única cor / forma • Cursor rotativo / pulsante • Vídeo reverso

  37. 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 visualalfabeto

  38. Consistência Visual Ex. de alfabetos

  39. Projeto da tela Menus Áreade prompts Área de trabalho

  40. Projeto Visual - Princípios • Balanceamento – o centro da tela coincide com a posição natural da vista do observador • Exemplo: Word

  41. Projeto Visual - Princípios • Grade (gridding) – alinhamento dos objetos segundo uma grade

  42. Alinhamento dos botões na grade

  43. Alinhamento de objetosJanela Modal

  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)

  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.

  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)

  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)

  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)

  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

More Related