Design de Interface - Diretrizes

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”

Construção da Casa Projetada  
(Qualquer erro aqui, pode custar muito)
“Construção da versão de utilização real”

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.

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”

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

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.

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.

CONSTRUIRVERSÃO INTERATIVA: 
Diretrizes e Princípios de Design?

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.

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

Diretrizes do Projeto de Diálogo
Orientações (melhores práticas) que indicam como proceder
(e o que considerar) em projetos de interface.

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

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…)

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…

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.

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.

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”

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!

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.

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

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

Diretriz 10 -Transações Múltiplas: Exibir os passos
mais frequentemente usados, primeiro.
Exemplo: Google Chrome exibe os sites acessados mais frequentes.

Diretriz 11 - EfeitosVisíveis: Os resultados das
ações devem estar sempre visíveis.
Exemplo: Se aplicar uma cor ou formatação no MSWord.

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.

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)

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

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

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

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.

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)

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.

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.

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

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)

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)

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

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

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

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

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

Lembre-se

Design de Interface - Diretrizes

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Design de Interface - Diretrizes

Design de Interface - Diretrizes