Estados de carregamento, erro e vazio:o que a IA esquece

Estados de carregamento, erro e vazio são os três que as apps feitas com IA esquecem: cada ecrã da tua app tem quatro estados — carregamento, erro, vazio e sucesso — e a maioria dos produtos feitos com IA só trata do último. É por isso que parecem protótipos. Resolve os três estados esquecidos e a tua app passa instantaneamente a parecer algo por que as pessoas pagariam.

Consigo perceber em dez segundos se alguém lançou a sua app diretamente de uma sessão de programação com IA. Abro-a e vejo "A carregar..." em texto simples. Um erro deita abaixo a página inteira. Os ecrãs vazios não mostram nada além de espaço em branco. As funcionalidades funcionam. O produto continua a parecer avariado.

Estados de carregamento, erro e vazio: os quatro estados de qualquer ecrã

Quando a tua app vai buscar dados — e quase todos os ecrãs vão buscar dados —, podem acontecer quatro coisas. Os dados estão a caminho. Alguma coisa correu mal. Ainda não há dados. Ou os dados chegaram e está tudo bem. A maioria de quem constrói desenha só para o final feliz, porque é esse o estado que vê enquanto constrói. Depois a app parece avariada 40% do tempo, porque os utilizadores reais passam tempo real nos outros três estados.

Os utilizadores julgam o teu produto pelo estado em que estão agora, não por aquele para que o desenhaste. O carregamento leva 2–5 segundos por página. Quem usa pela primeira vez cai sempre num ecrã vazio. As redes falham. Se esses momentos parecerem maus, o teu produto parece pouco profissional — por melhores que sejam as funcionalidades.

Estados de carregamento: os esqueletos ganham aos spinners

O "A carregar..." em texto simples falha duas vezes. Tem péssimo aspeto, e a disposição salta quando o conteúdo real chega. A solução é um esqueleto: formas cinzentas a pulsar suavemente, que reproduzem a disposição do conteúdo que vai chegar. Uma lista de cinco cartões carrega atrás de cinco contornos de cartão cinzentos. Quando os dados chegam, encaixam exatamente no espaço que o esqueleto estava a guardar.

Os esqueletos são a minha arma secreta. Fazem a app parecer 2x mais rápida mesmo quando não é, porque as pessoas sentem a espera de outra maneira quando conseguem ver a forma do que vem aí. Isto é psicologia de UX, não otimização de desempenho — e não te custa nada além de um pedido à tua IA.

A regra simples: usa um pequeno spinner para ações rápidas, como carregar num botão que demora menos de um segundo, e um esqueleto para tudo o que carrega uma página ou uma lista. Construir um esqueleto é uma fórmula, não uma tarefa de design: copia a disposição do componente real, substitui o texto por retângulos cinzentos e as imagens por círculos cinzentos, mantém o mesmo espaçamento, acrescenta uma animação de pulsação. A IA faz isto de uma só vez se lho pedires.

Estados de erro: úteis, não assustadores

O estado de erro por omissão numa app feita com IA é uma mensagem técnica em bruto — ou, pior, uma página completamente partida. Ambos aterrorizam os utilizadores. Um bom estado de erro faz três coisas: diz o que aconteceu em linguagem humana ("Não conseguimos carregar as tuas candidaturas"), diz o que fazer a seguir ("Verifica a tua ligação e tenta outra vez") e oferece uma forma de recuperar — um botão para tentar de novo, um botão para voltar, um link para o suporte.

Há mais uma camada que a maioria de quem constrói salta: uma rede de segurança à volta da página inteira, para que, quando um componente falha, mostre um cartão educado de "alguma coisa correu mal" em vez de levar o ecrã inteiro consigo. Pede à tua IA uma "error boundary" e obténs exatamente isso — um widget que falha deixa de matar a página.

Nunca mostres aos utilizadores um código de erro como título. Nunca percas o trabalho que tinham em curso. E dá-lhes sempre um botão para carregar — é a impotência que faz os erros parecerem catastróficos.

O livroThe Solopreneur RevolutionLuis Gonçalves sobre como construir um negócio de EUpreendedor com IA sem deixar o emprego.Quero o livro →

Estados vazios: transforma um beco sem saída no passo seguinte

O estado vazio é o mais negligenciado dos três, e o mais valioso. Todos os novos utilizadores, sem exceção, começam num ecrã vazio. Se esse ecrã estiver em branco, assumem que o produto está avariado e vão-se embora. Se lhes der as boas-vindas e apontar para a ação seguinte, torna-se onboarding.

Um bom estado vazio tem três partes: um elemento visual claro que representa o que falta, um título útil que explica o que viveria ali ("Ainda não há candidaturas") e um passo seguinte ("Partilha o link da tua candidatura"). O tom importa — "Começa aqui" convida, "Não há nada aqui" desanima.

Os estados vazios também devem mudar com o contexto. Uma pesquisa sem resultados merece "Nada corresponde à tua pesquisa — experimenta outras palavras-chave" e um botão para limpar os filtros. Quem usa pela primeira vez merece umas boas-vindas e uma indicação da sua primeira ação. O mesmo mecanismo, uma mensagem diferente — e cada uma transforma um momento de confusão num momento de orientação.

Como pôr a IA a construir os quatro estados, sempre

Eis a parte que torna isto prático para um fundador não técnico: não precisas de construir nada disto à mão. Precisas de o exigir. Quando pedem um novo ecrã à IA, a maioria das pessoas descreve apenas o estado de sucesso — e por isso é só isso que recebem. Em vez disso, escreve os estados no próprio pedido:

Cria o ecrã da lista de candidaturas. Carregamento: mostra um esqueleto com cinco cartões de marcação. Erro: mostra uma mensagem simpática com um botão para tentar de novo. Vazio: mostra uma mensagem útil e um botão para criar a primeira candidatura. Sucesso: apresenta os dados. Segue o mesmo padrão dos ecrãs existentes.

Cinco linhas a mais. A IA gera os quatro estados automaticamente e, quando um ecrã já tem o padrão, podes apontá-lo como referência para todos os ecrãs seguintes. Esta é a competência central de construir com IA: tu defines o padrão, a IA implementa-o. Os estados que toda a gente esquece só são esquecidos porque ninguém os pediu.

Tratar dos três estados esquecidos é metade do que faz uma app parecer real. A outra metade é a consistência — cada ecrã parecer que pertence ao mesmo produto. Isso é um sistema, não um talento, e é exatamente o que os design tokens e uma biblioteca de componentes te dão.

12 semanasA tua carreira corporativa nunca foi o planoCandidata-te ao Solopreneur Accelerator.Candidatar-me →

Perguntas frequentes

O que são os estados de carregamento, erro e vazio?

São as três situações em que qualquer ecrã pode estar além de "correu tudo bem": os dados ainda estão a chegar, alguma coisa falhou, ou ainda não há dados. Os utilizadores passam pelos três constantemente — em cada carregamento de página, em cada soluço da rede, em cada primeira visita —, por isso um produto que só desenha o estado de sucesso parece avariado uma boa parte do tempo.

Os ecrãs em esqueleto fazem mesmo uma app parecer mais rápida?

Sim — a velocidade percebida melhora mesmo quando a velocidade real não muda. Marcações com a forma do conteúdo fazem a espera parecer cerca de 2x mais curta do que um spinner genérico, porque os utilizadores conseguem ver a forma do que vem aí e a disposição não salta quando chega.

O que faz um bom estado vazio?

Três coisas: um elemento visual que mostra o que falta, um título que explica o que apareceria ali e um botão que leva à ação seguinte. Os melhores estados vazios fazem também de onboarding — todos os novos utilizadores começam num, por isso trata-o como o teu tapete de boas-vindas, não como um beco sem saída.

A IA acrescenta estes estados automaticamente?

Só se lhos pedires. A IA constrói o que descreves, e a maioria das pessoas descreve apenas o caminho feliz. Acrescenta quatro linhas a cada pedido de ecrã — carregamento, erro, vazio, sucesso — e aponta um ecrã bem construído como padrão. A partir daí, cada novo ecrã sai com os quatro estados.