• Design
  • Heurísticas de Nielsen
  • Heurística 01

1. Visibilidade do estado do sistema#

Resumo

  • Estabeleça uma comunicação clara e constante com o usuário para construir confiança;
  • Forneça feedback de cada ação do usuário na interface: o novo estado do sistema após a ação do usuário deve estar claro.

Vamos começar com um exemplo. Suponha que a Ana quer fazer o upload de algumas fotos do seu apartamento no aplicativo de aluguel alugo.ap. Ao arrastar os arquivos para fazer o upload, Ana se depara com a situação abaixo:

Exercise 1

Identifique pelo menos um problema de usabilidade na interface acima.

Answer

Você pode ter encontrado outros problemas, mas algumas questões que poderiam surgir para a Ana são:

  • As fotos foram enviadas?
  • Ocorreu um erro?
  • O app identificou que eu arrastei os arquivos?

Vamos propor uma pequena modificação:

Exercise 2

O que mudou na interface acima com relação à versão anterior?

Answer

A diferença é sutil, mas agora, quando Ana arrasta o arquivo sobre a região de envio, ela muda de cor.

Essa pequena mudança já ajuda Ana a saber que no mínimo o app identificou que eu arrastei um arquivo. Esse é um exemplo de feedback: o usuário faz uma ação (arrastar um arquivo sobre a região de envio) e o sistema dá uma resposta (muda a cor do fundo).

Melhorou, mas Ana ainda não tem ideia se o app está fazendo algo com isso ou não. Vamos adicionar uma barra de progresso:

Exercise 3

Vamos imaginar que a interação é um diálogo entre o usuário e a interface. Ana disse: "tome aqui estes arquivos". Na versão anterior é como se a interface tivesse permanecido calada encarando Ana:

Como você traduziria em uma frase a resposta da nova versão da interface ao mostrar a barra de progresso?

Answer

A barra de progresso indica a informação está de alguma forma sendo processada ou enviada. Uma resposta possível seria: "ok, agora aguarde enquanto eu envio essas fotos para o servidor."

Depois de esperar um tempo Ana começa a ficar preocupada: "será que deu erro?" Vamos modificar a nossa interface um pouco mais:

Exercise 4

Que informações estão disponíveis nesta nova versão que não estavam na versão anterior?

Answer

Nesta nova versão, Ana sabe o quanto da tarefa já foi concluída e tem alguma expectativa de quanto falta para acabar.

Ainda dá pra melhorar. Esse texto "Selecione ou arraste as fotos..." está deixando Ana confusa: "será que eu posso arrastar mais fotos? Quantas o app já recebeu?"

Vamos propor uma última modificação:

Agora Ana sabe quantas fotos já foram enviadas e quantas faltam. Poderíamos continuar melhorando a interface, mas acho que já deu para pegar a ideia.

A percepção de controle#

Para interagir com uma interface e modificar o seu estado o usuário precisa saber qual é o estado atual. Incerteza quanto ao estado da aplicação faz com que o usuário se sinta inseguro e com menos controle. As coisas estão acontecendo sem que ele ou ela saiba disso.

Garantir uma boa visibilidade do estado do sistema ajuda o usuário a sentir que tem um maior controle da interface. A percepção de controle aumenta a confiança na interface, no sistema e na sua marca.

Pode ser que tudo esteja funcionando perfeitamente, mas o usuário precisa saber disso! Esse é o propósito do feedback. A sua interface deve se comunicar com o usuário de forma clara e constante. Forneça feedback para cada ação do usuário, mesmo que seja para dizer: "entendi, espere um pouco enquanto eu processo essas informações."

Nunca espere que o usuário vai confiar cegamente no seu sistema. Seja transparente, forneça um feedback claro.

Interface Hall of Shame/Fame: Preparação para a aula#

Exercise 5

Durante o processo de cadastro na página do governo federal (gov.br) encontramos a página abaixo:

Existe algum ponto positivo com relação à visibilidade do estado do sistema? Existe algum ponto negativo?

Answer

Discutiremos as respostas no início da aula.