Disegnare schermate e stati

Pensare a cosa vede l’utente nei casi principali.

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.

Esercizio guidato

Disegna o scrivi lo stato vuoto.
Disegna lo stato con dati.
Scrivi il messaggio di errore.
Scrivi cosa succede durante un caricamento.
Controlla che ogni stato abbia un testo comprensibile.

Controllo finale

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