Upload
helio-sassen-paz
View
548
Download
2
Embed Size (px)
DESCRIPTION
Elementos-chave do design de interfaces
Citation preview
DAVID K. EVERYEngenheiro de Software da CA (1964 - )
MacKido (1999) e iGeek* (2002)
01INTERFACES 1 • turma 2010, trimestre 2010/2 – 15/06/2010
Aula 05: ELEMENTOS-CHAVE DAS INTERFACES
ELEMENTOS-CHAVE DAS INTERFACES
• Previsibilidade
• Informação
• Simplicidade
02
Aula 05: ELEMENTOS-CHAVE DAS INTERFACES
INTERFACES 1 • turma 2010, trimestre 2010/2 – 15/06/2010
PREVISIBILIDADE
03
Aula 05: ELEMENTOS-CHAVE DAS INTERFACES
INTERFACES 1 • turma 2010, trimestre 2010/2 – 15/06/2010
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.
04INTERFACES 1 • turma 2010, trimestre 2010/2 – 15/06/2010
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.
05INTERFACES 1 • turma 2010, trimestre 2010/2 – 15/06/2010
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.
06INTERFACES 1 • turma 2010, trimestre 2010/2 – 15/06/2010
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…
07INTERFACES 1 • turma 2010, trimestre 2010/2 – 15/06/2010
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.
08INTERFACES 1 • turma 2010, trimestre 2010/2 – 15/06/2010
Aula 05: ELEMENTOS-CHAVE DAS INTERFACES
INFORMAÇÃO
09
Aula 05: ELEMENTOS-CHAVE DAS INTERFACES
INTERFACES 1 • turma 2010, trimestre 2010/2 – 15/06/2010
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)
10INTERFACES 1 • turma 2010, trimestre 2010/2 – 15/06/2010
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
11INTERFACES 1 • turma 2010, trimestre 2010/2 – 15/06/2010
Aula 05: ELEMENTOS-CHAVE DAS INTERFACES
INFORMAÇÃO
• Informações inúteis;
• Superabundância de informações;
• Desordem.
12INTERFACES 1 • turma 2010, trimestre 2010/2 – 15/06/2010
Aula 05: ELEMENTOS-CHAVE DAS INTERFACES
INFORMAÇÃO
• Informações inúteis;
• Superabundância de informações;
• Desordem.
13INTERFACES 1 • turma 2010, trimestre 2010/2 – 15/06/2010
Aula 05: ELEMENTOS-CHAVE DAS INTERFACES
DEFINIR PRIORIDADES
14
Aula 05: ELEMENTOS-CHAVE DAS INTERFACES
INTERFACES 1 • turma 2010, trimestre 2010/2 – 15/06/2010
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;
15INTERFACES 1 • turma 2010, trimestre 2010/2 – 15/06/2010
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.)
16INTERFACES 1 • turma 2010, trimestre 2010/2 – 15/06/2010
Aula 05: ELEMENTOS-CHAVE DAS INTERFACES
DEFINIR PRIORIDADES
• Hierarquia
• Ordem lógica
17INTERFACES 1 • turma 2010, trimestre 2010/2 – 15/06/2010
Aula 05: ELEMENTOS-CHAVE DAS INTERFACES
DEFINIR PRIORIDADES
• Hierarquia
• Ordem lógica
18INTERFACES 1 • turma 2010, trimestre 2010/2 – 15/06/2010
PREVISIBILIDADE
INFORMAÇÃO
Aula 05: ELEMENTOS-CHAVE DAS INTERFACES
SIMPLICIDADE
19
Aula 05: ELEMENTOS-CHAVE DAS INTERFACES
INTERFACES 1 • turma 2010, trimestre 2010/2 – 15/06/2010
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
20INTERFACES 1 • turma 2010, trimestre 2010/2 – 15/06/2010
Aula 05: ELEMENTOS-CHAVE DAS INTERFACES
SIMPLICIDADE
• Evitar surpresas
• Evitar ações ocultas ou escondidas
21INTERFACES 1 • turma 2010, trimestre 2010/2 – 15/06/2010
Aula 05: ELEMENTOS-CHAVE DAS INTERFACES
SIMPLICIDADE
• Evitar surpresas
• Evitar ações ocultas ou escondidas
22INTERFACES 1 • turma 2010, trimestre 2010/2 – 15/06/2010
INFORMAÇÃO
Aula 05: ELEMENTOS-CHAVE DAS INTERFACES
ATÉ A PRÓXIMA!prof. @heliopaz
Aula 02: HISTÓRIA DOS SISTEMAS HIPERTEXTUAIS
HIPERTEXTO • turma 2009, trimestre 2010/1 – 12/03/2010 23