Não subestime a beleza de um estado vazio, mas saiba como deixar um bom espaço vazio!
A experiência de uso de um aplicativo é algo interessante de se projetar. Muitas vezes, focamos em pensar já na aplicação finalizada e cheia de dados providos pelo usuário sem ao menos lembrar de como vai ser a recepção deste mesmo em seu primeiro uso.
Este esquecimento pode nos levar a um problema mortal para toda aplicação: transformar o primeiro uso em algo frustrante, fazendo com que o usuário abandone a aplicação. E é isso que estamos aqui para 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 tomar uma ação indesejada.
Uma abordagem interessante do uso de estados vazios é como o Gmail recebe seus usuários:
Tela de OnBoarding no Gmail quando o usuário faz seu primeiro acesso.
A maneira pela qual o Gmail recebe seus novos usuários é bem interessante, observe: as informações básicas vêm no mesmo formato em que você vai ter outras informações e usar no futuro: e-mails.
Nestes e-mails, a própria aplicação envia instruções sobre como você pode obter mais valor do aplicativo, todos projetados para aumentar o sucesso de uso pelo usuário (e, posteriormente, de retenção).
Outro tipo de estado vazio ocorre quando você procura um amigo no Snap.
Um estado vazio útil diz o que é e por que você o está vendo, bem como de que maneira pode preenchê-lo.
Um estado vazio tem de ser bonito, mas, acima de tudo, útil.
Como projetar um estado vazio?
Ao projetar um estado vazio, você precisa ter em mente três perguntas e as responder de forma a reengajar o usuário: o que, por que e como preencher.
Observe a tela abaixo:
-
O que – Não existem vacinas nem medicações.
-
Por que – Porque nenhuma foi cadastrada.
-
Como preencher – Acessando o painel web e cadastrando novas.
Obs.: 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 os órgãos responsáveis, optou-se 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 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 associação com a pirâmide de Maslow, que mostra a hierarquia das necessidades humanas para uma explicação sobre o que torna a experiência do usuário de um aplicativo bem-sucedida; enquanto sua aplicação deve ser funcional, confiável e útil, também deve ser prazerosa.
A pirâmide de Walter sobre a experiência de uso de um aplicativo.
Usando emoções nos estados vazios
Voltando ao tópico de caixas de entrada, note algo interessante sobre os diferentes tipos estado vazio; isto é, como algumas caixas de entrada parabenizam você por não ter tudo resolvido, enquanto outros aplicativos incentivam a preenchê-los.
Exemplo do uso de sentimentos em estados vazios feito pelo Google Hangouts
O tipo de sentimento que 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 o 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).
Exemplo que fiz num empty states para o aplicativo Farmin.
Use e abuse das emoções para incentivar seu usuário a preencher o estado vazio, como disse anteriormente, 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 sempre por que 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 acesse esta coleção aqui ó: //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!
