O documento discute princípios e técnicas para projeto de interfaces de usuário, incluindo: (1) entender os usuários e seus processos de trabalho; (2) investigação no campo para descobrir como as pessoas realizam suas tarefas; (3) projeto de telas considerando características humanas e apresentação clara de informações.

1. Atividades do Processo de ER
1

2. Modelagem de Requisitos
2

3. Continuação de Requisitos
• Técnicas para extrair Requisitos:
– Entrevista
– Questionários
– Tempestade de idéias
– Prototipagem

4. UEFS/2013
Projeto de Interfaces

5. Interface
• O termo interface é aplicado normalmente àquilo que
interliga dois sistemas.
• A interface entre usuários e sistemas computacionais
diferencia-se das interfaces de máquinas convencionais
por exigir dos usuários um maior esforço cognitivo em
atividades de interpretação e expressão das informações
que o sistema processa [Norman, 1986].
• “a interface de usuário deve ser entendida como sendo a
parte de um sistema computacional com a qual uma
pessoa entra em contato física, perceptiva e
conceitualmente” [Moran, 1981].

6. Como projetar?
• 1 - Pergunte-se:
– Quem são os usuários?
– Quais os seus processos de trabalho?
• 2 - Descubra quem são os Especialistas de domínio
Conhecimento “generalizado”
• 3 - Faça uma Investigação em campo
– Fluxos de atividades, metas, gatilhos
– Organização do espaço físico
– Artefatos utilizados
– Padrões de comunicação para coordenar e sincronizar
trabalho
– Fatores restritivos (restrições culturais)

7. Projeto de Telas
• Características Humanas
–Percepção
–Memória
–Aprendizado
–Habilidade
–Diferenças Individuais

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

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

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

11. 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;
Como aplicar este conceito na interface do
sistema?

12. 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;

13. • Textos e Ilustrações:
–Usar sentenças curtas, compostas de
palavras familiares.
–Colocar ponto ao final de cada sentença.
–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

14. • Títulos de Campos / Campos de Dados:
– Identificar os campos com títulos.
– Escolher nomes significativos e distintos para os
títulos.
– 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

15. CABEÇALHOS de TELAS e RELATÓRIOS
• Evite cabeçalhos longos (muitas linhas)
• Relatórios devem ter as linhas detalhe, com
seus campos impressos em ordem hierárquica
de quebra de classificação.
• Relatórios com listas de nomes ou números,
devem vir classificados por nome ou número;

16. Caixas de 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

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

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

19. Mensagens
• As sentenças devem ser:
– breves, simples e claras
– utilizáveis direta e imediatamente
– afirmativas
– não ameaçadoras
– não punitivas
– na seqüência cronológica de eventos
– estruturadas para que o tópico principal esteja no
início
– cuidadosas no uso de humor.

20. Gerenciamento do Erro
• Prevenção:
– 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

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

22. 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
• acesso aos comandos por conjunto de teclas e não
exclusivamente através de menus.
Oito Regras de Ouro para
Diálogos

23. 3 - Projeto do diálogo:
– ações organizadas com começo, meio e fim, de
preferência numa mesma tela;
– comunicacão de fim de sessão é desejável;
Oito Regras de Ouro para
Diálogos

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

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

26. 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)
Oito Regras de Ouro para Diálogos

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

28. 8 - Reduza a utilização da memória rápida
–Para tanto, prover:
• telas simples
• consolidação entre telas múltiplas
• permitir, onde apropriado, acesso à forma sintática
de:
–comandos
–abreviaturas
–códigos
–siglas, etc.
Oito Regras de Ouro para Diálogos

29. Atividade em sala
• Faça um projeto de interface para o sistema
de gestão de OS.
• Lembre-se de utilizar bem sua criatividade.
• Ao final faça marcações na interface
indicando as 8 regras de ouro abordadas em
sala.