O documento discute três elementos-chave de interfaces: previsibilidade, informação e simplicidade. Previsibilidade significa definir uma metáfora facilmente compreensível e mantê-la consistente. Informação refere-se a fornecer a quantidade certa de informação relevante de forma eficiente e não confusa. Simplicidade significa fazer as ações do usuário simples e evitar surpresas.

1. Aula 05: ELEMENTOS-CHAVE DAS INTERFACES
DAVID K. EVERY
Engenheiro de Software da CA (1964 - )
MacKido (1999) e iGeek* (2002)
INTERFACES 1 • turma 2010, trimestre 2010/2 – 15/06/2010 01

2. Aula 05: ELEMENTOS-CHAVE DAS INTERFACES
ELEMENTOS-CHAVE
DAS INTERFACES
• Previsibilidade
• Informação
• Simplicidade
INTERFACES 1 • turma 2010, trimestre 2010/2 – 15/06/2010 02

3. Aula 05: ELEMENTOS-CHAVE DAS INTERFACES
PREVISIBILIDADE
INTERFACES 1 • turma 2010, trimestre 2010/2 – 15/06/2010 03

4. Aula 05: ELEMENTOS-CHAVE DAS INTERFACES
PREVISIBILIDADE
• Definição de uma metáfora facilmente compreensível
em função da cultura do usuário em questão;
• Manter o uso dessa metáfora consistente a todo custo.
INTERFACES 1 • turma 2010, trimestre 2010/2 – 15/06/2010 04

5. Aula 05: ELEMENTOS-CHAVE DAS INTERFACES
PREVISIBILIDADE
• A metáfora proporciona ao usuário alguma relação entre:
• O programa e aquilo que o usuário espera que o
programa execute.
• O usuário deverá poder utilizar a metáfora virtual
do objeto de maneira similar à que utiliza
o objeto real.
INTERFACES 1 • turma 2010, trimestre 2010/2 – 15/06/2010 05

6. Aula 05: ELEMENTOS-CHAVE DAS INTERFACES
PREVISIBILIDADE
• Elimina tempo necessário ao treinamento do uso da interface;
• Permite ao usuário fazer associações e queimar etapas
em sua auto-aprendizagem.
INTERFACES 1 • turma 2010, trimestre 2010/2 – 15/06/2010 06

7. Aula 05: ELEMENTOS-CHAVE DAS INTERFACES
PREVISIBILIDADE
• Em que parte do objeto/texto e como ele se comporta quando
passamos o mouse sobre ele / o clicamos / o arrastamos / o
soltamos / soltamos sobre ele…?
• Tipo de traço/estilo (ilustração, imagem) + posição padrão
(default, da configuração original) de botões / janelas / bordas /
campos de texto / menus / atalhos de teclado…
INTERFACES 1 • turma 2010, trimestre 2010/2 – 15/06/2010 07

8. Aula 05: ELEMENTOS-CHAVE DAS INTERFACES
PREVISIBILIDADE
• PARA AÇÕES IDÊNTICAS E FREQUENTES,
O COMPORTAMENTO E A APARÊNCIA
DA INTERFACE PRECISAM SER SEMPRE IGUAIS.
INTERFACES 1 • turma 2010, trimestre 2010/2 – 15/06/2010 08

9. Aula 05: ELEMENTOS-CHAVE DAS INTERFACES
INFORMAÇÃO
INTERFACES 1 • turma 2010, trimestre 2010/2 – 15/06/2010 09

10. Aula 05: ELEMENTOS-CHAVE DAS INTERFACES
INFORMAÇÃO
• Avaliar a quantidade de informação disponibilizada para o usuário
• Manter a previsibilidade no layout e na interatividade
• Harmonizar ao máximo os espaços clicáveis, informativos e vazios
por toda a área útil da tela (evitar perda de tempo, seleções e
cliques no momento errado e no lugar errado)
INTERFACES 1 • turma 2010, trimestre 2010/2 – 15/06/2010 10

11. Aula 05: ELEMENTOS-CHAVE DAS INTERFACES
INFORMAÇÃO
• Eficiência e relevância
da apresentação dos dados mais importantes.
• Evitar confusão e complexidade
INTERFACES 1 • turma 2010, trimestre 2010/2 – 15/06/2010 11

12. Aula 05: ELEMENTOS-CHAVE DAS INTERFACES
INFORMAÇÃO
• Informações inúteis;
• Superabundância de informações;
• Desordem.
INTERFACES 1 • turma 2010, trimestre 2010/2 – 15/06/2010 12

13. Aula 05: ELEMENTOS-CHAVE DAS INTERFACES
INFORMAÇÃO
• Informações inúteis;
• Superabundância de informações;
• Desordem.
INTERFACES 1 • turma 2010, trimestre 2010/2 – 15/06/2010 13

14. Aula 05: ELEMENTOS-CHAVE DAS INTERFACES
DEFINIR PRIORIDADES
INTERFACES 1 • turma 2010, trimestre 2010/2 – 15/06/2010 14

15. Aula 05: ELEMENTOS-CHAVE DAS INTERFACES
DEFINIR PRIORIDADES
• Ordem de importância para as informações a serem exibidas
• Sentido da leitura ocidental:
da esquerda para a direita, de cima para baixo;
• Avisos e ações prioritárias:
janelas pop-up e caixas de diálogo no centro da tela;
• Vários botões em uma mesma janela:
destacar graficamente botão com a ação a que se pretende
priorizar e posicioná-lo embaixo do texto à direita;
INTERFACES 1 • turma 2010, trimestre 2010/2 – 15/06/2010 15

16. Aula 05: ELEMENTOS-CHAVE DAS INTERFACES
DEFINIR PRIORIDADES
• Facilitar o acesso às ações que precisam
ser repetidas mais frequentemente
• Definir como prioridade mínima ações de uso menos frequente
• Aumentar a distância, reduzir o tamanho e a força visual de
elementos cujas ações sejam irreversíveis ou alterem a natureza
do trabalho (salvar como, deletar, descadastrar, anular, fechar, etc.)
INTERFACES 1 • turma 2010, trimestre 2010/2 – 15/06/2010 16

17. Aula 05: ELEMENTOS-CHAVE DAS INTERFACES
DEFINIR PRIORIDADES
• Hierarquia
• Ordem lógica
INTERFACES 1 • turma 2010, trimestre 2010/2 – 15/06/2010 17

18. Aula 05: ELEMENTOS-CHAVE DAS INTERFACES
DEFINIR PRIORIDADES
• Hierarquia PREVISIBILIDADE
• Ordem lógica INFORMAÇÃO
INTERFACES 1 • turma 2010, trimestre 2010/2 – 15/06/2010 18

19. Aula 05: ELEMENTOS-CHAVE DAS INTERFACES
SIMPLICIDADE
INTERFACES 1 • turma 2010, trimestre 2010/2 – 15/06/2010 19

20. Aula 05: ELEMENTOS-CHAVE DAS INTERFACES
SIMPLICIDADE
• Nunca fazer o usuário ter que realizar mais de uma etapa
para poder executar uma única ação.
• Nunca perguntar ao usuário coisas
com as quais ele não deve ter que se preocupar
• Evitar a adição de funções sobre as quais
o usuário não lembrará facilmente como executá-las
INTERFACES 1 • turma 2010, trimestre 2010/2 – 15/06/2010 20

21. Aula 05: ELEMENTOS-CHAVE DAS INTERFACES
SIMPLICIDADE
• Evitar surpresas
• Evitar ações ocultas ou escondidas
INTERFACES 1 • turma 2010, trimestre 2010/2 – 15/06/2010 21

22. Aula 05: ELEMENTOS-CHAVE DAS INTERFACES
SIMPLICIDADE
• Evitar surpresas
INFORMAÇÃO
• Evitar ações ocultas ou escondidas
INTERFACES 1 • turma 2010, trimestre 2010/2 – 15/06/2010 22

23. Aula 02: HISTÓRIA DOS SISTEMAS HIPERTEXTUAIS
ATÉ A PRÓXIMA!
prof. @heliopaz
heliopaz@me.com
HIPERTEXTO • turma 2009, trimestre 2010/1 – 12/03/2010 23