INF043 - Projeto de Telas e Diálogos e Relatórios

Prof. Roberto Cabral de Mello Borges

INF 043 - Comunicacão

Homem-Computador

Parte 8

Projeto de Telas

• Características Humanas

Relevantes no projeto de uma tela:

–Percepção

–Memória

–Aprendizado

–Habilidade

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

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;

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;

• usar palavras completas,sem abreviações ou contrações:

Fita K-7 Fita Cassette X-BurgerCheese Burger

• não empilhe palavras:

Quantidade Quantidade Paga Paga

• não "hifenize" as palavras:

DATA-DE-NASCIMENTO ou Data_de_Nascimento Data de Nascimento

• 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:

» Relações físicas coerentes:

Projeto de telas

• Para campos únicos, colocar o título à esquerda:

• Para campos sob o mesmo título, coloque-os

acima dos dados:

Projeto de telas

PRODUTO: 12764

PRODUTO

12764

PRODUTOS 12764

15698

62490

35463

PRODUTOS

12764

15698

62490

35463

• Separar os títulos dos campos com pelo menos

um espaço:

Projeto de telas

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ó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.Alegre Vestuário 5.143

Brinquedos 1.768 Móveis 124 S.Paulo Móveis 7.639

Video 850

Colombo P.Alegre Eletrônicos 346

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 Marco Aurélio Cardona 4

3/11/54 Eduardo Morais 3

29/11/54 Helenara Mandelli 4

9/9/66 Aparício Medeiros 2

• Exemplo (melhorado)

Relatórios

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

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,

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

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

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

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

»Contrações

»Siglas

»abreviações

TRAFO

Ap c/Dep Apto c/Dependência Empreg.Winchester Winchester/Windows

Apto c/Dependência Empreg/Depósito.

Mensagens

– 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”

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 de menu e diálogo

inadequado

Utilitários

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:

– simples de evitar e reparar;

– seqüências de ações consistentes em situações

similares;

– terminologia idêntica em:

» consultas » comandos » menus

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:

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.

Oito Regras de Ouro para

Diálogos