31 Mar 2014 Studio dell’UX / UI di una app Windows Phone
Come Vivido abbiamo già sviluppato app per Windows Phone, iOS e Android sia nel contesto del VividoLab (seguite @VividoLab su twitter se ancora non lo fate), sia commissionati da nostri clienti.
Uno degli ultimi lavori, commissionato da un nostro, cliente è quello di realizzare un’app per Windows Phone avente come requisito di implementare tutte le funzionalità presenti sulle applicazioni già presenti sviluppate per iOS e Android.
Abbiamo colto l’occasione e abbiamo chiesto a Marco Leoncini, UX Lead in Soluzioni4d.it (aka @leoncini117) di effettuare una sorta di training on the job della durata di 2 giorni per comprendere quanto i metodi di Vivido siano efficaci e quanto questi possano migliorare per lo studio e la realizzazione dell’UX / UI del nostro progetto.
La prima giornata, ha visto me, Andrea Serena (aka @aserena) e Marco Leoncini seguire il seguente approccio:
1) Raccolta delle specifiche
In questa prima fase è necessario raccogliere tutte le specifiche del progetto dal nostro cliente. Nel nostro caso le specifiche sono le stesse a quelle che in passato abbiamo già raccolto per le versioni Android e iOS della stessa applicazione.
Alcune indicazioni importanti in questa fase sono:
- E’ necessario dare un tempo finito alla raccolta delle specifiche, segnandole e revisionandole finché non arriviamo ad una versione condivisa
- E’ opportuno individuare e salvare la terminologia con la quale vengono indicate le varie parti del progetto. Una volta fatto è buona cosa riportare il Dominio del cliente nel Dominio applicativo: Se una cosa la chiamano Categoria, anche all’interno dell’applicazione avrò un entità Categoria.
2) Interviste
In questa fase è necessario chiedere agli utenti COSA FANNO. Non chiedere mai COSA VOGLIONO, altrimenti sarà una fase senza fine e porterà ad attività prettamente di gusto personale e poco utili ai fini pratici e dell’applicazione.
Gli step di questa fase sono:
- Viene fatta un’intervista iniziale agli utenti
- Si crea una raccolta dei dati
- Tale raccolta dovrà essere sottoposta ai singoli utenti come verifica
3) Fare la lista della spesa
Se non viene fuori dall’intervista, è necessario (come nel nostro caso) sapere tutto quello che dobbiamo fare. Ci siamo quindi armati di copiosi e colorati Post-It, ci abbiamo scritto sopra, una ad una, le macro funzionalità che l’applicazione deve avere.
4) Disposizione della lista della spesa
Una volta terminati di scrivere tutti i Post-It, li abbiamo attaccati al Vivido Wall (la lavagna ‘sul’ muro di Vivido).
Nello specifico abbiamo indicato nei Post-It di colore giallo le macro funzionalità di cui potevamo avere un controllo grafico, in quelle di colore arancione le macro funzionalità di cui abbiamo un output grafico / funzionale imposto.
5) Disegno del flusso operativo
Una volta riporte le varie attività, iniziamo a disegnare il flusso operativo delle varie maschere, collocando tutti i post-it che precedentemente avevamo incollato sulla lavagna.
Le collocazioni dei Post-It stanno ad indicare che quella specifica maschera che contiene il Post-It deve implementare la funzionalità contenuta nel Post-It.
Questo esercizio è utile sia per capire di quante maschere la nostra applicazione disporrà, sia per determinare i passaggi fra ogni maschera.
6) Creazione di una StoryBoard
Il passaggio successivo è quello di creare, senza curarsi ancora degli spazzi esatti, una rappresentazione che maggiormente dettagli il flusso e le varie pagine che andremo a creare.
E’ possibile usare qualsiasi strumento, noi, visto che abbiamo a disposizione Visual Studio 2012 Premium e Office 365 E3, possiamo sfruttare la StoryBoard di Microsoft PowerPoint.
- Apriamo PowerPoint
- Nuovo
- Ultimo Tab, “Storyboarding”
- Tasto Storyboard Shapes
- Ci sono installati di default gli shape per Windows Phone 7.5
Ecco un esempio del risultato ottenuto:
7) Presentazione al cliente
La presentazione al cliente è stata effettuata mostrando un mix fra la storyboard e dei wireframe creati con strumenti grafici per dare un’idea di come fattivamente alcune videate saranno realizzate.
Conclusione
Una volta che il cliente ha dato il via alle operazioni, è iniziato lo sviluppo vero e proprio dell’app, seguendo una metodologia Agile soprattutto in quanto a rilasci periodici come applicazione pubblicata nel Marketplace come Beta.
Un unica nota è che abbiamo avuto il piacere di lavorare solo alla parte di UX / UI in quanto i servizi in backend sono stati realizzati da un’altra società.
Una volta terminato lo sviluppo e testata l’applicazione in tutte le sue parti, è avvenuto il rilascio nel Marketplace come public.
No Comments