Como criar estados vazios e buscas sem resultados

Uma lista de projetos em branco pode significar que alguém nunca criou um projeto. Também pode significar que sua busca não encontrou correspondências. As telas podem ter o mesmo retângulo vazio, mas pedem explicações e ações diferentes.

A diferença prática está no motivo da ausência. Uma coleção realmente vazia costuma precisar de uma forma de começar ou de explicar como o conteúdo chega. Uma busca sem resultados precisa permitir revisar consulta, filtros ou escopo que ocultaram conteúdo disponível. Mandar as duas pessoas para “Criar projeto” pode transformar um problema simples de busca em trabalho duplicado.

Nenhum resultado é um tipo de estado vazio. A distinção útil é entre coleção vazia e consulta sem correspondências: a primeira muda quando chega conteúdo; a segunda, quando muda a solicitação.

Pergunte o que faria o conteúdo aparecer

Antes de escrever o título, complete esta frase: o conteúdo apareceria aqui se a pessoa fizesse o quê? A resposta costuma ser suficiente para separar uma visualização vazia útil de uma genérica.

Se a resposta for “criasse seu primeiro projeto”, a tela pode explicar o que um projeto contém e oferecer essa ação. Se for “removesse o filtro Arquivados”, ela deve ajudar a mudar o filtro. Se for “esperasse a solicitação terminar”, a interface ainda está carregando. Se for “recuperasse a permissão”, um botão de criação talvez seja irrelevante ou esteja indisponível.

Essa pergunta também evita um erro comum de redação: tratar a ausência de linhas visíveis como prova de que não existem dados. A visualização talvez saiba apenas que nenhum registro acessível corresponde à solicitação atual. Sua mensagem deve refletir esse conhecimento, em vez de fazer uma afirmação mais ampla sobre o workspace inteiro.

O artigo do Nielsen Norman Group sobre estados vazios descreve o valor de explicar o estado do sistema e oferecer um caminho adequado para iniciar uma tarefa. Também alerta para não mostrar uma mensagem de ausência de resultados enquanto o conteúdo ainda está carregando. Essa base é útil; a decisão específica continua dependendo do que a aplicação sabe sobre a coleção e a solicitação atuais.

Power BI explica a chegada do conteúdo; NexTag mostra a importância da hierarquia

O artigo do NN/G sobre estados vazios inclui uma visualização de itens recentes do Microsoft Power BI que explica como o conteúdo chega: abrir um conteúdo faz com que apareça em Recents. O detalhe importante é a relação de causa. A visualização não sugere que a conta inteira esteja vazia nem que a pessoa precise criar algo novo.

Um caso contrastante aparece na pesquisa do NN/G sobre buscas sem resultados. Numa página histórica de busca do NexTag, um participante não percebeu a pequena mensagem de ausência de correspondências e olhou o conteúdo de maior destaque abaixo dela. O traçado de rastreamento ocular não registrou fixações na própria mensagem. Havia sugestões de recuperação, mas o participante não tinha percebido por que precisava delas.

A lição não é que toda visualização vazia precise de um título enorme. A mensagem do Power BI tem uma função local: explicar uma visualização dentro de um workspace existente. Já uma página de resultados de busca precisa interromper a expectativa de que a área principal contenha resultados correspondentes. Dê ao estado destaque suficiente para seu contexto e depois torne fácil encontrar a próxima ação útil. Ilustrações decorativas e recomendações sem relação podem prejudicar essa sequência mesmo quando o texto está tecnicamente presente.

Escolha o estado pelos fatos, não por um array vazio

Uma resposta de tamanho zero não basta para escolher a interface. A solicitação pode estar pendente, ter falhado, estar sujeita a restrições ou ter sido concluída com sucesso, mas sem conteúdo. Numa implementação real, a mensagem deve ser escolhida pelo estado e pelo escopo da solicitação, além da contagem de registros visíveis.

A tabela se torna especialmente útil ao revisar transições. Digite uma consulta, substitua-a imediatamente por outra e deixe as respostas chegarem na ordem inversa. A visualização precisa mostrar o estado da solicitação ativa. Uma resposta vazia antiga não deve apagar um resultado mais recente que deu certo. Isso é um defeito no fluxo de dados; outra ilustração não vai resolvê-lo.

Uma pergunta prática de revisão é “O que você faria agora?”. Mostre a tela sem descrever seu estado antes. Se a pessoa escolher Criar porque não encontra a consulta preservada, os controles de recuperação precisam de atenção. Se esperar porque a visualização parece inacabada, esclareça se o processamento terminou. Registre a interpretação, não apenas se alguém clicou no botão esperado: um clique correto por acaso pode esconder um estado mal compreendido.

Escreva para a causa da ausência

Primeiro uso: um começo crível

Uma visualização de primeiro uso deve ajudar a entender o objeto que será criado. “Nada aqui ainda” reconhece o espaço em branco, mas deixa sem explicação o propósito da área. “Mantenha briefs, links e notas de revisão de projetos juntos” dá a uma pessoa nova um motivo mais concreto para começar.

Associe a explicação a uma ação que a pessoa realmente possa realizar. Se criar um projeto exige apenas um nome, “Criar projeto” pode abrir esse primeiro passo pequeno. Se a configuração exige conectar um serviço externo, a ação deve nomear a conexão. Um botão que parece simples e abre um fluxo de configuração inesperadamente complexo pode criar outro problema logo depois de resolver o vazio.

A quantidade de explicação deve combinar com a familiaridade provável. Quem abre um workspace de projetos pela primeira vez pode apreciar um exemplo curto. Quem apagou deliberadamente a última busca salva provavelmente não precisa de uma introdução à pesquisa. A coleção está vazia em ambos os casos, mas as pessoas têm conhecimentos diferentes.

Tenha cuidado com conteúdo de amostra. Linhas de demonstração podem tornar o conceito tangível, mas devem ser identificadas inequivocamente como exemplos e não se passar pelos dados da pessoa. Se o projeto de exemplo inclui o status “Cliente aprovou”, ninguém deve poder confundi-lo com uma aprovação real. O estado vazio precisa reduzir a incerteza, não substituí-la por uma ficção atraente.

Sem resultados: revise a solicitação

“Nenhum resultado encontrado” informa que a busca terminou, mas deixa a causa e a recuperação sem explicação. Uma mensagem útil de ausência de resultados preserva a relação entre a solicitação e seu desfecho. Numa busca, mantenha a consulta digitada visível e editável. Na filtragem, mantenha os filtros ativos visíveis. Caso contrário, a pessoa precisa lembrar o que pediu antes de decidir o que mudar.

Um título claro para nosso exemplo seria “Nenhum projeto corresponde a ‘autumn launch’”. Se o filtro de data for a restrição provável, a explicação pode dizer “O período atual é de 1 a 7 de outubro”. Essa informação é útil mesmo quando a aplicação não consegue saber se a ausência de correspondências vem da consulta ou do período.

Escolha ações de recuperação que alterem a condição relevante. “Remover filtro de data” é mais preciso que “Recomeçar” quando há um filtro de data ativo. “Limpar todos os filtros” é adequado quando realmente remove todos eles; se mantiver a consulta intacta, o texto deve tornar essa distinção compreensível. Uma redefinição que altere silenciosamente tanto a busca quanto o escopo dos filtros pode surpreender quem pretendia mudar apenas uma coisa.

As orientações do Nielsen Norman Group para páginas de busca sem resultados recomendam tornar o desfecho evidente, manter caminhos para seguir adiante e evitar um tom que ridicularize a pessoa. Aplique esses princípios à tarefa em questão. Uma busca de projetos, um catálogo de produtos e uma biblioteca de documentos jurídicos não precisam das mesmas sugestões nem das mesmas imagens.

Se mostrar alternativas sugeridas, explique o que elas são. “Projetos relacionados” não deve parecer uma lista de resultados para a consulta que não deu certo. Coloque a explicação sobre a ausência de resultados antes das sugestões e dê à coleção alternativa um rótulo próprio. A pessoa não deveria precisar deduzir por que apareceram itens aparentemente irrelevantes depois de procurar algo específico.

Diga só o que o sistema pode estabelecer

“Não existem projetos” é uma afirmação ampla. “Nenhum projeto corresponde a estes filtros” é mais restrita. “Nenhum projeto está visível para você neste workspace” expressa outro limite. Escolha entre essas frases com base nas evidências disponíveis à interface, e não em qual delas cabe melhor numa única linha.

Isso importa em sistemas com conteúdo privado ou restrito. Um resultado vazio não significa necessariamente que um objeto não existe. Pode significar que a pessoa não consegue vê-lo. A equipe de produto precisa decidir o que pode ser revelado e quais ações de recuperação são adequadas. O design não deve expor a existência de registros confidenciais apenas para tornar a mensagem mais específica.

Mesmo quando não há restrições de permissão, a visualização pode ter uma perspectiva incompleta. Índices de busca podem ser atualizados depois que o conteúdo é salvo, e importações talvez ainda estejam sendo processadas. Se a aplicação sabe que uma importação está em andamento, pode descrever essa condição. Se não sabe, evite inventar uma promessa tranquilizadora de que os itens aparecerão logo.

Para o workspace fictício, defina uma regra simples de redação: uma consulta bem-sucedida sem correspondências pode gerar “Nenhum projeto correspondente”; uma contagem confirmada de zero itens na coleção pode gerar “Ainda não há projetos”. Uma consulta que falhou não gera nenhuma dessas mensagens. Essa distinção simples impede que um problema de rede adote o tom otimista do primeiro uso.

Preserve estrutura suficiente para facilitar o próximo passo

Uma visualização vazia pode ser mais tranquila visualmente que uma lista preenchida e ainda manter os controles úteis no lugar. A busca, os marcadores de filtros, o título da página e o escopo da coleção ajudam a explicar onde a pessoa está. Remover tudo isso em favor de uma ilustração centralizada pode deixar a tela atraente, mas dificultar a recuperação.

Na nossa lista de projetos sem resultados, mantenha o campo de busca no mesmo lugar e o workspace selecionado visível. Coloque a explicação na área em que os resultados normalmente apareceriam. Assim, a pessoa pode revisar a solicitação sem procurar um controle que mudou de lugar porque a contagem de resultados mudou.

Uma tela de primeiro uso tem mais liberdade. Não há linhas para comparar, e uma mensagem introdutória maior pode ser adequada. Mesmo assim, mantenha a navegação familiar e um título de página claro. Antes de pressionar o botão, a pessoa deve saber se está criando um projeto para seu espaço pessoal ou para um espaço compartilhado da equipe.

Evite fazer o espaço ocupado pelo layout depender de uma única frase curta em inglês. Teste nomes de projetos mais longos, traduções mais extensas e filtros que quebrem em duas linhas. Visualizações vazias costumam ser desenhadas em larguras confortáveis de desktop e depois comprimidas em painéis laterais estreitos. Um design que só funciona com “No items” não está pronto para conteúdo realista.

Escolha a ação útil de menor custo

Uma ação de recuperação deve permitir avançar sem descartar trabalho desnecessariamente. Se a pessoa selecionou com cuidado um workspace, um intervalo de datas e um responsável, limpar tudo é uma grande redefinição. Isso pode resolver a ausência de resultados, mas também destrói o contexto que ela estava tentando investigar.

Ofereça uma mudança menor quando o sistema permitir. Remover um filtro individual pode ser mais útil que limpar toda a solicitação. Ampliar o intervalo de datas pode preservar uma palavra-chave relevante. Voltar à pasta superior pode informar mais que mandar a pessoa para a página inicial da aplicação.

Não dê a entender que a menor ação tem sucesso garantido. “Remover o filtro de data” descreve uma operação com honestidade. “Mostrar seus projetos” promete um resultado que a interface talvez não saiba se pode entregar. Se houver uma contagem prévia disponível e confiável, o produto pode fazer uma sugestão mais firme; caso contrário, mantenha o rótulo da ação factual.

Criar ainda pode ser útil numa página sem resultados, mas geralmente deve ter um papel secundário. Alguém pode procurar um projeto antes de decidir criá-lo. Ofereça esse caminho sem fazer a criação parecer a única forma de recuperação. Num sistema em que duplicatas são custosas, considere explicar que a busca cobriu o workspace atual, em vez de sugerir um novo objeto cedo demais.

Percorra a mesma página no tempo

A revisão mais reveladora é uma sequência curta, não uma coleção de capturas vazias isoladas. Comece com uma lista preenchida, aplique um filtro que não produza correspondências, remova-o e confirme que a lista original retorna. Depois crie uma coleção realmente vazia e compare sua mensagem e sua ação.

No workspace fictício, a pessoa começa com seis projetos na coleção atual. Ela escolhe um responsável que não tem projetos na semana selecionada. A área de resultados informa a ausência de correspondências e mantém visíveis os controles de responsável e data. Remover o filtro de data restaura os projetos correspondentes no período maior, preservando o responsável selecionado.

Agora vá a um workspace novo sem projetos. A mesma área de resultados apresenta o propósito dos projetos e oferece criação. Limpar filtros é desnecessário porque nenhum está ativo e a coleção subjacente está vazia. A interface pode compartilhar tipografia e espaçamento com o primeiro estado sem compartilhar a mensagem.

Essas são questões de implementação, além de questões de design. Uma comparação estática pode especificar o comportamento desejado, mas a aplicação em funcionamento precisa de testes para o momento e a ordem das solicitações e para as mudanças de estado. Mantenha a revisão focada nessa pequena jornada, em vez de ampliá-la para um catálogo sem relação de todos os estados possíveis da interface.

Combine o tom com a situação

Uma lista pessoal de favoritos vazia pode ter um tom leve e acolhedor. Um log de auditoria vazio durante a investigação de um incidente deve ser calmo e preciso. A mesma ilustração sorridente e a frase “Vamos começar!” não atenderiam bem às duas situações.

Considere a preocupação mais provável. Uma pessoa nova pode perguntar “O que pertence aqui?”. Quem procura um arquivo conhecido pode perguntar “Perdi acesso, escolhi o lugar errado ou digitei o nome errado?”. Quem revisa trabalho concluído talvez só precise confirmar que não resta nada. Fica mais fácil escolher o tom quando a pergunta subjacente é explícita.

Não parabenize a pessoa só porque uma lista tem zero linhas. Uma fila de tarefas vazia pode significar que tudo foi concluído, mas também pode significar que um filtro esconde as tarefas. Comemoração exige uma condição positiva confirmada. Se a aplicação não consegue estabelecer isso, uma explicação neutra é mais confiável.

Da mesma forma, evite pedir desculpas pelo primeiro uso comum. Não há nada inerentemente errado em uma coleção nova não ter registros. Reserve linguagem de interrupção para interrupções reais e faça com que visualizações vazias rotineiras pareçam uma parte normal do produto.

Faça a ilustração justificar espaço

Uma ilustração pode explicar o que aparecerá na coleção ou distinguir primeiro uso de uma busca sem resultados. Ela não deve empurrar a ação útil para fora da primeira tela nem fazer a página parecer um beco sem saída. Se remover a imagem torna a mensagem mais fácil de entender, revise a composição em vez de defender a decoração.

No exemplo, um desenho de linhas discreto de um card pode mostrar os tipos de informação de um projeto. Uma busca sem resultados talvez só precise de um símbolo pequeno de pesquisa, já que consulta e filtros fornecem contexto. Os dois estados podem compartilhar uma família visual sem usar a mesma imagem grande.

Mantenha explicações essenciais como texto real da interface. Uma ilustração pode reforçar a relação entre filtro e resultado, mas a redação precisa continuar fazendo sentido sem a imagem. Isso é especialmente importante quando há rótulos minúsculos que parecem nítidos no arquivo de design e ficam ilegíveis no layout estreito.

Revise a distinção no OpenDesign

Uma prévia HTML compatível no OpenDesign facilita comparar as alternativas. Monte os exemplos de coleção vazia e busca sem resultados com texto realista, ajuste textos ou estilos manualmente e inspecione-os com larguras predefinidas. Comentários enviados ao chat podem identificar a mensagem ou ação exata que precisa de revisão.

Para uma revisão útil, peça a alguém que explique o que aconteceu em cada tela e o que faria em seguida. Não apresente antes como “primeiro uso” e “estado vazio filtrado”: os nomes entregam a resposta que o design precisa comunicar. Se ambas geram a mesma interpretação, a diferença ainda não está clara o suficiente.

Verifique também as condições dos dados na aplicação em funcionamento: consulta ativa, escopo de permissão e limpeza de filtros precisam selecionar a mensagem que foi revisada no design.

Uma decisão pequena evita mal-entendido maior

Antes de aprovar uma área vazia, leia seu título como uma afirmação factual. Depois verifique se a aplicação sabe o suficiente para afirmá-la. Leia a ação principal como promessa sobre o que mudará e confirme se o controle realmente realiza essa mudança.