Como melhorar a experiência do usuário com “Empty States”

Bruna Bites | | melhores praticas para seu app

Antes de mais nada… O que são Empty States? Na tradução livre do inglês “Estados Vazio” é o que o usuário vê no aplicativo quando não há dados ou resultados para serem exibidos. O que é bem comum, já que ocorrem, em geral, porque:

  • Primeiro uso: o usuário apenas se inscreveu e não informou outros dados necessários para uma dada funcionalidade;
  • Dados removidos: Os dados informados pelo usuário não foram encontrados ou não existe correspondência para eles;
  • Houve um erro ao carregar os dados na tela (estamos falando de produto móvel, que depende de conexão, isto pode acontecer mais do que o esperado).

Em cada uma destas situações, deixar o espaço vazio realmente vazio, pode causar um problema de experiência, empatia e de uso do aplicativo. Um artigo bem legal da Tech Crunch faz uma análise profunda sobre o assunto e mostra como obter atenção do usuário a partir do uso de “Empty States”. E por aqui, nós vamos apontar na prática alguns exemplos de como usar este espaço para direcionar o usuário e que podem ajudar bastante.

1. Eduque: Direcione o usuário a executar a ação essencial do propósito do aplicativo:

Criar listas, cadastrar itens favoritos e efetuar buscas para novos usuários de uma aplicativo, podem ser ações simples ou grandes mistérios de como usar:

leroy-merlin_alertas

O empty state é 100% vazio neste exemplo. Além da funcionalidade não ser intuitiva, não existe um guia ou passo-a-passo para o usuário, ele chega no famoso “fim da linha” e não tem indicação de como proceder.

airbnb_whislist

Esse é um exemplo de como fazer o usuário executar da melhor forma a ação requerida na funcionalidade. Ele entrelaça o ciclo do usuário para não perdê-lo. Além de explicar o que é a funcionalidade, ele ainda orienta como usá-la imediatamente com um claro e destacado botão de ação, o famoso “click to action”.

2. Surpreenda: Use elementos simpáticos e ganhe a empatia de seu usuário:

Não tem coisa mais chata que a frustração de explorar uma funcionalidade e ela não ter o resultado imaginado. E pior, receber qualquer tipo de mensagem ou alerta que sugere o tamanho de sua estupidez por não “saber” usar.

swarm_msgs_01

Aqui é possível entender que não tem nenhuma mensagem, certo? Porém não explica muito o que é possível fazer e nem é muito animadora e tampouco positiva.

swarm_msgs_02

Já essa tela mostra que existe algo que pode ser feito, dando alguma esperança para o usuário. Mas percebam que ainda assim, ela tem pouca empatia e não é muito atrativa.

É importante lembrar que uma experiência positiva só se constrói com elementos positivos. Não consigo imaginar como tirar algo positivo com uma tela assim.

swarm_msgs_03

Agora sim! Uma tela completa com uma imagem simpática, informação indicativa e ainda um botão ação.

De forma descontraída e bastante simpática, o app explica o que está acontecendo e como é possível seguir adiante. Simples assim!

3. Segure e assegure: Faça o usuário tomar a decisão e a ação imediatamente:

O usuário precisa apenas usar o app, e não ter mestrado obtido no Google ou Youtube sobre como usá-lo. Facilitar decisões e ações é fundamental, mesmo porque, quando a coisa fica muito difícil, a taxa de desistência e desinstalação aumenta.

Por exemplo, ok que já deu para entender como usar o treco, mas poderia facilitar dando um atalho e não apenas um zero desolador.

tudo-gostoso_receitas-favs

Imagine se além de mais simpático e educativo, existisse um atalho para que a ação fosse feita, o famoso click to action, lembra?! O dedo iria direto nele e logo o espaço vazio seria preenchido, né? O exemplo abaixo indica bem como isto funciona:

pinterest_msgs

Um Empty State não só deve ter seus elementos planejados para não causar desconforto ao usuário com mensagens chatas ou confusas, mas principalmente, para conduzir a navegação de volta ao fluxo útil do produto. E claro, usar elementos simpáticos e bonitos podem transformar a experiência do usuário.