Checklists and guidelines - Diretrizes para uma boa interface

Design de Interface
Checklists and Guidelines
Nathanye Godinho
Design de Produto – VI módulo
Prof. Joel

Checklists (ou listas de verificação) são conjuntos de itens cuja presença ou ausência
atestam o grau de qualidade da interface.
Ergolist: http://www.labiutil.inf.ufsc.br/ergolist/check.htm.

Reconhecer as diversidades
Perfil do usuário:
• idade;
• gênero;
• habilidades físicas;
• nível educacional;
• país de origem;
• comunidade à que pertence;
• habitat (urbano ou rural);
• atitude frente à tecnologia;
• motivação;
• objetivos

Em relação ao conhecimento do ambiente, usuários podem ser classificados em:
• Novatos;
• Intermitentes;
• Freqüentes.
Perfis de tarefas:
Indo além da subdivisão hierárquica, a freqüência da execução das diversas tarefas previstas pode ajudar a
ajustar a estrutura proposta. Isto pode ser conseguido por meio da montagem de uma tabela de freqüências
de usos, incluindo os diversos perfis de usuários potenciais e as diversas tarefas a serem disponibilizadas.

1. Condução
• Presteza
• Feedback Imediato
• Legibilidade
• Consistência
2. Carga de Trabalho
• Concisão
• Ações Mínimas
3. Densidade Informacional
• Ações Explícitas do Usuário
• Controle do Usuário

4. Adaptabilidade
• Flexibilidade
• Consideração da Experiência do Usuário
5. Gestão de Erros
• Proteção contra os Erros
• Qualidade das Mensagens de Erro
• Correção de Erros

 CONDUÇÃO

CONDUÇÃO
Prestreza:
Verifique se o sistema informa e conduz o usuário durante a interação.
• informações que permitem ao usuário identificar o estado ou contexto em que ele se
encontra;
• mecanismos que permitem ao usuário conhecer as alternativas, em termos de ações,
conforme o estado do sistema ou contexto em que ele se encontra;
• ferramentas de auxílio e seu modo de acesso.

CONDUÇÃO
Prestreza:
Ex.:
• Fornecer rótulo não-ambíguo para cada campo de formulário (“endereço” é ambíguo,
“rua” não);
• Dirigir a entrada de dados indicando o formato adequado e os valores
aceitáveis (Data: _ _/_ _/_ _);

CONDUÇÃO
 Prestreza:

• Exibir as unidades associadas aos dados (cm, m,...);
• Indicar a não-necessidade de zeros à esquerda, de separadores entre número e dígito
verificador e outros dados eventualmente desnecessários;
• Indicar todas as informações sobre o estado da interação;
• Indicar o tamanho do campo, quando ele é limitado (20 caracteres, por exemplo);
CONDUÇÃO
 Prestreza:

• Dar título a cada janela;
• Fornecer ajuda online e orientação para cada ação disponível ao usuário;
• Realização de ações deve ser aparente, especialmente no caso de esta ser diferente do
padrão na plataforma do sistema e/ou em outros sistemas da mesma aplicação
(contraexemplo: envio de mensagem por ENTER em alguns e-mails)
CONDUÇÃO
 Prestreza:

CONDUÇÃO
Agrupamento visual por significado:
• Verifique se as características visuais dos itens são exploradas como meio de transmitir
associações e diferenças
• Características visuais (formato, cor e outros) que indicam se itens pertencem ou não a
uma dada classe, ou que indicam ainda distinções entre classes diferentes ou entre itens
de uma mesma classe
• Fazer distinção visual clara de áreas que têm diferentes funções (área de
entrada de comandos, de feedback, de mensagens, ...)

CONDUÇÃO
Agrupamento visual por significado:

CONDUÇÃO
Feedback:
• Avaliar a qualidade do feedback (retorno) imediato às ações do usuário e no
processamento. Principalmente em sistemas de transações.
• É como um status. Informa ao usuário sobre o que ele está fazendo.
• Para ações freqüentes e menores, a resposta pode ser modesta, enquanto para ações
mais substantivas o feedback deve ser mais significativo.
• +- 10 segundos são o limite para manter a atenção do usuário focada no diálogo.

CONDUÇÃO
Feedback:

CONDUÇÃO
Feedback:
• Seqüências de ações devem ser organizadas em grupos com início, meio e fim.
• O feedback de completude ao final de um grupo de ações dá a sensação de tarefa
cumprida, de alívio, e permite retirar da mente a informação de contexto necessária até o
momento da tarefa ser finalizada.
• Mostrar visualmente o início e o fim daquela tarefa, para que se tenha noção de como está
se realizando e quando acaba.

CONDUÇÃO
Legibilidade:
• Características visuais das informações apresentadas que possam facilitar ou dificultar a
leitura dessa informação (exemplos: brilho do caractere, contraste letra-fundo, tamanho
da fonte, espaçamento entre palavras, entre linhas e entre parágrafos, comprimento da
linha, entre outros).

CONDUÇÃO
Legibilidade:
• Títulos devem ser centralizados;
• Rótulos devem estar em letras maiúsculas;
• Cursores devem se apresentar distintos de outros itens possíveis;
• Em espaço limitado, preferir poucas linhas longas (ao menos 50 caracteres) ao invés de
muitas linhas curtas;

CONDUÇÃO
Legibilidade:
• Usar justificação à direita apenas se puder ser mantido o espaçamento proporcional e
constante entre as palavras, de forma a evitar falsas associações;
• Ao exibir um texto, as palavras devem ser mantidas intatas, com o mínimo de hífens e
separadores.

CONDUÇÃO
 Consistência:
• Fator determinante. Como uma pregnância, boa distribuição, harmonia (estática, funcional...)
• A consistência se refere primeiramente às seqüências comuns de ações, termos, unidades,
layouts, cores, tipografia e tudo mais num programa de aplicação
• A consistência assim como a padronização de símbolos, ícones, links e sinais devem sempre
possuir o mesmo comando e resposta para que o usuário não precise reaprender, sendo de
uso intuitivo
• Para tanto, usabilidade de consistência nada mais é do que a capacidade do produto em ser
compreendido, aprendido, usado e atraente ao usuário de forma padronizada pelo usuário.

CONDUÇÃO
Consistência:

CONDUÇÃO
Consistência:
• Memória do usuário -> Isto leva à necessidade de telas simples, treinamento ou auxílio
online para sintaxe, mnemônicos e códigos utilizados pelo sistema.
• A consistência, por sua vez, ajuda na minimização da necessidade de memorização, pois
permite previsibilidade de ações.

 CARGA DE TRABALHO

CARGA DE TRABALHO
 Consisão:
• Verifique o tamanho dos códigos e termos apresentados, exigidos e introduzidos no
Sistema;
• Para entradas numéricas, zeros à esquerda não devem ser necessários; para números
compostos, separadores idem. Isto deve ficar aparente;
• Para códigos muito longos (maiores que 4 ou 5 caracteres) usar mnemônicos ou abreviaturas
(contradição);
• Permitir ao usuário entradas de dados sucintas. Deixar isso aparente;

CARGA DE TRABALHO
Ações mínimas:
• Verifique a granularidade das ações e a extensão dos diálogos estabelecidos para a
realização dos objetivos do usuário.
• Isto envolve carga de trabalho em relação ao número de ações necessárias à realização de
uma tarefa.
• Ex.: Memorização de logins, preenchimento de planilhas no Excel, hiperlinks...

CARGA DE TRABALHO
 Densidade Informacional:
• Carga de trabalho do usuário de um ponto de vista perceptivo e cognitivo, com
relação ao conjunto total de itens de informação apresentados simultaneamente nas telas do
sistema.
• Sem exagero de informações, o mais rápido possível).
• Deve-se evitar exigir do usuário que ele lembre de dados exatos de uma tela para outra.
• Sem precisar de traduções ou conversões

CARGA DE TRABALHO
Ações explícitas e Controle do sistema pelo o usuário:
• Avalie as possibilidades de o usuário controlar o encadeamento e a realização de ações.
• O processamento só deve ocorrer quando o usuário solicita ações.

CARGA DE TRABALHO
 Ações explícitas e Controle do sistema pelo o usuário:
• Novamente, saber sobre o status e as etapas do processo.
• Escolher, ter opção.
• Esta regra se aplica fundamentalmente aos usuários experientes, que gostam de sentir que estão no controle do
sistema.
• Ações surpreendentes ou indiretas (uma ação desencadeando outra sem checagem prévia) do sistema, assim
como seqüências tediosas de ações ou dificuldade em obter de maneira direta uma informação importante
causam descontentamento.

 ADAPTABILIDADE

ADAPTABILIDADE
 Flexibilidade:
• O sistema precisa ser fácil para usuários leigos, mas flexível o bastante para se tornar ágil à usuários avançados.
• Personalizar apresentações e diálogos, para adaptar a interface ao usuário.
• Quando o formato preferível para textos não for conhecido pelo sistema, deve-se proporcionar ao usuário meios
de seleção do formato desejado;

ADAPTABILIDADE
Flexibilidade:

ADAPTABILIDADE
 Flexibilidade:
• Usuários com diferentes níveis de experiência -> devem obter iguais possibilidades de obter
sucesso em seus objetivos.
• Comandos simples para leigos.
• Comandos compostos para usuários experientes.
• É necessário fornecer ao usuário experiente modos de contornar orientação fornecida para usuários
leigos (contraexemplo: necessidade de ouvir toda a orientação em serviços telefônicos antes de
discar opção desejada)

 GESTÃO DE ERROS

GESTÃO DE ERROS
 Proteção contra erros:
• Mecanismos empregados para detectar e prevenir os erros de entrada de dados, comandos,
possíveis ações de conseqüências desastrosas e/ou de ação não passível de anulação.
• Rótulos dos campos devem ser protegidos, não passíveis de modificação pelo usuário.

GESTÃO DE ERROS
• Identificação de arquivos, janelas de confirmação, distribuição de botões, sensibilidade do click ou
toque de touch screen, “ctrl+alt+del”, formulário com espaçamentos (datas por ex.), sinal sonoro
etc...

GESTÃO DE ERROS
Aspectos (erros) ligados ao nível de conhecimento do usuário e à freqüência de uso - outras variáveis:
Se usuário for novato:
• Alta densidade de rótulos facilmente interpretáveis;
• Alta densidade de informação de retorno (feedback);
• Ritmo mais lento;
• Tutorial / demo introdutório;
• Subconjunto limitado de ações e funcionalidade.

GESTÃO DE ERROS
Proteção contra erros:
Se usuário for novato:

GESTÃO DE ERROS
Se uso for intermitente e for preciso existir manutenção do conhecimento:
• Uso modesto de rótulos;
• Uso modesto de feedback;
• Ritmo moderado;
• Auxílio on-line para explicar objetos e ações;
• Possibilidade de passar a nível mais avançado, mas com proteção contra erros.

GESTÃO DE ERROS
Se uso for freqüente, o usuário for experiente na tarefa, no uso do sistema e na sintaxe:
• Rótulos escassos ou nulos;
• Feedback parco ou nulo;
• Ritmo mais acelerado;
• Referência on-line com mecanismos de busca elaborados;

GESTÃO DE ERROS
• Com o aumento da freqüência de uso, aumenta o desejo do usuário de reduzir o número de
interações necessárias à execução das tarefas e, consequentemente, o tempo de execução.
• Abreviações, teclas especiais, comandos escondidos e macros facilitam o atendimento desta regra.

GESTÃO DE ERROS
Outros exemplos: Facebook, Google, blogs, Ipod, micro-ondas...

GESTÃO DE ERROS
Mensagens de erro:
• Pertinência, legibilidade e exatidão da informação dada ao usuário sobre a natureza do
erro cometido (sintaxe, formato e outros) e sobre as ações a executar para corrigi-lo.
• Se o usuário pressiona uma tecla de função inválida, nenhuma ação deve ocorrer, a não ser
uma mensagem indicando as funções apropriadas a essa etapa da interação.
• Mensagens de erro devem ser orientadas a tarefas, contextuais e não genêricas. Devem
ser bem específicas e sucintas.

GESTÃO DE ERROS
Mensagens de erro:
• Devem informar a natureza do erro cometido (sintaxe, contexto,...), o erro exato (“espaço
não é um delimitador válido“), e as ações válidas para a corrigi-lo (“delimitador deve
ser ‘-‘ “);
• Estilo das mensagens de erro deve ser impessoal, não repreensivo e evitar o humor.

GESTÃO DE ERROS
Correção de erros:
• O sistema deve detectar os erros ao longo (compromisso com a regra de controle do sistema pelo
usuário) e oferecer instruções simples e claras para a recuperação.
• Erros sérios devem, preferencialmente, ser detectados de forma que eles não cheguem a causar
mudança no estado do sistema. Quando isto não for controlado, isto é, quando erros fatais
ocorrerem, o estado anterior do sistema deverá poder ser restaurado.

GESTÃO DE ERROS

GESTÃO DE ERROS
• Reversão de ações -> Esta característica diminui a ansiedade, na medida em que o usuário
sente pode desfazer ações, e se encoraja para a plena exploração do sistema.
• A escolha da unidade de reversão de ações não é trivial, sendo dependente do tipo da
aplicação.
• O sistema pode permitir a reversão de ações simples, tarefas inteiras de entrada de dados.

CONCLUSÃO
Oito “Regras de Ouro” do design de interfaces
Busque a consistência com afinco
Permita atalhos para usuários experientes
Ofereça informação de feedback
Projete os diálogos tratando como um todo ações relacionadas (início meio
e fim)

CONCLUSÃO
Oito “Regras de Ouro” do design de interfaces
Proporcione tratamento de erros
Permita fácil reversão de ações
Proporcione ao usuário a sensação de que ele está no controle
Reeduque substancialmente a necessidade de memória

Fim!

Checklists and guidelines - Diretrizes para uma boa interface

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Checklists and guidelines - Diretrizes para uma boa interface

Checklists and guidelines - Diretrizes para uma boa interface