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