Diretrizes de Design de Interface
Regras de Ouro do Design de Interfaces
(Shneiderman’98)
• 1. procure manter a consistência
• 2. permita que usuários freqüentes utilizem atalhos
• 3. ofereça feedback informativo
• 4. projete os diálogos para garantir continuidade
• 5. ofereça prevenção e tratamento de erros
• 6. permita desfazer ações facilmente
• 7. mantenha o usuário no controle
• 8. reduza a carga cognitiva (7 +/- 2 chunks de
informação)
SERG
Uso de Cores (Shneiderman’98)
• utilize cores de forma conservadora e limitada (até 4
cores)
• assegure que código de cores corresponde à tarefa
• pense primeiro em preto e branco
• considere os problemas de pares de cores e de
usuários com deficiência visual
• utilize cores para ajudar a formatação, aumentar a
densidade de informação e sinalizar mudança de
estados
• conheça as expectativas dos usuários sobre cores
• utilize cores de forma consistente
SERG
Componentes Visuais Interativos (Widgets)
•
•
•
•
permitem ao usuário interagir
disponíveis em bibliotecas
podem ser agrupados
precisam ser associados à funcionalidade e aos
objetos da aplicação
• exemplos:
– scrollers
– menus (pull-down, popup)
– ícones
– cursores
– botões
– sliders
SERG
– texto
– quadros de...
– diálogo
– edição
– mensagens
– toolbars
– palettes
Janelas
• janelas primárias
– janelas de contextualização, com menus, barras de
ferramentas e de status
– represente nelas os objetos principais da aplicação
– limite o número de janelas simultâneas
– mantenha a aparência consistente
• janelas secundárias
– output de mensagens (quadros de mensagem)
– input de informações adicionais (quadros de diálogo,
formulários)
SERG
Menus — Tipos
• tipos de menus
– menus pull-down e pop-up
– seleção simples: radio buttons
– seleção múltipla: check boxes
– toolbars e palettes
SERG
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...)
– mudança de estado
• opções independentes (Estilo de fonte: Bold, Italic)
• opções interdependentes (Alinhamento:
Left,Right,Justified)
SERG
Menus na Web
• falta de padronização
• barra de menus e barra de navegação
– imagens / texto
– forma consistente
• página principal
• páginas secundárias
– posicionamento consistente
• topo da página
• parte de baixo da página
• frames horizontais ou verticais
SERG
Barras de Ferramenta e de Status
• barra de ferramentas (toolbar)
– inclua elementos de uso freqüente: evite incluir
controles que não estão disponíveis de outra forma
– forneça tooltips
– caso haja múltiplas toolbars, forneça ao usuário o
controle de visibilidade
– analise adequação de representações gráficas
• barra de status (status bar): mensagens diretas
sobre...
–
–
–
–
SERG
estado atual da aplicação
item de menu selecionado
estado do teclado
hora atual
Exercício – Barra de Ferramentas
• objetivo
– selecionar os elementos relevantes para a barra de
ferramentas da aplicação
• dicas
– verificar que elementos do menu...
• possuem uso freqüente
• possuem representação gráfica de fácil compreensão
• observação
– caso haja um elemento que não pertença ao menu,
certifique-se de que ele vai aparecer em algum quadro
de diálogo (ex: combo box para escolha do tipo ou
tamanho de fonte)
SERG
Botões de Comando
• utilize botões de comando para disparar ações ou
para indicar e alterar estados
• não deve haver interseção entre ações disparadas por botões
diferentes (vs. “OK”, “Salva e Fecha”)
• utilize descrições breves, consistentes e claramente distintas
(vs. “Fecha”, “Cancela”, “Volta”)
• mantenha o tamanho e posicionamento consistentes
• siga as convenções do ambiente operacional
SERG
Botões de Comando no Windows
• acionamento imediato e contextualizado
– em toolbar:
• executa ação associada
– em janela secundária:
• inicia uma transação dentro da janela
• aplica uma transação e fecha a janela
• tipos
•
•
•
•
SERG
dispara ação imediatamente
necessita de mais input (...)
expande uma janela (>>)
reflete um estado (pressionado / não, habilitado / não)
Botões de Opção (Radio) e Seleção (Check box)
• orientações gerais
– se o número de opções for muito grande, utilize lista ou tabela
– se o texto de um item for grande, alinhe pelo topo
– pode possuir teclas de atalho
• botões de opção (radio buttons)
– opções relacionadas e mutuamente exclusivas
– apenas uma opção pode estar selecionada
– pode apresentar um valor default
• botões de seleção (check boxes)
– opções independentes, que podem estar ligadas ou desligadas
– os estados ligado/desligado devem ser opostos
– pode possuir valor misto
SERG
Listas
•
•
•
•
•
•
•
•
•
seleção simples (~ radio buttons) ou múltipla (~ check boxes)
utilize para um grande número de opções
exiba entre três e oito opções
ordene as opções segundo algum critério
evite barras de rolamento horizontais
forneça um label para identificar a lista
forneça teclas de atalho para acesso rápido
considere permitir operações de drag-and-drop
seleção simples: pode utilizar combo box para poupar espaço
SERG
Outros Widgets para Entrada de dados
• forneça um rótulo (label) para identificar o elemento
• forneça teclas de atalho para acesso rápido
• valide a entrada de dados imediatamente, se
possível
• caixas de texto (text boxes)
– campo textual livre
• spins
– faixa limitada de valores seqüenciais discretos
• sliders
– valores contínuos, como volume sonoro
SERG
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 vocabulário simples e claro
• relacione a mensagem à tarefa do usuário
• nas mensagens de erro, apresente:
– descrição do erro
– causa do erro
– possível solução
SERG
Quadros de Diálogo
• objetivo: entrada de dados
• termos utilizados
– título significativo, estilo consistente
– terminologia, fontes, capitalização e justificação consistentes
• organização
– seqüência topo-esquerda a baixo-direita
– agrupamento e ênfase
– layouts consistentes (proporções, margens, grid, espaços em
branco, linhas, quadros)
– indicação de itens habilitados e desabilitados
– valores default
• botões padronizados (OK, Cancela)
• prevenção de erros
SERG
Quadros de Diálogo e Janelas — Erros Comuns
• desconsiderar o padrão look and feel do ambiente
operacional
• proporções incomuns
• estrutura excessiva: muitos quadros aninhados, um
quadro para cada controle, muitas linhas divisórias
• tradução literal de metáforas, detalhes estéticos
excessivos
• pouco ou muito contraste entre áreas e elementos
• tensão espacial: informação demais ou de menos
• layouts arbitrários: controles de tamanho diferente,
alinhamento e posicionamento arbitrários, agrupamento
inexistente ou inadequado
SERG
Preenchimento de Formulários
•
•
•
•
•
siga orientações gerais para quadros de diálogo
utilize widgets adequados para o tipo de dado
forneça movimento de cursor conveniente
marque claramente os campos opcionais e obrigatórios
sinalize o término do preenchimento (ex: habilitando botão
de confirmação)
• instruções e mensagens
– instruções claras e breves (evite pronomes e referências)
– mensagens explicativas (barra de status ou quadros de
mensagem)
• tratamento de erros
– correção de erros para caracteres individuais ou campos
inteiros
– prevenção de erros
– mensagens de erro para valores inaceitáveis
SERG
Formulários — Erros Comuns
• uso inadequado do formato de formulário vs. planilha
• apresentação de informações internas ao sistema e
irrelevantes para o usuário
• instruções excessivas, com texto redundante
• instruções para o preenchimento dos campos em
locais privilegiados (vs. barra de status)
• excesso de quadros de mensagens que interferem
na tarefa do usuário
SERG
Mensagens de Erro
• sempre que possível, o sistema não deve
permitir que ocorram erros
• causas de erros:
– falta de conhecimento, noções incorretas
– lapsos (slips)
SERG
Mensagens de Erro – Como Redigir
• o que houve, por que aconteceu, como contornar ou
resolver
• especificidade
– DADO INVÁLIDO vs. Digite um valor numérico de 1 a 10.
• formato físico apropriado
– CAIXA ALTA PARA ERROS DE POUCA IMPORTÂNCIA
• desenvolvimento de mensagens eficazes
– ERRO Xbc345! vs. Data inválida: o formato correto é dd/mm/aaaa.
• orientação construtiva (indicação de como resolver o
problema)
– COMANDO INVÁLIDO vs. Verifique a sintaxe do comando.
SERG
Exercício – Mensagens de Erro
• Analisar as mensagens de erro do TaskPlus e
identificar:
– Se podiam ter sido evitadas pelo sistema
– Se estão bem explicadas, e em caso negativo alterá-las
para que dêem a informação relevante, necessária e útil
para o usuário
SERG
Sistemas de Help Tradicionais: informações contextuais
Tópicos
SERG
Sistemas de Help Tradicionais: aprofundamentos
Tópicos relacionados
SERG
Layering como possibilidade de detalhamento contextual
layering
Notas
Dicas
diretos
Tópicos Relacionados
Como?
Ver detalhes
âncoras
via navegação
contexto da função x contexto da tarefa
SERG
Contexto: help na visão da Engenharia Semiótica
Interface
D
Help
D
D
SERG
Proposta:
José e João controlando alterações no Word® ...
Como faço isto?
E agora?
Epa! E agora?
um
texto,
selecione a opção Controlar
ExistePara
outrarevisar
maneira
de
fazer
isto?
Como
faço
isto?
alterações,
no menu
Ferramentas.
De quem isto depende?
E agora?
Como faço isto?
Não consigo fazer isto.
Epa! Para controlar alterações, selecione a opção Controlar
Como
isto?
alterações,
no faço
menu
Ferramentas. Se você deseja
O que aconteceu?
Existe outra maneira de fazer isto?
ativar/desativar
o modo de revisão, selecione o sub-item
E
agora?
O que é isto?
Realçar
alterações…. Se você quiser aceitar ou rejeitar
De quem
isto depende?
Epa!
cada uma
das revisões, selecione Aceitar ou rejeitar
Onde está?
Não consigo fazer isto.
alterações….
fim,
se você
quiser
comparar dois
ExistePor
outra
maneira
de fazer
isto?
Onde eu estava?
documentos, selecione Comparar documentos….
O que aconteceu?
De quem isto depende?
Por que devo fazer isto?
O que é isto?
Não consigo fazer isto.
Por que não funciona?
Onde está?
O que aconteceu?
Quem é afetado por isso?
Onde eu estava?
O que é isto?
Help!
Por que devo fazer isto?
Onde está?
Por que não funciona?
Onde eu estava?
Quem é afetado por isso?
Por que devo fazer isto?
Help!
Por que não funciona?
Quem é afetado por isso?
SERG
Help!
Comentários gerais sobre...
• Aplicações customizáveis e extensíveis pelos
usuários
• Interfaces multi-usuário
• Interfaces específicas para ambientes
Internet / Intranet
SERG