- Impara le pratiche standard dell'interfaccia utente
- Crea un prototipo cartaceo della tua applicazione
- Ottieni il feedback degli utenti utilizzando il tuo prototipo
Queste sono le attività di questa lezione:
PROTOTIPAZIONE
Ora che hai un'idea per il tuo prodotto minimo realizzabile, è il momento di pensare a come sarà il tuo progetto e di abbozzare alcune idee.
A prototipo è un modello iniziale di qualcosa.
Gli sviluppatori di app generalmente realizzano un prototipo cartaceo della loro applicazione prima di iniziare la codifica.
Un prototipo cartaceo è una rappresentazione disegnata a mano dell'interfaccia utente della tua applicazione. In genere include i disegni di ogni schermata dell'applicazione, che raffigurano diversi stati.
PERCHÉ PROTOTIPO?
- Puoi comunicare rapidamente le tue idee in modo visivo.
- È una collaborazione!
- Quando si lavora su carta, è più informale e le conversazioni nascono dalla sperimentazione.
- È poco costoso!
- Non è necessario spendere molto tempo e denaro
- Non è necessario avere accesso a un computer o a Internet.
- Non devi essere un esperto tecnico per questa parte del processo.
- Puoi vedere come gli utenti reagiscono al tuo prototipo per capire rapidamente cosa può funzionare o meno nel tuo progetto.
- Le decisioni sul design possono essere confermate prima di dedicare tempo allo sviluppo e alla codifica dell'applicazione.
Scopri come altri team di Technovation Girls hanno creato prototipi cartacei e digitali in questo video!
Suggerimento del mentore
Le migliori Pratiche: Quando introduci gli studenti ai prototipi di carta e cartone, sottolinea l'importanza di iniziare con modelli semplici e a basso costo per testare le idee. Ad esempio, "I prototipi di carta e cartone sono come delle bozze per il tuo progetto. Ti aiutano a vedere l'aspetto e il funzionamento della tua idea prima di realizzare la versione finale. Questi semplici modelli ti permettono di apportare rapidamente delle modifiche e di capire cosa funziona meglio".
Il prototipo cartaceo può essere utilizzato per ottenere un feedback dai potenziali utenti (ad esempio familiari, altri mentori, amici, membri della comunità, ecc.) Questo feedback può far parte del feedback incluso nel materiale finale.
I video seguenti mostrano un esempio di progetto di prototipazione con hardware a corredo (a sinistra) e il processo di test con un prototipo cartaceo (a destra).
Domande guida da porre agli studenti:
Perché è utile creare un semplice prototipo con carta o cartone prima di realizzare il prodotto finale?
In che modo la realizzazione di un modello in carta o cartone può aiutarti a migliorare il tuo progetto?
Quali sono le cose che potresti imparare testando un prototipo cartaceo e che altrimenti non sapresti?
I consigli dei mentori sono forniti dal supporto di AmeriCorps.
ELEMENTI DEL PROTOTIPO
Mantenere queste cose Tieni a mente queste cose quando inizierai il tuo prototipo cartaceo. Passa il mouse su ogni scheda per saperne di più.
Utenti
Utenti
Tipi di dispositivi
Tipi di dispositivi
Su un telefono o su un tablet?
Accessibilità
Accessibilità
Coerenza
Coerenza
INTERFACCIA UTENTE
La realizzazione del prototipo riguarda il modo in cui l'utente interagisce con la tua applicazione. Il termine per indicare questo aspetto è Interfaccia utente o UI. Include tutti gli elementi come pulsanti, caselle di testo e cursori che permettono all'utente di utilizzare la tua applicazione.
Un altro termine che indica la progettazione di prodotti digitali è Esperienza dell'utentee o UX. Ognuno di questi termini è spiegato di seguito.
Interfaccia utente
Il modo in cui gli utenti interagiscono con la tua applicazione. Include tutti gli elementi come pulsanti, caselle di testo e cursori che permettono all'utente di utilizzare la tua app.
Il design dell'interfaccia utente si concentra sul rendere la tua app visivamente accattivante, intuitiva e facile da usare.
Esperienza utente
Come gli utenti vivono la tua applicazione. Include l'interfaccia utente, ma riguarda soprattutto le emozioni, gli atteggiamenti e i comportamenti degli utenti.
Il design UX è incentrato sulle esigenze e sugli obiettivi degli utenti e sul miglioramento della loro esperienza complessiva.
CARATTERISTICHE DELL'INTERFACCIA UTENTE
Di seguito sono elencate alcune delle parti fondamentali di un'interfaccia utente per un'applicazione mobile
NAVIGAZIONE
La navigazione è il modo in cui gli utenti trovano ciò che cercano in un'app. Ecco alcuni esempi di opzioni di navigazione.
CONTENITORE
Questi componenti ti permettono di raggruppare i contenuti. Sono utili per disporre le parti dello schermo e per nascondere e mostrare le parti.
INGRESSO
I componenti di input consentono all'utente di inserire informazioni nell'applicazione. Di seguito sono riportati alcuni esempi.
INFORMAZIONI
Questi componenti permettono all'applicazione di condividere le informazioni con gli utenti.
UTILIZZARE ELEMENTI STANDARD
Potresti voler dare alla tua app un aspetto diverso per distinguerti dalla concorrenza. Tuttavia, l'utilizzo di elementi standard può aiutare gli utenti a capire più rapidamente come utilizzare la tua app.
Ad esempio, la maggior parte degli utenti ha familiarità con un menu a tendina. Potresti progettare un nuovo tipo di menu, ma potrebbe confondere gli utenti. Rimani su componenti già noti per facilitare gli utenti.
Guarda questo breve video con Melissa Powel e Mariam Shaikh di Google sullo sketching e la prototipazione su carta
ATTIVITÀ 1: PROTOTIPO CARTACEO
Fai uno schizzo delle schermate della tua applicazione
- Come faranno gli utenti a navigare da una schermata all'altra?
- Come inseriranno le informazioni necessarie per l'applicazione?
- Come verranno visualizzate le informazioni?
- Come sarà strutturato in modo esteticamente gradevole?
- Pensa allo schema di colori, al font, al logo
OTTIENI UN FEEDBACK
Ora che hai qualcosa di fisico che rappresenta la tua soluzione, è il momento di ottenere il feedback degli utenti!
I potenziali utenti devono provarlo e darti dei consigli onesti. onesto feedback.
Cosa vuoi imparare dai test con gli utenti?
Un metodo:
- Dai agli utenti una serie di compiti da svolgere con la tua app e vedi se riescono a farlo senza il tuo intervento.
- Un membro del team può fungere da "computer".
- modifica le schermate o parti di esse in base alle interazioni dell'utente
- Un altro membro del team è l' addetto agli appunti
- scrive ciò che l'utente fa e i suoi commenti e reazioni.
- Con l'autorizzazione, puoi anche registrare la sessione di test.
Ricorda che i tuoi tester sono lì per aiutarti! Non giudicare né intervenire nelle loro interazioni (a parte il "computer" che risponde/aggiorna il prototipo in base alle azioni).
Ricevi il loro feedback con apprezzamento.
Ecco un ottimo esempio di test utente per un'app di un negozio di riparazioni di biciclette.
ATTIVITÀ 2: OTTENERE UN FEEDBACK
Testa il tuo prototipo cartaceo con 2-3 utenti
- Mostra il prototipo agli utenti.
- Chiedi agli utenti di eseguire un compito con il prototipo.
- Lascia che provino a svolgere il compito senza aiuto.
- Un membro del team può agire come "computer" e reagire alle sue azioni.
- Un altro membro del team (o due) prende nota di ciò che fanno gli utenti, dei loro commenti e delle loro reazioni.
RIFLESSIONE
Ti consigliamo di conservare il tuo prototipo cartaceo. Dovrai fare riferimento ad esso durante la realizzazione del tuo progetto. Dovresti anche scattare delle foto del tuo prototipo.
REVISIONE DEI TERMINI CHIAVE
- Prototipo - un primo modello di un prodotto
- Prototipo cartaceo - una rappresentazione disegnata a mano di come sarà la tua applicazione
- Interfaccia utente (UI) - il modo in cui l'utente interagisce fisicamente con un'applicazione mobile.
- Esperienza utente (UX) - la sensazione che l'utente prova nei confronti di un'applicazione mobile, prima, durante e dopo il suo utilizzo.
RISORSE AGGIUNTIVE
Sebbene la carta sia il metodo preferito per la prototipazione, soprattutto come primo passo, puoi anche utilizzare strumenti digitali per prototipare la tua app.
Molti strumenti hanno un prezzo, ma di solito esiste una versione gratuita che puoi utilizzare con funzioni o progetti limitati. Ecco alcune possibilità.
- Diapositive di Google (facile e gratuito!)
- InvisionApp
- Figma
- POP da Marvel
