Heurísticas de Zhang

Finalizando os posts sobre heurísticas, falaremos sobre as 14 heurísticas de Zhang, que foram baseadas nas Heurísticas de Nielsen e nas Regras de ouro de Schneiderman, vistas anteriormente. Essa lista de heurísticas é amplamente utilizada no desenvolvimento de produtos, especialmente para a saúde.

Abaixo está detalhada cada uma das heurísticas, junto com um exemplo visual do que seria um design BOM para cada uma delas.

1. Consistência e padrões: Deve-se manter um padrão de palavras, símbolos e ações, dessa forma o usuário não cria dúvidas ao existir situações iguais com simbologia ou palavras diferentes.

Exemplo: design do iPod Shuffle, da Apple.

2. Visibilidade do estado do sistema: O equipamento deve explicitar o que está acontecendo através de informações claramente percebidas. O usuário tem que entender a situação atual do sistema, o que pode ser feito, as mudanças ocorridas, entre outras situações.

Exemplo: percentual de bateria.

3. Correspondência entre sistema e mundo: O sistema tem que estar de acordo com a realidade do usuário, ele deve relacionar as situações que o sistema possui com as situações vividas no cotidiano dele. As imagens, ações e objetos são itens importantes que devem corresponder o dia-a-dia.

Exemplo: lixeira do Windows.

4. Minimalista: O excesso de informação é um causador de desatenção, quanto menos informação desnecessária, melhor é o desempenho do usuário no sistema.

Exemplo: embalagem minimalista de Schweppes.

5. Minimizar a carga de memória: A memorização deve ser evitada, o usuário deve saber utilizar o produto sem necessitar de memorizar muita informação para que isso não tire sua atenção.

Exemplo: funções sugeridas do Excel a partir de um início de digitação.

6. Realimentação informativa: O sistema deve retornar informação sobre as ações feitas pelos usuários. O feedback deve ser simples, deve ocorrer rapidamente e de acordo com o tipo de feedback dado.

Exemplo: alarme de carro que emite sinal sonoro e luminoso quando ativado/desativado.

7. Flexibilidade e eficiência: Os usuários possuem níveis diferentes de compreensão e experiência com o sistema, devido a isso, o sistema deve ser customizado, por exemplo, através de atalhos que aceleram a execução de atividades.

Exemplo: atalhos do Office e do Windows.

8. Boas mensagens de erro: As mensagens de erro devem ser instrutivas, dessa maneira o usuário saberá o tipo de erro que ocorreu e como solucioná-lo.

Exemplo: mensagem de erro do Gmail.

9. Prevenção de erros: Ao projetar as interfaces de um produto, deve-se prevenir que os erros aconteçam. Todas as ações que um usuário pode realizar não podem resultar em nenhum tipo de erro, essa característica é essencial para produzir um sistema eficiente.

Exemplo: mensagem do Windows ao excluir um arquivo.

10. Conclusão da tarefa: Uma tarefa finalizada deve ser notificada para indicar que os objetivos iniciais do usuário foram completos.

Exemplo: notificação da Play Store sobre instalação de aplicativos.

11. Ações reversíveis: O sistema deve permitir ao usuário desfazer uma tarefa. Por exemplo, se ocorrer algum erro, o usuário pode recuperar as informações anteriores ao erro.

Exemplo: mensagem do Outlook quando o usuário executa uma ação (possibilidade de desfazer a ação).

12. Utilizar a linguagem do usuário: A linguagem deve ser adequada ao tipo de usuário do produto. Para isso o uso de padrões nas palavras e linguagem especializada é fundamental.

Exemplo: reações do Facebook.

13. Usuário no controle: Os usuários devem se sentir no controle do sistema, eles são os iniciantes das ações, portanto deve-se evitar ações inesperadas, uma sequência monótona de ações e resultados imprevistos.

Exemplo: Celular da Motorola que possui várias opções de capinhas.

14. Ajuda e documentação: A documentação auxilia o usuário quando necessário, em dúvidas e na aprendizagem do sistema.

Exemplo: ajuda do Windows.

E aí, pensou em algum produto durante a leitura? Lembra de algum equipamento que viole alguma dessas heurísticas? Conta pra gente nos comentários e nos siga no Facebook e LinkedIn para não perder nenhum post!

Por Natália Oliveira

Oito Regras de Ouro de Schneiderman

Continuando nossos posts sobre heurísticas, hoje falaremos sobre as Oito regras de ouro de Schneiderman, que também são queridas pelos designers de interfaces digitais, como sites, aplicativos e jogos.

1. Esforce-se pela consistência: essa regra diz respeito à padronização de botões, fontes, cores, palavras, etc. e consistência desses com as convenções já existentes.

Isso pode ser observado na transição de aplicativos semelhantes, como o Excel e Google Planilhas, que têm a mesma finalidade, mas pertencem a desenvolvedores diferentes. Nas imagens abaixo é possível perceber que os softwares possuem diferenças, mas mantêm a consistência nos ícones, comandos e layout utilizados.

Planilha do Google Docs:

Planilha do Excel:

2. Permita que usuários frequentes usem atalhos: vimos anteriormente a definição de eficiência como um dos atributos de usabilidade. Para o sistema ter uma boa característica de eficiência é necessário possibilitar que os usuários mais experientes consigam customizar atalhos. Isso evita que a experiência desses usuários seja entediante e torna mais rápida a conclusão de tarefas.

Um exemplo disso é o Windows, que possui vários atalhos, em especial os famosos CTRL+C e CTRL+V.

3. Ofereça feedback informativo: cada ação do usuário requer um retorno do sistema, que pode ser explícito ou sutil. Isso fica exemplificado na imagem abaixo.

Quando movemos uma pasta do Windows para dentro de outra pasta é mostrado quatro tipos diferentes de feedback: a marcação em azul com contorno tracejado na pasta de origem, a representação do movimento quando arrastamos a pasta, a mensagem “Mover para Nextcloud” e a marcação em azul com contorno contínuo na pasta de destino.

4. Projete diálogos que indiquem término de ação: outro tipo de feedback que é de grande importância em um sistema é o de conclusão ou término de ação. Nesse caso, podem ser utilizadas mensagens como “Ação realizada com sucesso” “Salvo com sucesso”.

5. Ofereça tratamento simples de erros: inicialmente, o ideal é que os erros sejam evitados, o que pode ser feito impedindo que seja possível inserir dados errados, direcionando a uma ação específica, fazendo preenchimento automático, entre outras coisas. No entanto, erros acontecem pelos mais variados motivos e, nesses casos, é importante que o sistema ofereça ao usuário uma forma simples de lidar com ele. Um bom exemplo disso é mostrado na imagem seguinte.

6. Permita fácil reversão de ações: sempre que possível, as ações do sistema devem ser reversíveis, de forma que o usuário se sinta mais tranquilo e confortável para executá-las.

Um exemplo disso é o comando desfazer (CTRL+Z), que está presente em várias plataformas digitais.

7. Ofereça controle de usuário: essa regra diz respeito a deixar que o usuário comande suas ações, de forma que ele se sinta no domínio. Isso pode ser feito oferecendo poder de escolha para instalar e fechar aplicativos, por exemplo.

8. Reduza a carga de memorização: por fim, é importante que o sistema não exija muito do usuário e uma das formas de realizar isso é reduzindo a carga de memorização exigida. Um bom exemplo disso está na imagem seguinte.

Já imaginou que perfeita seria uma plataforma que seguisse todas as regras de Schneiderman?! Conhece alguma? Conta pra gente nos comentários.

No próximo post, continuaremos com mais heurísticas, nos siga no Facebook e LinkedIn para saber mais!

Por Natália Oliveira

Heurísticas de Nielsen

Vimos anteriormente que existem boas práticas que tornam uma interface mais simples, fácil e agradável de usar. Agora, veremos essas listas de heurísticas, começando pelas 10 heurísticas de Nielsen, que são muito utilizadas no desenvolvimento de sites, softwares, jogos, aplicativos e outras plataformas digitais.

Abaixo está detalhada cada uma das heurísticas, junto com um exemplo visual do que seria um design bom ou ruim.

1. Visibilidade do estado do sistema (feedback): O sistema deve informar continuamente ao usuário sobre o que ele está fazendo. Dez segundos são o limite para manter a atenção do usuário focalizada no diálogo.

Exemplo – design bom: ícone de carregamento que indica o progresso.

2. Correspondência entre sistema e mundo: A terminologia deve ser baseada na linguagem do usuário e não orientada ao sistema. As informações devem ser organizadas conforme o modelo mental do usuário.

Exemplo – design ruim: ícone de colar, que mesmo tendo se popularizado, não tem sentido lógico.

3. Usuário com controle e liberdade sobre o sistema: O usuário controla o sistema. Ele pode, a qualquer momento, abortar uma tarefa, ou desfazer uma operação e retornar ao estado anterior.

Exemplo – design ruim: Notificação da caixa postal que não desaparece ao “limpar notificações”.

4. Consistência e padronização: Um mesmo comando ou ação deve ter sempre o mesmo efeito. A mesma operação deve ser apresentada na mesma localização e deve ser formatada/apresentada da mesma maneira para facilitar o reconhecimento.

Exemplo – design ruim: botão de ligar, que não é vermelho, contrariando o padrão para controles remotos.

5. Prevenção de erros: Evitar situações de erro. Conhecer as situações que mais provocam erros e modificar a interface para que tais erros não ocorram.

Exemplo – design bom: conectores com design e cores específicas, para evitar encaixe errado.

6. Priorizar o reconhecimento sobre a lembrança, minimizando a sobrecarga de memória do usuário: O sistema deve mostrar os elementos de diálogo e permitir que o usuário faça suas escolhas, sem a necessidade de lembrar um comando específico.

Exemplo – design bom: opção Ferramentas de Imagem, do Word, que aparece automaticamente ao clicar em uma imagem.

7. Flexibilidade e eficiência de uso: Permitir atalhos para usuários experientes executarem as operações mais rapidamente. Abreviações, teclas de função, duplo clique no mouse, função de volta em sistemas hipertexto. Atalhos também servem para recuperar informações que estão numa profundidade na árvore navegacional a partir da interface principal.

Exemplo – design bom: opções de personalização do Word.

8. Telas/interfaces simples, minimalistas, estéticas e naturais: Deve-se apresentar exatamente a informação que o usuário precisa no momento, nem mais nem menos. A sequência da interação e o acesso aos objetos e operações devem ser compatíveis com o modo pelo qual o usuário realiza suas tarefas.

Exemplo – design bom: medidor de pressão da Incoterm.

9. Ajudar os usuários a reconhecer, diagnosticar e se recuperar dos erros: Linguagem clara e sem códigos obscuros. Devem ajudar o usuário a entender e resolver o problema. Não devem culpar ou intimidar o usuário.

Exemplo – design ruim: mensagem de erro que não deixa claro o que aconteceu.

10. Ajuda e documentação: O ideal é que um software seja tão fácil de usar (intuitivo) que não necessite de ajuda ou documentação. Se for necessária, a ajuda deve estar facilmente acessível, dentro do próprio equipamento ou on-line.

Exemplo – design bom: assistente do Windows. Texto da imagem “Olá, eu sou o Clippy! Sou o seu assistente de navegação e meu trabalho é ajudar você a navegar nessa página. Você precisa de assistência?”.

E aí, qual sua heurística preferida? Tem alguma que você considera indispensável para um site? Conta pra gente nos comentários e nos siga no Facebook e LinkedIn para saber mais!

Por Natália Oliveira

Análise heurística

A Análise Heurística é uma análise da interface de usuário, ou seja, da parte do produto que o usuário interage, como telas, botões, cursores, etc. Essa interface é comparada por especialistas em usabilidade com boas práticas de design, chamadas de heurísticas.

As etapas para realização dessa análise são explicadas a seguir.

1ª etapa – preparar para avaliação: nesta etapa os avaliadores precisam definir as tarefas do produto (ou de um protótipo funcional deste) que estarão sob avaliação e a lista de heurísticas a ser utilizada. Além disso, os avaliadores devem se familiarizar com o conceito do produto, lendo o manual, obtendo treinamento ou assistindo demonstrações de uso.

Principais heurísticas utilizadas: Heurísticas de Nielsen, Heurísticas de Zhang e Regras de ouro de Schneiderman.

2ª etapa – conhecer o produto: nesta etapa o avaliador deve conhecer individualmente o produto: a princípio, de forma exploratória, verificando todas as funções e funcionalidades deste. Em seguida, de forma mais coordenada, manuseando o produto como se fosse um usuário final e verificando quais heurísticas foram violadas. Os dois modelos são demostrados a seguir.

Abordagem exploratória:

O avaliador exploraria a caixa fechada, depois abriria a caixa e exploraria todos os acessórios presentes. Em seguida identificaria os elementos presentes no exterior do celular, como botões, câmera, flash, entradas de som, fone de ouvido e USB, slot de chip e cartão de memória, etc. e também a interface do celular, navegando pelos aplicativos, configurações e telas.

Abordagem coordenada:

O avaliador romperia o selo que lacra a caixa, abriria a caixa, pegaria o celular, retiraria os adesivos em volta deste, apertaria o botão de ligar, faria a configuração inicial etc. Somente quando fosse indicado nível baixo de bateria que o avaliador procuraria pelo carregador, o mesmo vale para outros acessórios. Em cada tarefa realizada o avaliador anotaria se e quais heurísticas foram violadas.

3ª etapa – analisar as violações: Tendo anotadas as violações, o avaliador deve analisar cada uma delas. Para cada heurística violada, deve-se dizer qual o problema de usabilidade encontrada, quais as possíveis consequências deste e qual a severidade. Por exemplo, essa mensagem de erro do Windows 10 que diz “algo aconteceu” e a única opção é “fechar”.

Heurísticas violadas: Boas mensagens de erro (Zhang)/ Ajudar os usuários a reconhecer, diagnosticar e se recuperar dos erros (Nielsen).

Problemas de usabilidade: Foi informado ao usuário que um erro ocorreu, mas não qual o erro ou como resolver.

Possíveis consequências: Por se tratar da instalação de um sistema operacional e a única opção ser “fechar”, o usuário pode não saber o fazer em seguida.

Severidade: Média.

4ª etapa – concluir a avaliação: Por fim, os avaliadores reúnem os dados obtidos individualmente em um único documento, analisando a coerência das anotações e discutindo-as novamente, caso necessário.

Para fabricantes de equipamentos eletromédicos ou produtos para a saúde, essa análise pode compor a documentação do Processo de Engenharia de Usabilidade no requisito 5.8 (verificação de usabilidade) das normas ABNT NBR IEC 60601-1-6 e NBR IEC 62366 vigentes.

Nos próximos posts, abordaremos as principais heurísticas existentes, acompanhe-nos no Facebook e LinkedIn para não perder nenhum post!

Por Natália Oliveira

Fontes:

What is a heuristic?

N. STANTON, P. SALMON, L. RAFFERTY, G. WALKER, C. BABER, D. JENKINS, Human Factores Methods: a Pratical Guide for Engineering and Design, 2ª ed., Ashgate Publishing, 2013