42 Diretrizes para criação de Interfaces

1. Design de Interface - Diretrizes
tudo isso por uma interface?
vinicius.andrade@prof.una.br

2. "Se for necessário explicar o que é simples, é
porque aquilo foi mal desenhado/projetado"
Diretrizes e Princípios de Design

3. Planta baixa
(projeto de uma casa)
“Criação de uma solução alternativa”
Analogia - Desenho de Interface

4. Perspectiva da Casa em 3D
(Analisando a solução alternativa)
“Prototipação Navegável”
Analogia - Desenho de Interface

5. Construção da Casa Projetada
(Qualquer erro aqui, pode custar muito)
“Construção da versão de utilização real”
Analogia - Desenho de Interface

6. Fundamentos do Design
Gerar soluções alternativas
Mandamentos:
1º) Acesso: o sistema deve ser acessível sem help ou
documentação para o usuário que tem domínio da aplicação.
2º) Eficiência: o sistema não deve interferir ou impedir no uso
eficiente por usuários habilidosos e com experiência no sistema.
3º) Progressão: o sistema deve facilitar o avanço contínuo em
conhecimento e habilidade e acomodar mudanças progressivas a
medida que o usuário ganhar experiência com seu uso.

7. Fundamentos do Design
Gerar soluções alternativas
Mandamentos:
4º) Apoio: o sistema deve apoiar o trabalho real que os usuários
precisam executar, tornando-o mais fácil, simples, rápido ou mais
divertido ou tornando possíveis coisas novas.
5º) Contexto: o sistema deve ser adequado para as condições reais e
presentes de trabalho do contexto operacional onde é utilizado.
6º) Distribuição da Informação: “aliviar” a carga de memorização
dos usuários na interface.As informações disponibilizadas devem
permitir que ele interaja com o sistema sem a necessidade de
“decorar”

8. Fundamentos do Design
Gerar soluções alternativas
Mandamentos:
7º) “Psicologia” dos Materiais/Serventia (Affordance):
utilizar elementos na interface cujo affordance que o projetista
quis provocar no usuário seja efetivamente observada.
8º)Visibilidade: ao olhar para o sistema o usuário deve
intuitivamente saber como operá-lo a cada estado.
9º) Modelo Conceitual (Modelo Mental): assegurar que o
usuário tenha um modelo conceitual consistente com o modelo
real utilizado no sistema

9. Fundamentos do Design
Gerar soluções alternativas
Mandamentos:
10º) Mapeamentos: mapeamento correto para o usuário
entre os elementos da interface, suas ações e resultados.
11º) Atenção aos Requisitos
12º) Função de Força: mecanismos colocados em
artefatos que forçam a uma ordem de execução.
Exemplo: solicitar confirmação antes de apagar um
registro.

10. Fundamentos do Design
Escolher entre as Alternativas
Como?
Avaliação com usuários ou mesmo com os colegas
Análise de Custos
Análise dos Limites de qualidades
Aspectos de qualidades de uso que devem ser definidas
cedo no projeto e verificadas com frequência.

11. Fundamentos do Design
CONSTRUIRVERSÃO INTERATIVA:
Diretrizes e Princípios de Design?
"Se for necessário explicar o que é simples, é
porque aquilo foi mal desenhado/projetado"

12. Fundamentos do Design
CONSTRUIRVERSÃO INTERATIVA:
Motivação e Objetivos
Um dos pontos mais críticos no projeto de interface é a
satisfação e aceitação do usuário
Usuários precisam se sentir no controle da interação. Sem o
controle eles se sentem frustrados, intimidados e ameados pelos
computadores.

13. Fundamentos do Design
CONSTRUIRVERSÃO INTERATIVA:
Motivação e Objetivos
O Projeto de Interação (Diálogo) entre o usuário e o sistema
influência diretamente nesses aspectos
Sua qualidade está atrelada a forma como a informação e decisões
de interface + interação são repassadas ao usuário

14. Fundamentos do Design
CONSTRUIRVERSÃO INTERATIVA:
Motivação e Objetivos
Diretrizes do Projeto de Diálogo
Orientações (melhores práticas) que indicam como proceder
(e o que considerar) em projetos de interface.

15. Construir Versão Interativa
Princípios de Design
1º) Estrutura
2º) Simplicidade
3º) Princípio de
Visibilidade
4º) Feedback
5º)Tolerância 6º) Reuso
7º) Consistência

16. Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 1 - Feedback Intermediário: Prover indicadores
de progresso e reconhecimento de entradas para uma ação.
Exemplo: Mensagem de aviso de como a ação está
progredindo (Carregando…)

17. Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 2 - Feedback Final:
Termino com Sucesso.
Informar ao usuário sobre a
conclusão de uma ação
Usuários Inseridos para o inícios do
hangout…

18. Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 3 - Não deixar tela em Branco: Sempre
indique ao usuário como ele deve proceder…
Exemplo: Gmail solicita ao usuário que aguarde até que o
carregamento seja concluído.

19. Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 4 - Indicador de Modo: Informe o Modo
de operação do Sistema.
Exemplo: pode ser um modo admin, vendedor como um
perfil logado, papel desempenhado no momento.

20. Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 5 - Exibir tipo de
Transação: Exiba o nome da
Transação corrente,
equivalente a funcionalidade
Exemplo:A tela de cadastro
indica a transação “cadastre-se”

21. Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 6 - Exibir estado de Manutenção:
Informe ao usuário se o sistema está fora de operação.
Exemplo: Site em construção e principalmente, sua
previsão de retorno!

22. Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 7 - Explicitar Opções: Exibir as opções
disponíveis (habilitadas) em uma determinada ação e as
indisponíveis (desabilitadas).
Exemplo: enquanto o colar e novo slide estão habilitados, os
outros ícones só são habilitados quando selecionar um texto.

23. Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 8 - Requisitos de Memória: O usuário não
deve “decorar” como interagir com a interface.
Logo, exiba todas as informações necessárias.
Exemplo: Dicas e Instruções pra realizar uma ação

24. Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 9 - Sequência de Continuação: Indique ao
usuário como proceder em uma tarefa
(próximos passos)
Exemplo: Ao acessar oTwitter, o usuário é convidado a “compor” um novoTweet

25. Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 10 -Transações Múltiplas: Exibir os passos
mais frequentemente usados, primeiro.
Exemplo: Google Chrome exibe os sites acessados mais frequentes.

26. Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 11 - EfeitosVisíveis: Os resultados das
ações devem estar sempre visíveis.
Exemplo: Se aplicar uma cor ou formatação no MSWord.

27. Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 12 - Acesso a Configurações: Permita que o
usuário configure os parâmetros para executar uma ação.
Exemplo: o Google permite realizar buscas avançadas.

28. Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 13 - Ações reversíveis: Prevê a possibilidade
desfazer uma ação (Ctrl + Z)
Diretriz 14 -Menu Principal: Deve estar facilmente
acessível (visível de qualquer ponto da interação)

29. Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 15 - Caminhos Múltiplos: Ofereça vários
caminhos para que o usuário requisite uma mesma ação
Exemplo:A Google oferece pelo menos dois caminhos para acessar a
funcionalidade de “Agenda”.

30. Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 16 - Empilhamento de entrada: Permitir entradas
múltiplas (opções listadas em check-box)
Diretriz 17 -Texto dos Menus: Devem ser claros e indicativos
em relação ao conteúdo que será acessado a partir do Menu (e.g.,
Menu para acessar “Agenda”, se chama Agenda)
Repositórios de Email
que permitem múltipla
seleção para realizar
ações como: excluir,
marcar como lido,
mover..etc...

31. Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 18 -Títulos Consistentes: Utilizar o mesmo título do menu
(ou similar) para a tela correspondente (A tela acessada a partir do Menu
“Agenda”, possui como titulo a palavra “Agenda”)
Diretriz 19 -Verificar Ordem do Menu: Aplicar algum método de
ordenação nas opções do menu (ordem alfabética; ordem de elementos
relacionados)
No menu de Parágrafo, as opções de alinhamento obedecem uma ordem de elementos relacionados:
Esquerda, Centro e Direita

32. Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 20 - Opções Inativas de Menu: Habilite no menu, apenas as
ações que podem ser executadas durante a ação corrente do usuário (só
habilite o botão salvar, quando os campos obrigatórios estiverem preenchidos).
Diretriz 21 - Menus Suaves: Ao invés de criar sempre um menu com
elementos textuais, alterne (mas mantenha a consistência) com opções
que fazem uso de elementos gráficos.
OSX usa elementos gráficos para representar suas opções de menu, mantendo um texto simples.

33. Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 22 – Botões: Utilize botões para indicar ações.
Diretriz 23 – Check-box: Utilize quando mais de uma entrada for
permitida (entrada cujos valores são fixos)
Ex: Selecione seus esportes favoritos (disponibilize as opções com
check-box)
Diretriz 24 – Caixa de Escolha (Radio-Button): Utilize quando
apenas uma opção puder ser selecionar (e.g., Informe seu gênero)

34. Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 25 - Dispositivos de Controle deVisualização:
Permita que o usuário configure os parâmetros para executar uma
ação.
Exemplo: Google maps dispõe de recurso de Zoom para controle de visualização.

35. Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 26 - Controles Combinados: Utilize múltiplos controles
em uma mesma interface, porém mantendo a consistência.
Exemplo: pode selecionar os e-mails e encaminhá-los, a barra de rolagem também
ajuda na seleção de outros tantos e-mails na mesma tela.

36. Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 27 – Convenções de Controle: Embora seja aconselhável
utilizar múltiplos controles, é preciso estabelecer uma consistência
para esse uso. Uma forma é a diferenciação de ações por controle
Exemplo: Sempre que houver múltiplas seleções de entrada, utilize
check-box para cada possível valor (e apenas ele para essa ação) ou
Sempre que houver uma ação, represente com um botão

37. Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 28 – Reconhecer erros de grafia: Exiba uma
mensagem de notificação/erro quando o usuário digitar alguma
informação de forma incorreta (digitação do ano com 2 dígitos,
quando a entrada solicita 4 dígitos)
Diretriz 29 – Evite o uso de Comandos Similares: Não utilize
comandos similares para que o usuário não se confunda durante a
interação (evitar de utilizar os termos “Salvar” e “Registrar” na mesma
interface)
Diretriz 30 – ComandosTruncados: O sistema deve
reconhecer o comando a partir das primeiras letras (auto-complete)

38. Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 31 – Regras de Abreviação Consistentes: Utilize
regras de abreviações consistentes para os comandos
Exemplo: Abreviar os comandos eliminando as vogais
Comando Delete = DLT
Exemplo: Abreviar os comandos com as 3 primeiras letras
Comando Delete = DEL
Diretriz 32 – Comandos Irreversíveis: Antes de concluir
uma ação “irreversível”, notifique e confirme com o usuário
sua intensão (Você realmente deseja excluir esse item)

39. Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 33 - Localização Consistente para Entradas de
Comandos: Todas as interfaces que oferecem entrada de comando devem
estar estruturadas de forma similar (todo formulário que exigir nome, cpf,
etc... Deveria ter seus campos disponibilizados de forma similar)
Exemplo: Independente do item acessado, a entrada para “busca de informação” nas
preferências do OSX permanece na mesma localização

40. Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 34 e 35 – Consistência e Sintaxe dos Comandos:
Verificar a sintaxe e consistência entre os comandos
Exemplo: Utilize “Inserir Texto” e não Texto Inserir
Diretriz 36 – Comandos Hierárquicos: Organizar menus e
comandos de forma hierárquica (o “copiar” deve estar posicionado
antes do “colar”)
Diretriz 37 – Comandos Congruentes (Opostos):
Estabeleça uma certa relação de pares entre os comandos
(“copiar e colar”;“abrir e fechar”; etc...)

41. Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 38 – Comandos Distintos: Utilize palavras
especificas para representar comandos. Cada palavra
deve representar(diferenciar) cada ação de opções
alternativas
Bom exemplo: Inserir, Deletar,Adicionar
Mau exemplo: Salvar e Registrar
Diretriz 39 – Menus de Comando: Caso a interface
faça uso de menu de comandos (“Digite 1 para X; Digite 2
paraY...), crie comandos consistentes e fáceis de lembrar

42. Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 40 – Macro de Comandos: Permita que
usuários avançados criem Macros de Comandos (criar
macro no Excel)
Diretriz 41 – Help de Comandos: Disponibilize um
sistema de ajuda para que o usuário saiba como utilizar
os comandos e interagir através da interface
Diretriz 42 – Pontuação dos Comandos: Evite
utilizar caracteres especiais nos comandos da interface

43. Consistência
Feedback
Facilidade de Uso
Facilidade de Aprendizado
Flexibilidade
Produtividade do Usuário
Retenção do Aprendizado com o uso intermitente
Prevenção de Erros
Satisfação de uso
Resguarde as seguintes propriedades

44. "Se for necessário explicar o que é simples, é
porque aquilo foi mal desenhado/projetado"
Lembre-se

45. Chamada…