1 / 108

Interface

Interface. Homem-Máquina. Projeto Gráfico. José Eustáquio Rangel de Queiroz. Prof:. Carga Horária:. 60 h. “Good design is based on eye flow. The more eye movement required within a visual field, the less information can be received and processed.”.

garrison-tillman
Download Presentation

Interface

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. Interface Homem-Máquina Projeto Gráfico José Eustáquio Rangel de Queiroz Prof: Carga Horária: 60 h

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

  3. Projeto Gráfico I • “Visual” da interface com o usuário, quer para aplicações stand-alone ou web • Composição visual contendo fontes de texto, imagens, cores e layouts • Criação de uma “cara” e um “visual impressivo” para um produto • Estabelecimento de um framework destinado à compreensão do conteúdo

  4. Projeto Gráfico II Fontes de texto Cores Imagens Layout

  5. Projeto Gráfico III Fontes de texto Cores Imagens Layout

  6. Projeto Gráfico IV • 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

  7. Projeto Gráfico V • Prática adotada pelas diferentes sociedades humanas há milhares de anos

  8. Projeto Gráfico VI • Diversificação da arte e do projeto visual a partir da Revolução Industrial • Projeto de impressos e artefatos para a produção em massa http://www.ebroadcast.com.au/dir/Arts/Illustration/Historic_Illustrators/

  9. Projeto Gráfico VII • Desenvolvimento do projeto gráfico como profissão sobretudo após a II Guerra Mundial. Fonte INSIGNIA Neville BRODY Logomarcas Projeto visual Fonte ONDINA Adrian FRUTIGER Poster (1989) Fonte ZAPF ESSENTIALS OFFICE Cartaz Publicitário da FIRESTONE (1999) Hermann ZAPF Fonte ZAPFINO EXTRA

  10. Projeto Gráfico VIII Projeto Gráfico Aspectos Objetivos Aspectos Subjetivos • Fundamentação no EQUILÍBRIO e na INTEGRAÇÃO de aspectos objetivos e subjetivos

  11. Projeto Gráfico IX • Aspectos Objetivos • Fundamentação em estudos quantitativos, e.g. testes de usabilidade • O “visual” funciona? • Aspectos Subjetivos • Fundamentação no julgamento qualitativo de especialistas, e.g. avaliação heurística • Dependência de fatores contextuais

  12. Projeto Gráfico X • Caráter contextual do “visual” da interface • Fundamentação na cultura • Diferenças nos significados culturais • Multiplicidade de significados • Valorização da singularidade e da rigorosidade

  13. Projeto Gráfico XI • Conhecimento de princípios de projeto gráfico • Aprimoramento da capacidade de comunicação com projetistas gráficos • Capacitação para a concepção de interfaces mais usáveis

  14. Projeto Gráfico XI • Diversidade de filosofias e pontos de vista de projeto gráfico • Ponto de vista consensual • Economia de elementos visuais • 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 ) Seqüenciamento Imagens Layout Cor Organização Tipografia

  15. Princípios de Projeto Gráfico I • Clareza • Uso de Metáforas Adequadas • Manutenção da Consistência • Consideração do Alinhamento • Observação da Proximidade • Exploração do Contraste

  16. Princípios de Projeto Gráfico II • Clareza I • Justificação da inserção de cada elemento planejado para a composição gráfica de uma interface • Fundamentação do projeto visual na máxima Menos é mais

  17. Princípios de Projeto Gráfico III • Clareza II • Espaços em branco (Espaço negativo) • Condução dos olhos para as áreas contendo informações (Espaço positivo) • Direcionamento dos olhos por entre os elementos ativosdo 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

  18. Princípios de Projeto Gráfico IV • Clareza III • Exemplo 1 • Em sua opinião, há clareza na apresentação da informação?

  19. Princípios de Projeto Gráfico V • Clareza IV • Exemplo 2 • Em sua opinião, há clareza na apresentação da informação?

  20. Princípios de Projeto Gráfico VI • Clareza V • Exemplo 3 • Em sua opinião, há clareza na apresentação da informação?

  21. Princípios de Projeto Gráfico VII • Clareza VI • Exemplo 4 • Em sua opinião, há clareza na apresentação da informação?

  22. 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 • 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 representações baseadas em software

  23. Princípios de Projeto Gráfico IX • Uso de Metáforas Adequadas II • 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

  24. Princípios de Projeto Gráfico X • Uso de Metáforas Adequadas III • Categorias de Metáforas • Organizacionais  Associação com a estruturação existente de um grupo, sistema ou organização • 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)

  25. Princípios de Projeto Gráfico XI • Uso de Metáforas Adequadas IV - Exemplo 5 • Qual a sua opinião sobre a metáfora organizacional usada neste site? http://www.worldwidestore.com/SclothingM.htm

  26. Princípios de Projeto Gráfico XII • Uso de Metáforas Adequadas V • Categorias de Metáforas • Funcionais  Relação entre tarefas passíveis de execução com a aplicação e tarefas passíveis de serem executadas em outras aplicações • 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

  27. 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 destacadas nesta aplicação?

  28. Princípios de Projeto Gráfico XIV • Uso de Metáforas Adequadas VII • Categorias de Metáforas • Visuais  Fundamentação em elementos gráficos culturais comuns, familiares à maioria dos usuários • 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

  29. 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 utilizadas nesta aplicação?

  30. Princípios de Projeto Gráfico XVI • Uso de Metáforas Adequadas VII • Recomendações • Coletar opiniões de usuários • 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

  31. Princípios de Projeto Gráfico XVII • Consistência I • De 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

  32. Princípios de Projeto Gráfico XVIII • Consistência II - Exemplo 8 Página principal Página 1 Página 2 www.santafean.com

  33. Princípios de Projeto Gráfico XVIII • Consistência III - Exemplo 9 • Qual a sua opinião sobre a consistência deste projeto?

  34. Princípios de Projeto Gráfico XIX • Alinhamento I • Convenção da civilização ocidental • Início no topo, à esquerda • Acompanhamento da informação de cima para baixo, da esquerda para a direita • Auxílio ao sistema visual no tocante ao escrutínio mais fácil do dispositivo de visualização

  35. Princípios de Projeto Gráfico XX • Alinhamento II • Uso de grades I • 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 do número de controles e redução do congestionamento de informações

  36. Princípios de Projeto Gráfico XXI • Alinhamento III • Uso de grades II • Exemplo 9 http://webmonkey.wired.com/webmonkey/98/28/index4a_page2.html?tw=design

  37. Princípios de Projeto Gráfico XXII • Alinhamento IV • Uso de grades III • Exemplo 10

  38. Princípios de Projeto Gráfico XXII • Alinhamento V • Uso de grades IV • Exemplo 11

  39. Princípios de Projeto Gráfico XXIII • Alinhamento V • À esquerda, centralizado ou à 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 Eis um texto alinhadoà esquerda Eis um texto alinhadopelo centro Eis um texto alinhadoà direita

  40. Princípios de Projeto Gráfico XXIV • Proximidade I • Contigüidade de itens causa a sensação visual/ mental da existência de uma relação entre eles • Distanciamento implica usualmente ausência de relação entre itens

  41. Princípios de Projeto Gráfico XXV • Proximidade II • Exemplo 12 Nome Nome Nome Endereço 1 Endereço 1 Endereço 1 Endereço 2 Endereço 2 Endereço 2 Cidade Cidade Cidade Estado Estado Estado Fone Fax Fone Fone Fax Fax

  42. Princípios de Projeto Gráfico XXVI • Proximidade III • Exemplo 13 – Quadro de Diálogo I

  43. Princípios de Projeto Gráfico XXVII • Proximidade IV • Exemplo 14 – Quadro de Diálogo II

  44. Princípios de Projeto Gráfico XXVIII • Proximidade V • Exemplo 15 – Quadro de Diálogo III

  45. Princípios de Projeto Gráfico XXIX • Proximidade VI • Exemplo 16 – Quadro de Diálogo IV

  46. Princípios de Projeto Gráfico XXX • Contraste I • Retenção da atenção • Condução dos olhos em torno da interface • Possibilidade de focalização do olho na informação mais relevante do contexto apresentado • Possibilidade de uso para o direcionamento do olho para o item mais importante • Dominância da idéia principal do contexto visualizado

  47. Princípios de Projeto Gráfico XXXI • Contraste II • Diretrizes relevantes • 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

  48. Princípios de Projeto Gráfico XXXII • Contraste III - Exemplo 17 • Qual a sua opinião sobre o uso do contraste nesta página? Uso de contraste para a discriminação de diferentes níveis de informação

  49. Princípios de Projeto Gráfico XXXIII • Exercício 01 • Observe a interface da transparência 48 e responda: • Para onde o seu olho é inicialmente direcionado (O que domina?) • Qual é o componente mais importante nesta interface?

  50. Princípios de Projeto Gráfico XXXIII • Exercício 01

More Related