Mudanças entre as edições de "Guia de boas práticas de usabilidade"

De PJe
Ir para: navegação, pesquisa
Linha 15: Linha 15:
 
* 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.
 
* 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 realizado com sucesso, o sistema deverá informar sobre o sucesso no envio da mensagem.
 
* Mesmo que o envio de mensagem foi realizado com sucesso, o sistema deverá informar sobre o sucesso no envio da mensagem.
 +
  
 
==Minimizar Quantidade de Interações do Usuário==
 
==Minimizar Quantidade de Interações do Usuário==
Linha 25: Linha 26:
 
* 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.
 
* 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.
 
* 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==
 
==Uniformidade==
Linha 30: Linha 32:
 
* Assegurar a padronização do layout, ou seja, o mesmo estilo de apresentação em todas as telas.
 
* 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.
 
* 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==
 
==Navegabilidade==
Linha 35: Linha 38:
 
* As atividades mais frequentemente utilizadas pelo usuário devem ter caminhos mais curtos.  
 
* As atividades mais frequentemente utilizadas pelo usuário devem ter caminhos mais curtos.  
 
* Prover migalhas de pão (padrão WCAG/E-MAG).
 
* Prover migalhas de pão (padrão WCAG/E-MAG).
 +
  
 
==Preenchimento de Formulários==
 
==Preenchimento de Formulários==
Linha 47: Linha 51:
  
 
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.
 
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==
 
==Apresentação de Erros e Alertas==
Linha 53: Linha 58:
 
* Emitir alerta por ocasião de tentativa de encerramento da operação sem o devido salvamento.  
 
* 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.
 
* 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==
 
==Pop-ups==
 
* Minimizar o uso de pop-ups. Estes devem ser utilizados somente quando for estritamente necessário.
 
* 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.
 
* Permitir que a tela pop-up permaneça acessível, mesmo quando o usuário mudar o foco para outra tela.
 +
  
 
==Ícones==
 
==Ícones==
Linha 80: Linha 87:
 
==Operações de Copiar, Recortar e Colar==  
 
==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.
 
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==
 
==Perfil e Configuração do Usuário==
 
Garantir que a configuração inicial do perfil do usuário atenda a maioria dos usuários.  
 
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==
 
==Uso de Imagens Decorativas, Animações e Som==

Edição das 12h23min de 7 de julho de 2015

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

Conteúdo

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).
  • Atualizar as informações de determinada tela quando um item for incluído, alterado ou removido.
  • 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 realizado 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á:
    • 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);
    • Exibir valor padrão (default) para campos de dados, quando aplicável;
    • Prover mudança automática de campo quando o usuário completar seu conteúdo máximo;
    • Indicar quais campos são de preenchimento obrigatório;
    • Usar máscara de edição para os campos que possuem formatação própria;
    • Em campos com conteúdo longo mas limitado, apresentar o campo no tipo “memorando” com contador regressivo de caracteres digitados pelo usuário;
    • 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;
    • Exibir indicador de progresso da operação;
    • Se tiver previsão de término, exibir barra de progresso
    • 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.
Ferramentas pessoais
Espaços nominais

Variantes
Ações
Navegação
Informações Gerais
Aplicativos PJe
Manuais
Suporte
Ferramentas