Design de Interface - Diretrizes
tudo isso por uma interface?
vinicius.andrade@prof.una.br
"Se for necessário explicar o que é simples, é
porque aquilo foi mal desenhado/projetado"
Diretrizes e Princípios de Design
Planta baixa 

(projeto de uma casa)
“Criação de uma solução alternativa”
Analogia - Desenho de Interface
Perspectiva da Casa em 3D 

(Analisando a solução alternativa)
“Prototipação Navegável”
Analogia - Desenho de Interface
Construção da Casa Projetada 

(Qualquer erro aqui, pode custar muito)
“Construção da versão de utilização real”
Analogia ...
Fundamentos do Design
Gerar soluções alternativas

Mandamentos:
1º) Acesso: o sistema deve ser acessível sem help ou
docum...
Fundamentos do Design
Gerar soluções alternativas

Mandamentos:
4º) Apoio: o sistema deve apoiar o trabalho real que os us...
Fundamentos do Design
Gerar soluções alternativas

Mandamentos:
7º) “Psicologia” dos Materiais/Serventia (Affordance):
uti...
Fundamentos do Design
Gerar soluções alternativas

Mandamentos:
10º) Mapeamentos: mapeamento correto para o usuário
entre ...
Fundamentos do Design
Escolher entre as Alternativas

Como?
Avaliação com usuários ou mesmo com os colegas
Análise de Cust...
Fundamentos do Design
CONSTRUIRVERSÃO INTERATIVA:

Diretrizes e Princípios de Design?
"Se for necessário explicar o que é ...
Fundamentos do Design
CONSTRUIRVERSÃO INTERATIVA:

Motivação e Objetivos
Um dos pontos mais críticos no projeto de interfa...
Fundamentos do Design
CONSTRUIRVERSÃO INTERATIVA:

Motivação e Objetivos
O Projeto de Interação (Diálogo) entre o usuário ...
Fundamentos do Design
CONSTRUIRVERSÃO INTERATIVA:

Motivação e Objetivos
Diretrizes do Projeto de Diálogo
Orientações (mel...
Construir Versão Interativa
Princípios de Design
1º) Estrutura
2º) Simplicidade
3º) Princípio de
Visibilidade
4º) Feedback...
Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 1 - Feedback Intermediário: Prover indicadores
de p...
Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 2 - Feedback Final:
Termino com Sucesso.
Informar a...
Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 3 - Não deixar tela em Branco: Sempre
indique ao us...
Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 4 - Indicador de Modo: Informe o Modo
de operação d...
Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 5 - Exibir tipo de
Transação: Exiba o nome da
Trans...
Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 6 - Exibir estado de Manutenção:
Informe ao usuário...
Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 7 - Explicitar Opções: Exibir as opções
disponíveis...
Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 8 - Requisitos de Memória: O usuário não
deve “deco...
Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 9 - Sequência de Continuação: Indique ao
usuário co...
Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 10 -Transações Múltiplas: Exibir os passos
mais fre...
Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 11 - EfeitosVisíveis: Os resultados das
ações devem...
Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 12 - Acesso a Configurações: Permita que o
usuário ...
Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 13 - Ações reversíveis: Prevê a possibilidade
desfa...
Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 15 - Caminhos Múltiplos: Ofereça vários
caminhos pa...
Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 16 - Empilhamento de entrada: Permitir entradas
múl...
Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 18 -Títulos Consistentes: Utilizar o mesmo título d...
Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 20 - Opções Inativas de Menu: Habilite no menu, ape...
Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 22 – Botões: Utilize botões para indicar ações.
Dir...
Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 25 - Dispositivos de Controle deVisualização:
Permi...
Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 26 - Controles Combinados: Utilize múltiplos contro...
Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 27 – Convenções de Controle: Embora seja aconselháv...
Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 28 – Reconhecer erros de grafia: Exiba uma
mensagem...
Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 31 – Regras de Abreviação Consistentes: Utilize
reg...
Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 33 - Localização Consistente para Entradas de
Coman...
Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 34 e 35 – Consistência e Sintaxe dos Comandos:
Veri...
Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 38 – Comandos Distintos: Utilize palavras
especific...
Construir Versão Interativa
Diretrizes de Design - Quais são?
Diretriz 40 – Macro de Comandos: Permita que
usuários avança...
Consistência
Feedback
Facilidade de Uso
Facilidade de Aprendizado
Flexibilidade
Produtividade do Usuário
Retenção do Apren...
"Se for necessário explicar o que é simples, é
porque aquilo foi mal desenhado/projetado"
Lembre-se
Chamada…
Próximos SlideShares
Carregando em…5
×

Design de Interface - Diretrizes

404 visualizações

Publicada em

42 Diretrizes para criação de Interfaces

Publicada em: Design
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
404
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
14
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Design de Interface - Diretrizes

  1. 1. Design de Interface - Diretrizes tudo isso por uma interface? vinicius.andrade@prof.una.br
  2. 2. "Se for necessário explicar o que é simples, é porque aquilo foi mal desenhado/projetado" Diretrizes e Princípios de Design
  3. 3. Planta baixa 
 (projeto de uma casa) “Criação de uma solução alternativa” Analogia - Desenho de Interface
  4. 4. Perspectiva da Casa em 3D 
 (Analisando a solução alternativa) “Prototipação Navegável” Analogia - Desenho de Interface
  5. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 44. "Se for necessário explicar o que é simples, é porque aquilo foi mal desenhado/projetado" Lembre-se
  45. 45. Chamada…

×