Design de estados vazios na UI: oriente o próximo passo quando não houver conteúdo

1. Diagnosticar porque o espaço está vazio

Trate um estado vazio como um relato sobre o produto, não como uma oportunidade de decoração. Pergunte o que aconteceu imediatamente antes de a tela aparecer, o que o sistema sabe e se a pessoa pode mudar a situação. NN/g descreve estados vazios como oportunidades para comunicar status, apoiar a aprendizagem e fornecer caminhos para tarefas importantes. Essas oportunidades dependem primeiro da identificação correta do estado.

Em particular, não exiba “Nenhum item” enquanto uma solicitação ainda estiver em execução. Mantenha um indicador de carregamento ou esqueleto visível até que o resultado seja conhecido. Se a solicitação falhar, explique a falha e a opção de recuperação. Se tiver sucesso com zero itens, diga que não existe conteúdo correspondente. Essa distinção evita que as pessoas confundam um atraso temporário ou problema no sistema com um resultado real.

2. Escreva um texto que corresponda à causa

Use um título para nomear o estado e um texto de apoio para explicar o que significa ou como proceder. Mantenha o título escaneável. Adicione uma frase apenas quando ela responder a uma pergunta real. As orientações de redação da Apple recomendam as próximas etapas claras em telas em branco, rótulos orientados para ações e mensagens de erro diretas que explicam como resolver o problema. Evite inteligência que obscureça o significado, títulos vagos como “Nada aqui” ou textos que culpem a pessoa.

Por exemplo, uma tela hipotética de itens salvos no primeiro uso pode dizer “Seus guias salvos aparecem aqui” seguido de “Salve um guia para retornar a ele mais tarde”, com um botão “Navegar nos guias”. Uma lista de verificação preenchida poderia dizer “Você está atualizado” e oferecer “Ver tarefas concluídas”. Esses exemplos descrevem realidades diferentes: uma ensina como preencher um recurso; o outro confirma um resultado bem-sucedido.

Para uma pesquisa bem-sucedida sem correspondências, uma mensagem hipotética poderia ser “Nenhum projeto corresponde a ‘orquídea’” e sugerir “Tente um termo mais amplo ou limpe os filtros”. Preserve a consulta e torne as alterações de filtro reversíveis sempre que possível. Para uma falha de rede, escreva “Não foi possível carregar os projetos” com “Tente novamente”. Evite alegar que não há projetos quando o sistema não foi capaz de verificar.

• Nomeie o objeto ou critério relevante para que a mensagem faça sentido fora do contexto.
• Use um verbo no botão, como “Criar projeto”, “Limpar filtros” ou “Tentar novamente”.
• Mantenha as instruções ao lado do conteúdo afetado e use texto, bem como cores ou imagens.
• Evite “Opa”, culpa e códigos técnicos, a menos que as pessoas precisem deles para resolver o problema.

3. Torne a próxima etapa útil, não automática

Execute uma ação quando alguém puder razoavelmente mudar a situação ou continuar sua tarefa. O primeiro uso geralmente se beneficia de uma ação de criação ou adição; nenhum resultado pode se beneficiar da eliminação de uma restrição; um erro pode oferecer uma nova tentativa. Uma caixa de entrada limpa ou um treino concluído pode não precisar de nenhuma ação. Não force um botão em todos os estados apenas para fazer o painel parecer interativo.

Mantenha a recuperação proporcional. Uma atualização com falha geralmente exige uma explicação embutida e uma nova tentativa, e não um alerta de bloqueio. A Apple recomenda combinar o feedback com a importância das informações e reservar alertas para situações críticas e acionáveis. Para pesquisa, preserve o trabalho da pessoa e ofereça ajustes sensatos em vez de alterar a consulta silenciosamente. O Material Design também sugere conteúdo inicial, conteúdo educacional breve ou melhores correspondências claramente identificadas como alternativas quando realmente ajudam.

Use ilustração apenas se ela adicionar contexto, calor ou reconhecimento. Não deve competir com a mensagem nem fazer as pessoas pensarem que uma imagem decorativa é interativa. Um simples ícone pode ser suficiente para um resultado de filtro compacto; um espaço de trabalho de primeira utilização poderia beneficiar de um pequeno exemplo do tipo de conteúdo que irá conter. Se o conteúdo inicial estiver incluído, facilite sua identificação e remoção.

• Escolha uma ação primária que trate diretamente da causa.
• Adicione um caminho de ajuda secundário somente quando ele responder a uma provável pergunta de acompanhamento.
• Use uma mensagem de conclusão silenciosa quando o resultado vazio for uma boa notícia.
• Garanta que uma ação permaneça compreensível para usuários de teclado e leitores de tela.

4. Revise todo o estado, não apenas a ilustração

Inspecione o estado no contêiner real: uma visualização de primeiro uso em tela inteira, uma pequena barra lateral e uma tabela filtrada têm diferentes necessidades de espaço e hierarquia. Mantenha a mensagem perto da área que ela descreve. Garanta que ele permaneça legível quando o texto for ampliado ou quebrado e facilite a localização da ação principal sem exigir reconhecimento de cores. Teste as transições também: carregar para vazio, carregar para erro, tentar novamente para obter sucesso e um filtro muda de volta para resultados.

Uma revisão prática da biblioteca começa com um gatilho e uma recuperação esperada. Para cada padrão, registre o estado, rumo, explicação opcional, ação primária, rota secundária e o que acontece após a seleção. Compare as capturas de tela para identificar estruturas úteis e hierarquia visual e, em seguida, verifique o comportamento do produto no contexto; uma imagem estática não pode dizer se um erro é recuperável ou se um resultado está realmente vazio. Navegue na biblioteca de UI do ScreenKits para obter referências visuais e explore todas as categorias para encontrar padrões adjacentes.

• Uma pessoa pode dizer se o conteúdo está ausente, ainda carregando ou indisponível devido a um erro?
• A mensagem reflete a consulta atual, os filtros, a conta ou a tarefa concluída?
• A ação preserva informações úteis e leva a um resultado visível?
• O estado trabalha em tamanhos pequenos, com cópias localizadas mais longas e com tecnologia assistiva?
• Alguém pode se recuperar de um erro ou encontrar uma maneira de ajustar uma pesquisa malsucedida?