Carga Horária:

1. Interface Homem-Máquina Modelagem da Interação Projeto Visual II Prof.: José Eustáquio Rangel de Queiroz Carga Horária: 60 h

2. Modelagem da Interação - Projeto Visual • Concepção do Projeto Visual • Definição do Layout de Telas a partir do Agrupamento Lógico de Objetos • Agrupamento Lógico e Espacial de Itens  Relações significativas para o usuário • Itens mais importantes enfatizados a partir do uso de fontes de maiores dimensões, destaque cromático, centralização, contornos e molduras, ocupação de maiores proporções da tela • Concepção da Apresentação dos Objetos com base em Diretrizes Ergonômicas de Projeto, no Perfil do Usuário e nas Características da Tarefa

3. Modelagem da Interação - Projeto Visual • Falhas Típicas • Inconsistência (posicional, cromática, morfológica, funcional) • Falta de consonância com a percepção humana • Falta de consonância com a capacidade de processamento do usuário • Dificuldade de uso • Deficiência quanto à clareza visual • Desrespeito ao conforto visual do usuário

4. Modelagem da Interação - Projeto Visual • Apresentação da Informação • Falta de concentração absoluta  Má interpretação da informação recebida • Interpretação satisfatória da informação  Isenção de ambigüidades na informação • Manutenção da atenção e do interesse • Auxílio à compreensão • Aumento da capacidade de discriminação • Redução da fadiga ocular

5. Modelagem da Interação - Projeto Visual • Fadiga Ocular • Estudos de movimentos oculares de operadores de terminais de vídeo para a entrada de dados  Movimentos entre a tela e o documento de origem excedem em milhares de vezes aqueles relativos a um dia “normal” de trabalho • Efeito:Diferença de brilho entre a tela a o documento provoca a fadiga do músculo ocular • Solução: Uso de uma estratégia de projeto visual que possibilite o equilíbrio da informação • Na tela • Entre a tela e o documento • Uso de agrupamento coesivo de itens • Uso de simetria de títulos, textos e gráficos • Reserva de áreas para a alocação de itens específicos

6. Modelagem da Interação - Projeto Visual • Apelo Visual • A tela inicial deve ser um pôster • Uma imagem única tem a capacidade de atrair mais a atenção do usuário do que várias imagens ou somente texto • Considerar a imprevisibilidade na apresentação • A quebra do ritmo monótono de imagens, textos, anúncios atua como uma estratégia para atrair a atenção do usuário • Explorar a mídia sem alterar o propósito • A personalização com base em nova mídia (vídeo, textura, recursos 3D, animação) deve preservar o conteúdo da informação apresentada

7. Modelagem da Interação - Projeto Visual • Diagramação • Uso de grades e guias • Auxílio na visualização, no planejamento e no equilíbrio da tela • Grades determinam as dimensões da ilustrações e auxiliam no alinhamento • Uso de imagens com propósitos de navegação

8. Modelagem da Interação - Projeto Visual • Tipografia • Legibilidade deve ser alvo da atenção do projetista • Desenvolvimento para monitores de pequenas dimensões • Seleção de tipos adequados a visualização em tela x Seleção de tipos de grandes dimensões x Proporções da tela • Dicas • Evitar distanciamento de letras m i n ú s c u l a s • Usar espaçamento duplo nas MAIÚSCULAS • PEQUENAS • Evitar GRANDES QUANTIDADES DE TEXTO EM MAIÚSCULAS • Usar poucas famílias de tipos (no máximo 3)

9. Modelagem da Interação - Projeto Visual • Legibilidade • Seleção adequada de tipos, em função da existência de tipos especificamente concebidos para uso online • Exemplos: padrão True Type, fontes Adobe • Seleção de tipos que produzam bons bitmaps em dimensões reduzidas • Rejeição de tipos muito pequenos • Dificuldade de leitura da informação exibida na tela • Atenção para o contraste dos tipos selecionados com o plano de fundo da tela

10. Modelagem da Interação - Projeto Visual • Legibilidade (Cont.) • Proporcionalidade dos tipos • Letras possuem larguras diferentes, não ocupando, portanto, o mesmo espaço na tela • O MESMO ESPAÇO NA TELA • Monoespaçamento dos tipos • Todas as letras possuem a mesma largura, o que implica ocuparem o mesmo espaço na tela OCUPAREM O MESMO ESPAÇO NA TELA • Dicas • Reduzir a movimentação dos olhos • Utilizar até 60 caracteres por linha (largura da coluna) • Conservar um espaçamento e comprimento adequados • Dividir o texto em parágrafos e usar subtítulos

11. Modelagem da Interação - Projeto Visual • Cor • Redução do número de cores usadas • Páginas monocromáticas apresentam melhor aspecto visual, além de serem executadas mais rapidamente • Concepção em preto-e-branco • Estratégia adequada, uma vez que posteriormente uma ou duas cores poderão ser adicionadas • Preservação da harmonia, do contraste e da combinação de cores • Garantia da exclusividade, criatividade e legibilidade dos resultados

12. Cor (Cont.) • Dicas • Usar, em ordem de prioridade, as cores , e vermelha • Usar cores protegidas, i.e. à prova de navegador • Reduzir as áreas em branco (extensas áreas em branco na tela podem ser visualmente agressivas após longos períodos de uso) • Manter o contraste entre o texto e o plano de fundo, visando o aumento da legibilidade (e.g. sobre branco produz um excelente contraste) • Usar tipos em negrito sobre planos de fundo texturizados, a fim de facilitar a leitura preta branca preto branco Modelagem da Interação - Projeto Visual

13. Modelagem da Interação - Projeto Visual • Ilustrações Uma imagem só valerá por mil palavras se não demorar mil anos para aparecer na tela • Ilustrações grandes e lentas • Não é aceitável nenhum atraso para o usuário, sobretudo quando se tratar de páginas Web • Ilustrações significativas e equilibradas • Não é aceitável o uso de ilustrações sem apelo contextual ou exageradamente apelativas • Alternativas de visualização para diferentes plataformas • Formato PDF (Adobe Portable Document Format)  Transferência e visualização de documentos em diferentes plataformas

14. Modelagem da Interação - Projeto Visual • Ilustrações (Cont.) • Diretrizes • Verificar as cores, visando o uso de paletas à prova de navegadores • Usar formato gráfico adequado ao tipo de ilustração • GIF (Graphic Interchange Format)  Compressão de imagem/ Inadequado para imagens com mais de 256 cores • JPEG  Compressão com perdas/ Mais compacto do que o formato GIF/ Adequado para fotos • Recortar as ilustrações, de modo a eliminar áreas irrelevantes • Reduzir as dimensões das ilustrações (e.g. 75 dpi), atentando para o fato de que imagens pequenas em uma página se somam rapidamente

15. Modelagem da Interação - Projeto Visual • Ilustrações (Cont.) • Diretrizes (Cont.) • Evitar o redimensionamento de imagens em formato GIF, visando evitar a acentuação do serrilhado • Usar imagens de pequenas dimensões para visualização em dimensões maiores • Especificar as dimensões das imagens utilizadas, reservando os espaços que ocuparão enquanto a página é carregada

16. Modelagem da Interação - Projeto Visual • Vídeo Como animal, o homem evoluiu a fim de tornar-se atento aos movimentos à sua volta, uma vez poderem significar algo para comê-lo ou para ser comido • Problema • Uso de vídeo ativo em uma tela  Atenção do usuário totalmente canalizada para a imagem em movimento • Solução • Uso de vídeo “congelado”, com a identificação VÍDEO • Carregamento automático apenas nas seções mais visuais, com mídia mais espontânea

17. Modelagem da Interação - Projeto Visual • Vídeo • Dicas • Usar um vídeo como recurso de comunicação pode ser interessante, mas apenas uma vez  Evitar o acionamento de vídeos em uma tela a cada vez que esta for acessada • Usar formatos de vídeo que possibilitem sua visualização em qualquer plataforma • Atentar para o tempo de carregamento dos vídeos inseridos em telas de GUI ou WUI • Especialmente em WUI, a espera pode implicar a desistência do usuário  Visita a outra página ou outro site  Questionamento sobre a necessidade/relevância do vídeo

18. Modelagem da Interação - Projeto Visual • Adereços • Questionamento prévio do projetista sobre a relevância da inclusão de “adornos” • GUI  Ponderação sobre a influência da inclusão de áudio, vídeo e recursos de animação em geral no tempo de conclusão da tarefa do usuário • WUI  Ponderação sobre a influência da inclusão de áudio, vídeo e recursos de animação em geral no tempo de carregamento da página, na velocidade do navegador

19. Modelagem da Interação - Projeto Visual • Adereços • Dicas • Considerar a escassez de tempo (e paciência) dos usuários de WUI • Usar mini-aplicativos (e.g. Shockwave) apenas se a inclusão de plugins não comprometer o tempo de carregamento das páginas • Atentar para o fato de que a inclusão de animações, recursos áudiovisuais, arte com zoom podem implicar a adição de plugins e que o uso de arquivos GIF pode retardar (excessivamente) o tempo de carregamento das páginas

20. Modelagem da Interação - Projeto Visual • Considerações Gerais • Propósito • Refletir os objetivos do sistema (entrada, consulta e/ou processamento da informação, interatividade) • Recursos • Considerar o arcabouço de desenvolvimento (hardware, software e contexto de uso) • Pontos de Reflexão • Consistência  Aplicação dos mesmos conceitos a famílias de telas (GUI) ou páginas (WUI) • Aprendizado do Usuário  Compreensão do funcionamento do sistema

21. Modelagem da Interação - Projeto Visual • Considerações Gerais • Características Humanas • Percepção • Memória • Capacidade de aprendizado • Habilidades • Diferenças individuais • Necessidades e limitações do usuário • Facilidade de uso • Facilidade de discriminação (julgamento relativo, codificação multidimensional, agrupamentos) • Clareza da informação • Consistência (semântica, morfológica, sintática)

22. Modelagem da Interação - Projeto Visual • Próposito • Entrada de Dados • Coleta rápida e precisa da informação • Situações • Com documento-fonte “dedicado”  Foco da atenção é o DOCUMENTO • Mecanismos de ajuda para a entrada de dados • Semelhança do documento com a tela • Sem documento-fonte “dedicado”  Foco da atenção é a TELA • Mecanismos de ajuda em geral • Clareza da informação apresentada

23. Modelagem da Interação - Projeto Visual • Próposito • Consulta • Acesso ao conteúdo de arquivos (localização estática dos dados) • Aspectos importantes • Facilidade de localização de informações na tela • Clareza visual

24. Modelagem da Interação - Projeto Visual • Próposito • Interatividade • Liberdade de formato • Comunicação intercalada de idéias entre o usuário e o sistema

25. Modelagem da Interação - Projeto Visual • Características Desejáveis • Clareza Visual da Informação • Organização • Agrupamento • Legibilidade • Significado da Informação • Conteúdo • Relevância • Facilidade de Uso • Onde a informação deve estar  Posicionamento/ Localização • Como a informação deve ser estruturada  Formatação • Qual informação deve ser exibida  Conteúdo

26. Modelagem da Interação - Projeto Visual • Características Desejáveis • Teste • Identificação de TODOS os elementos presentes nas telas da interface (GUI ou WUI), independentemente de seu conteúdo

27. Modelagem da Interação - Projeto Visual • Layout • Posicionamento/Localização da Informação • Estabelecimento óbvio do ponto de partida • Manutenção da consistência do processo de localização dos objetos de interesse • Alocação de áreas específicas para diferentes níveis de informação (e.g. comandos, mensagens) • Agrupamento coesivo de elementos da tela • Manutenção de um equilíbrio simétrico • Centralização de títulos e ilustrações • Posicionamento de componentes semelhantes em ambos os lados do eixo de centralização MENORES MENORES MAIORES MAIORES

28. Modelagem da Interação - Projeto Visual • Estruturação da Informação  COMO? • Apresentação da informação de forma diretamente usável • Norteamento do fluxo de informações na tela mediante o uso de linhas implícitas ou explícitas • Uso de recursos contrastantes para atrair a atenção do usuário para diferentes aspectos da comunicação • Diferença de componentes da tela • Destaque dos itens em operação • Destaque dos itens que demandam/traduzem ações urgentes • Manutenção da consistência visual e operacional

29. Modelagem da Interação - Projeto Visual • Apresentação da Informação  QUAL? • Exibição de informações isentas de ambigüidades • Exibição apenas de informações necessárias e relevantes para • Tomadas de decisões • Execução de ações • Exibição de dados associados a uma única idéia ou tarefa

30. Modelagem da Interação - Projeto Visual • Diretrizes para o Projeto Visual da Informação • Utilizar agrupamentos coesivos • Assegurar o equilíbrio e a simetria dos componentes de tela • Assegurar a identificação da informação apresentada • Garantir a identificação das relações entre campos e rótulos • Destacar os elementos de tela mais significativos • Assegurar a discriminação dos componentes de tela • Tornar óbvia a associação entre objetos e dados • Apresentar apenas informações relevantes para a tarefa • Apresentar informações sem ambigüidades • Favorecer o julgamento relativo

31. Modelagem da Interação - Projeto Visual • Codificação da Informação • Ponderação da relação entre a tarefa e as características da tela • Tarefas rotineiras  Clareza e simplicidade • Tarefas complexas, envolvendo a tomada de decisões  Acesso ao maior volume de informações passíveis de armazenamento/absorção pela memória de curta duração • Consideração de estratégias que não dependam da memorização de grandes quantidades de informação pelo usuário • Utilização de recursos de codificação da informação (chunking – associações, padrões, ordenação, significado) • Uso de códigos multidimensionais (aumento da capacidade de discriminação)

32. Modelagem da Interação - Projeto Visual • Estratégias de Codificação da Informação • Recursos alfanuméricos • Formas geométricas • Ângulos de linhas • Comprimentos de linhas • Espessuras de linhas • Dimensões de objetos • Variações de brilho • Objetos piscantes • Nuances de cores • Códigos multidimensionais

33. Modelagem da Interação - Projeto Visual • Codificação Alfanumérica • CONTRAS • Tendência ao congestionamento da tela e à dificultação do processo de memorização • Possibilidade de elevação do tempo de localização da informação de interesse • PRÓS • Referenciação de itens via teclado

34. Modelagem da Interação - Projeto Visual • Uso de Formas Geométricas • CONTRAS • Necessidade de familiarização do usuário com as formas escolhidas • Necessidade de associação consistente e bem definida das formas pretendidas com valores/significados • PRÓS • Possibilidade de uma comunicação eficiente e clara • Alto valor mnemônico • Auxílio no processo cognitivo • Possibilidade de absorção de grande volume de informações em telas bem codificadas • Adequação a processos interativos rápidos, complexos, criativos

35. Modelagem da Interação - Projeto Visual • Uso de variações no ângulo, comprimento e espessura de linhas • Ângulos • Uso para quantidades discretas de informação • Comprimentos • Possibilidade de fácil discriminação quando usados até 4 valores • Possibilidade de congestionamento da tela se utilizados em número excessivo

36. Modelagem da Interação - Projeto Visual • Uso de variações no ângulo, comprimento e espessura de linhas (Cont.) • Espessuras • Possibilidade de fácil discriminação quando utilizados até 3 valores • Possibilidade de congestionamento da tela se empregadas em número excessivo

37. Modelagem da Interação - Projeto Visual • Variação da intensidade de brilho • CONTRA • Dependência da qualidade do contraste da tela • Possibilidade de ineficiência em telas com contraste de baixa qualidade • Uso de objetos piscantes • CONTRA • Ineficiência para codificação • PRÓ • Eficiência para atrair a atenção (Ideal: 2~3 Hz)

38. Modelagem da Interação - Projeto Visual • Uso de cor • PRÓS • Eficiência na codificação • Possibilidade de redução do tempo de localização da informação codificada • Possibilidade de redução de congestionamentos • Destaque de itens importantes • CONTRAS • Ineficiência da codificação para usuários daltônicos • Dependência da qualidade dos monitores

39. Modelagem da Interação - Projeto Visual • Codificação Multidimensional • Combinação de várias estratégias de codificação • Exemplos • Sinalização rodoviária • Placas retangulares, circulares, triangulares e losangulares • Uso de símbolos alfanuméricos, cores, ângulos, comprimentos e espessuras de linhas

40. Modelagem da Interação - Projeto Visual • Conteúdo • Projeto Visual • Propósito • Transmissão de informações (transcende a ornamentação e, até mesmo, a satisfação visual) • Dicas • Evitar o uso de ícones inúteis, confusos e sem significado para o contexto de trabalho • Dividir adequadamente a informação a ser apresentada, evitando o congestionamento de telas e a sobrecarga da memória de curta duração do usuário • Exibir texto bem redigido, sem erros, objetivo e de fácil leitura (WUI e documentação de GUI) • Facilitar o acesso ao conteúdo, disponibilizando mecanismo que resgatem a informação de interesse em todos os níveis do processo interativo

41. Modelagem da Interação - Projeto Visual • Exercício • Elaborar o projeto visual dos objetos listados no Modelo da Interação de seu projeto, para a representação no protótipo a ser implementado