Molte incomprensioni in fase progettuale derivano dalla mancanza di un vocabolario comune tra i diversi attori: clienti, designer, sviluppatori e project manager. I bozzetti realizzati su carta sono uno strumento semplice, ma efficace per valutare, scartate e scegliere le idee migliori e anticipare le problematiche; eliminando quella sensazione di aver perso un sacco di tempo e dover ricominciare da capo.

Chissà se questo è uno dei motivi che hanno spinto la redazione di Internazionale a richiedere la progettazione del proprio sito a Information Architects, nota web agency con sede a Tokyo e specializzata in progetti editoriali, soprattutto tedeschi e svizzeri.

Sono abbonato al settimanale Internazionale da più di 10 anni, sbircio impaziente la cassetta delle lettere ogni venerdì e non ho perso un Festival a Ferrara: non penso ci sia bisogno di aggiungere altro riguardo la considerazione che ho per questa rivista.

Però ogni volta che mi capita di visitare internazionale.it mi meraviglio di quanta poca cura sia stata posta all’interfaccia, anche se non sono sicuro se sia un limite della progettazione di Information Architects o di qualcuno che è intervenuto a posteriori.

Sarà che di siti editoriali ne ho visti parecchi (dal 2000 al 2006 ho progettato e gestito i siti dei periodici del gruppo Mondadori), ma il risultato che vedo sarebbe stato alla portata di molte agenzie italiane, anche non di prim’ordine.

Qualche settimana fa mi sono ricavato un’ora per compilare un documento in cui ho raccolto alcune delle problematiche più significative del sito e l’ho inviato alla redazione.

Non mi aspettavo una risposta, che infatti non è arrivata: mi interessava ricavarne un’occasione per parlarne qui.

Vi invito allora a scaricare il documento pdf [4 Mbyte] in cui ho raccolto alcune evidenze: spero possa essere utile per capire come svolgere in poco tempo una prima e non scientifica valutazione dell’usabilità di un sito. Sono convinto che spendendoci un po’ più di tempo, magari insieme a qualche collega, il numero di problematiche salirebbe significativamente.

È fuori discussione che ogni azienda possa spendere i propri soldi come meglio crede, ma è un peccato che il sito web di Internazionale non rispecchi la stessa cura e qualità della rivista cartacea.

Guerrilla web project management

Le slide con l’audio della mia presentazione a Better Software dello scorso giugno. Come può evolvere la professione del web project management in un mondo complesso?

Dietro le quinte di un progetto

Il blog della BBC è una ricca miniera per imparare da casi concreti il design e redesign di un progetto web.

Progettare con la carta

La creazione di bozzetti di carta è un approccio quantitativo che permette di valutare e migliorare in poco tempo diverse soluzioni per la progettazione di un servizio.

Checklist e web project management

Cosa hanno in comune un chirurgo e un web project manager? L’uso delle checklist per ridurre la probabilità di errore.

A ogni cosa il suo nome

figo.psd e che_palle.zip: quando è il caso di definire una nomenclatura condivisa.

Questa volta tocca all’applicazione iPhone del player che permette di rivedere i programmi trasmessi dall’emittente britannica.

E come sempre gli spunti non mancano, soprattutto perché non è presentato unicamente il risultato finale, ma anche le scelte che hanno portato alle diverse scelte progettuali, con particolare riferimento a quello che funziona meglio in ambito mobile:

• non condensare troppe funzionalità in ogni schermata
• tenere in considerazione i problemi di banda che possono verificarsi durante lo streaming
• sfruttare la possibilità di presentare interfacce e funzionalità diverse in portrait e landscape

The Messy Art Of UX Sketching di Smashing Magazine si spinge nel dettaglio, illustrando le principali tecniche. Tra gli strumenti da portarsi a casa ci sono sicuramente:

• il colore per evidenziare l’importanza di alcune sezioni
• i post-it nella creazione di tool-tip, popup e finestre modali
• le fotocopie per realizzare bozzetti (processo generativo)

4 ways to prototype faster raccoglie in un breve articolo quello che mi sentirei di suggerire su questo tema:

• iniziate a lavorare con la carta
• adottate un solo software per creare i prototipi, non una selezione (keynote + photoshop + balsamiq + dreamweaver)
• cercate, tra le diverse soluzioni, quella che vi permetta di produrre anche la documentazione funzionale
• utilizzate strumenti che vi aiutino a condividere il lavoro

5 Sketching Secrets of Leonardo Da Vinci indica qualche suggerimento per migliorare la creazione dei bozzetti, prendendo spunto dai lavori di Leonardo da Vinci. Il paragone è forse azzardato, i consigli meno:

• quello dei bozzetti è un processo generativo, che mira a creare diverse prospettive dello stesso concetto
• oltre all’interfaccia, il bozzetto può essere completato da note a margine, per chiarire il contesto e gli elementi non facilmente deducibili dalla sola interfaccia
• scopo dei bozzetti è di essere criticati costruttivamente; il processo è collaborativo
• la soluzione a una problematica può arrivare da campi diversi
• imparare a catalogare i lavori realizzati, così da avere una banca dati di soluzioni alternative

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.

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

Si tratta di 33 essential recruiting stats e Social Job Seeker Survey 2011. In breve:

• il 55% delle aziende intervistate investirà più risorse nel prossimo anno per il recruiting con i social network
• più dell’80% delle aziende utilizzano LinkedIn, ma poco più del 30% di chi cerca lavoro è in LinkedIn
• l’89% delle aziende americane intervistate indica di voler utilizzare i social network come strumento per il recruiting
• LinkedIn si conferma, con il 73%, il principale social network in termini di assunzioni, seguito da Facebook (20%) e Twitter (7%)
• 2/3 delle aziende intervistate hanno assunto anche grazie ai social network

Sullo stesso tema anche due interessanti infografiche pubblicate da Mashable, la prima con qualche suggerimento su come proteggere e migliorare la presenza professionale online, la seconda riporta invece i risultati di un sondaggio rivolto ai selezionatori e al rapporto con i social network.

E parlando di statistiche e sondaggi, vi ricordo che anche quest’anno, come è ormai tradizione,  A List Apart ne prepara uno rivolto a chiunque lavori con il web. Partendo dai risultati del sondaggio, gli scorsi anni ho cercato di darne un’interpretazione per cercare di capire meglio la professione del web project management:

• nel 2007
• nel 2008
• e nel 2010

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

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.

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.