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.


http://www.labiutil.inf.ufsc.br/ergolist/check.htm

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: _ _/_ _/_ _);


Checklists and Guidelines 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

Feedback:


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


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.


GESTÃO DE ERROS



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

Design

Transcript of Checklists and guidelines - Diretrizes para uma boa interface