INF 043 - Comunicacão
Homem-Computador
Parte 8
Prof. Roberto Cabral de Mello Borges
Instituto de Informática
UFRGS
2007
Projeto de Telas
• Características Humanas
Relevantes no projeto de uma tela:
–Percepção
–Memória
–Aprendizado
–Habilidade
–Diferenças Individuais
Projeto de Telas
• Que informação colocar numa tela?
–Fornecer somente informações
essenciais à tomada de decisão ou
execução de uma ação
–Fornecer todos os dados relacionados a
uma tarefa em uma única tela (se
possível). Não se deve ter que lembrar de
um dados da tela anterior.
Projeto de Telas
Características de uma boa tela
–Aparência limpa e ordenada;
–Indicação óbvia dos dados que estão sendo
mostrados e o que deve ser feito com eles;
–Informação esteja onde se espera que esteja;
–Indicação clara do que se relaciona com o que
(cabeçalhos, instruções, opções, etc);
–Vocabulário simples e explícito;
–Modo simples de encontrar o que está no sistema
e como obtê-lo;
–Indicação de quando uma ação poderia realizar
mudanças permanentes nos dados ou no sistema.
Projeto de Telas
• Como colocar informações na tela
– Apresentar a informação de forma utilizável
diretamente, sem pedir consultas a documentos,
manuais, etc;
– Usar técnicas de destaque de vídeo (negrito,
sublinhado, outra cor, etc) para chamar a atenção de
» ítens urgentes;
» diferentes componentes da tela
» Itens a serem manipulados
– Telas não têm pauta, logo, às vezes é preciso guiar o
olhar do usuário através de linhas, tracejados,
pontilhados ou outra técnica;
– A aparência e os procedimentos devem ser coerentes.
Exemplo de coerência
• Os 3 sinais de
transito ao lado
existem e
significam a
mesma coisa;
• Alguns estados e
municípios
adotam-nos
alternativamente;
Projeto de telas
• Sobre os textos:
– Para títulos de campos, rótulos e tarefas de pesquisa,
usar MAIÚSCULAS;
– Para textos, usar minúsculas, com letra inicial da
sentença em maiúsculo;
– Usar somente os caracteres alfabéticos padrão e
algarismos; Evitar símbolos especiais;
– Usar fontes não “serifados” (Arial) e em preto sobre
fundo claro;
Não serifado
Serifado
Projeto de telas
• usar palavras completas,sem abreviações ou contrações:
Fita K-7
Fita Cassette
X-Burger
Cheese Burger
• não empilhe palavras:
Quantidade
Quantidade Paga
Paga
• não "hifenize" as palavras:
DATA-DE-NASCIMENTO ou Data_de_Nascimento
Data de Nascimento
Projeto de telas
• Textos e Ilustrações:
–Usar sentenças curtas, compostas de palavras
familiares.
–Colocar ponto ao final de cada sentença.
–Não colocar mais do que 40 ou 60 caracteres
por linha. Duas colunas de 30 a 35 caracteres,
separados por 5 espaços, também é aceitável.
–Separar os parágrafos por uma linha em
branco.
–Usar o desenho de linhas para ilustrar ou
suplementar o texto, sempre que possível.
Projeto de telas
• Títulos de Campos / Campos de Dados:
– Identificar os campos com títulos.
– Escolher nomes significativos e distintos para os títulos,
que possam ser facilmente distingüidos de outros.
Diferenças mínimas causam confusão.
– Diferenciar os títulos dos dados usando:
» Caracteres de contraste, com diferente intensidade e dois pontos,
ou diferentes cores:
SEXO FEMININO
RELAÇÃO FILHA
SEXO: FEMININO
RELAÇÃO: FILHA
» Relações físicas coerentes:
SEXO
FEMININO
RELAÇÃO FILHA
SEXO: FEMININO
RELAÇÃO: FILHA
Projeto de telas
• Para campos únicos, colocar o título à esquerda:
PRODUTO
12764
PRODUTO: 12764
• Para campos sob o mesmo título, coloque-os
acima dos dados:
PRODUTOS 12764
15698
62490
35463
PRODUTOS
12764
15698
62490
35463
Projeto de telas
• Separar os títulos dos campos com pelo menos
um espaço:
CIDADE:P.ALEGRE
CIDADE: P.ALEGRE
CABEÇALHOS de TELAS e
RELATÓRIOS
• Evite cabeçalhos longos (muitas linhas)
CONTRA- MINISTÉRIO DA EDUCAÇÃO E CULTURA
EXEMPLO: UNIVERSIDADE FEDERAL DO RIO GRANDE DO SUL
INSTITUTO DE INFORMÁTICA
DEPARTAMENTO DE INFORMÁTICA APLICADA
SISTEMA DNS-001 11/95 REL-PESQ-01.5
VERSÃO
MELHORADA:
UFRGS - DEPARTAMENTO DE INFORMÁTICA APLICADA
Sistema de Docentes de Nível Superior
Relatório de Pesquisas - Nov/95
Relatórios
• Relatórios devem ter as linhas detalhe, com seus
campos impressos em ordem hierárquica de
quebra de classificação.
Exemplo:
LOJA
RENNER
FILIAL
P.Alegre
S.Paulo
Colombo
P.Alegre
SETOR
Vestuário
Brinquedos
Móveis
Móveis
Video
Eletrônicos
Video
VENDAS
5.143
1.768
124
7.639
850
346
108
Relatórios
• Exemplo:
Data Nascim.
12/5/45
23/1/49
4/12/50
11/3/54
3/11/54
29/11/54
9/9/66
21/6/72
NOME
Carlos Alberto Veiga
Márcia da Silva
Angela Vieira
Marco Aurélio Cardona
Eduardo Morais
Helenara Mandelli
Aparício Medeiros
Carlos da S. Júnior
Setor
5
8
5
4
3
4
2
5
Relatórios
• Exemplo (melhorado)
Data Nascim.
12/05/45
23/01/49
04/12/50
11/03/54
03/11/54
29/11/54
09/09/66
21/06/72
NOME
Setor
Carlos Alberto Veiga
5
Márcia da Silva
8
Angela Vieira
5
Marco Aurélio Cardona 4
Eduardo Morais
3
Helenara Mandelli
4
Aparício Medeiros
2
Carlos da Silva Jr
5
Relatórios
• Relatórios com listas de nomes ou números,
devem vir classificados por nome ou número,
impressos à italiana:
Contra-exemplo 1: (impressão contínua)
Adão da Silva, Arno Malta, Bruno Só, Carla Nunes,
Carlos Sodré, Dino Matos, Fábio de Deus, Gina Marques,
Hélio Alves, João Clavius, Karen Bins, Luiz Mansur
Marta Zeiss, Nei Leão, Paulo Lopes, Ricardo Mars,
Rogério Pietro, Rui Sartori, Sandra Noel, Talita Mondini
Relatórios
• Contra exemplo 2:
(impressão em colunas)
Adão da Silva
Carla Nunes
Fábio de Deus
João Clavius
Marta Zeiss
Ricardo Mars
Sandra Noel
Arno Malta
Carlos Sodré
Gina Marques
Karen Bins
Nei Leão
Rogério Pietro
Talita Mondini
Bruno Só
Dino Matos
Hélio Alves
Luiz Mansur
Paulo Lopes
Rui Sartori
Relatórios
• Exemplo com impressão à Italiana
Adão da Silva
Arno Malta
Bruno Só
Carla Nunes
Carlos Sodré
Dino Matos
Fábio de Deus
Gina Marques
Hélio Alves
João Clavius
Karen Bins
Luiz Mansur
Marta Zeiss
Nei Leão
Paulo Lopes
Ricardo Mars
Rogério Pietro
Rui Sartori
Sandra Noel
Talita Mondini
Diálogos
• Aspectos Físicos e Psicológicos
Homem
•Sensível ao
cansaço
•Impaciente
•Dispersivo
•Improvisação
em situações
de exceção
Computador
•Incansável
•Paciencia ilimitada
•Atenção
aparetentemente
constante
•Incapaz de reagir
diferentemente do
que foi programado
Características de um bom
diálogo
• Fácil de aprender
• Fácil de usar
• Fácil de adaptar e modificar
• Capacidade de detectar erros
• Eficiente
• Consistente
• Tutorial
Etapas no projeto de diálogos
Projeto do estilo
do diálogo
Projeto do perfil
da transação
Projeto dos
formatos das
mensagens
Projeto de
manipulação de
erros
Projeto dos itens
de dados
Mensagens
As palavras devem ser:
–curtas, significativas, comuns e
completas
–em linguagem familiar
–interpretáveis de somente uma maneira
–não possuidoras de:
TRAnsFOrmador
TRAFO
»Contrações
»Siglas
AU
LM
»abreviações
Win
Ap c/Dep
Agência Urbana ?
LM ????
Winchester/Windows
Winchester
Apto
c/Dependência
Apto c/Dependência
Empreg.
Empreg/Depósito.
Mensagens
• As sentenças devem ser:
– breves, simples e claras
– utilizáveis direta e imediatamente
– afirmativas
– em voz ativa
– não autoritárias
– não ameaçadoras
– não punitivas
– não personificativas
– não favorecedoras
– na seqüência cronológica de eventos
– estruturadas para que o tópico principal esteja no início
– cuidadosas no uso de humor.
Gerenciamento do Erro
• Prevenção:
– Aceitar erros comuns de digitação
– Permitir revisão e edição da mensagem a ser enviada
– Fornecer um mecanismo comum de envio
– Alertar sobre alterações irreversíveis
• Constatação
– Detectar imediatamente todos os erros, identificando
visualmente o item errado
– Nunca faça o sistema “abortar”
• Correção:
– Fornecer uma mensagem de erro explícita, mostrando
como corrigir o erro, sugerindo formato de entrada
– solicitar somente o envio da informação errada
– Iniciar diálogo de explicação
Exemplo de tratamento errôneo do erro
• Entre com a data de hoje:
–o usuário digita: 29/03/92
–o sistema acusa: “data inválida”
–o usuário experimenta: 29-03-92
–o sistema acusa: “data inválida”
–o usuário tenta: 03/29/92
–o sistema acusa: “data inválida”
–o usuário pacientemente tenta: 29.03.92
–o sistema acusa: “data inválida”
–o usuário irritadamente tenta: 290392
–o sistema acusa: “data inválida”
–o usuário abandona o sistema!
Uma alternativa melhor para o diálogo
• Entre com a data de hoje (DD/MM/AAAA)
– O usuário entra: 29/03/92
– O sistema acusa:”ano deve ter 4 dígitos”
Entre com a data de hoje (formato DD/MM/AAAA)
– O usuário tenta: 29.03.92
– O sistema acusa: “use barras como separador”
Entre com a data de hoje (formato DD/MM/AAAA)
Exemplo: 27/05/1990
– O usuário experimenta: 03/29/92
– O sistema acusa:”mês deve estar entre 1 e 12”
Entre com a data de hoje (formato DD/MM/AAAA,
onde DD é o dia com 2 dígitos, MM é o mês com 2
dígitos e AAAA é o ano com 4 dígitos)
Exemplo: 27/05/1990
Exemplo de menu e diálogo
inadequado
Utilitários
Detecta virus
Limpeza
Limpeza
Backup
Reindexação
Restore
Limpeza:
Você tem certeza que
efetivamente quer
efetuar a limpeza dos
arquivos?
OK. Sistema limpo.
Todos os arquivos de
dados do sistema
foram removidos!
Oito Regras de Ouro para
Diálogos
1 - Busque Homogeneidade:
– regra mais violada;
– simples de evitar e reparar;
– seqüências de ações consistentes em situações
similares;
– terminologia idêntica em:
»
»
»
»
consultas
comandos
menus
helps
Oito Regras de Ouro para
Diálogos
2 - Permita Atalhos aos Usuários Freqüentes
– o aumento do uso deve diminuir o número de
intervenções e a freqüência de interações;
– torna-se interessante tentar diminuir o tempo de
resposta e aumentar a velocidade de display;
– tornam-se apreciadas:
»
»
»
»
»
abreviaturas
comandos embutidos
macros
teclas especiais
acesso aos comandos por conjunto de teclas e não
exclusivamente através de menus.
Oito Regras de Ouro para
Diálogos
3 - Projeto do diálogo em áreas estanques:
– ações organizadas com começo, meio e fim, de
preferência numa mesma tela;
– comunicacão de fim de sessão é desejável;
4 - Permita Informações de realimentação:
– para cada ação do operador, associar uma resposta do
sistema;
– as respostas devem variar com a ação;
» respostas freqüentes e secundárias devem ser respostas
modestas (curtas)
» respostas infreqüentes e principais têm respostas
substanciais
Oito Regras de Ouro para
Diálogos
5 - Ofereça manipulação simples de erros:
– dentro do possível, evite a possibilidade do usuário
cometer erros sérios;
– constatando o erro, ofereça mecanismos de
manipulação simples e compreensíveis;
– o usuário deve ser poupado de redigitar todo o
comando errado.
– para comandos errados, oferece-se instrução e
possibilidade de corrigí-los ou ignorá-los.
Oito Regras de Ouro para
Diálogos
6 - Permita fáceis reversões de ações:
– dentro do possível, as ações devem possuir reversão;
– mecanismo de reversão diminuem a ansiedade e a insegurança;
– reversão pode ser:
» ação simples
» conjunto de ações
» entrada de dados (data entry)
7 - Prover Pontos de controle Internos:
– operadores experientes gostam da sensação de domínio e controle
das respostas do sistema;
– supressão de ações de sistemas, seqüências tediosas de entrada de
dados, incapacidade ou dificuldade de obter informações e
incapacidade de produzir ações, causam ansiedade e insatisfação.
Oito Regras de Ouro para
Diálogos
8 - Reduza a utilização da memória rápida
–lembre que a memória rápida é limitada ( 7 +/- 2)
–Para tanto, prover:
» telas simples
» consolidação entre telas múltiplas
» tempo de treinamento suficiente para fixação de:
• códigos
• mnemônicos
• seqüências de ações
» permitir, onde apropriado, acesso à forma sintática de:
•
•
•
•
comandos
abreviaturas
códigos
siglas, etc.