Lezione 5 - Interfaccia Utente (UI)

Discussione: cos'è un'app? Quali app utilizzate tu o altre persone che conosci?

Discussione: chiedi agli studenti di scrivere le loro risposte in un diario, quindi chiedi agli studenti di condividerle con la classe. Tieni un elenco aggiornato delle risposte alla lavagna. Una volta che tutti avranno avuto l'opportunità di condividere, scrivi una definizione condivisa proposta di app come «un software progettato per uno scopo».

Obiettivo: questa discussione mira a introdurre la definizione di app. La maggior parte dei suggerimenti forniti dagli studenti dovrebbe poter essere collegata a questa definizione. Le app possono fornire servizi, organizzare o fornire informazioni o possono essere semplicemente un gioco o un'altra forma di intrattenimento. In tutti i casi, si desidera semplicemente definire un'app come un software creato per uno scopo.

Glossario:

• App: un software progettato per uno scopo

Quando pensi a un'app, probabilmente immagini il prodotto finito. Nell'ultima lezione hai avuto la possibilità di provare la prima fase di sviluppo, quando stavamo raccogliendo idee e individuando potenziali utenti ed esigenze. Nelle prossime lezioni, vedremo come utilizzare questo stesso processo di progettazione per sviluppare un'app per un utente specifico in base alle sue esigenze e ai suoi interessi.

Domanda del giorno: come possiamo testare un'app per assicurarci che soddisfi le esigenze dell'utente?

Forma i gruppi: disponi in coppia gli studenti.

Distribuisci una copia della guida alle attività di "Schermate dell'interfaccia utente" a ciascuna coppia di studenti. Se non hai già smontato gli schermi, concedi agli studenti qualche minuto per farlo.

Ridurre la quantità di materiali stampati

Questi materiali per le attività manuali possono essere riutilizzati se gli studenti non vi scrivono sopra. Ne avrai bisogno anche per l'attività della prossima lezione.

Mostra le seguenti definizioni mentre si parla della classe

• Prototipo - il primo o uno dei primi modelli di prodotto che consentono di testare le ipotesi prima di sviluppare una versione finale.
• Interfaccia utente - gli elementi visivi di un programma che un utente controlla e attraverso i quali interagisce con l'applicazione. Interfaccia utente spesso abbreviata in UI (User Interface).

Il set di schermate che ti ho appena consegnato si chiama prototipo su carta. Un prototipo è un primo modello di prodotto che consente di testare le ipotesi prima di sviluppare una versione finale. Questo è uno dei primi passi nella progettazione di un'app e consente allo sviluppatore di testare la propria idea prima di investire molto tempo nella programmazione.

I prototipi su carta sono un modo semplice e veloce per condividere l'interfaccia utente della tua app con potenziali utenti. L'interfaccia utente è costituita dagli elementi visivi di un programma che un utente controlla e attraverso i quali interagisce con l'applicazione. Questo è spesso abbreviato in UI.

Discussione: basandoti solo sulle schermate, chi pensi sia l'utente principale di questa app? Cosa pensi che questa app sia stata progettata per fare?

Discussione: chiedi agli studenti di discutere con il loro compagno e poi di condividere idee con tutta la classe.

Obiettivo: incoraggia gli studenti a identificare elementi specifici del prototipo che supportano le loro argomentazioni e a considerare le esigenze degli utenti per le quali questo prototipo potrebbe essere stato progettato

Per l'attività odierna, useremo questo prototipo su carta per testare la nostra app. Una persona sarà l'utente, che cercherà di utilizzare il prototipo su carta. Un'altra persona sarà il computer, incaricato di cambiare le schermate e reagire a ciò che fa l'utente. Il nostro obiettivo è raccogliere riscontri in modo da poter formulare raccomandazioni e operare miglioramenti.

Assegnazione di ruoli: per ogni coppia di studenti, assegna a ogni studente il ruolo di Computer e di Utente. Una volta assegnati i ruoli, chiedi alle coppie di muoversi in modo che siano sedute l'una di fronte all'altra.

Distribuisci a chi interpreta il Computer una copia della guida alle attività dell'esperienza utente (computer) e a chi interpreta gli utenti una copia della guida alle attività dell'esperienza utente (utente). La guida alle attività informatiche deve essere visualizzata solo dal computer e non dall'utente.

Ridurre la quantità di materiali stampati

Guida alle attività del computer le guide alle attività del computer vengono utilizzate solo come riferimento. Gli studenti possono guardare le versioni digitali durante questa attività. Se scegli di stampare la guida, puoi riutilizzarla, a patto che agli studenti venga detto di non scriverci sopra.

Guida alle attività dell'utente: la guida alle attività dell'utente può essere completata online o come attività del diario. Gli studenti possono utilizzare una versione digitale della Guida alle attività come suggerimento, copiando i grafici e le domande nei loro diari.

Test utente

Mostra: leggi il paragrafo di apertura sui casi di test con la classe. Sottolinea che gli utenti hanno un elenco prestabilito di attività da completare ed entrambe le persone dovrebbero esprimere le proprie reazioni sui modi per migliorare l'esperienza. Alcune di queste attività potrebbero non essere nemmeno possibili, il che significa che possiamo dare suggerimenti su come migliorare l'app e completare l'attività.

Illustrazione: questa attività prevede che coppie di studenti testino il prototipo su carta, con uno che agisce come Utente e uno come Computer. Il processo di base è il seguente e dovrebbe essere modellato per gli studenti prima di lavorare in modo indipendente in coppia:

1. Il Computer posiziona la schermata iniziale (quella intitolata «Txt Ur Grndkds») davanti a Utente.
2. L' Utente seleziona un'attività dalla tabella nella guida alle attività.
3. L' Utente tenta di completare l'operazione «facendo clic» sullo schermo del prototipo su carta davanti a sé.
4. Ogni volta che l' Utente clicca sullo schermo, il Computer consulta il diagramma di navigazione nella guida alle attività.
   • Se il diagramma di navigazione mostra una linea collegata all'elemento su cui si è cliccato, trova la schermata all'altra estremità della linea e posizionala di fronte all'utente.
   • Se il diagramma di navigazione non mostra una linea collegata all'elemento su cui si è cliccato, non fare nulla.
5. Quando l' Utente completa un'attività (o decide che è impossibile farlo nel prototipo attuale), compila le colonne «Cosa ho provato» e «La mia reazione» e il computer reimposta l'app alla schermata principale.

Girando tra i banchi: monitora gli studenti mentre lavorano in coppia per completare questo compito. Assicurati che i "computer" utilizzino le frecce guidate per navigare nelle schermate e assicurati che gli "utenti" stiano completando ogni riga di attività nella tabella. Chiedi agli studenti di scambiarsi a metà dell'attività, scambiando chi è l'utente e chi è il computer.

Discussione: qual è stato il problema riscontrato da un Utente durante l'utilizzo dell'app? Qual è il potenziale miglioramento che apporteresti al prototipo in base alla tua esperienza?

Discussione: chiedi agli studenti di discutere in coppia, quindi invita ciascuna coppia a condividere il proprio commento con la classe. Mantieni davanti alla classe un elenco dei potenziali miglioramenti.

Gli studenti dovrebbero collegare esperienze utente specifiche ai problemi con l'app e riflettere su come risolverli. Se necessario, chiedi agli studenti di raccontare incidenti specifici durante il test che hanno rivelato problemi di progettazione.

La creazione e il collaudo di un prototipo sono una parte importante del processo di progettazione: guarda tutti i riscontri che abbiamo ricevuto e le modifiche che dobbiamo apportare! Quando inizieremo a progettare le nostre app, uno dei nostri primi passi sarà creare un prototipo su carta in modo da poter testare e ricevere riscontri in anticipo per assicurarci di soddisfare le esigenze dei nostri utenti.

Discussione: all'inizio della lezione abbiamo intuito che l'utente ha bisogno di questo prototipo. Ora che hai provato l'app in prima persona, annota quanto segue:

Gli studenti dovrebbero riassumere la discussione precedente in punti chiave e attuabili per una revisione del progetto. Questi dovrebbero essere chiaramente correlati alla discussione precedente per verificare che gli studenti stiano collegando le esigenze degli utenti, l'esperienza dell'utente nel test e le funzionalità specifiche dell'app.

• A quale esigenza dell'utente risponde bene questa app?
• A quali esigenze dell'utente questa app potrebbe rispondere meglio?
• Qual è un'esigenza dell'utente che non è affatto soddisfatta, ma che pensi possa costituire una buona aggiunta?

Condividi: se c'è tempo, chiedi agli studenti di condividere le loro esigenze. Potresti scriverlo alla lavagna o su un cartellone dove potrà essere ricordato nella prossima lezione.