CONCEPO DE DESENHO DE

ECRS

Melhor e Pior ?

1
Melhor e Pior ?

Sumrio

Desenho Visual

Cor

Texto

Escrita de Texto

2
Um desenho de ecr

Outro desenho de ecr

3
Desenho de Ecrs

Como dividir a tarefa pelos vrios ecrs

Entre ecrs ou no mesmo ecr?
Quantidade de interaco por ecr?

4
Desenho de Ecrs

Como desenhar cada um dos ecrs

Espao em branco: equilbrio entre
informao/interaco e clareza
Agrupar itens: cores, caixa, molduras

Dividir Tarefa pelos Ecrs

Usar Anlise de tarefas como ponto partida

Dividir a tarefa em subtarefas
Associar a cada subtarefa um ecr
Apenas como ponto de partida, depois ajustar

5
Dividir Tarefa pelos Ecrs

Problema!

Muitos ecrs demasiado simples

Algumas tarefas requerem mltiplos ecrs
abertos simultaneamente

Desenho de cada Ecr

Captar a ateno do utilizador p/ pontos

importantes para a realizao da tarefa
Ex. Cor, animaes (cuidado), agrupamentos, etc.

Boa organizao do ecr ajuda

Agrupamentos, proximidade de itens

Compromisso entre ecr muito cheio e ecr

com muitos espaos em branco

6
 DESENHO VISUAL

Desenho Visual

Agrupamento

Ordenao

Decorao

Alinhamento

Espao em branco

7
Agrupamento e Estrutura

Logicamente juntos Fisicamente juntos

Billing details: Delivery details:

Name Name
Address: Address:
Credit card no Delivery time

Order details:
item quantity cost/item cost
size 10 screws (boxes) 7 3.71 25.97

Ordenao

Ordenao de Grupos e Itens

Perceber qual a ordem natural (p/ o
utilizador)
A ordem no ecr deve reflectir isso

8
 Decorao

Decorao
Caixas e linhas para separar
Tipo de texto (font), cor do texto e/ou
do fundo
Mas no muitas!

ABCDEFHIJKLM
NOPQRSTUVWXYZ

Alinhamento - Texto
Lemos da esquerda para a direita
Alinhar texto esquerda

Willy Wonka and the Chocolate Factory

Winston Churchill - A Biography Legvel
Wizard of Oz
Xena - Warrior Princess

Willy Wonka and the Chocolate Factory

Aceitvel para Winston Churchill - A Biography
efeitos especiais, Wizard of Oz
mas difcil de ler Xena - Warrior Princess

9
Alinhamento - Nomes

o Procuramos por apelido

Duas colunas
Apelido primeiro

Gregory
Russell

Abowd
Beale
Alan Dix
Janet Finlay

Alinhamento - Nomes

o Procuramos por apelido

Duas colunas
Apelido primeiro

Gregory
Russell

Abowd
Beale

Abowd, Gregory
Beale, Russell
Alan Dix Dix , Alan
Janet Finlay Finlay, Janet

10
Alinhamento - Nomes

Procuramos por apelido

Duas colunas
Apelido primeiro
Alan Dix
Janet Finlay
Gregory Abowd
Russell Beale

Gregory
Russell

Abowd
Beale

Abowd, Gregory
Beale, Russell
Alan Dix Dix , Alan
Janet Finlay Finlay, Janet

Alinhamento - Nmeros
Inteiros Direita

1
20
333
4444
765
12
123

11
Alinhamento - Nmeros
Inteiros Direita
Reais pela vrgula 627.865
1.005763
382.583
2502.56
432.935
2.0175
652.87
56.34

Alinhamento - Nmeros
Inteiros Direita
Reais pela vrgula
Evitar zeros esquerda (00016 > 00116 ?) 0001
0020
0333
0444
0765
0012
0123

12
Alinhamento - Nmeros
Inteiros Direita
Reais pela vrgula
Evitar zeros esquerda (00016 > 00116 ?)
Separar nmeros longos em grupos de 3 dgitos
(1828763863,76)

Alinhamento - Nmeros
Inteiros Direita
Reais pela vrgula
Evitar zeros esquerda (00016 > 00116 ?)
Separar nmeros longos em grupos de 3 dgitos
(1 828 763 863,76)

13
Alinhamento - Datas
Usar separadores normalizados (ex.4/4/04 ou 04:04:04)

Alinhamento - Datas
Usar separadores normalizados (ex.4/4/04 ou 04:04:04)

14
Alinhamento Mltiplas Colunas

Problema:
Fosso grande entre colunas Difcil
perceber correspondncia

sherbet 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85

Alinhamento Mltiplas Colunas

Solues

Usar guias

Realar linhas

Alinhar direita
(compromisso)

15
Espaos em Branco

Separar pargrafos, seces, blocos

Espaos em Branco

Separar pargrafos, seces, blocos

Estruturar

16
Espaos em Branco

Separar pargrafos, seces, blocos

Estruturar

Realar
(usado nas revistas e jornais)

EXEMPLO:
MICRO-ONDAS

17
Exemplo: Micro-ondas

Agrupamento

Exemplo: Micro-ondas

Agrupamento

Descongelar

18
Exemplo: Micro-ondas

Agrupamento

Descongelar
Tipo de comida

Exemplo: Micro-ondas

Agrupamento

Descongelar
Tipo de comida
Tempo

19
Exemplo: Micro-ondas

Agrupamento
Ordenao

1) Tipo de Cozedura
1

Exemplo: Micro-ondas

Agrupamento
Ordenao

1) Tipo de Cozedura
1
2) Temperatura

20
Exemplo: Micro-ondas

Agrupamento
Ordenao

1) Tipo de Cozedura
1
2) Temperatura

3) Tempo
2
3

Exemplo: Micro-ondas

Agrupamento
Ordenao

1) Tipo de Cozedura
1
2) Temperatura

3) Tempo
2
4) Incio/Fim
3

21
Exemplo: Micro-ondas

Agrupamento
Ordenao
Decorao

Exemplo: Micro-ondas

Agrupamento
Ordenao
Decorao

Cores diferentes
funes diferentes

22
Exemplo: Micro-ondas

Agrupamento
Ordenao
Decorao

Cores diferentes
funes diferentes

Linhas em torno de
botes relacionados
(aumentar/diminuir temperatura)

Exemplo: Micro-ondas

Agrupamento
Ordenao
Decorao
Alinhamento

23
Exemplo: Micro-ondas

Agrupamento
Ordenao
Decorao
Alinhamento

botes alinhados

Exemplo: Micro-ondas

Agrupamento
Ordenao
Decorao
Alinhamento
Espaos em branco

24
 Exemplo: Micro-ondas

Agrupamento
Ordenao
Decorao
Alinhamento
Espaos em branco

Espaos para separar

grupos de botes

Original

25
Proximidade

Alinhamento

26
Contraste

Repetio

27
Repetio

Repetio

28
 COR
CODIFICAO

PRINCPIOS E CONSELHOS

Significado Cultura Ocidental

Conceito Cor %
Parar Vermelho 100
Avanar Verde 99
Frio Azul 96
Quente Vermelho 95
Perigo Vermelho 90
Precauo Amarelo 81
Segurana Verde 61
Ligado Vermelho 50
Desligado Azul 32

29
 Modelo RBG da Cor

usado em computadores

Trs 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.

30
Contraste I

o Aumentar o contraste
Escurecer cores escuras
Clarear cores claras

Contraste II

Usar cores complementares

Ex. amarelo azul
Evitar cores adjacentes
(a menos que usemos tb Contraste I)

31
Contraste III

Deficincias (daltonismo e miopia por ex.)

Difcil distinguir cores prximas no espectro
Difcil distinguir verde e vermelho (cones)

Cor Tem Problemas

Cores no ecr variam muito entre

GUIR logo
dispositivos #AF2534

Os mecanismos analgicos do ecr

Web Safe

(calibrao temperatura de #993333

cor) determinam cores

diferentes

32
Princpios e Conselhos (1/9)

Desenhar
primeiro
sem cor

optimizar
desenho
do ecr

Princpios e Conselhos (2/9)

Usar cor para

Atrair o olhar do utilizador

33
Princpios e Conselhos (2/9)

Usar cor para

Atrair o olhar do utilizador
Destacar organizao/informao

Princpios e Conselhos (2/9)

Usar cor para

Atrair o olhar do utilizador
Destacar organizao/informao
Indicar estado ou estabelecer relaes

34
Princpios e Conselhos (3/9)

Usar a cor apropriadamente

Princpios e Conselhos (3/9)

Usar a cor apropriadamente

35
Princpios e Conselhos (3/9)

Usar a cor apropriadamente

Princpios e Conselhos (4/9)

Usar cor de modo e com significado

consistente

36
Princpios e Conselhos (5/9)

Limitar codificao a quatro cores distintas

distribudas pelo espectro visvel

No mximo OITO cores

Cores extra usadas em casos

especficos

Princpios e Conselhos (6/9)

Seguir a regra do contraste:

Usar texto escuro sobre fundo claro

37
Princpios e Conselhos (7/9)

Somos atrados por alteraes de cor

Usar isso para mostrar alteraes de estado

Princpios e Conselhos (8/9)

Somos atrados por alteraes de cor

Usar isso para mostrar alteraes de estado

A cor de um objecto influenciada pelo

fundo
Escolham as cores num contexto e no
isoladamente

38
Princpios e Conselhos (8/9)

Somos atrados por alteraes de cor

Usar isso para mostrar alteraes de estado

A cor de um objecto influenciada pelo

fundo
Escolham as cores num contexto e no
isoladamente

Princpios e Conselhos (8/9)

Somos atrados por alteraes de cor

Usar isso para mostrar alteraes de estado

A cor de um objecto influenciada pelo

fundo
Escolham as cores num contexto e no
isoladamente

A=B

Azul = Verde

39
Princpios e Conselhos (9/9)

Utilizar cores de acordo com as convenes

Vermelho parar; Verde avanar; etc.

Princpios e Conselhos (9/9)

Utilizar cores de acordo

com as convenes
Vermelho parar; Verde
avanar; etc.

40
Princpios e Conselhos (9/9)

Utilizar cores de acordo com as convenes

Vermelho parar; Verde avanar; etc.

Princpios e Conselhos (9/9)

Utilizar cores de acordo com as convenes

Vermelho parar; Verde avanar; etc.

41
Princpios e Conselhos (9/9)

Utilizar cores de acordo com as convenes

Vermelho parar; Verde avanar; etc.

TEXTO

42
Texto

Tipos
Legibilidade
Tamanho
Cor
Espaamento
Estilo
Disposio

Tipos de Texto

43
Dentro de um mesmo tipo

Duas grandes famlias

Sans Serif Serif

A A
44
Duas grandes famlias

Sans Serif Serif

A A
Legibilidade do Texto

Serifas ajudam a ler texto corrido

Mas

45
Legibilidade do Texto

Serifas ajudam a ler texto corrido

Mas

Ecrs no tm resoluo para detalhes

to pequenos!

Legibilidade do Texto

Usar Cor + Contraste

oEficaz
No to Eficaz

Para pessoas com deficincias e

cidados seniores:
Cores claras em fundo escuro funcionam
melhor

46
Cor do Texto

Alto contraste difcil de alcanar com outra

combinao para alm de preto e branco

Eficaz

No to eficaz

Tamanho de Texto

Ideal ser pelo menos 12 pontos

No se esqueam da resoluo dos
ecrs (dpis)!
No Especificar Tamanho de Texto em
pixis (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 itlico

47
Espaamento

Deve ser pelo menos 30% da

altura do tipo

Espaamento que funciona menos

bem:

Muitas pessoas com problemas

visuais (e no s) tm
problemas em ler texto em
linhas demasiado juntas

Tipo de Texto

Evitem tipos excessivamente ornados que so menos

legveis
Apenas para nfase
Usem tipos padro: normal ou itlico

Tipo condensado poupa espao mas menos legvel

48
Estilo de Texto

Mistura de maisculas e minsculas

melhor do que

S MAISCULAS

ou s minsculas

Evitem o itlico (menos legvel)

Recomendaes

Usar 2 ou 3 tipos no mximo

No usar mais do que um tipo serif/

sans serif

49
Recomendaes

Sem Serifa em ecrs

Com Serifa em papel

Recomendaes

Cuidado com o contraste

Texto na vertical difcil de ler

50
 ESCRITA DE TEXTO

Escrita de Texto

Mensagens

Pedidos de informao

Instrues

51
Mensagens

Devem ser breves e concisas:

O processamento do editor de texto

conduziu a 23 pginas impressas

Mensagens

Devem ser breves e concisas:

O processamento do editor de texto

conduziu a 23 pginas impressas

Impressas 23 pginas

52
Mensagens

Desenhar com nvel de detalhe de

acordo com conhecimentos e
experincia do utilizador:

Erro no campo N do Vestido

Mensagens

Desenhar com nvel de detalhe de

acordo com conhecimentos e
experincia do utilizador:

Erro no campo N do Vestido

Erro: n do vestido deve estar entre

32 e 48

53
Mensagens

Usar mensagens afirmativas:

No possvel sair sem antes

guardar o ficheiro

Mensagens

Usar mensagens afirmativas:

No possvel sair sem antes

guardar o ficheiro

Guardar o ficheiro antes de sair

54
Mensagens

Mensagens devem ser construtivas e

no crticas:

Nome de ficheiro Mau/ilegal/invlido

Mensagens

Mensagens devem ser construtivas e

no crticas:

Nome de ficheiro Mau/ilegal/invlido

N mximo de caracteres do nome do

ficheiro: 8

55
Mensagens

Mensagens devem ser especficas e

construtivas:

Erro sintctico n 1542

Mensagens

Mensagens devem ser especficas e

construtivas:

Erro sintctico n 1542

Parntesis esquerdo na linha 210

no tem parntesis direito

56
Mensagens

Mensagens devem mostrar que o

utilizador tem o controlo (controlo
externo):

Introduza comando

Mensagens

Mensagens devem mostrar que o

utilizador tem o controlo (controlo
externo):

Introduza comando

Pronto para receber comando

57
Mensagens

Quando a mensagem implica pr-

aco ou estado, as palavras da
mensagem devem ser consistentes
com essa aco:

Trem de aterragem est recolhido

Mensagens

Quando a mensagem implica pr-

aco ou estado, as palavras da
mensagem devem ser consistentes
com essa aco:

Trem de aterragem est recolhido

Abra o trem de aterragem

58
 Pedidos de informao

Os mesmos princpios devem ser usados nos

pedidos de informao:

Dilogo afirmativo,

Construtivo,

Consistente,

Especfico,

Claro,...

Erros Tpicos Desenho de Ecrs

Posio arbitrria de componentes

Dimenses arbitrrias dos componentes
Tamanhos e layouts arbitrrios das janelas
Inconsistncia nos vrios ecrs
Inconsistncia com o dispositivo fsico
Ex. Janelas tipo Windows num telemvel 3G
Resoluo do ecr

59
Resumo (1/2)

Garantir que o desenho simples e est

logicamente organizado
Evitar encher o ecr com informao
irrelevante
Sempre que apropriado apresentar a
informao graficamente em vez de
nmeros
Alinhar nmeros e mostrar claramente as
unidades
No usar s MAIUSCULAS e limitar o
nmero de tipos

Resumo (2/2)

Agrupar elementos relacionados

usar caixas, cor, espao
Usar cor conservadora e consistentemente
Usar uma cor neutra para o fundo
Usar caracteres escuros sobre fundo claro
Minimizar o nmero de cores, mas que
sejam distintas
Usar informao adicional para alm da cor
(daltnicos)

60
Referncias Adicionais

Tipografia na web
http://commmunity.linux.com/howtos/Font-
HOWTO/typography.shtml
http://desktoppub.about.com/cs/fonts/tp/
sansbodyfonts.htm
http://desktoppub.about.com/cs/finetypography/
ht/body_font.htm
http://www.will-harris.com/typoscrn.htm
http://www.pemberley.com/janeinfo/latin1.html
http://www.microsoft.com/typography/

Cor
http://www.webwhirlers.com/colors/

61