Guia de boas práticas de usabilidade

Este documento apresenta algumas diretrizes para contribuir na melhoria de usabilidade nos sistemas Web.

Apresentação de Informações

• Garantir que a informação contida seja relevante e necessária para o usuário (citado no padrão ePWG).

• Garantir que a navegação entre telas seja intuitiva, ou seja, que as telas tenham informações apresentadas aproximadamente o que a maioria dos usuários esteja esperando. • Garantir que todas as interfaces da Solução operem de forma otimizada para resolução mínima definida para o sistema, e deverão se ajustar automaticamente para outras resoluções. • Vincular o sistema de ajuda on-line à função ou tarefa executada (sensível ao contexto) • Apresentar informações quais teclas de atalhos são suportadas. A combinação de teclas deve ser intuitiva e fácil de ser lembrada. • Caso tenha uma sequência de formulários a ser preenchida, mostrar ao usuário a lista de formulários com indicação qual é o formulário atual. Desta forma, o usuário tem informação quais formulários subsequentes ainda faltam preencher. • Apresentar o tamanho dos arquivos e o tempo estimado para o download nas operações de download. • Caso o usuário tenha alguma dificuldade no uso do sistema, informações de contato ao suporte devem estar sempre visíveis em todas as telas. Geralmente, estas são inseridas no rodapé de todas as páginas/telas. • Dispor, para todos os relatórios gerados, a opção de visualização do documento antes de sua impressão ou exportação para formatos padronizados; • Evitar termos ou campos com nomes redundantes numa mesma página. • Evitar uso de jargões, termos técnicos de informática (a não ser que o sistema somente interage com usuário da área) e gírias. • Mesmo que o envio de mensagem foi realizada com sucesso, o sistema deverá informar sobre o sucesso no envio da mensagem.

Minimizar Quantidade de Interações do Usuário • Permitir, com um pequeno número de interações e sem mudanças excessivas de contexto, a realização das tarefas do sistema, principalmente, as mais freqüentemente executadas. • Permitir operações em lote, sempre que couber. • Apresentar a opção de marcar e desmarcar todos os itens para dar prosseguimento a uma operação, quando os valores forem apresentados em forma de lista. • Na navegação entre telas, as informações recuperadas nas telas de origem deverão ser apresentadas nas telas subsequentes, sempre que possível, evitando preenchimento com mesmos dados. • Apresentar interface com o cursor posicionado no campo mais provável de preenchimento inicial e o foco no botão mais provável de acionamento pelo usuário. • Garantir que a ordenação de tabulação seja lógica e intuitiva. • O número de campos de formulários deve ser o mínimo possível. Evitar usuário digite novamente campos relacionados que já foram preenchidos previamente. Exemplo: evitar solicitar data de nascimento e idade. • Na primeira execução, não forçar o usuário realizar configurações do sistema para depois utilizar o sistema. Este deve ser já previamente configurado para maioria dos usuários. O sistema deve simplesmente prover opção de configuração disponível para configuração a qualquer momento.

Uniformidade • Todas as telas devem seguir único padrão baseado na identidade visual definido para o sistema. • Assegurar a padronização do layout, ou seja, o mesmo estilo de apresentação em todas as telas. • Assegurar que as palavras-chave de todos os cabeçalhos, notas e menus signifiquem o que se pretende, não permitindo a existência de mais de uma palavra com o mesmo significado e de uma palavra utilizada com mais de um significado. Exemplo: gravar e salvar, excluir e deletar.

Navegabilidade • Permitir ao usuário retornar à tela anterior caso seja redirecionado para outra tela/página por motivos de mensagens de erro. • As atividades mais frequentemente utilizadas pelo usuário devem ter caminhos mais curtos. • Prover migalhas de pão (padrão WCAG/E-MAG).

Preenchimento de Formulários • Em relação aos campos de entrada de dados, o sistema deverá: o Possibilitar, além da navegação usual com o mouse, a navegação entre os campos do formulário utilizando apenas o teclado, inclusive com teclas de atalho (já exigido no padrão WCAG/E-Mag); o Exibir valor padrão (default) para campos de dados, quando aplicável; o Prover mudança automática de campo quando o usuário completar seu conteúdo máximo; o Indicar quais campos são de preenchimento obrigatório; o Usar máscara de edição para os campos que possuem formatação própria; o Em campos com conteúdo longo mas limitado, apresentar o campo no tipo “memorando” com contador regressivo de caracteres digitados pelo usuário; o Exigir a confirmação de informações sensíveis, tais como senha e endereço de e-mail, por meio de nova digitação em campo auxiliar ou por solicitação de confirmação antes de salvar a informação na base de dados.

No caso de preenchimento incorreto, informar o erro com informações identificando quais campos estão com valores inválidos, inserir dicas para ajudar preencher corretamente. Para facilitar o usuário, o cursor já deve ser direcionado ao primeiro campo com erro.

Apresentação de Erros e Alertas • Assegurar que as mensagens de erro sejam apresentadas em linguagem simples, indicando precisamente o problema encontrado e sugerindo possíveis soluções; • Emitir alerta com solicitação de confirmação de operação nos casos de exclusão de dados. • Emitir alerta por ocasião de tentativa de encerramento da operação sem o devido salvamento. • Emitir alertas preventivos e informativos para funcionalidades com prazos definidos. Por exemplo, sinalizar, ao se aproximar a expiração da sessão, a indicação de timeout, permitindo ao usuário manter sua sessão ativa.

Pop-ups • Minimizar o uso de pop-ups. Estes devem ser utilizados somente quando for estritamente necessário. • Permitir que a tela pop-up permaneça acessível, mesmo quando o usuário mudar o foco para outra tela.

Ícones • Os ícones devem ser de fácil interpretação, visualização e devem ser intuitivos, ou seja, estes devem permitir que a maioria dos usuários consiga interpretar com facilidade o que a imagem representa. • Utilizar ícones que a maioria dos usuários já está familiarizada.

Apresentação de Informações de Progresso Para as tarefas com previsão de execução superior a cinco segundos, relativas a processamento de banco de dados ou geração de arquivos de saída, o sistema deverá: • Informar o andamento ao usuário, ou seja, prover algum feedback informando ao usuário que algo está sendo processado; o Exibir indicador de progresso da operação; o Se tiver previsão de término, exibir barra de progresso o Se for impossível de obter previsão de término, apresentar pelo menos uma animação de progresso para informar ao usuário que o sistema está processando e que este não travou. • Permitir o cancelamento da operação pelo usuário (exceto durante a inicialização do sistema).

Pesquisa (Filtro) Possibilitar pesquisa com a flexibilidade para usuário, independentemente da forma como estão armazenadas na base de dados permitindo: • argumento ser parcial; • uso de curingas; • digitação das palavras com e sem acento; • digitação das palavras com e sem caracteres especiais.

Operações de Copiar, Recortar e Colar As operações copiar, recortar e colar deverão estar ativas em todas as interfaces em que seu uso não seja proibitivo.

Perfil e Configuração do Usuário Garantir que a configuração inicial do perfil do usuário atenda a maioria dos usuários.

Uso de Imagens Decorativas, Animações e Som • Evitar elementos que afastam o usuário do seu objetivo final, nomeadamente os elementos meramente decorativos ou as animações sem utilidade prática; • Evitar qualquer animação ou emissão de som que dificulte o foco do usuário durante o preenchimento de formulários ou qualquer interação que exija maior atenção do usuário.