I bozzetti in aiuto alla comunicazione di progetto

Anche quest’anno (dopo il 2009, 2010 e 2011) ho partecipato come speaker a Better Software. Questa volta ho presentato “Carta, penna e calamaio. I bozzetti in aiuto alla comunicazione di progetto”.

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.

Su Slideshare ho caricato le slide sincronizzate con l’audio preso dalla sala. Buona visione e buon ascolto!

Progettare con la carta

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.

PT001: Figure 2.1Diagram 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.

A ogni cosa il suo nome

Mi trovo dal cliente con l’art director per illustrare la tavole grafiche del progetto. Ha apportato le ultime modifiche ieri sera e non siamo riusciti a rivederle insieme. Apre il portatile e fa doppio clic su figo.psd.

Il collega che si occupa del frontend manda un’email con le ennesime correzioni richieste dall’azienda che si occuperà dell’integrazione. Una volta decompresso il file, nel desktop compare la cartella che_palle.

Sono due esempi, ma potrei tranquillamente continuare per ore e ore senza mai ripetermi. Ok_bis_def.zipaltra_prova.psd, oggi_non_ho_idee.png: ho a disposizione un’intera letteratura di nomi insignificanti e imbarazzanti.

Stufo di passare le giornate a rinominare i file e inviarli ai diversi attori (ammesso che fossi ancora in tempo) ho messo a punto un semplice sistema di nomenclatura che cerco di applicare e  fare applicare.

Il consiglio è quello di partire già dalla stesura dei wireframe, per proseguire nel corso della progettazione grafica fino ad arrivare allo sviluppo delle pagine HTML. Ogni wireframe va correttamente nominato prima di consegnarlo all’art director, che solitamente è ben felice di conservare la creatività per altri compiti.

Ho provato in questi anni diversi tipi di nomenclature, ma quella che si è rilevata più efficace nasce da un compromesso tra nome dal contenuto altamente informativo e semplicità di applicazione della regola.

Un tipico esempio di nomenclatura potrebbe essere il seguente:

  • HP010
  • PR010
  • PA010

I primi due caratteri indicano la sezione del sito a cui la pagina fa riferimento (in questo caso HP sta per homepage, PR per scheda prodotto e PA per processo d’acquisto), mentre il numero indica il progressivo della pagina all’interno della sezione (HP010 potrebbe essere l’homepage generale, HP020 la declinazione per il periodo natalizio, ecc.). Utilizzo le decine e non le unità per rappresentare i progressivi perché, se ci accorgiamo di aver dimenticato un template che “logicamente” va inserito tra altri due, lo possiamo includere (ad esempio HP015).

Come è facile vedere la regola è banale, ma proprio per questo altrettanto semplice da applicare. A me ha risparmiato molto tempo, ma soprattutto ha permesso di verificare a colpo d’occhio se i template realizzati erano, in ogni fase, tutti quelli previsti.

P.S.: se, come me, avete il pallino delle nomenclature, vi rimando a un articolo che ho scritto quasi 10 anni fa (il tempo passa) e che affronta tra le altre cose il tema dei nomi da dare e non dare alle regole CSS: Chi ha paura di Xhtml 8?

Semplificare il web project management

Il web project management è una disciplina complessa, un po’ perché molti sono i compiti del web project manager, ma soprattutto perché il web project manager interviene per facilitare il lavoro degli altri, per ridurre gli attriti, per decidere la strada da seguire a seguito di problemi importanti.

Avere qualche indicazione su come semplificare il web project management non può che essere di aiuto. Alcune le ho trovate leggendo Project Management Made Easy, un intervento pubblicato qualche mese fa nel blog di Blue Flavor (se siete web project manager è uno dei pochi blog a cui vale la pena di iscriversi). Scorrendolo la prima volta ho però sorriso. “Un poco ovvio” – mi sono detto – “questi sono argomenti che non è necessario ricordare a un web project manager”. Ho aggiunto comunque l’intervento nel mio del.icio.us per una futura occasione.

Da allora ho avuto modo di ricredermi sulla banalità degli argomenti, sopravvalutati da molti, e ho deciso di riportare qui uno stringato riassunto dell’intervento, integrandolo con la mia esperienza.

Se vuoi ridurre la complessità del tuo lavoro di web project manager:

  • assicurati che tutti sappiano quali sono gli obiettivi del progetto
  • verifica che ogni componente del gruppo conosca quale è il suo specifico ruolo in questo progetto
  • tieni traccia dei tempi e dei costi
  • impara a comunicare

Quasi tutti i punti hanno a che fare con la comunicazione, e non è una coincidenza. La complessità nel web project management si riduce solo spendendo tutto il tempo necessario con i propri colleghi e con i clienti, così da anticipare i problemi prima che sia difficile intervenire. Ho paura quando ci si butta a capofitto a sviluppare un progetto senza che sia stata prodotta neppure un briciolo di documentazione o che sia stato stabilito come il progetto va suddiviso tra i diversi componenti del gruppo.

Non sto dicendo che prima di iniziare un progetto devono essere prodotte tonnellate di pagine di specifiche; non mi rifiuto di procedere con uno sviluppo senza trascrizioni di interviste con il cliente, analisi dei requisiti e analisi funzionali. Molto spesso, soprattutto per i progetti di media complessità, basta probabilmente un wireframe opportunamente commentato, che però ha fatto capolino al cliente (dove qualcuno lo ha illustrato) ed è poi tornato con le opportune correzioni in azienda.

Non dimenticate poi che non tutti i componenti del gruppo di lavoro con cui lavorate hanno messo piede dal cliente o nelle sale riunioni, per cui non è sufficiente limitarsi a spiegargli la loro parte di lavoro. Dovete coinvolgerli sull’intero progetto, anche se poi si troveranno a lavorare in una minima parte. A meno che non vogliate, ovviamente, che vengano commessi errori non appena le specifiche sono ambigue (il che succede sempre) o che vogliate rinunciare all’apporto che ogni membro del gruppo può dare anche al lavoro degli altri. Centellinare le informazioni porta anche a dipendere da ogni membro del gruppo, evento traumatico quando poi qualcuno va a lavorare da un’altra parte (come ho avuto modo di dire in Quando finisce un amore).

Non so voi, ma io odio essere disturbato ogni due minuti perché chi lavora con me non ha tutti gli elementi per procedere o perché il cliente non si ricorda quanto avevamo stabilito. Se è così anche per voi provate a mettere in pratica qualcuno di questi punti. Lavorerete meglio.

Information Architecture – Blueprints for the Web

Cominciano a comparire in libreria un certo numero di interessanti manuali rivolti al mondo dell’Information Architecture.

Questo testo, scritto da Christina Wodtke (una delle menti dietro a Boxes and Arrows), è un testo di introduzione alla materia, con diversi esempi concreti e un tono amabile, ma non per questo poco professionale.

Rispetto alla nuova versione del libro polare di Rosenfeld e Morville, “Blueprints for the Web” è quindi consigliato a chi ancora non conosce questa disciplina, o vuole capire se gli può essere utile nel lavoro di web designer.

L’inizio non è per la verità dei più teneri, e la Wodtke cerca subito di spazzare via alcuni preconcetti e falsi miti della professione, tenendo le distanze soprattutto da chi si professa guru (fin troppo esplicita l’allusione a Jakob Nielsen).

Uno dei temi centrali è il processo di sviluppo centrato sull’utente. Imparerete come mettervi nei panni dei lettori, creare scenari di utilizzo, ma anche come realizzare interviste e test sui prototipi, per provare prima che sia troppo tardi l’efficacia del vostro sito.

Altri capitoli classici (per un libro di Information Architecture) sono quelli relativi alla navigazione del sito e all’organizzazione e catalogazione delle informazioni. Ci è piaciuto molto l’esempio basato su The Mirror Project per illustrare cosa sono e a cosa servono i metadata. Ci siamo però resi conto che i nomi dei capitoli, sicuramente originali, non facilitano certo la rilettura mirata del manuale.

Molto ricca la rassegna delle tecniche che avete a disposizione per scarabocchiare (Drawing for Thinking) la progettazione dell’architettura. Si parla di Sitepath Diagramming, di Topic Mapping, Storyboard, Web Diagrams e Functional Specifications. Per quanto riguarda la documentazione (Drawing for Documenting), imparerete a realizzare Sitemap e Wireframe, anche adottando il vocabolario visuale di Jesse James Garrett.

Interessante ed istruttivo anche il caso studio di Digital Web Magazine. Christina è stata contattata per migliorarne l’architettura e svela passo passo il lavoro che l’ha vista coinvolta. Ci sarebbe addirittura piaciuto che avesse approfondito un po’ di più questo caso studio.

In breve

Il testo è un manuale introduttivo, snello, che non annoia e cerca di tenere viva l’attenzione del lettore con esempi sempre stimolanti e un buon caso studio. Volendo usare un gioco di parole, è l’Information Architecture del libro che ci ha lasciato un po’ perplessi: i titoli dei capitoli sono un po’ troppo criptici (soprattutto se cercate velocemente una spiegazione), e alcuni argomenti non sono ben collegati tra loro.

Informazioni

Information Architecture – Blueprints for the Web ¤ di Christina Wodtke ¤ pagine 350 ¤ prezzo 29.99 dollari ¤ edito da New Riders