Stati di caricamento, errore e vuoto:cosa dimentica l'AI

Gli stati di caricamento, errore e vuoto sono i tre che le app costruite con l'AI dimenticano: ogni schermata ha quattro stati — caricamento, errore, vuoto e successo — e la maggior parte dei prodotti AI gestisce solo l'ultimo. Per questo sembrano prototipi. Sistema i tre stati dimenticati e la tua app sembrerà subito qualcosa per cui la gente pagherebbe.

Capisco in dieci secondi se qualcuno ha pubblicato la sua app dritta da una sessione di coding con l'AI. La apro e vedo "Loading..." come testo semplice. Un errore butta giù l'intera pagina. Le schermate vuote mostrano solo spazio bianco. Le funzionalità funzionano. Il prodotto sembra comunque rotto.

Stati di caricamento, errore e vuoto: i quattro stati di ogni schermata

Quando la tua app recupera dei dati — e quasi ogni schermata lo fa — possono succedere quattro cose. I dati sono in arrivo. Qualcosa è andato storto. Non ci sono ancora dati. Oppure i dati sono arrivati e va tutto bene. La maggior parte di chi costruisce progetta solo per il lieto fine, perché è lo stato che vede mentre costruisce. Così la loro app sembra rotta il 40% delle volte, perché gli utenti reali passano parecchio tempo negli altri tre stati.

Gli utenti giudicano il tuo prodotto dallo stato in cui si trovano adesso, non da quello per cui hai progettato. Il caricamento richiede 2–5 secondi ad ogni pagina. Chi lo usa per la prima volta atterra sempre su una schermata vuota. Le reti falliscono. Se questi momenti sono brutti, il tuo prodotto sembra poco professionale — per quanto siano buone le funzionalità.

Stati di caricamento: gli skeleton battono gli spinner

Il "Loading..." in testo semplice fallisce due volte. Ha un aspetto terribile e il layout salta quando arriva il contenuto vero. La soluzione è uno skeleton: forme segnaposto grigie, con una leggera pulsazione, che ricalcano il layout del contenuto in arrivo. Una lista di cinque card si carica dietro cinque sagome di card grigie. Quando i dati arrivano, si sistemano esattamente nello spazio che lo skeleton stava tenendo.

Gli skeleton sono la mia arma segreta. Fanno sembrare l'app due volte più veloce anche quando non lo è, perché le persone percepiscono l'attesa in modo diverso quando vedono la forma di ciò che sta per arrivare. È psicologia dell'UX, non ottimizzazione delle prestazioni — e non ti costa altro che una richiesta alla tua AI.

La regola semplice: usa un piccolo spinner per le azioni rapide, come la pressione di un pulsante che dura meno di un secondo, e uno skeleton per tutto ciò che carica una pagina o una lista. Costruire uno skeleton è una formula, non un compito di design: copia il layout del componente reale, sostituisci il testo con rettangoli grigi e le immagini con cerchi grigi, mantieni la stessa spaziatura, aggiungi un'animazione di pulsazione. L'AI può farlo in un solo passaggio se glielo chiedi.

Stati di errore: utili, non spaventosi

Lo stato di errore predefinito in un'app costruita con l'AI è un messaggio tecnico grezzo — o peggio, una pagina completamente rotta. Entrambi terrorizzano gli utenti. Un buon stato di errore svolge tre compiti: dice che cosa è successo in linguaggio umano ("Non siamo riusciti a caricare le tue candidature"), dice che cosa fare dopo ("Controlla la connessione e riprova") e offre un modo per riprendersi — un pulsante per riprovare, un pulsante per tornare indietro, un link al supporto.

C'è un ulteriore livello che la maggior parte salta: una rete di sicurezza attorno all'intera pagina, così che quando un componente va in crash mostri una cortese card "qualcosa è andato storto" invece di trascinare giù l'intera schermata. Chiedi alla tua AI un "error boundary" e ottieni esattamente questo — un singolo widget che va in crash non uccide più la pagina.

Non mostrare mai agli utenti un codice di errore come titolo. Non far mai perdere il lavoro che avevano in corso. E dai sempre un pulsante da premere — è l'impotenza a far sembrare catastrofici gli errori.

Il libroThe Solopreneur RevolutionLuis Gonçalves su come costruire un'attività da solopreneur con l'IA mentre sei ancora dipendente.Scopri il libro →

Stati vuoti: trasforma un vicolo cieco in un passo successivo

Lo stato vuoto è il più trascurato dei tre, e il più prezioso. Ogni singolo nuovo utente parte da una schermata vuota. Se quella schermata è bianca, pensa che il prodotto sia rotto e se ne va. Se lo accoglie e indica l'azione successiva, diventa onboarding.

Un buon stato vuoto ha tre parti: un visual chiaro che rappresenta ciò che manca, un titolo utile che spiega che cosa vivrebbe qui ("Ancora nessuna candidatura") e un passo successivo ("Condividi il tuo link di candidatura"). Il tono conta — "Inizia" invita, "Qui non c'è niente" sgonfia.

Gli stati vuoti dovrebbero anche cambiare in base al contesto. Nessun risultato di ricerca merita "Nessun risultato per la tua ricerca — prova con altre parole chiave" e un pulsante per azzerare i filtri. Un utente alla prima visita merita un benvenuto e un'indicazione sulla sua prima azione. Stesso meccanismo, messaggio diverso — e ciascuno trasforma un momento di confusione in un momento di guida.

Come far costruire all'AI tutti e quattro gli stati, ogni volta

Ecco la parte che rende tutto questo pratico per un founder non tecnico: non devi costruire niente di tutto ciò a mano. Devi pretenderlo. Quando chiedi all'AI una nuova schermata, la maggior parte delle persone descrive solo lo stato di successo — ed è tutto ciò che ottiene. Esplicita invece gli stati nella richiesta:

Crea la schermata con l'elenco delle candidature. Caricamento: mostra uno skeleton con cinque card segnaposto. Errore: mostra un messaggio amichevole con un pulsante per riprovare. Vuoto: mostra un messaggio utile e un pulsante per creare la prima candidatura. Successo: mostra i dati. Segui lo stesso schema delle schermate esistenti.

Cinque righe in più. L'AI genera automaticamente tutti e quattro gli stati e, una volta che una schermata ha lo schema, puoi indicarla come riferimento per tutte quelle successive. È la competenza centrale del costruire con l'AI: tu stabilisci lo standard, l'AI lo implementa. Gli stati che tutti dimenticano sono dimenticati solo perché nessuno li ha chiesti.

Gestire i tre stati dimenticati è metà di ciò che fa sembrare vera un'app. L'altra metà è la coerenza — ogni schermata che sembra appartenere allo stesso prodotto. È un sistema, non un talento, ed è esattamente ciò che ti danno i design token e una libreria di componenti.

12 settimaneLa carriera aziendale non è mai stata il pianoCandidati al Solopreneur Accelerator.Candidati ora →

Domande frequenti

Che cosa sono gli stati di caricamento, errore e vuoto?

Sono le tre situazioni in cui può trovarsi ogni schermata oltre a "tutto ha funzionato": i dati stanno ancora arrivando, qualcosa è fallito, oppure non ci sono ancora dati. Gli utenti li incontrano di continuo — a ogni caricamento di pagina, a ogni intoppo di rete, a ogni prima visita — quindi un prodotto che progetta solo lo stato di successo sembra rotto per una buona parte del tempo.

Le schermate skeleton fanno davvero sembrare un'app più veloce?

Sì — la velocità percepita migliora anche quando quella reale non cambia. I segnaposto con la forma del contenuto fanno sembrare l'attesa circa due volte più breve rispetto a uno spinner generico, perché gli utenti vedono la forma di ciò che sta arrivando e il layout non salta quando arriva.

Che cosa rende buono uno stato vuoto?

Tre cose: un visual che mostra ciò che manca, un titolo che spiega che cosa apparirà qui e un pulsante che porta all'azione successiva. I migliori stati vuoti fanno anche da onboarding — ogni nuovo utente parte da uno, quindi trattalo come il tuo zerbino di benvenuto, non come un vicolo cieco.

L'AI aggiungerà questi stati in automatico?

Solo se glielo chiedi. L'AI costruisce ciò che descrivi, e la maggior parte delle persone descrive solo il percorso felice. Aggiungi quattro righe a ogni richiesta di schermata — caricamento, errore, vuoto, successo — e indica una schermata ben fatta come schema. Da quel momento ogni nuova schermata esce con tutti e quattro gli stati.