Projeto de Interfaces:

Design de Telas

1
 Componentes Visuais Interativos (Widgets)
Permitem ao usurio interagir
Disponveis em bibliotecas
Podem ser agrupados
Precisam ser associados funcionalidade e aos objetos da aplicao
Exemplos:
Janelas
Menus (pull-down, pop-up)
cones
Cursores
Botes
Sliders
Scrollers

2
Menus Tipos
Menus pull-down e pop-up
Toolbars e palettes

Seleo simples: radio buttons

Seleo mltipla: check boxes

3
Menus Pull-Down
Organizao e agrupamento
considere os objetos e aes relacionados s tarefas do usurio
escolha um dos seguintes paradigmas:
objeto ao (ex: Tabela Ordenar)
ao objeto (ex: Inserir Figura)
considere a ordem das tarefas (ex: Incluir antes de Excluir)
mantenha o nvel de abstrao dos elementos de uma categorizao
desabilite os itens de menu que no estejam disponveis
Terminologia
familiar (vs. jargo computacional), consistente e concisa
itens diferentes (vs. Opes, Preferncias)
Tempo de resposta (teclas de atalho: Ctrl+S, Shift+Ctrl+S)
Mensagens diretas
descrio mais extensa de cada item (na barra de status)
Siga as convenes do ambiente operacional

4
Menus no Windows
Menus padronizados (File, Edit, View, Window, Help)
Tipos de itens de menu
acionamento de comando
comando imediato (Save)
comando que precisa de mais input (Save As...)
mudana de estado
opes independentes (Estilo de fonte: Bold, Italic)
opes interdependentes (Alinhamento: Left,Right,Justified)

5
Para se Criar Menus Pull-Down
Dicas
classificar as tarefas, os objetos e as aes do usurio
selecionar um paradigma (objeto+ao ou ao+objeto)
selecionar termos precisos e relevantes para o domnio
prever quando os itens de menu devem estar
desabilitados
seguir o padro do ambiente operacional

6
Barras de Ferramenta e de Status
Barra de ferramentas (toolbar)
inclua elementos de uso freqente: evite incluir controles que
no esto disponveis de outra forma
fornea tooltips
caso haja mltiplas toolbars, fornea ao usurio o controle de
visibilidade
analise adequao de representaes grficas
Barra de status (status bar): mensagens diretas sobre...
estado atual da aplicao
item de menu selecionado
estado do teclado
hora atual

7
Para se Criar Barras de Ferramentas
selecionar os elementos relevantes para a barra de
ferramentas da aplicao
dicas
verificar que elementos do menu...
possuem uso freqente
possuem representao grfica de fcil compreenso
observao
caso haja um elemento que no pertena ao menu, certifique-
se de que ele vai aparecer em algum quadro de dilogo (ex:
combo box para escolha do tipo ou tamanho de fonte)

8
Botes de Comando

utilize botes de comando para disparar aes ou

para indicar e alterar estados

no deve haver interseo entre aes disparadas por

botes diferentes (vs. OK, Salva e Fecha)

utilize descries breves, consistentes e claramente

distintas (vs. Fecha, Cancela, Volta)

mantenha o tamanho e posicionamento consistentes

siga as convenes do ambiente operacional

9
Botes de Comando no Windows

acionamento imediato e contextualizado

em toolbar:
executa ao associada
em janela secundria:
inicia uma transao dentro da janela
aplica uma transao e fecha a janela
tipos
dispara ao imediatamente
necessita de mais input (...)
expande uma janela (>>)
reflete um estado (pressionado / no, habilitado / no)

10
Botes de Opo (Radio) e Seleo (Check box)
orientaes gerais
se o nmero de opes for muito grande, utilize lista ou tabela
se o texto de um item for grande, alinhe pelo topo
pode possuir teclas de atalho
botes de opo (radio buttons)
opes relacionadas e mutuamente exclusivas
apenas uma opo pode estar selecionada
pode apresentar um valor default
botes de seleo (check boxes)
opes independentes, que podem estar ligadas ou desligadas
os estados ligado/desligado devem ser opostos
pode possuir valor misto

11
Listas
seleo simples (~ radio buttons) ou mltipla (~ check
boxes)
utilize para um grande nmero de opes
exiba entre trs e oito opes
ordene as opes segundo algum critrio
evite barras de rolamento horizontais
fornea um label para identificar a lista
fornea teclas de atalho para acesso rpido
considere permitir operaes de drag-and-drop
seleo simples: pode utilizar combo box para poupar
espao

12
Outros Widgets para Entrada de dados
fornea um label para identificar o elemento
fornea teclas de atalho para acesso rpido
valide a entrada de dados imediatamente, se possvel
caixas de texto (text boxes)
campo textual livre
spins
faixa limitada de valores seqenciais discretos
sliders
valores contnuos, como volume sonoro

13
Janelas

janelas primrias
janelas de contextualizao, com menus, barras de
ferramentas e de status
represente nelas os objetos principais da aplicao
limite o nmero de janelas simultneas
mantenha a aparncia consistente

janelas secundrias
output de mensagens (quadros de mensagem)
input de informaes adicionais (quadros de dilogo,
formulrios)

14
Regras de Ouro do Design de Interfaces
(Shneiderman98)
1. procure manter a consistncia
2. permita que usurios freqentes utilizem atalhos
3. oferea feedback informativo
4. projete os dilogos para garantir continuidade
5. oferea preveno e tratamento de erros
6. permita desfazer aes facilmente
7. mantenha o usurio no controle
8. reduza a carga cognitiva

15
Uso de Cores (Shneiderman98)
utilize cores de forma conservadora e limitada (at 4 cores)
assegure que cdigo de cores corresponde tarefa
pense primeiro em preto e branco
considere os problemas de pares de cores e de usurios
com deficincia visual
utilize cores para ajudar a formatao, aumentar a
densidade de informao e sinalizar mudana de estados
conhea as expectativas dos usurios sobre cores
utilize cores de forma consistente
16
Quadros de Mensagem

objetivo
apresentar mensagens explicativas, de erro e etc.
sinalize o tipo de mensagem
(ex: cones das janelas de mensagem
do Windows 95)
utilize vocabulrio simples e claro
relacione a mensagem tarefa do usurio
nas mensagens de erro, apresente:
descrio do erro
causa do erro
possvel soluo

17
Quadros de Dilogo
objetivo: entrada de dados
termos utilizados
ttulo significativo, estilo consistente
terminologia, fontes, capitulao e justificao consistentes
organizao
seqncia de uso: topo-esquerda a baixo-direita
agrupamento e nfase
layouts consistentes (propores, margens, grid, espaos em
branco, linhas, quadros)
indicao de itens habilitados e desabilitados
valores default
botes padronizados (OK, Cancela)
preveno de erros

18
Quadros de Dilogo e Janelas Erros Comuns

desconsiderar o padro look and feel do ambiente operacional

propores incomuns
estrutura excessiva: muitos quadros aninhados, um quadro para
cada controle, muitas linhas divisrias
traduo literal de metforas, detalhes estticos excessivos
pouco ou muito contraste entre reas e elementos
tenso espacial: informao demais ou de menos
layouts arbitrrios: controles de tamanho diferente, alinhamento
e posicionamento arbitrrios, agrupamento inexistente ou
inadequado

19
Preenchimento de Formulrios

siga orientaes gerais para quadros de dilogo

utilize widgets adequados para o tipo de dado
fornea movimento de cursor conveniente
marque claramente os campos opcionais e obrigatrios
sinalize o trmino do preenchimento (ex: habilitando boto de
confirmao)
instrues e mensagens
instrues claras e breves (evite pronomes e referncias)
mensagens explicativas (barra de status ou quadros de mensagem)
tratamento de erros
correo de erros para caracteres individuais ou campos inteiros
preveno de erros
mensagens de erro para valores inaceitveis

20
Formulrios Erros Comuns

uso inadequado do formato de formulrio vs. planilha

apresentao de informaes internas ao sistema e
irrelevantes para o usurio
instrues excessivas, com texto redundante
instrues para o preenchimento dos campos em locais
privilegiados (vs. barra de status)
excesso de quadros de mensagens que interferem na tarefa
do usurio

21
Para se Criar Quadros de Dilogo

dicas
analisar a organizao do quadro de dilogo
verificar termos e abreviaes utilizadas
analisar instrues e mensagens disponveis
analisar a dinmica do quadro de dilogo
analisar a correspondncia entre os widgets e os tipos de dados
verificar pontos de preveno e tratamento de erros

22
Mensagens de Erro

sempre que possvel, o sistema no deve permitir que

ocorram erros
causas de erros:
falta de conhecimento, noes incorretas
lapsos (slips)

23
Mensagens de Erro Como Redigir
o que houve, por que aconteceu, como contornar ou
resolver

especificidade
DADO INVLIDO vs. Digite um valor numrico de 1 a 10.
orientao construtiva (indicao de como resolver o
problema)
COMANDO INVLIDO vs. Verifique a sintaxe do comando.
formato fsico apropriado
CAIXA ALTA PARA ERROS DE POUCA IMPORTNCIA
desenvolvimento de mensagens eficazes
ERRO Xbc345! vs. Data invlida: o formato correto dd/mm/aaaa.

24
Para se Criar Mensagens de Erro

dicas
verificar se o erro poderia ter sido evitado pelo sistema
avaliar os termos utilizados na mensagem de erro
analisar o contedo da mensagem de erro (o que houve, por que
aconteceu, como contornar ou resolver)

25
cones, ndices e Smbolos

classificao
cone: expresso semelhante ao contedo
conceitos palpveis, objetos conhecidos
ndice: expresso indica relao com o contedo
relaes de causa-efeito (planilha)
smbolo: expresso arbitrria com relao ao contedo
signos convencionais, utilizados com freqncia ou metafricos

abstraia detalhes; se possvel, contrate um profissional

especializado

26
cones, ndices e Smbolos Critrios de Avaliao

imediatez
percebidos sem esforo e involuntariamente
generalidade
representao de classe de artefatos (vs. instncia)
alto grau de abstrao (vs. realismo)
sistematizao
qualidades formais das imagens so reconhecidas facilmente, como
parte de um sistema maior
caracterizao
foco em caractersticas distintivas
comunicabilidade
contexto compartilhado entre emissor e receptor

27
cones, ndices e Smbolos Erros Comuns
uso inconsistente em toda a aplicao
uso de bibliotecas de cones com identidades visuais
distintas
cones irreconhecveis ou sem relao com o referente
cones complexos e com detalhes irrelevantes
elementos secundrios dominantes
uso de cones para representar conceitos abstratos
cones com dependncias culturais (j possuem uma
identificao histrica)

Uma imagem bem projetada no precisa ser desmembrada para

ser compreendida.
28
Avaliao de cones, ndices e Smbolos

dicas
classificar e verificar a relao com o contedo
analisar a relao reconhecimento vs. memorizao
avaliar segundo critrios de imediatez, generalidade,
sistematizao e caracterizao
avaliar signo textual alternativo (desenho + texto)

29
Apresentao de Dados (Mullet and Sano95)
elegncia e simplicidade
unidade, refinamento, adequao
escala, contraste e proporo
clareza, harmonia, atividade e restries
organizao e estrutura visual
agrupamento, hierarquia, relacionamento e equilbrio
mdulo e programa
foco, flexibilidade e aplicao consistente
imagem e representao
imediatez, generalidade, sistematizao e caracterizao
estilo
distino, integridade, abrangncia e adequao

30