Uma lista sem itens pode significar que o trabalho ainda não começou, que uma busca não encontrou correspondências ou que faltam permissões. Essas situações parecem semelhantes numa tela vazia, mas exigem respostas diferentes. Projetar estados vazios é organizar essa diferença: explicar o que aconteceu e apresentar uma ação pertinente, sem transformar toda ausência de conteúdo em erro ou numa oportunidade de promoção.

Descubra por que o espaço está vazio

Antes de desenhar uma ilustração, investigue a condição que produz a ausência. O sistema sabe que não existem registros? Ainda está carregando? A consulta falhou? A pessoa não tem acesso? Essa distinção precisa ser discutida com quem implementa para que a interface apresente uma mensagem coerente.

O padrão de estados vazios do Carbon Design System organiza situações como primeiro uso, resposta a uma ação e problemas que exigem orientação. Use a referência para ampliar o inventário, sem pressupor que uma única composição resolve todas as condições do produto.

Escreva uma frase interna para cada caso, descrevendo causa e informação disponível. Essa descrição serve à equipe antes de virar mensagem pública. Se a condição técnica ainda não está definida, registre a dúvida em vez de preencher a tela com um texto genérico que pode comunicar algo incorreto.

Separe primeiro uso e falta de resultados

No primeiro uso, a pessoa pode precisar entender o que aparecerá naquela área e como iniciar. Uma explicação curta com uma ação concreta costuma ser mais útil do que um título abstrato. O conteúdo deve mostrar a função do espaço sem exigir que a pessoa leia uma apresentação extensa do produto.

Numa busca sem resultados, o objetivo é ajudar a ajustar a tentativa. A interface precisa conservar contexto, como consulta e filtros aplicados. Mandar criar o primeiro item pode ser inadequado quando a pessoa estava procurando um registro que já deveria existir ou não tem permissão para cadastrar.

O artigo sobre busca interna no site ajuda a relacionar consulta e acesso ao conteúdo. Um estado sem resultados deve trabalhar junto com a busca, preservando o caminho de revisão em vez de substituir a experiência por uma mensagem isolada.

Escreva uma mensagem que corresponda ao estado

Comece pela informação principal. Não há itens cadastrados, nenhum resultado corresponde aos filtros ou esta área exige outro nível de acesso são mensagens com significados distintos. A redação deve refletir o que o sistema sabe, evitando conclusões que não podem ser sustentadas naquela condição.

A definição de empty state no sistema da Atlassian relaciona ausência de dados e orientação sobre o que fazer depois. Esse princípio ajuda a revisar a utilidade do texto: a pessoa entende a situação e consegue identificar uma possibilidade pertinente de continuidade?

Evite linguagem que atribui culpa. Uma consulta sem resultado não significa necessariamente que alguém pesquisou errado. Explique a condição e ofereça caminhos, como revisar termos ou retirar filtros, quando essas ações realmente estiverem disponíveis e fizerem sentido para a tarefa.

Escolha uma ação principal possível

O botão precisa executar algo que a pessoa pode fazer naquele contexto. Criar um registro é útil quando ela tem permissão e deseja começar. Solicitar acesso pode ser pertinente em outra situação. Uma ação indisponível ou sem destino definido cria uma promessa que a interface não cumpre.

Use rótulos que indiquem a consequência. Criar projeto, limpar filtros e voltar à lista informam mais do que continuar. Se houver uma ação secundária, confira se ela ajuda uma necessidade diferente e não apenas repete o mesmo caminho com outro nome.

O guia de UX writing para campos e mensagens ajuda a conectar informação e ação. A orientação deve reduzir dúvida sem prometer recuperação automática quando a causa depende de suporte, autorização ou uma condição que o sistema não controla.

Trate ilustração como apoio

Uma imagem pode tornar o estado mais reconhecível e aproximar a linguagem da marca. Ela precisa apoiar a mensagem, com tamanho proporcional ao espaço e ao contexto. Em áreas pequenas, uma ilustração dominante pode ocupar a atenção que deveria estar no texto ou no controle de continuidade.

Evite humor quando a situação envolve perda de acesso ou falha importante. Uma composição lúdica pode funcionar numa área de primeiro uso e parecer inadequada quando a pessoa precisa concluir uma tarefa urgente. Tom e expressão devem acompanhar a situação, além de uma regra geral de personalidade da marca.

Se a informação essencial está na imagem, ofereça uma forma adequada de compreendê-la por outros meios. O estado precisa continuar útil quando o elemento visual não é percebido ou não carrega. A ilustração não deve assumir sozinha a responsabilidade de explicar a causa da ausência.

Preserve estrutura e contexto

A pessoa deve reconhecer onde está mesmo quando não há conteúdo. Mantenha títulos e navegação pertinentes e evite reorganizar a tela de forma tão intensa que o retorno ao estado preenchido pareça outra área do produto. A continuidade ajuda a relacionar mensagem e tarefa.

Em buscas filtradas, mostre o que pode ser revisado. Se todos os filtros desaparecem quando não há resultados, a interface elimina justamente os controles necessários para ajustar a consulta. O estado vazio deve integrar a experiência, preservando os recursos úteis à recuperação.

Considere também áreas parcialmente vazias. Uma página pode ter dados em um painel e nenhum item em outro. A mensagem deve ficar associada ao espaço correto, sem sugerir que todo o produto está sem conteúdo ou indisponível quando a condição afeta apenas uma parte.

Exercício: desenhe três ausências de uma biblioteca fictícia

Imagine uma biblioteca de materiais de marca de uma agência fictícia. A interface possui pastas, busca e permissões. O exercício será criar estados para uma pasta recém-criada, uma busca filtrada sem correspondências e uma área sem acesso. Use conteúdo de exemplo e registre que não se trata de um produto real.

Na pasta nova, explique o que poderá ser guardado e ofereça uma ação de inclusão, caso o perfil permita. Na busca, preserve consulta e filtros e indique como revisar a tentativa. Na área restrita, explique a condição de acesso sem afirmar que o conteúdo foi removido ou que não existe.

Compare as três mensagens lado a lado. Se parecem intercambiáveis, revise causas e ações. A diferença deve estar no conteúdo e na orientação, sem depender apenas de trocar um ícone. Cada estado precisa ajudar a pessoa a construir uma interpretação adequada da situação.

Acrescente uma condição de carregamento e outra de falha à lista interna do exercício. Elas não devem reutilizar automaticamente o texto de ausência confirmada. Discuta com a equipe como distinguir essas condições para evitar que a pessoa receba uma conclusão antes de o sistema terminar sua tentativa.

Peça a alguém para explicar o que faria em cada tela. Esse retorno informal pode revelar uma orientação vaga ou uma ação difícil de prever. Registre as dúvidas e ajuste a proposta, sem apresentar a conversa como prova de que o padrão foi validado para todos os usuários.

Combine regras com desenvolvimento

Documente a condição de entrada de cada mensagem, o conteúdo apresentado e o destino de cada ação. Inclua permissões quando elas afetam o comportamento. A implementação precisa saber quando exibir um caso e quando preservar outro estado, como carregamento ou erro de conexão.

Confira o que acontece depois da ação. Se a pessoa limpa filtros, a interface deve refletir essa mudança e informar o resultado de maneira coerente. Se solicita acesso, precisa compreender o próximo passo, sem sugerir que a autorização já foi concedida quando existe uma análise pendente.

Avalie teclado, foco e anúncio das mudanças no ambiente implementado. A aparência da tela não confirma que a atualização pode ser percebida em diferentes formas de uso. A revisão deve observar o comportamento real e as informações disponíveis, com colaboração entre design e desenvolvimento.

Revise o padrão com conteúdo e escala reais

Mensagens longas podem funcionar numa página inteira e ocupar demais um painel lateral. Prepare versões adequadas às áreas previstas, preservando a informação essencial. O padrão deve orientar a composição sem obrigar a encaixar o mesmo texto e a mesma imagem em todos os espaços.

Confira traduções e nomes de ações quando o produto atende outros idiomas. Uma chamada que cresce pode alterar a hierarquia ou dificultar o uso do controle. O estado vazio merece a mesma atenção de conteúdo e responsividade que uma tela preenchida.

Na IV Criativa, estados vazios podem ser tratados como parte da tarefa que a pessoa está tentando concluir. Investigue a causa, escreva uma orientação precisa e ofereça uma ação possível. O design ganha utilidade quando a ausência deixa de ser uma tela sem resposta e passa a ter contexto e continuidade.