INF 043 - Comunicac

1
INF 043 - Comunicacão Homem-ComputadorParte 8
Prof. Roberto Cabral de Mello Borges
Instituto de Informática UFRGS 2007
2
Projeto de Telas

• Características Humanas Relevantes no projeto de
  uma tela
• Percepção
• Memória
• Aprendizado
• Habilidade
• Diferenças Individuais

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

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

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

6
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

7
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
8
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

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

10
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
• Relações físicas coerentes

SEXO FEMININO RELAÇÃO FILHA
SEXO FEMININO RELAÇÃO FILHA
SEXO FEMININO RELAÇÃO FILHA
SEXO FEMININO RELAÇÃO FILHA
11
Projeto de telas

• Para campos únicos, colocar o título à esquerda
• Para campos sob o mesmo título, coloque-os acima
  dos dados

PRODUTO 12764
PRODUTO 12764
PRODUTOS 12764 15698 62490 35463
PRODUTOS 12764 15698 62490 35463
12
Projeto de telas

• Separar os títulos dos campos com pelo menos um
  espaço

CIDADEP.ALEGRE
CIDADE P.ALEGRE
13
CABEÇALHOS de TELAS e RELATÓRIOS

• Evite cabeçalhos longos (muitas linhas)
• CONTRA-
• EXEMPLO
• VERSÃO
• MELHORADA

MINISTÉRIO DA EDUCAÇÃO E CULTURA 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
UFRGS - DEPARTAMENTO DE INFORMÁTICA
APLICADA Sistema de Docentes de Nível Superior
Relatório de Pesquisas - Nov/95
14
Relatórios

• Relatórios devem ter as linhas detalhe, com seus
  campos impressos em ordem hierárquica de quebra
  de classificação.
• Exemplo

LOJA FILIAL SETOR VENDAS RENNER P.Ale
gre Vestuário 5.143 Brinquedos 1.768 Móv
eis 124 S.Paulo Móveis
7.639 Video 850 Colombo P.Alegre Eletrôni
cos 346 Video 108
15
Relatórios

• Exemplo

Data Nascim. NOME Setor 12/5/45 Carlos
Alberto Veiga 5 23/1/49 Márcia da
Silva 8 4/12/50 Angela Vieira 5 11/3/54 Marc
o Aurélio Cardona 4 3/11/54 Eduardo
Morais 3 29/11/54 Helenara Mandelli 4 9/9/66
Aparício Medeiros 2 21/6/72 Carlos da S.
Júnior 5
16
Relatórios

• Exemplo (melhorado)

Data Nascim. NOME Setor
12/05/45 Carlos Alberto Veiga 5 23/01/49 Márcia
da Silva 8 04/12/50 Angela Vieira 5
11/03/54 Marco Aurélio Cardona 4
03/11/54 Eduardo Morais 3 29/11/54 Helenara
Mandelli 4 09/09/66 Aparício Medeiros 2
21/06/72 Carlos da Silva Jr 5
17
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
18
Relatórios

• Contra exemplo 2
• (impressão em colunas)

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
19
Relatórios

• Exemplo com impressão à Italiana

Adão da Silva Gina Marques Paulo Lopes Arno
Malta Hélio Alves Ricardo Mars Bruno Só
João Clavius Rogério Pietro Carla Nunes Karen
Bins Rui Sartori Carlos Sodré Luiz Mansur
Sandra Noel Dino Matos Marta Zeiss Talita
Mondini Fábio de Deus Nei Leão
20
Diálogos

• Aspectos Físicos e Psicológicos

• Sensível ao cansaço
• Impaciente
• Dispersivo
• Improvisação em situações de exceção

• Incansável
• Paciencia ilimitada
• Atenção aparetentemente constante
• Incapaz de reagir diferentemente do que foi
  programado

Homem
Computador
21
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

22
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
23
Mensagens

• As palavras devem ser
• curtas, significativas, comuns e completas
• em linguagem familiar
• interpretáveis de somente uma maneira
• não possuidoras de
• Contrações
• Siglas
• abreviações

TRAFO
TRAnsFOrmador
AU LM
Agência Urbana ? LM ????
Win Ap c/Dep
Winchester/Windows Apto c/Dependência
Empreg/Depósito.
Winchester Apto c/Dependência Empreg.
24
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.

25
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

26
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!

27
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 acusaano 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 acusamê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

28
Exemplo de menu e diálogo inadequado
Utilitários Detecta virus Limpeza Backup Reindexaç
ão Restore
Limpeza Você tem certeza que efetivamente quer
efetuar a limpeza dos arquivos?
Limpeza
OK. Sistema limpo. Todos os arquivos de dados do
sistema foram removidos!
29
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

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

31
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

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

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

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