carga horária:

rang

el@ds

c.ufpb

.brrang

el@ds

c.ufpb

.br

DSC/CCT/UFCG

Carga Horária:60 h

Prof.: José Eustáquio Rangel de Queiroz

2rang

el@ds

c.ufpb

.br

DSC/CCT/DSC/CCT/UFCGUFCG

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

Modelagem da Interação - Projeto Visual

3rang

el@ds

c.ufpb

.br


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


4rang

el@ds

c.ufpb

.br


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


5rang

el@ds

c.ufpb

.br


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


6rang

el@ds

c.ufpb

.br


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


7rang

el@ds

c.ufpb

.br


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


8rang

el@ds

c.ufpb

.br


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)


9rang

el@ds

c.ufpb

.br


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


10rang

el@ds

c.ufpb

.br


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 telaOCUPAREM 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


11rang

el@ds

c.ufpb

.br


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


12rang

el@ds

c.ufpb

.br



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

branca

brancopreto

preta

13rang

el@ds

c.ufpb

.br


IlustraçõesUma 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


14rang

el@ds

c.ufpb

.br



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

15rang

el@ds

c.ufpb

.br



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

16rang

el@ds

c.ufpb

.br



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

17rang

el@ds

c.ufpb

.br



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

18rang

el@ds

c.ufpb

.br



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

19rang

el@ds

c.ufpb

.br



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

20rang

el@ds

c.ufpb

.br



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

21rang

el@ds

c.ufpb

.br



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)

22rang

el@ds

c.ufpb

.br



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

23rang

el@ds

c.ufpb

.br



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

24rang

el@ds

c.ufpb

.br



Próposito Interatividade

Liberdade de formato Comunicação intercalada de idéias entre o

usuário e o sistema

25rang

el@ds

c.ufpb

.br



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

26rang

el@ds

c.ufpb

.br



Características Desejáveis Teste

Identificação de TODOS os elementos presentes nas telas da interface (GUI ou WUI), independentemente de seu conteúdo

27rang

el@ds

c.ufpb

.br



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

28rang

el@ds

c.ufpb

.br



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

29rang

el@ds

c.ufpb

.br



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

30rang

el@ds

c.ufpb

.br



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

31rang

el@ds

c.ufpb

.br



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)

32rang

el@ds

c.ufpb

.br



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

33rang

el@ds

c.ufpb

.br



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

34rang

el@ds

c.ufpb

.br



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

35rang

el@ds

c.ufpb

.br



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

36rang

el@ds

c.ufpb

.br



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

37rang

el@ds

c.ufpb

.br



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)

38rang

el@ds

c.ufpb

.br



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

39rang

el@ds

c.ufpb

.br



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

40rang

el@ds

c.ufpb

.br


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

41rang

el@ds

c.ufpb

.br



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

carga horária:

Documents