DSC/CCT/UFCG [email protected] Prof.: José Eustáquio Rangel de Queiroz Carga Horária: 60 h DSC/CCT/UFCG 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 [email protected] 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 2 DSC/CCT/UFCG 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 [email protected] Deficiência quanto à clareza visual Desrespeito ao conforto visual do usuário 3 DSC/CCT/UFCG 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 [email protected] Aumento da capacidade de discriminação Redução da fadiga ocular 4 DSC/CCT/UFCG 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 [email protected] 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 5 DSC/CCT/UFCG 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 [email protected] 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 6 DSC/CCT/UFCG Modelagem da Interação - Projeto Visual Diagramação Uso de grades e guias Auxílio na visualização, no equilíbrio da tela planejamento e no Grades determinam as dimensões da ilustrações e auxiliam no alinhamento [email protected] Uso de imagens com propósitos de navegação 7 DSC/CCT/UFCG 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 [email protected] PEQUENAS Evitar GRANDES QUANTIDADES DE TEXTO EM MAIÚSCULAS Usar poucas famílias de tipos (no máximo 3) 8 DSC/CCT/UFCG 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 [email protected] Atenção para o contraste dos tipos selecionados com o plano de fundo da tela 9 DSC/CCT/UFCG Modelagem da Interação - Projeto Visual Legibilidade (Cont.) Proporcionalidade dos tipos Letras possuem larguras diferentes, portanto, o mesmo espaço na tela O MESMO ESPAÇO NA TELA não ocupando, 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 [email protected] 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 10 Modelagem da Interação - Projeto Visual DSC/CCT/UFCG 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 [email protected] da harmonia, combinação de cores do contraste e da Garantia da exclusividade, criatividade e legibilidade dos resultados 11 DSC/CCT/UFCG Modelagem da Interação - Projeto Visual Cor (Cont.) Dicas Usar, em ordem de prioridade, as cores branca , preta 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) [email protected] Manter o contraste entre o texto e o plano de fundo, visando o aumento da legibilidade (e.g. preto sobre branco produz um excelente contraste) Usar tipos em negrito sobre planos de fundo texturizados, a fim de facilitar a leitura 12 DSC/CCT/UFCG 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 [email protected] Alternativas de visualização para diferentes plataformas Formato PDF (Adobe Portable Document Format) Transferência e visualização diferentes plataformas de documentos em 13 DSC/CCT/UFCG 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 [email protected] 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 14 DSC/CCT/UFCG Modelagem da Interação - Projeto Visual Ilustrações (Cont.) Diretrizes (Cont.) Evitar redimensionamento de imagens em formato GIF, visando evitar a acentuação do serrilhado Usar o imagens de pequenas dimensões visualização em dimensões maiores para Especificar as dimensões das imagens utilizadas, [email protected] reservando os espaços que ocuparão enquanto a página é carregada 15 DSC/CCT/UFCG 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 [email protected] 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 16 DSC/CCT/UFCG 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 visualização em qualquer plataforma sua Atentar para o tempo de carregamento dos vídeos inseridos em telas de GUI ou WUI [email protected] 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 17 DSC/CCT/UFCG 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 [email protected] de áudio, vídeo e recursos de animação em geral no tempo de carregamento da página, na velocidade do navegador 18 DSC/CCT/UFCG 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 [email protected] 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 19 DSC/CCT/UFCG 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 [email protected] Consistência Aplicação dos mesmos conceitos a famílias de telas (GUI) ou páginas (WUI) Aprendizado do Usuário funcionamento do sistema Compreensão do 20 DSC/CCT/UFCG 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 [email protected] Facilidade de discriminação (julgamento relativo, codificação multidimensional, agrupamentos) Clareza da informação Consistência (semântica, morfológica, sintática) 21 DSC/CCT/UFCG 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 [email protected] Mecanismos de ajuda em geral Clareza da informação apresentada 22 DSC/CCT/UFCG 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 [email protected] Clareza visual 23 DSC/CCT/UFCG Modelagem da Interação - Projeto Visual Próposito Interatividade Liberdade de formato Comunicação [email protected] intercalada de idéias entre o usuário e o sistema 24 DSC/CCT/UFCG 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 [email protected] 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 25 DSC/CCT/UFCG Modelagem da Interação - Projeto Visual Características Desejáveis Teste Identificação de TODOS os elementos presentes [email protected] nas telas da interface (GUI ou independentemente de seu conteúdo WUI), 26 DSC/CCT/UFCG 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 [email protected] Posicionamento de componentes semelhantes em ambos os lados do eixo de centralização MENORES MENORES MAIORES MAIORES 27 DSC/CCT/UFCG 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 [email protected] Destaque dos itens que demandam/traduzem ações urgentes Manutenção da consistência visual e operacional 28 DSC/CCT/UFCG 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 [email protected] tarefa 29 Modelagem da Interação - Projeto Visual DSC/CCT/UFCG 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 [email protected] Apresentar apenas informações relevantes para a tarefa Apresentar informações sem ambigüidades Favorecer o julgamento relativo 30 DSC/CCT/UFCG 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 [email protected] Utilização de recursos de codificação da informação (chunking – significado) Uso associações, padrões, de códigos multidimensionais capacidade de discriminação) ordenação, (aumento da 31 DSC/CCT/UFCG 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 [email protected] Nuances de cores Códigos multidimensionais 32 DSC/CCT/UFCG Modelagem da Interação - Projeto Visual Codificação Alfanumérica CONTRAS Tendência ao congestionamento da dificultação do processo de memorização tela e à Possibilidade de elevação do tempo de localização da informação de interesse PRÓS [email protected] Referenciação de itens via teclado 33 DSC/CCT/UFCG 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 [email protected] Auxílio no processo cognitivo Possibilidade de absorção de grande informações em telas bem codificadas volume de Adequação a processos interativos rápidos, complexos, criativos 34 DSC/CCT/UFCG Uso Modelagem da Interação - Projeto Visual de variações espessura de linhas no ângulo, comprimento e Ângulos Uso para quantidades discretas de informação Comprimentos Possibilidade de fácil discriminação quando usados até 4 valores [email protected] Possibilidade de congestionamento utilizados em número excessivo da tela se 35 DSC/CCT/UFCG Uso Modelagem da Interação - Projeto Visual de variações no ângulo, espessura de linhas (Cont.) comprimento e Espessuras Possibilidade de fácil discriminação quando utilizados até 3 valores Possibilidade [email protected] de congestionamento empregadas em número excessivo da tela se 36 DSC/CCT/UFCG 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 [email protected] Ineficiência para codificação PRÓ Eficiência para atrair a atenção (Ideal: 2~3 Hz) 37 DSC/CCT/UFCG 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 [email protected] Ineficiência da codificação para usuários daltônicos Dependência da qualidade dos monitores 38 DSC/CCT/UFCG 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, losangulares Uso circulares, triangulares [email protected] de símbolos alfanuméricos, cores, comprimentos e espessuras de linhas e ângulos, 39 Modelagem da Interação - Projeto Visual Conteúdo DSC/CCT/UFCG Projeto Visual Propósito Transmissão de informações (transcende ornamentação e, até mesmo, a satisfação visual) a 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 [email protected] 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 40 DSC/CCT/UFCG Modelagem da Interação - Projeto Visual Exercício Elaborar o projeto visual dos objetos listados no [email protected] Modelo da Interação de seu projeto, para representação no protótipo a ser implementado a 41