Categorias

5 Falhas de Usabilidade Que Você Deve Evitar

Nenhum webdesigner quer criar uma experiência ruim para o usuário. Você já aprendeu por aqui como evitar 30 erros básicos de usabilidade. Mas existem algumas falhas de usabilidade mais avançadas que até mesmo sites profissionais deixam escapar de tempos em tempos. Vamos ver detalhadamente mais cinco delas:

1. Negligenciar o Layout de Telas Vazias

Em tempos de conteúdo dinâmico solicitado pelo usuário, a tela vazia é aquela página onde o usuário não fez nenhuma solicitação ainda, removeu todos os dados relacionados ou realizou uma busca que não retornou resultados.

Vamos analisar um exemplo de uma página de tela vazia que oferece uma boa usabilidade para o usuário, uma tela do site FreshBook:

Tela vazia

Perceba como determinados elementos foram inseridos na tela vazia que melhoraram significativamente a usabilidade da página:

  • Descrição da tela: No topo da página, temos uma descrição precisa da função da tela.
  • Componentes da ação: O usuário tem três caminhos que o permitem executar uma ação e gerar conteúdo para a tela.
  • Indicação de tela vazia: Para evitar confusão, temos uma indicação avisando que não existem itens para exibir na página.

Agora, vamos remover estes elementos para mostrar como a experiência do usuário fica mais confusa:

Imagine-se como um usuário que chega nesta tela pela primeira vez. À primeira vista, você está sem direção. Não está perfeitamente claro o que pode ser feito em seguida e nenhuma explicação sobre o que esta página deveria ser. A única pista que restou é o botão para criar novo ítem, mas você não está certo sobre o que será criado e que mudanças serão feitas na tela.

O que uma tela vazia deve conter? No mínimo, você deve sempre indicar que ela não tem conteúdo no momento: “nenhum item corresponde à sua busca”, “nenhum evento agendado ainda”, “nenhuma mensagem encontrada”, “sem fotos para exibição” etc.

Gmail

Entretanto, este mínimo não oferece todo o auxílio que é possível oferecer para a experiência do usuário. O ideal seria ensinar ao visitante como utilizar a tela e aproveitar ao máximo os recursos que você colocou à disposição dele.

2. Botões Imprecisos

Depois que você preenche um formulário para criar uma conta em uma página web, o que deveria vir escrito no botão ao final?

Ele deveria intuitivamente dizer “Criar Conta.”

A legenda de uma interface de interação como um botão web deveria sempre estar relacionado à ação que o usuário está realizando. Estes elementos de interface não devem ser ambíguos, imprecisos ou questionáveis. O melhor caminho é a obviedade.

Permita-me dar um exemplo do que não fazer:

O que faz esse botão?

Você pode estar pensando: “mas como o significado deste botão é ambíguo?”, se ele diz “claramente”, para entrar em contato?

É impreciso porque você não sabe exatamente como vai acontecer este contato. Será que vai abrir uma nova página? Será que vai abrir um modal com um formulário? Vai abrir uma tela de chat para se conversar com uma pessoa em tempo real?

Na verdade, este botão não faz nada disso. Ele simplesmente abre o cliente de email do usuário.

Há mais de um problema de usabilidade neste caso:

  • O resultado é confuso, o usuário não espera que seu cliente de email seja aberto.
  • O que acontece se o usuário não configurou o seu cliente de email como o cliente de email padrão do sistema e o Windows resolve abrir o Outlook, por exemplo? Isto significa que o usuário agora está mais confuso ainda e possivelmente não irá mais entrar em contato.
  • A situação se complica se o usuário está usando um computador público ou de seu lugar de trabalho.
  • Na verdade, raros são os sites que cometem este erro nos dias atuais, o que torna a experiência ainda mais inesperada para o usuário.

O comportamento do botão não estava claro. Se estivesse escrito “envie um email” no botão, a ação correspondente de abrir um cliente de email seria menos impactante. Ainda equivocada, mas menos impactante.

O usuário não deve perder tempo olhando para toda a página para assimilar o contexto da ação de um botão. Por que não explicitar sua função no próprio botão? Se um botão diz “Salvar”, o usuário precisa avaliar a totalidade de página para entender o que está sendo salvo. Mas se o botão diz “Salvar Postagem”, então sua função se torna imediatamente clara.

Quando configurar o texto de seus botões web, pergunte a si mesmo: O que acontecerá depois que o usuário clicar neste botão? 

Agora, alguns exemplos de botões claros:

Mailchimp

 

Criar Novo Timer

Go Cardless

Criar uma boa legenda para um botão é um detalhe simples, fácil de implementar mas que gera excelentes resultados para a experiência do usuário.

3. Fazer os Usuários Esperarem Sem Um Retorno

Todo mundo odeia esperar. Mais ainda sem saber por quanto tempo.

Se você está em um ônibus na avenida e o motorista encosta no acostamento e senta em silêncio por um minuto, você (e os outros passageiros) vai ficar incomodado. Onde está a explicação? O que aconteceu? Quando a viagem vai recomeçar?

Mas se ele diz, “pessoal, fui avisado de que tem um bloqueio ali na frente, mas vão liberar a pista em cinco minutos”, você irá entender o problema, dimensionar o tempo e esperar.

E nós fazemos os usuários esperarem o tempo todo em páginas e aplicações web. Os usuários tem que esperar quando o conteúdo da página está atualizando em tempo real, quando abre uma janela modal, quando carrega uma imagem pesada, quando a performance do servidor cai, quando um formulário está sendo enviado…

Fazer com que o usuário aguarde é muitas vezes inevitável. Mas fazer com que o usuário aguarde, sem dizer o motivo, nunca é inevitável.

Sempre que sua página ou aplicação estiver carregando dados, atualizando algum conteúdo ou, de alguma forma, fazendo o usuário aguardar, informe o usuário sobre isso.

Exiba uma barra de progresso se possível ou uma animação ao lado da informação sobre o que está acontecendo.

Loading...

Uploading...

Mesmo se seu website estiver passando por problemas técnicos ou em manutenção, o usuário deve ser avisado sobre isto, se possível:

Apple fora do ar

O usuário será muito mais paciente se souber o que está acontecendo.

4. Perder Dados do Usuário em Formulários

Acontece com mais frequência do que deveria: o usuário preenche um formulário, clica no botão de enviar, a validação detecta um problema e o formulário esvazia, obrigando o usuário a preencher todo o formulário outra vez. Outras vezes, o usuário preenche o formulário e vai realizar outra função no formulário, como enviar uma foto ou um arquivo, e, ao concluir esta ação, percebe que os dados anteriores se perderam…

Formulário
E “Get Started” não é muito claro sobre o que o botão faz…

Preencher formulários são uma tarefa que os usuários costumam não gostar. É burocrático, às vezes desnecessário, pode ser cansativo e ainda levanta algumas dúvidas sobre a privacidade. Obrigar o usuário a repetir a tarefa é jogar sal na ferida. Então, não importa o que o seu formulário faça, certifique-se de que ele não perca nenhum dado adicionado pelo usuário.

5. Áreas Clicáveis Menores Do Que Parecem Ser

É importante que elementos que pareçam ser clicáveis sejam clicáveis. Parece óbvio, mas é um erro bastante comum. Observe a imagem abaixo:

Clicável

É de se imaginar que toda a aba é clicável, mas, no exemplo acima, apenas o texto é clicável (nem mesmo o ícone entra na área clicável!).

Como isto acontece? Isso é resultado de uma codificação errada, onde o webdesigner aplica uma lista não-ordenada para gerar um menu <ul>. A marcação fica assim:

<ul>

<li><a href=””>Link 1</a>

</li> <li><a href=””>Link 2</a>

</li> <li><a href=””>Link 3</a></li>

</ul>

Não há nada errado no código acima. O problema acontece quando o estilo é aplicado ao elemento <li> ao invés de ser aplicado ao elemento <a>, gerando, no caso acima, um padding que envolve o link, mas não faz parte dele. Uma vez que apenas o elemento <a> é clicável, o problema de usabilidade acontece.

Uma outra boa dica ao criar links é utilizar uma boa dose de padding ao invés de margin para espaçar o link em relação aos demais elementos da página. O padding no elemento <a> inclui o espaçamento na área clicável, permitindo que a área clicável seja um pouco maior e facilitando a experiência para usuários com problemas motores.

Conclusão

A maioria destas falhas são fáceis de corrigir, então, se você está cometendo alguns destes erros, corrija-os agora. Se você chegou até aqui sem cair em nenhuma destas falhas, parabéns! Continue observando suas interfaces com um olhar crítico para pegar qualquer potencial trava de usabilidade.

Mesmo sem perceber, seus usuários irão agradecer.