Disegnare schermate e stati

In parole semplici

Una schermata non ha sempre contenuto. Può essere vuota, piena, in errore o in attesa. Disegnare questi stati evita buchi nell’esperienza.

Questa lezione fa parte del modulo Progetto finale guidato. L’obiettivo del modulo è: Costruire una mini app semplice, pubblicarla e saper spiegare le scelte principali.

Parole nuove

• stato vuoto: cosa si vede quando non ci sono dati.
• stato errore: cosa si vede quando qualcosa va storto.

Cosa impari

• Capire il concetto senza partire da definizioni astratte.
• Vedere un esempio piccolo che puoi copiare e modificare.
• Collegare l’argomento al risultato del modulo: una mini app JavaScript pubblicata online con README essenziale.

Esempio da copiare

const statiPagina = [
  "nessun elemento",
  "lista con elementi",
  "errore",
  "caricamento"
];

console.log(statiPagina);

Non devi memorizzare tutto subito. Prima copia l’esempio, fallo funzionare e cambia una cosa alla volta.

Esercizi

Base · facile

Elenca i quattro stati principali di una schermata e scrivi cosa mostra ciascuno.

const statiPagina = [
  "nessun elemento",   // stato vuoto: messaggio che invita ad aggiungere
  "lista con elementi",// stato pieno: i dati
  "errore",            // messaggio chiaro + come riprovare
  "caricamento"        // indicatore di attesa
];

Intermedio · medio

Per la tua app, scrivi il testo concreto dello stato vuoto, di quello pieno, dell’errore e del caricamento. Verifica che lo stato vuoto inviti l’utente a fare la prima azione.

Sfida · difficile

Spiega perché lo stato vuoto e quello di errore sono spesso trascurati ma decisivi per l’esperienza. Progetta i messaggi in modo che guidino l’utente (cosa fare adesso) invece di limitarsi a comunicare un fatto.

Controllo finale

Hai finito quando sai cosa mostrare anche quando la lista è vuota.