Studio dell’UX / UI di una app Windows Phone

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).

Studio UX UI - 1

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.

Studio UX UI - 2

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.

Studio UX UI - 3

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
    • Per Windows 8, una è a pagamento, da comprare qui
    • Altre per Phone a pagamento, da comprare qui
    • Per iPhone vedere qui

Ecco un esempio del risultato ottenuto:

PowerPoint App 1 PowerPoint App 2

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.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *