O Estado Vazio é o Seu Produto, Não uma Ideia Secundária

A tela mais importante do seu produto é aquela que está vazia. Essa é a tela que a maioria das equipes lança por último, projeta com menos cuidado e, depois, esquece que existe.

Abra qualquer aplicativo novo pela primeira vez. A caixa de entrada está vazia, a lista de projetos está vazia, a busca não retorna nada, você acabou de limpar um quadro. Cinco momentos diferentes, cinco telas vazias diferentes, e quase todos os produtos as tratam como se fossem o mesmo problema.

Não são o mesmo problema. São cinco superfícies de design completamente diferentes, e juntas elas decidem se alguém continua usando seu produto ou fecha a aba silenciosamente.

Por que o estado vazio é a sua verdadeira primeira impressão

As pessoas não julgam seu produto pela página inicial. Elas o julgam pela segunda tela, aquela depois do cadastro, aquela em que esperavam algo mágico e se depararam com uma ilustração triste que diz "Ainda não há nada aqui".

Esse momento é toda a apresentação, condensada. Ele mostra ao usuário o que é possível, o que fazer em seguida e o quanto você realmente pensou nele. Acerte e ele se interessa. Erre e ele desiste, e nenhuma quantidade de e-mails de reengajamento o fará voltar. Uma tela vazia bem projetada cumpre três funções simultaneamente. Ela ensina a finalidade do recurso, define o tom emocional do produto e oferece ao usuário uma próxima ação específica, mais fácil do que fechar a aba.

A maioria das telas vazias não faz nada disso. Elas exibem um desenho animado amigável, pedem desculpas por estarem vazias e esperam que o usuário descubra sozinho. Isso não é design, é simplesmente ignorar o problema.

Os cinco tipos de telas vazias (e por que elas precisam de tratamentos diferentes)

Tratar todas as telas vazias da mesma forma é o pecado original do design de telas vazias. Aqui estão os cinco momentos distintos, em ordem de frequência com que as equipes erram ao lidar com eles.

1. Tela vazia de primeira utilização. O usuário acabou de se cadastrar, nunca viu este produto antes e a tela está vazia porque ele não fez nada. Este é o estado vazio de maior impacto no seu produto.

2. Tela vazia de estado zero. O usuário já utilizou o produto antes, mas uma área específica está naturalmente vazia, como um novo projeto, um novo espaço de trabalho ou uma lista recém-criada. Eles conhecem o produto, mas não conhecem essa parte específica dele.

3. Pós-limpeza - vazio. O usuário acabou de esvaziar algo propositalmente. Limpou a caixa de entrada, concluiu todas as tarefas e arquivou tudo. Este é um momento de realização, não de ausência.

4. Erro - vazio. A tela está vazia porque algo falhou. A busca falhou, a conexão caiu, a integração está mal configurada. O usuário pensa que o produto está com defeito, mesmo quando não está.

5. Busca - vazio. O usuário digitou uma consulta e não obteve resultados. Ele tinha intenção, investiu esforço e você não retornou nada. Este é o estado vazio mais recuperável, se você fizer da maneira correta.

Cada tipo requer uma combinação diferente de explicação, ação e tom. Um estado de primeira execução precisa ensinar, um estado pós-limpeza precisa celebrar, um estado de busca - vazio precisa sugerir. Usar o mesmo modelo genérico "Nada aqui" para todos os cinco significa desperdiçar quatro deles.

Lado a lado: o que cada estado vazio deve e não deve fazer

As diferenças ficam óbvias quando você os coloca lado a lado. Aqui está um guia rápido.

| Tipo vazio | Quando aparece | O que deve fazer | O que evitar |

|---|---|---|---|

| Primeira execução | O usuário acabou de se cadastrar e ainda não fez nada | Ensine a ação principal com dados de exemplo ou uma primeira tarefa guiada | Carinha triste com "Comece agora" sem destino |

| Estado zero | Uma área específica é nova, mas o usuário já conhece o produto | Sugira 2 ou 3 ações concretas, dê dicas sobre modelos | Repetir todo o tour de integração |

| Pós-limpeza | O usuário acabou de concluir, arquivar ou esvaziar uma lista | Comemore e, em seguida, apresente a próxima ação razoável | Agir como se o usuário tivesse feito algo errado |

| Erro-vazio | Os dados não puderam ser carregados ou sincronizados | Descreva o que falhou em linguagem simples, ofereça uma nova tentativa, inclua um link para uma página de status | Exibir um estado vazio genérico e fingir que nada está errado | | Busca vazia | O usuário digitou uma consulta e não obteve resultados | Mostre o que ele pesquisou, sugira consultas relacionadas, ofereça a opção de criar uma nova | "Nenhum resultado encontrado" com um beco sem saída |

Observe que os modos de falha são quase idênticos em toda a tabela. A maioria dos produtos usa a mesma mensagem genérica para cada tela vazia, e é por isso que todo estado vazio na maioria dos aplicativos parece igualmente medíocre.

As quatro estratégias de design que fazem os estados vazios funcionarem

Existem exatamente quatro estratégias que você pode usar. A maioria dos bons estados vazios utiliza duas ou três delas em combinação, nunca as quatro ao mesmo tempo, porque isso gera ruído.

1. Dados de exemplo. Preencha a tela com conteúdo de exemplo realista com o qual o usuário possa interagir, editar ou limpar. O painel do Stripe com uma opção "Exibir dados de teste" é o exemplo perfeito.

2. Ações sugeridas. Apresente duas ou três próximas etapas específicas como botões ou cartões, e não um vago botão "Começar". As sugestões de modelo da Notion em uma página nova são a solução ideal.

3. Ilustração didática. Use o visual para mostrar como será o estado preenchido, e não um desenho triste. Uma pequena prévia de como uma caixa de entrada ou um quadro ficará quando estiver cheio.

4. Texto que define o tom. De três a doze palavras que estabeleçam a personalidade do produto e digam ao usuário para que serve este espaço. O texto da caixa de entrada vazia da Linear transmite mais a voz da marca em uma única linha do que a maioria das landing pages.

O segredo é escolher a combinação certa para cada estado. A primeira visita requer dados de exemplo mais ações sugeridas; a visita após a limpeza requer um texto que defina o tom e talvez uma pequena comemoração; a visita após a busca requer sugestões e uma oferta para criar algo. Adapte a ação ao momento.

Produtos reais que acertam nesse ponto (e o que copiar)

A maneira mais rápida de internalizar isso é estudar produtos que respeitam o estado vazio como um problema de design. Uma breve análise de alguns dos melhores.

Caixa de entrada vazia da ⟦MARCA4⟧. A ⟦MARCA5⟧ trata a caixa de entrada vazia como um pequeno momento de férias. O texto é seco, levemente engraçado, alinhado à marca e o visual é calmo em vez de pedir desculpas. Não há botão "Começar" porque você não precisa de um.

Sugestões de modelos da ⟦MARCA14⟧. Uma nova página da ⟦MARCA15⟧ está tecnicamente vazia, mas nunca dá essa sensação. O cursor está pronto para uso, os comandos de barra são sugeridos e as sugestões de modelos aparecem contextualmente. Você nunca está olhando para uma parede em branco, você está olhando para um menu de opções.

Painel de rascunhos da ⟦MARCA0⟧. Uma nova conta da ⟦MARCA1⟧ não mostra uma lista de arquivos em branco. Ela exibe o espaço de rascunhos com arquivos de exemplo, dicas sobre como criar uma equipe e um caminho claro para a primeira tela. Você aprende a usar o produto observando-o.

Cron, agora calendário integrado da ⟦MARCA16⟧. Ao concluir a integração, o calendário exibe seus eventos conectados reais, mas também mostra a sobreposição de atalhos de teclado e alguns eventos de exemplo que demonstram a personalidade do produto. Você se sente orientado em dez segundos.

Primeiro lançamento do Things 3. O Things é lançado com um projeto de integração que usa o produto para ensinar o produto. Cada tarefa é uma lição. Ao concluir o último item, você já usou todos os recursos necessários e o estado vazio representa sua vida real.

** ## Mais produtos que valem a pena copiar (Granola, Superhuman, Stripe, Replit, ChatGPT)

Mais alguns, com foco em produtos mais recentes e ferramentas de IA, porque os padrões ainda estão se consolidando nesse segmento.

Primeira solicitação de transcrição do Granola. O Granola sabe que o momento mais constrangedor é a primeira reunião, quando você não tem nada para transcrever. Por isso, oferece a opção de gravar um breve teste ou importar uma transcrição de exemplo para que você possa ver o que a IA faz. Isso elimina o dilema do ovo e da galinha que o produto teria de outra forma.

Integração do Superhuman. O Superhuman realiza uma chamada de integração com um atendente humano antes mesmo de você ver uma caixa de entrada vazia, mas a primeira utilização do aplicativo ainda ensina com exemplos de e-mails e um passo a passo com atalhos de teclado. Quando você estiver usando o aplicativo sozinho, o estado vazio parecerá um recurso.

** Painel vazio da Stripe. A Stripe exibe um painel totalmente preenchido com dados de exemplo assim que você se cadastra. Há um indicador claro de "Visualizando dados de teste" e um clique alterna para sua conta real, vazia. Você vê o destino antes mesmo de ver o caminho até ele.

Espaço de trabalho vazio do Replit. Um novo espaço de trabalho do Replit não está em branco. É um editor de código com um arquivo inicial, um console com uma mensagem amigável e um botão de execução que já funciona. Você começa a escrever código nos primeiros dez segundos.

Página de prompts em branco da ChatGPT. O estado vazio da ChatGPT é notoriamente composto por uma única caixa de texto, e isso funciona bem porque o produto tem apelo cultural. Ele ainda adiciona prompts sugeridos na parte inferior para novos usuários, o que é o mínimo necessário. Se você não tem a marca da ⟦MARCA22⟧, não copie o estado vazio da ⟦MARCA23⟧.

Os modos de falha, nomeados e expostos

Estados vazios problemáticos se enquadram em um pequeno número de padrões reconhecíveis. Assim que você os nomear, pare de usá-los.

A ilustração triste. Um mascote amigável com olhos caídos ao lado de "Nada aqui ainda". Parece fofo na ⟦MARCA2⟧, mas soa ofensivo no produto. O usuário não está triste, ele acabou de se cadastrar.

O botão "Começar" que não leva a lugar nenhum. Uma grande chamada para ação que abre um formulário genérico de criação sem contexto, sem modelo, sem exemplo. O usuário clica, vê um formulário em branco e agora o estado vazio se estende por duas telas.

O estado sem saída. A busca não retorna nada, fim da história. Sem sugestões, sem resultados relacionados, sem oferta para criar o que o usuário pesquisou. O usuário digitou algo, você disse não, a conversa acabou.

O vazio infinito. Comum em produtos de IA. Toda a interface é uma caixa de entrada vazia esperando por uma instrução. Sem exemplos, sem valores padrão, sem trilhos. O usuário digita "oi" e sai.

A matemática da ativação: por que os primeiros 60 segundos são cruciais

Todo produto tem um momento de ativação, a primeira vez que o usuário faz algo que torna o produto valioso. Enviar a primeira mensagem, criar o primeiro projeto, importar o primeiro contato, gerar o primeiro resultado.

O estado vazio é a tela entre o cadastro e a ativação. Cada segundo que o usuário passa olhando para "Nada aqui ainda" é um segundo que ele poderia ter usado para ativar o produto, e a taxa de abandono é brutal. Os primeiros 60 segundos de uma sessão têm uma correlação mais forte com a retenção do que os próximos 60 minutos juntos.

É por isso que dados de exemplo e ações sugeridas superam telas em branco quase sempre. Eles reduziram a distância de ativação de "decidir o que fazer, depois descobrir como, e então fazer" para "clicar aqui, ver o que acontece, aprender a usar o produto". Três passos para um.

Se sua taxa de ativação é baixa, seus estados vazios geralmente são a solução mais barata em todo o produto. Mais barato do que redesenhar o onboarding, mais barato do que tutoriais, mais barato do que sequências de e-mails. Basta colocar algo útil na tela.

A perspectiva da IA: projetando para o vazio infinito

Produtos de IA têm um problema único com os estados vazios. A interface geralmente é uma única caixa de entrada que, teoricamente, pode fazer qualquer coisa, o que significa que, na prática, não pode fazer nada até que o usuário saiba o que perguntar. Este é o vazio infinito.

ChatGPT, Claude, geradores de imagens, Cursor, todas as ferramentas de IA enfrentam isso. A solução ingênua é um enorme campo de texto em branco com "Pergunte-me qualquer coisa". O usuário, diante de infinitas possibilidades, digita algo sem importância, recebe uma resposta genérica e conclui que o produto é mediano. A solução é a mesma dos produtos tradicionais, só que mais precisa. Sugestões de comandos que demonstram a amplitude das habilidades da IA, exemplos de conversas ou gerações que comprovam a qualidade, alguns modelos iniciais que ajudam o usuário a superar a dificuldade inicial. A estratégia "gravar uma reunião de teste" da Granola aplicada a qualquer tarefa da sua IA.

Trate a caixa de entrada como uma frase que o usuário está terminando, não como uma frase que ele está começando. Dê a ele a primeira metade. O vazio infinito se torna um primeiro passo guiado, e a ativação aumenta.

Tom e pós-limpeza: os estados vazios com sentimentos

A maioria das equipes para na primeira execução. O estado pós-limpeza é onde o produto passa a ser percebido como um colega que notou a interação.

O tom é fundamental. Os estados vazios são interpretados em momentos de baixa confiança. O usuário é novo, está perdido, acabou de concluir algo ou cometeu um erro. Um estado vazio sarcástico em um aplicativo financeiro soa desrespeitoso, um estado formal em uma ferramenta criativa soa rígido, um estado alegre em um caso de erro soa confuso. Escreva o texto do estado vazio com uma voz única, variando-o intencionalmente de acordo com o contexto.

Após a limpeza da caixa de entrada merece uma pequena comemoração. O usuário acabou de concluir uma lista, arquivou tudo e zerou a caixa de entrada. O Things 3 exibe uma pequena mensagem de conquista quando você conclui cada tarefa. O Linear comemora discretamente uma fila de triagem vazia. A dopamina é real e é um dos poucos momentos em que o produto fica genuinamente feliz com o usuário.

Não exagere. Uma animação de confete toda vez que alguém conclui cinco tarefas se torna repetitiva, enquanto um reconhecimento claro e calmo, juntamente com uma sugestão atenciosa sobre "próximos passos", sempre funciona. Após zerar a caixa de entrada, sugira planejar o dia. Após concluir um projeto, sugira revisar o próximo.

Erro e busca: os estados vazios que conquistam ou destroem a confiança

Esses são os dois estados vazios que mais preocupam o usuário, pois ambos ocorrem durante a execução de uma tarefa, com a intenção em jogo.

O estado vazio de erro deve ser projetado para gerar confiança. Quando os dados não carregam, a maioria dos produtos exibe um estado vazio genérico ou um rastreamento de pilha disfarçado de erro. Ambos destroem a confiança de maneiras diferentes. A versão genérica é pior porque o usuário nem sequer sabe que o produto está com defeito, assume que a caixa de entrada vazia é real e nunca mais retorna.

A estratégia correta é comunicar a falha de forma clara e objetiva. Diga ao usuário o que falhou, usando as palavras dele, não as suas. Ofereça uma nova tentativa, um link para uma página de status, indique a configuração incorreta. Pontos extras se o estado vazio de erro herdar a estrutura visual do estado preenchido, para que o usuário entenda o que está perdendo.

O estado vazio de busca é o mais fácil de recuperar. O usuário digitou algo, você sabe exatamente o que ele quer, e exibir "Nenhum resultado encontrado" com uma carinha triste é uma prática inadequada. A versão mínima viável repete a consulta e sugere pesquisas relacionadas. A versão boa oferece a criação do que foi pesquisado. A versão excelente usa a consulta para sugerir um modelo, uma ação ou um artigo de ajuda.

A pesquisa vazia de GitHub geralmente sugere a criação de uma solicitação com a consulta como título. Notion sugere a criação de uma página. Linear sugere o registro de um bug. A pesquisa vazia é o único caso em que "Começar" pode ser útil, pois o destino agora é óbvio.

Como auditar os estados vazios do seu produto

Você não pode corrigir o que não catalogou. A maioria das equipes se surpreende com a quantidade de estados vazios que possui quando os contabiliza. Execute esta auditoria, nesta ordem:

Abra todas as páginas do seu produto em uma nova sessão anônima, com uma conta de usuário nova. Capture a tela de todas as páginas que apresentem qualquer tipo de espaço vazio. Liste-os em uma planilha, uma linha por tela, com colunas para tipo, texto atual, visual atual e ação atual.

Em seguida, rotule cada um com um dos cinco tipos: primeira execução, estado zero, pós-limpeza, erro vazio e busca vazia. Você descobrirá que a maioria dos produtos tem de dez a trinta estados vazios, e apenas um ou dois foram projetados intencionalmente.

Para cada um, faça três perguntas: ele ensina para que serve esta superfície? Ele fornece uma próxima ação específica? Ele soa como o resto do produto? Se a resposta for sim para todas, deixe como está. Se alguma resposta for não, corrija esse movimento específico e siga em frente.

Se você quiser transformar isso em uma atividade em equipe, reserve 90 minutos e convide o designer, o gerente de produto e um engenheiro que deteste escrever textos. A agenda é muito simples e vocês podem entregar os resultados na mesma semana.

Nos primeiros 30 minutos, façam a auditoria em equipe, compartilhando uma tela e analisando cada superfície vazia. Discutam sobre a qual tipo cada uma pertence. Discordar é normal; o importante é a conversa.

Nos próximos 30 minutos, escolha os três estados vazios com maior tráfego e reescreva-os imediatamente. Uma frase que defina o tom da página, duas ações sugeridas e uma decisão sobre adicionar ou não dados de exemplo. Resista à tentação de aperfeiçoar o visual; priorize o texto.

Nos últimos 30 minutos, atribua responsáveis ​​e defina uma meta de entrega para uma semana. Não transforme isso em uma iniciativa trimestral. Os estados vazios são pequenos, contidos e a entrega é rápida. Publique três esta semana, mais três na próxima e, dentro de um mês, seu gráfico de ativação estará em movimento.

O estado vazio é a linguagem corporal do produto

Você pode simular o site de marketing. Você pode simular a página inicial. Mas não pode simular o estado vazio, porque é o momento em que o produto para de prometer e começa a entregar.

Quando o usuário acessa uma tela sem nada, todas as suas escolhas ficam evidentes. Você pensou nele ou entregou a versão padrão? Você o ensinou a usar o produto ou se desculpou por estar vazio? Você escreveu um texto que soa como o de uma pessoa ou como o de um mago de 2008?

Trate a tela vazia como a porta de entrada, não como uma nota de rodapé. Projete-a primeiro, não por último. Audite-a mensalmente. Contrate alguém para ser o responsável por ela.

A tela mais negligenciada do seu produto é também aquela que seus usuários veem com mais frequência. Faça com que ela conte.