Dietro le quinte di un progetto

Posted on 6/12/2011 by Antonio Volpon

Non sapete quanto mi piacerebbe scrivere in questo sito come si articola nel dettaglio il processo di progettazione e creazione di un progetto online, soprattutto di uno di grandi dimensioni che vede coinvolte molte e diverse professionalità.

Ma non lo faccio.

Non lo faccio non perché voglia tenermi ben stretto tutto quello che ho imparato in questi 15 anni di lavoro.

Non lo faccio perché non posso.

Non posso perché a monte della mia attività di consulenza (e, in passato, di dipendente) c’è quasi sempre un accordo di riservatezza: non posso parlare dei dettagli del mio lavoro.

Non giudico se quella di far firmare clausole del genere sia una strategia efficace, ma mi dispiace non poter condividere esperienze o casi di studio pratici che difficilmente trovano posto nei libri. La realtà è spesso diversa da quella che si legge nei testi accademici.

Quello degli accordi di riservatezza è però un vizio che si propaga con una certa velocità. Se fino a ieri interessava le aziende di grandi dimensioni, mi capita sempre più spesso di sentire amici e colleghi che si trovano a firmare un accordo di questo tipo anche per progetti di poche migliaia di euro.

Ma non è di questo che volevo discutere oggi (segnalazioni riguardo la vostra esperienza nei commenti sono comunque molto bene accette, se non altro per capire l’entità del fenomeno).

C’è infatti chi per fortuna non ha problemi a condividere nel dettaglio la propria esperienza, come nel caso della BBC.

Un esempio su tutti è il redesign del meteo, che è stato descritto magistralmente dal team di lavoro in BBC Weather: Design Refresh in Pictures. Perché magistralmente?

Perché indicano l’intero processo di progettazione e non solo una parte
Perché presentano grafici e diagrammi (come quello relativo alle 5W – Who, When, Why, Where, What) che si aprono a tutto schermo, così da leggere per intero quello che c’è scritto, senza segreti
Perché elencano le parti del sito precedente a cui hanno rinunciato, e il motivo
Perché non si vergognano di far vedere che tutto prende vita dai bozzetti su carta (ne scrivevo giusto qualche settimana fa)
Perché indicano chiaramente la vision e come ogni professionista al lavoro sfrutti le proprie competenze per raggiungere gli obiettivi
Perché sottolineano l’importanza delle icone e della infografica (quella fatta bene) in un progetto di questo tipo.
Perché sapevano che descrivere nel dettaglio la complessa macchina del redesign avrebbe attirato le (inevitabili) critiche di chi si trovava meglio con la versione precedente (vedi i commenti 12 e 13)
Perché scrivono nero su bianco il nome delle agenzie e dei partner che li hanno aiutati nella progettazione del sito, invece di tenerli nascosti (magari facendo firmare un documento di riservatezza, giusto per ritornare al tema iniziale)

La possibilità di condividere così nel dettaglio la propria esperienza deriva probabilmente anche dal fatto che la BBC è pagata dalle tasse dei contribuenti e questo è un modo di far capire come sono impiegati questi soldi e di ritornare un po’ della conoscenza maturata.

Sarebbe allora bello che la Rai facesse lo stesso, ma vista la qualità dei progetti che mettono online forse sono ancora nella fase precedente, quella in cui devono ancora imparare come si fa a realizzarlo, un sito.

Come migliorare il processo di acquisto

Posted on 1/12/2011 by Antonio Volpon

Sono fortunato. Negli ultimi anni ho avuto la possibilità di partecipare alla progettazione e realizzazione di alcuni tra gli e-commerce più importanti nati in Italia.

È bello, interessante e istruttivo lavorare per un e-commerce, perché il sito non è fine a sé stesso, ma a supporto della vendita e non solo deve funzionare, ma deve funzionare bene, benissimo.

Per chi lavora nel campo della user experience un sito di e-commerce presenta anche delle opportunità uniche per proporre e mettere in cantiere dei miglioramenti e verificarne immediatamente il risultato.

Tra le diverse aree di un sito di e-commerce mi piace mettermi al lavoro sul processo di checkout perché rappresenta una vera e propria sfida dove ogni testo, etichetta, bottone deve essere limato e lucidato per bene. Il processo di checkout è infatti composto da funzionalità che svolgono il duplice scopo di proporre al cliente (o, almeno, si spera lo diventi!) delle precise informazioni sulle operazioni che sta per compiere e di ricevere informazioni su come desidera concludere l’acquisto.

Avere la possibilità di compiere sessioni di multivariate testing a un processo di checkout penso sia un’esperienza che ogni specialista di user experience dovrebbe provare.

In più di un’occasione mi sarebbe piaciuto parlarne in un intervento, ma l’argomento è complesso e un articolo di pochi paragrafi, ma anche il capitolo di un libro rischiano di banalizzare o non far apprezzare l’attenzione e le strategie necessarie per la progettazione e verifica di un processo di checkout che funzioni in tutti i suoi aspetti.

Anche la stesura di una o più checklist di riferimento (di cui sono innamorato) ha poco senso, se non con un documento di dettaglio a corredo.

Ecco perché preferisco consigliarvi due interessanti report che si concentrano sul processo di acquisto approfondendone ogni dettaglio.

Il primo è E-Commerce Checkout Usability, scritto da Jamie Appleseed e Christian Holst del Baymard Institute. Si basa su sessioni di usability test che hanno coinvolto 10 utenti durante la navigazione di 15 siti di e-commerce: 1-800-Flowers, AllPosters, American Apparel, Amnesty Shop, Apple, HobbyTron, Levi’s, NewEgg, Nordstrom, Oakley, Perfume.com, PetSmart, Thomann, Walmart e Zappos.

Il risultato sono 63 linee guida raggruppate in 6 categorie (data input, copywriting, layout, navigation, flow, focus) che in 140 pagine affrontano con ricchezza di esempi, positivi e negativi, il processo di checkout. Alcune indicazioni sono sicuramente note a chi si occupa di user experience (come la progettazione dei form, argomento tra l’altro molto ben affrontato da Luke Wroblewski in Web Form Design), altre sono forse meno scontate.

Peccato che tra i molti esempi presentati pochi siano dedicati alla pagina del carrello, visto che logicamente è strettamente e strategicamente correlata al processo di checkout ed è forse la più importante dell’intero processo.

Interessante invece l’inclusione in appendice di 4 pagine di una checklist pronta da stampare.

Il report costa 78 dollari.

Il secondo studio che vi voglio presentare è E-commerce User Experience, vol. 4: Shopping Cart, Checkout and Registration realizzato da Amy Schade e Jakob Nielsen per il Nielsen Norman Group (e, quindi, non c’è bisogno di molte presentazioni). Il report fa parte di una serie di altri 13 report dedicati all’e-commerce, ma è comunque acquistabile singolarmente per 98 dollari.

E si tratta comunque di soldi ben spesi, perché gli autori non lesinano linee guida e esempi, tanto che il report di estende per più di 300 pagine ricche di screenshot, tabelle di approfondimento e best practices.

In questo caso il report nasce da una versione precedente del 2000 (di cui sono rimaste alcune linee guida) a cui sono stati aggiunti in questa nuova versione i risultati di user testing e eye tracking di utenti in più città europee, americane e asiatiche.

Rispetto al report del Baymard Institute, quello del Nielsen Norman Group risulta più approfondito e quindi richiede sicuramente un certo impegno per essere studiato in tutte le sue parti anche perché spesso le indicazioni più interessanti non stanno tanto nella linea guida in sé, ma nei dettagli presentati nel testo.

Non si può comunque definire un report noioso da leggere, visto che gli autori citano spesso le espressioni degli utenti sottoposti al test (giusto per fare un esempio: “That’s really a pain in the ass”).

Quale dei due report acquistare? Se non vi spaventa studiare più di 300 pagine, il report del Nielsen Norman group è sicuramente approfondito e dettagliato, ma se vi interessa un report comunque ricco di esempi, e con una comoda checklist pronta da stampare ed applicare, il report del del Baymard Institute rappresenta un’ottima alternativa, che vi permette anche di risparmiare qualche dollaro.

La battaglia dei cloni di documenti

Posted on 17/11/2011 by Antonio Volpon

Un web project manager produce molti e diversi documenti tra cui analisi, presentazioni, benchmark, debrief, a volte anche wireframe. Lavoro per diverse aziende e capita che sia invitato a utilizzare dei modelli già realizzati con loghi, colori e font istituzionali.

È qui che comincia la battaglia. Se per realizzare la documentazione ho impiegato un paio d’ore, cercare di farla rientrare nel modello che mi è stato consegnato è spesso un’impresa titanica.

Il problema è che non si tratta, nella maggior parte dei casi, di veri e propri modelli, ma di cloni di documenti che sono stati svuotati del contenuto e cui mancano delle vere linee guida di formattazione.

Il tipo e la dimensione dei font e le spaziature non sono stati realizzati come degli stili, ma sono stati applicati al testo all’occorrenza. E se anche sono stati utilizzati degli stili, lo si è fatto solo per il testo principale e (forse) per una tipologia di intestazione.

È un approccio inefficiente per diverse ragioni:

ogni volta che viene inserito un nuovo elemento, ad esempio un titolo, questo va copiato e incollato mutuandolo dal precedente
si perde il valore “semantico” del documento: un’intestazione dovrebbe essere tale perché questa informazione è stata specificata nel documento, mentre in questi documenti lo è semplicemente perché utilizza un font “più grande” rispetto alle altre
la qualità degraderà nel tempo: i primi due documenti rispetteranno in qualche modo lo standard, i successivi perderanno man mano la formattazione voluta
è impossibile applicare gli stili in un secondo momento, per esempio nel caso di documenti già realizzati, che devono essere modificati a mano voce per voce

Questo si verifica con i documenti Word, ma non solo. Anche Powerpoint e Keynote soffrono dello stesso problema. Piuttosto che investire una mezza giornata per realizzare delle diapositive master che possono poi essere applicate in ogni presentazione, si preferisce realizzare una presentazione con alcune slide che sono poi copiate e incollate più e più volte.

Quando mi viene proposto di utilizzare un modello aziendale per produrre documentazione, cerco se possibile di farmelo anticipare prima di iniziare il lavoro, così da capire come questi siano realizzati. Se la qualità non è secondo me soddisfacente, ma il numero di documenti che devo preparare è ridotto, inizio subito a utilizzare questi “modelli” per produrre la documentazione.

Se però si tratta di un’attività frequente, di solito preferisco investire un po’ di tempo e ricostruire completamente il modello. L’operazione, di solito, mi richiede circa un paio di ore (nel caso di una presentazione qualcosa di più), ma è tempo ben speso, soprattutto per me.

All’apparenza, rispetto al template che mi è stato consegnato, non cambia nulla. Ma il lavoro di produzione della documentazione diventa molto più efficiente, a tal punto da recuperare molto presto il tempo speso per la ricostruzione del modello.

Progettare con la carta

Posted on 10/11/2011 by Antonio Volpon

Da qualche mese sto sperimentando con soddisfazione uno strumento diverso per quella fase di progettazione che segue la definizione della strategia online e precede la creazione di prototipi. Prendo un foglio di carta e realizzo a mano bozzetti che possono poi essere condivisi e valutati insieme al team di User Experience.

Nulla di nuovo o che non avessi mai provato, ma che avevo abbandonato troppo frettolosamente ritenendola una pratica poco professionale.

Mi hanno aiutato a cambiare idea due letture: Paper Prototyping di Carolyn Snyder e il più recente Prototyping scritto da Todd Zaki Warfel per i tipi di Rosenfeld Media. Entrambi i testi forniscono ottimi suggerimenti su come realizzare prototipi con la carta e il libro di Carolyn Snyder arriva anche a spiegare come utilizzare questi prototipi in veri e proprie sessioni di test di usabilità con gli utenti.

Non mi spingo quasi mai, con la carta, fino alla fase di creazione dei prototipi. La carta mi aiuta a fissare sottoforma di bozzetti (sketch) diverse idee di interfaccia e interazione che possono poi essere valutate, scartate, scelte insieme al team UX. Si tratta quindi di un approccio quantitativo, che mira a produrre in tempi molto brevi diversi bozzetti che possano poi essere analizzati dal team e soprattutto criticati senza la paura di aver mandato all’aria ore o giorni di lavoro. Ogni bozzetto non dovrebbe richiedere più di mezz’ora per la stesura.

Trovo l’uso della carta efficace anche lavorando con team remoti: basta uno scanner e in pochi minuti il bozzetto è condivisibile con il resto del mondo.

Normalmente non uso un foglio di carta bianca, ma mi faccio aiutare stampando dei semplici template che includono l’interfaccia del browser e qualche guida di supporto (per esempio le risoluzione più diffuse). In internet è possibile trovarne decine: personalmente mi trovo molto bene con il lavoro svolto da UIStencil (il template è disponibile in formato PDF).

I diversi bozzetti sono poi criticati insieme al resto del team UX, solitamente fissandoli a una parete o a una lavagna.

Zaki Warfel in Prototyping riassume bene come dovrebbe svolgersi questo processo.

Diagram of the iterative design and critique process. Warfel, Todd Zaki. 2009. Prototyping: A Practitioner’s Guide. New York: Rosenfeld Media. http://www.rosenfeldmedia.com/books/prototyping/

Si tratta, come è facile vedere nello schema, di un processo iterativo.

Lo sketching (creazione dei bozzetti) è la parte generativa del processo, il cui obiettivo è proporre diverse idee senza prestare attenzione ai dettagli o alle inconsistenze (fast and furious).

Lo scopo della critica dei bozzetti è quello di trovare, tra le tante idee, la migliore. Chi ha realizzato il bozzetto ne elenca i punti di forza, i colleghi del team UX evidenziano lacune e richiedono approfondimenti. Questa fase dovrebbe durare pochi minuti, perché il dettaglio della proposta avviene nella fase di creazione dei prototipi vera e propria.

A questo punto, cioè per la creazione dei prototipi e per i testi di usabilità con gli utenti abbandono la carta. Preferisco infatti farmi aiutare da strumenti che permettano di simulare un po’ più nel dettaglio le transizioni tipiche di una pagina web, come le interazioni Ajax. In questo senso il mio strumento preferito è Axure RP: costoso, ma che permette di realizzare veri e propri prototipi piuttosto che wireframe, sui quali la carta vince ancora.