3 boas práticas para exibir um estado vazio

Um "estado vazio", também chamado de tela vazia ou estado de dados zero, é o momento em que o conteúdo normal de uma página não pode ser exibido aos usuários.

É uma ótima oportunidade para UX designers de criar uma experiência mais significativa e satisfatória. Também é a chance perfeita de criar um bom design que evite que o usuário se decepcione ou se confunda.

Estados vazios são telas significativas que não designers, desenvolvedores e gerentes de produto devem considerar. Eles têm um incrível potencial de aumentar o engajamento e a satisfação do cliente, além de ajudar a reter os usuários. Uma boa escolha de palavras e conteúdo visual são o passaporte para interagir com os seus usuários e ajudá-los a atingir seus objetivos.

Alguns exemplos de ocorrência de estados vazios:

• Se não houver itens em uma lista;
• Quando não há resultados para uma pesquisa;
• Ocorrência de um erro.

Quando olhamos do ponto de vista de um usuário, os estados vazios aparecem:

• No momento em que as primeiras impressões ocorrem;
• Se os usuários fracassam;
• Quando os usuários têm sucesso.

Esses momentos têm dois resultados possíveis:

1. O usuário pode abandonar o app temporariamente ou permanentemente.
2. O usuário pode ser engajado para se tornar um cliente fiel.

Esse pequeno – porém importante – elemento do design possui um impacto significativo na decisão de um usuário de abandonar ou continuar usando um app.

As melhores práticas de design de um estado vazio

Se você precisa criar o design de um estado vazio, há algumas práticas excelentes para termos em mente. Abaixo temos uma visão básica do estado vazio da nossa página de "Hotspots", que estenderemos como exemplo. Não há apenas um método certo de exibir estados vazios, mas vamos demonstrar o que fizemos nessa página para que você perceba a mentalidade por trás do design desse tipo de elemento.

1. Guie os usuários educando-os

Como mencionei, estados vazios são ótimas oportunidades de interagir com os clientes. Aproveitamos essa oportunidade para descrever verbalmente como usar o recurso, explicando brevemente como começar e o que vai acontecer após criar um hotspot. Também adicionamos um backlink para um artigo que explica melhor a funcionalidade do recurso para eliminar qualquer dúvida por parte dos usuários. Incentivar os usuários a seguir adiante é o principal objetivo aqui.

2. Visualidade do uso

Visualidade é a chave para criar uma imagem ou um padrão forte nas mentes dos usuários sobre como usar o recurso. Um conteúdo visual bem feito será profundamente efetivo para estimular os usuários a dar o próximo passo. Isso significa que o conteúdo visual não deve ser confuso nem causar confusão; em vez disso, eles precisam ser explicativos, adequados à aparência geral da página e simples. Nós criamos uma imagem cativante que simplesmente explica a função do recurso.

3. Incentive os usuários a agir com um botão

Colocar um botão relevante em um estado vazio é uma mensagem em alto e bom som para que os usuários permaneçam na página. Isso cria uma oportunidade para os usuários de continuar suas atividades.

Até mesmo grandes nomes do mercado exibem estados vazios utilizando os passos mencionados acima. É claro que pode haver outras formas criativas de fazer isso além destas.

3 exemplos de estados vazios

Nós usamos o estado vazio da nossa página "Hotspots" como exemplo. Aqui estão alguns outros exemplos de aplicativos bem conhecidos.

1. Snapchat

Imagine se não houvesse uma imagem ou um botão: um número impressionante de usuários provavelmente não seguiria para o próximo passo. No entanto, este é um bom momento para o usuário ver um estado vazio.

2. Dropbox

A equipe de design do Dropbox sabe muito bem construir um estado vazio. É exatamente isso o que você gostaria de ver como um estado vazio. Uma bela imagem, uma frase de efeito e um botão – como deveria ser.

Dropbox’s designer team certainly know how to do it. This is exactly what you would like to see as an empty state. A great image, catchy phrase, and a button as it should be.

3. Facebook

Além de fornecer informações, esse estado vazio incentiva o usuário a encontrar amigos novos, que é a principal dinâmica do Facebook.