III – DESENHO DE SISTEMAS
INTERACTIVOS
III.2 – Concepção e Desenho de Ecrãs
HCI, Cap.5 (Pag.211), Alan Dix
Melhor e Pior ?
Resumo Aula Anterior
o
Modelo Conceptual
Metáforas Conceitos
Relações entre conceitos Mapeamento
Sumário
Desenho Visual
Cor
Texto
Escrita de Texto
Um desenho de ecrã
Desenho de Ecrãs
Como dividir a tarefa pelos vários ecrãs
Entre ecrãs ou no mesmo ecrã?
Quantidade de interacção por ecrã?
Desenho de Ecrãs
Como desenhar cada um dos ecrãs
Espaço em branco: equilíbrio entre
informação/interacção e clareza
Dividir Tarefa pelos Ecrãs
Usar Análise de tarefas como ponto partida
Dividir a tarefa em subtarefas
Associar a cada subtarefa um ecrã
Apenas como ponto de partida, depois ajustar
Dividir Tarefa pelos Ecrãs
Problema!
Muitos ecrãs demasiado simples
Desenho de cada Ecrã
Captar a atenção do utilizador p/ pontos
importantes para a realização da tarefa
Ex. Cor, animações (cuidado), agrupamentos, etc.
Boa organização do ecrã ajuda
Agrupamentos, proximidade de itens
Compromisso entre ecrã muito cheio e ecrã
com muitos espaços em branco
Desenho Visual
Agrupamento
Ordenação
Decoração
Alinhamento
Espaço em branco
Agrupamento e Estrutura
Logicamente juntos
Fisicamente juntos
Billing details: Name Address: … Credit card no Delivery details: Name Address: … Delivery time
Ordenação
Ordenação de Grupos e Itens
Perceber qual a ordem natural
(p/ outilizador)
A ordem no ecrã deve reflectir isso
Decoração
Decoração
Caixas e linhas para separar
Tipo de texto (font), cor do texto e/ou
do fundo
Mas não muitas!
ABCDEFHIJKLM NOPQRSTUVWXYZ
Alinhamento - Texto
Lemos da esquerda para a direita
Alinhar texto à esquerda
Willy Wonka and the Chocolate Factory Winston Churchill - A Biography Wizard of Oz
Xena - Warrior Princess
Willy Wonka and the Chocolate Factory Winston Churchill - A Biography Wizard of Oz Xena - Warrior Princess Aceitável para
efeitos especiais, mas difícil de ler
Legível
Alinhamento - Nomes
o
Procuramos por apelido
Duas colunas
Apelido primeiro
Alinhamento - Nomes
o
Procuramos por apelido
Duas colunas
Apelido primeiro
Abowd, Gregory Beale, Russell Dix , Alan Finlay, Janet
Gregory Abowd Russell Beale Alan Dix Janet Finlay
Alinhamento - Nomes
Procuramos por apelido
Duas colunas
Apelido primeiro
Alan Dix Janet Finlay Gregory Abowd Russell Beale
Abowd, Gregory Beale, Russell Dix , Alan Finlay, Janet
Gregory Abowd Russell Beale Alan Dix Janet Finlay
Alinhamento - Números
Inteiros – Direita1
20
333
4444
765
12
123
Alinhamento - Números
Inteiros – DireitaReais – pela vírgula 627.865 1.005763 382.583 2502.56 432.935 2.0175 652.87 56.34
Alinhamento - Números
Inteiros – Direita Reais – pela vírgula
Evitar zeros à esquerda (00016 > 00116 ?)
0001
0020
0333
0444
0765
0012
0123
Alinhamento - Números
Inteiros – Direita Reais – pela vírgulaEvitar zeros à esquerda (00016 > 00116 ?) Separar números longos em grupos de 3 dígitos
Alinhamento - Números
Inteiros – Direita Reais – pela vírgula
Evitar zeros à esquerda (00016 > 00116 ?) Separar números longos em grupos de 3 dígitos
(1 828 763 863,76)
Alinhamento - Datas
Alinhamento - Datas
Usar separadores normalizados (ex.4/4/04 ou 04:04:04)
Alinhamento – Múltiplas Colunas
Problema:
Fosso grande entre colunas
Difícil
perceber correspondência
sherbet 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85Alinhamento – Múltiplas Colunas
Soluções
Usar guias Realçar linhas Alinhar à direita (compromisso)Espaços em Branco
Espaços em Branco
Separar
– parágrafos, secções, blocosEstruturar
Espaços em Branco
Separar
– parágrafos, secções, blocosEstruturar
Realçar
EXEMPLO:
MICRO-ONDAS
Exemplo: Micro-ondas
Exemplo: Micro-ondas
Agrupamento
Descongelar
Exemplo: Micro-ondas
Agrupamento
Tipo de comida
Descongelar
Exemplo: Micro-ondas
Agrupamento
Tipo de comida
Tempo
Descongelar
Exemplo: Micro-ondas
Agrupamento
Ordenação
1 1) Tipo de CozeduraExemplo: Micro-ondas
Agrupamento
Ordenação
2 2) Temperatura 1 1) Tipo de CozeduraExemplo: Micro-ondas
Agrupamento
Ordenação
2 2) Temperatura 3 3) Tempo 1 1) Tipo de CozeduraExemplo: Micro-ondas
Agrupamento
Ordenação
4 4) Início/Fim 2 2) Temperatura 3 3) Tempo 1 1) Tipo de CozeduraExemplo: Micro-ondas
Agrupamento
Ordenação
Decoração
Exemplo: Micro-ondas
Agrupamento
Ordenação
Decoração
Cores diferentes funções diferentesExemplo: Micro-ondas
Agrupamento
Ordenação
Decoração
Cores diferentes funções diferentes Linhas em torno de botões relacionados (aumentar/diminuir temperatura)Exemplo: Micro-ondas
Agrupamento
Ordenação
Decoração
Alinhamento
Exemplo: Micro-ondas
Agrupamento
Ordenação
Decoração
Alinhamento
Exemplo: Micro-ondas
Agrupamento
Ordenação
Decoração
Alinhamento
Espaços em branco
Exemplo: Micro-ondas
Agrupamento
Ordenação
Decoração
Alinhamento
Espaços em branco
Espaços para separar grupos de botões
Original
Alinhamento
Repetição
Repetição
COR
CODIFICAÇÃO
Significado – Cultura Ocidental
81 Amarelo Precaução 61 Verde Segurança 50 Vermelho Ligado 96 Azul Frio 95 Vermelho Quente 90 Vermelho Perigo 32 Azul Desligado 99 Verde Avançar 100 Vermelho Parar % Cor ConceitoModelo RBG da Cor
usado em computadores
Três componentes
Modelo HSV da Cor
o
Hue – Cor base
o
Saturation – Intensidade da cor. Mede a
pureza da cor.
Alta -> cor pura; Baixa -> mistura com cinzento
o
Value – Brilho da cor.
Contraste I
o
Aumentar o contraste
Escurecer cores escuras
Contraste II
Usar cores complementares
Ex. amarelo – azul
Evitar cores adjacentes
(a menos que usemos tb “Contraste I”)
Contraste III
Deficiências (daltonismo e miopia por ex.)
Difícil distinguir cores próximas no espectro Difícil distinguir verde e vermelho (cones)
Cor Tem Problemas
Cores no ecrã variam muito entre
dispositivos
Os mecanismos analógicos do ecrã
(calibração – temperatura de
cor) determinam cores
diferentes
GUIRlogo #AF2534 Web Safe #993333Princípios e Conselhos (1/9)
Desenhar
primeiro
sem cor
optimizar
desenho
do ecrã
Princípios e Conselhos (2/9)
Usar cor para
Atrair o olhar do utilizador
Princípios e Conselhos (2/9)
Usar cor para
Atrair o olhar do utilizador
Princípios e Conselhos (2/9)
Usar cor para
Atrair o olhar do utilizador
Destacar
organização/informação
Indicar estado ou estabelecer relações
Princípios e Conselhos (3/9)
Princípios e Conselhos (4/9)
Usar cor de modo e com significado
consistente
Princípios e Conselhos (5/9)
Limitar codificação a quatro cores distintas
distribuídas pelo espectro visível
Princípios e Conselhos (6/9)
Seguir a regra do contraste:
Usar texto escuro sobre fundo claro
Princípios e Conselhos (7/9)
Somos atraídos por alterações de cor
Princípios e Conselhos (8/9)
Somos atraídos por alterações de cor
Usar isso para mostrar alterações de estado
A “cor de um objecto” é influenciada pelo
fundo
Escolham as cores num contexto e não isoladamente
Princípios e Conselhos (8/9)
Somos atraídos por alterações de cor
Usar isso para mostrar alterações de estado
A “cor de um objecto” é influenciada pelo
fundo
Princípios e Conselhos (8/9)
Somos atraídos por alterações de cor
Usar isso para mostrar alterações de estado
A “cor de um objecto” é influenciada pelo
fundo
Escolham as cores num contexto e não isoladamente
A = B “Azul” = Verde
Princípios e Conselhos (9/9)
Utilizar cores de acordo com as convenções
Princípios e Conselhos (9/9)
Utilizar cores de acordo
com as convenções
Vermelho – parar; Verde – avançar; etc.
Princípios e Conselhos (9/9)
Utilizar cores de acordo com as convenções
Princípios e Conselhos (9/9)
Utilizar cores de acordo com as convenções
Vermelho – parar; Verde – avançar; etc.
Princípios e Conselhos (9/9)
Utilizar cores de acordo com as convenções
TEXTO
Texto
Tipos
Legibilidade
Tamanho
Cor
Tipos de Texto
Duas grandes famílias
Sans Serif
Serif
A A
Duas grandes famílias
Sans Serif
Serif
Legibilidade do Texto
Serifas ajudam a ler “texto corrido”
Mas…
Legibilidade do Texto
Serifas ajudam a ler “texto corrido”
Mas…
Ecrãs não têm resolução para detalhes
tão pequenos!
Legibilidade do Texto
Usar Cor + Contraste
o
Eficaz
Não tão Eficaz
Para pessoas com deficiências e
cidadãos seniores:
Cores claras em fundo escuro
funcionam melhor
Cor do Texto
Alto contraste difícil de alcançar com outra
combinação para além de preto e branco
Tamanho de Texto
Ideal será pelo menos 12 pontos
Não se esqueçam da resolução dos
ecrãs (dpis)!
Não Especificar Tamanho de Texto em
pixéis (px)
o
Isto é texto de 32 pontos
o Isto é texto de 14 pontos o Este texto tem 12 pontos
o Este texto tem 8 pontos o Este texto tem 8 pontos com itálico
Espaçamento
Deve ser pelo menos 30% da
altura do tipo
Espaçamento que funciona menos
bem:
Muitas pessoas com problemas
visuais (e não só) têm
problemas em ler texto em
linhas demasiado juntas
Tipo de Texto
Evitem tipos excessivamente ornados que são menos
legíveis
Apenas para ênfase
Usem tipos padrão: normal ou itálico
Tipo condensado poupa espaço mas é menos legível
Estilo de Texto
Mistura de maiúsculas e minúsculas
melhor do que
SÓ MAIÚSCULAS
ou só minúsculas
Recomendações
Usar 2 ou 3 tipos no máximo
Não usar mais do que um tipo
serif/sans serif
Recomendações
Sem Serifa em ecrãs
Com Serifa em papel
Recomendações
Cuidado com o contraste
Texto na vertical difícil de ler
Escrita de Texto
Mensagens
Pedidos de informação
Instruções
Mensagens
Devem ser breves e concisas:
O processamento do editor de texto
conduziu a 23 páginas impressas
Mensagens
Devem ser breves e concisas:
O processamento do editor de texto
conduziu a 23 páginas impressas
Impressas 23 páginas
Mensagens
Desenhar com nível de detalhe de
acordo com conhecimentos e
experiência do utilizador:
Mensagens
Desenhar com nível de detalhe de
acordo com conhecimentos e
experiência do utilizador:
Erro no campo Nº do Vestido
Erro: nº do vestido deve estar entre
32 e 48
Mensagens
Usar mensagens afirmativas:
Não é possível sair sem antes
guardar o ficheiro
Mensagens
Usar mensagens afirmativas:
Não é possível sair sem antes
guardar o ficheiro
Guardar o ficheiro antes de sair
Mensagens
Mensagens devem ser construtivas e
não críticas:
Mensagens
Mensagens devem ser construtivas e
não críticas:
Nome de ficheiro Mau/ilegal/inválido
Nº máximo de caracteres do nome do
ficheiro: 8
Mensagens
Mensagens devem ser específicas e
construtivas:
Mensagens
Mensagens devem ser específicas e
construtivas:
Erro sintáctico nº 1542
Parêntesis esquerdo na linha 210
não tem parêntesis direito
Mensagens
Mensagens devem mostrar que o
utilizador tem o controlo
(controlo
externo):
Mensagens
Mensagens devem mostrar que o
utilizador tem o controlo
(controlo
externo):
Introduza comando
Pronto para receber comando
Mensagens
Quando a mensagem implica
pré-acção ou estado, as palavras da
mensagem devem ser consistentes
com essa acção:
Mensagens
Quando a mensagem implica
pré-acção ou estado, as palavras da
mensagem devem ser consistentes
com essa acção:
Trem de aterragem está recolhido
Abra o trem de aterragem
Pedidos de informação
Os mesmos princípios devem ser usados
nos pedidos de informação:
Diálogo afirmativo,
Erros Típicos – Desenho de Ecrãs
Posição arbitrária de componentes
Dimensões arbitrárias dos componentes
Tamanhos e layouts arbitrários das janelas
Inconsistência nos vários ecrãs
Inconsistência com o dispositivo físico
Ex. Janelas tipo Windows num telemóvel 3G Resolução do ecrã
Resumo (1/2)
Garantir que o desenho é simples e está
logicamente organizado
Evitar encher o ecrã com informação
irrelevante
Sempre que apropriado apresentar a
informação graficamente em vez de
números
Alinhar números e mostrar claramente as
unidades
Não usar só MAIUSCULAS e limitar o
número de tipos
Resumo (2/2)
Agrupar elementos relacionados
usar caixas, cor, espaço
