A experiência de uso de um aplicativo é algo interessante de se projetar. Muitas vezes nos focamos em pensar já na aplicação finalizada e cheia de dados providas pelo usuário, sem ao menos lembrar em como vai ser a recepção em seu primeiro uso.

Este esquecimento pode nos levar a um problema mortal: tornar o primeiro uso de uma aplicação em algo frustrante, fazendo com que o usuário a abandone. É isto que queremos evitar!

O que é um estado vazio?

Basicamente, um estado vazio é o que o usuário vê quando não há dados para mostrar na tela. Simples; a ideia é que mesmo que não haja nenhum dado a retenção do usuário no app não caia ou ele venha a realizar uma ação indesejada.

Uma abordagem interessante do uso de estados vazios é como o Gmail recebe seus usuários:

A maneira como o Gmail recebe seus novos usuários é bem interessante. As informações básicas vêm em formato similar ao que o sistema mostrará quando você inserir suas informações para usuá-lo no futuro: um email.

Nestes e-mails, a própria aplicação envia instruções sobre como você pode obter mais valor do serviço, tudo projetado para aumentar o sucesso de uso pelo usuário (e, posteriormente, de retenção).

Um estado vazio útil diz o que é e porque ele existe, o bem como de que maneira você pode preenchê-lo. Um estado vazio tem que ser bonito, mas acima de tudo útil.

Como projetar um estado vazio?

Ao projetar um estado vazio você tem que ter em mente três perguntas e respondê-las de forma a reengajar o usuário: o que, por que e como preencher.

Observe a tela abaixo:

•  O que: não existem vacinas e medicações.
• Por que: pois nenhuma foi cadastrada.
• Como preencher: acessando o painel web e cadastrando novas.

Claro que seria mais fácil cadastrar já no aplicativo, mas por causa das especificidades no sistema e o tanto de dados pedidos para cadastro da medicação e registro perante orgãos responsáveis, foi optado por orientar o usuário a usar o painel web neste aplicativo.

Obtendo a atenção do usuário com os estados vazios

Este é um grande problema. É a forma mais eficiente de continuar o seu processo de integração e manter seus usuários engajados.

Como eu disse no início, estados vazios podem e devem ser utilizados para envolver os usuários e ajudá-los a obter uma melhor experiência e satisfação no uso do app.

Trabalhando branding em estados vazios

Os estados vazios são uma excelente oportunidade para fazer uma conexão humana com seus usuários e obter toda a personalidade de seu aplicativo.

Assim como como podemos ser engraçadinhos e criativos com páginas 404, estados vazios também são uma oportunidade para esse tipo de situação.

Aaron Walter, especialista em Design emocional, fez uma analogia da pirâmide de Maslow explicando o que torna a experiência do usuário de um aplicativo bem-sucedida; ao mesmo tempo que a sua aplicação deve ser funcional, confiável e útil, ela também deve ser prazerosa.

Usando emoções nos estados vazios

Voltando ao tópico de caixas de entrada, note algo interessante sobre os diferentes tipos de estados vazios, isto é, como algumas caixas de entrada parabenizam você por não ter tudo resolvido, enquanto outros aplicativos incentivam a preenchê-los.

O tipo de sentimento seus estados vazios transmitem depende da finalidade do seu aplicativo.

O Google Hangouts por exemplo, fica triste e quer que você adicione conteúdo falando com alguém, enquanto Inbox foca em motivar você a ler todos os seus e-mails.

Um dos aplicativos que trabalhei, o Farmin, incentiva o usuário a tomar uma ação de registro dependendo do contexto. A imagem abaixo mostra uma view vazia para adicionar o peso dos animais com um animal fazendo “carinha-de- cachorro-que-caiu-da-mudança” (o animal também muda a imagem conforme o contexto do rebanho previamente configurado).

Use e abuse das emoções para incentivar seu usuário a preencher o estado vazio. Como já falei, o importante não é ele ser bonito, é ser funcional, então não se apegue aos estados vazios como se fossem obras de arte, mas seja criativo ao implementá-los.

Quais são as principais lições a se aprender com estados vazios?

Assim como nos videogames porque você fez todo o caminho até o fim, você recebe uma recompensa especial, eis um TL;DR do texto:

• Nunca deixe um estado vazio realmente vazio, forneça feedback ao usuário
• Lembre-se sempre o motivo pelo qual seu usuário deve preencher esses espaços.
• Se possível, use ilustrações e emoção para ‘forçar’ o usuário a preencher estas informações.
• Use filtro solar, nunca deixe de usar filtro solar.

Quer outros exemplos para entender melhor os espaços vazios? Então acessa essa coleção aqui ó: http://emptystat.es/, e sempre é bom lembrar o bom e velho PTTRNS! São milhares de exemplos de espaços vazios nos mais diversos apps.

Atente-se sempre em não deixar o usuário sem feedback!