Gli articoli più letti nel 2011

Fine anno. Questi sono i 5 articoli più letti e pubblicati nel 2011 su Fucinaweb. La classifica tiene conto sia delle visite del sito, sia delle letture tramite il feed RSS.

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.

Dietro le quinte di un progetto

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.

L’usabilità preventiva nel web

Cosa intendo con usabilità preventiva nel web? Intendo la capacità, per un sito o servizio, di anticipare e guidare l’utente allo scopo di limitare lo sforzo richiesto per raggiungere i propri obiettivi.

Il visitatore, si sa, ha poco tempo da perdere, o almeno ci piace crederlo. Allora perché non agevolare la sua navigazione filtrando quello che potrebbe interessargli rispetto all’intero contenuto del sito?

Le strade per implementare questo tipo di soluzione sono diverse. La strada più percorsa, quella classica, è di chiedere esplicitamente al visitatore qualche informazione preventiva, come la nazione o la lingua, così da fornire subito quello che è più adatto alle sue esigenze. E’ il caso di un sito di e-commerce che calcola le spese di spedizione o di un sito multilingua che presenta le “bandiere” nazionali da qualche parte nella pagina.

Un’altra strada, usata soprattutto da siti che prevedono l’iscrizione del visitatore, è quella di permettere la personalizzazione, anche spinta, degli elementi dell’interfaccia grafica. Quello che fa, tanto per capirci, l’homepage personalizzata di Google.

C’è una terza possibilità. Il server web di cose sul navigatore ne sa infatti parecchie, dalla risoluzione del monitor al numero di colori, dalla nazione di provenienza alla lingua usata. Di solito queste informazioni sono usate, a posteriori, a fini statistici. E’ quello che si fa per esempio con Google Analytics. Nessuno vieta di usare alcune di queste informazioni nel corso della navigazione dell’utente, così da agevolare alcune operazioni. Anche di questo parla l’interessante presentazione di Stephen Anderson di cui ho parlato qualche mese fa, in cui l’autore immagina un form che presenti precompilata la nazione di provenienza basandosi sull’indirizzo di IP (con possibilità, ci mancherebbe, di modificare il dato).

Questo terzo approccio, se ben impiegato, senza per forza voler strafare, potrebbe ridurre l’attività svolta “inutilmente” del visitatore.

Vediamo come con un’esperienza – negativa – vissuta in prima persona.

Incuriosito dal rilascio da parte della BBC dell’iPlayer, un software che permette il download dei programmi dell’emittente britannica trasmessi nell’ultima settimana, l’ho voluto provare. Ecco la cronistoria delle faticose operazioni che ho compiuto un mese fa. Oggi le cose sono diverse, proprio perché la stessa BBC ha impiegato qualche semplice tecnica di usabilità preventiva.

In coda

Ho richiesto un invito per partecipare al programma e ho atteso pazientemente. E’ passata circa una settimana e ho ricevuto nella mia casella un accredito, cioè un login e una password

Login con sorpresa

Dal sito iPlayer ho cercato il login e mi è apparsa la relativa schermata.

image

Si tratta di una finestra modale. Un peccato, perché mi ha impedito di accedere a Gmail dove erano salvati login e password, che ho allora dovuto copiare e incollare da un documento di testo.

Selezione del programma

A questo punto mi è apparsa la pagina principale dedicata ai programmi, in perfetto stile web 2.0.

image

Da qui ho navigato verso un qualcosa che mi interessava, in particolare un documentario sulle montagna.

Download

Ho cliccato sulla scheda del programma e mi si è presentata la possibilità di procedere con il download, come del resto mi sarei aspettato.

image

Problema 1: il browser

image

Ma non avrei dovuto usare Firefox, perché il sito è per il momento rivolto solo a utenti Internet Explorer. Anche se avessi usato il Mac non avrei avuto fortuna migliore. Ho allora ripetuto tutta la procura e mi sono autenticato con Internet Explorer.

Problema 2: la versione di Windows Media Player

Questo problema è quasi divertente. Anche se il computer sembra soddisfare tutti i requisiti presenti in questa pagina, c’è ancora qualcosa che non va.

image

Si tratta in realtà – è bastato poco per scoprirlo – della versione di Windows Media Player, che va quindi aggiornato. Scarichiamo il player, installiamo e ricominciamo da capo. Login, ricerca, selezione, ecc.

Download e installazione di iPlayer

image

A questo punto mi è stato chiesto di procedere con il download di iPlayer, che è un programma Windows a tutti gli effetti. L’ho scaricato, installato e sono poi ritornato per l’ennesima volta sulla scheda del programma e ho – finalmente – potuto richiederne la visione. Ricevendo questa pagina in risposta:

image

In poche parole: non posso usare il servizio perché mi sto connettendo da fuori della Gran Bretagna. Non posso fare nulla, il servizio è disponibile solo a chi vive lì. Fine, stop, punto.

La colpa, diciamolo francamente, è mia. Se avessi letto con attenzione le pagina fitta fitta di requisiti avrei trovato il riferimento a questo limite fondamentale e avrei risparmiato mezz’ora di tentativi.

Qualcosa in più l’avrebbe potuta però fare anche lo stesso sito della BBC. E oggi è infatti così: non riuscirete più ad ottenere una login e una password per accedere alle schermate che ho riportato qui sopra, perché ancora prima della richiesta di un accredito per la versione beta troverete ad attendervi il messaggio che vi avvisa del requisito principale, ovvero di essere residenti in Gran Bretagna.

L’esempio di iPlayer è sicuramente al limite, in quanto l’IP è usato addirittura per impedire l’accesso a una sezione (limite che con un po’ di impegno è comunque possibile aggirare).

Eppure in casi più semplici, come la precompilazione di alcuni dati nelle maschere di inserimento, i dati lasciati dal browser dell’utente potrebbe essere usati, una volta tanto, per risparmiargli un po’ di tempo piuttosto che per spiarne il comportamento.

I 15 princìpi web della BBC

Tom Loosemore della BBC ha pubblicato nel suo weblog un elenco di 15 punti che i dipendenti del network inglese sono tenuti a rispettare nel progettare e aggiornare i propri siti.

Li ho trovati degli ottimi comandamenti che andrebbero stampati e appesi vicino al monitor, e li traduco qui con qualche libertà:

  1. Realizza prodotti che incontrino le necessità del tuo pubblico
  2. I migliori siti web fanno una sola cosa, e la fanno molto bene
  3. Non cercare di fare tutto da solo, inserisci collegamenti ad altri siti di qualità
  4. Sperimenta e verifica velocemente, itera
  5. Tratta tutto il web come una tela creativa: non restringere la creatività al tuo solo sito
  6. Il web è una conversazione. Partecipa. Adotta un tono rilassato, ammetti i tuoi errori
  7. La qualità dell’intero sito è data dalla qualità della sua pagina peggiore. Verifica che le linee guida editoriali siano adottate e seguite
  8. Assicurati che sia possibile aggiungere collegamenti verso le tue pagine. Per sempre
  9. Ricordati che tua nonna non userà mai “Second Life”. Potrebbe utilizzare internet, ma con esigenze molto diverse da quelle dei precursori
  10. Crea diversi percorsi per raggiungere il contenuto: sviluppa aggregazioni per persone, luoghi, argomenti, canali, ecc. Ottimizza il sito per l’indicizzazione nei motori di ricerca
  11. Design e percorsi di navigazione consistenti coerenti non significa che una soluzione vada bene per tutti: gli utenti devono sempre sapere che si trovano su uno dei tuoi siti, ma questi possono essere anche molto diversi tra loro
  12. L’accessibilità non è un optional
  13. Fa’ in modo che i tuoi utenti possano copiare e incollare i tuo contenuti sulle pareti delle loro case virtuali: incoraggia gli utenti a prendere estratti di contenuto dalla tue pagine, e a inserire link verso il tuo sito
  14. Inserisci link alla discussioni che nascono nel web, non limitarti a ospitarle
  15. La personalizzazione dev’essere non intrusiva, elegante e trasparente. Dopo tutto si tratta dei dati dei tuoi utenti, che vanno rispettati

Del punto 12, relativo all’accessibilità, ho avuto modo di parlare molto. Anche l’ultimo, che parla di personalizzazione, è stato oggetto di qualche considerazione su Fucinaweb, a proposito delle interfacce che si adattano.

10 manuali di web design e usability

I libri recensiti da FucinaWeb.com:

Information Architecture For The World Wide Web, Second Edition – Louis Rosenfeld, Peter Morville

Ma come? L’Information Architecture non è il web design!

Vero. Collochiamo in questa rassegna anche un libro che fa riferimento a quella parte della User Experience che ha a che fare con “l’Information Architecture“, la disciplina che si occupa tra le altre cose di raggruppare e disporre gli elementi del sito perché un utente li possa fruire in modo efficace. È la nuova edizione del testo scritto nel 1998 e per la verità mai superato. Imparerete quali sono i diversi tipi di navigazione, come raggruppare le informazioni, come scegliere i nomi delle voci di menu e molto altro ancora.

FucinaWeb.com ha realizzato un recensione completa del testo ed ha intervistato i due autori.

È l’unico libro che non dovrebbe mancare nella vostra biblioteca.

L'orso polare della copertina

Information Architecture for the World Wide Web – Second Edition ¤ di Louis Rosenfeld e Peter Morville ¤ lingua inglese ¤ 460 pagine ¤ prezzo 45.60 euro ¤ edito da O’Reilly

Sito del manuale [nuova finestra] (scheda, errata, capitolo gratuito)

Web Design Arte e Scienza – Jeffrey Veen

In questo manuale troverete consigli ed esempi di codice da usare per realizzare siti accattivanti superando i limiti (e i bug) dei browser.

Tra gli argomenti presentati:

  • Consistenza dell’interfaccia (dove sono, dov’è quello che cerco, dove sto andando, i tipi di navigazione)
  • Struttura (come organizzare le informazioni, Xml per descrivere contenuto e significato dei dati)
  • Design cross-browser (il design “liquido”, quali tipi di carattere scegliere, usare e forzare i Css)
  • I browser (capire i limiti, quali browser considerare, riconoscere il browser lato client)
  • La velocità (come velocizzare il download delle pagine con un accorto uso di Css, e di scelte di design)
  • La pubblicità (i banner peggiori, come registrare gli utenti)

Le scelte di Jeffrey Venn sono a volte ardite e ne sono la dimostrazione gli esempi, che è sempre interessante analizzare a fondo. La soluzione migliore è forse di realizzare siti frutto di un mix tra il design dell’autore e le regole di usabilità di Steve Krug.

Web Design Arte e Scienza (titolo originale The Art and Science of Web Design) ¤ Autore Jeffrey Veen ¤ lingua italiana ¤ Edito da Apogeo (editore originale New Riders) ¤ Prezzo 35.64 euro ¤ 250 pagine

Sito del manuale [nuova finestra] (scheda)

Dalla Carta al WebJeffrey Zeldman

Un manuale rivolto, almeno nelle intenzioni, al designer tradizionale che sbarca nel web. In realtà i suggerimenti dell’autore di AListApart [nuova finestra] sono validi anche per chi è web designer da tempo. Secondo Zeldman è il momento di abbandonare lo sviluppo di siti conformi ai browser della versione 4 e di abbracciare appieno lo standard Css anche riguardo al posizionamento degli elementi.

Gli argomenti presentati:

  • Capire il medium (le dimensioni delle pagine, i limiti dell’Html, tecniche cross-browser, la navigazione e l’interfaccia,
  • Il ruolo del designer nel web
  • Come fare (codice Html e Xhtml, i formati grafici, come usare i fogli di stile, cosa può fare il codice Javascript)

Dalla Carta al Web – Istruzioni per l’uso per designer di talento (titolo originale Taking Your Talent to the Web – A Guide for the Transitioning Designer) ¤ di Jeffrey Zeldman ¤ lingua italiana ¤ Edito da Hops (editore originale New Riders) ¤ prezzo 35.12 euro ¤ 420 pagine

Sito del manuale [nuova finestra] (scheda)

Web NavigationJennifer Flaming

Questo manuale si concentra principalmente sulla navigazione del sito, di cui analizza diversi aspetti:

  • Navigazione in siti commerciali
  • Navigazione in siti di comunità
  • Navigazione in siti di intrattenimento
  • Navigazione in siti d’identità (corporate)
  • Navigazione in siti per l’apprendimento
  • Navigazione in siti d’informazione

Ciascun capitolo evidenzia le necessità di ciascun tipo di sito, le aspettative degli utenti, alcuni casi studio e di esempi da seguire.

Il manuale si apre con alcune linee guida rigurdanti la struttura della navigazione che dovreste fotocopiare e appendere in ufficio

Web Navigation – Il design delle interfacce web (titolo originale Web Navigation: Designing the User Experience) ¤ di Jennifer Flaming ¤ lingua italiana ¤ Edito da Hops (editore originale O’Reilly) ¤ Prezzo 25.31 euro ¤ 330 pagine

Sito del manuale [nuova finestra] (scheda, capitoli gratuiti)

Web Style Guide Second EditionPatrick Lynch, Sarah Horton

Lynch e Horton sono i primi autori ad aver capito le reali necessità del web e ad everne parlato con intensità ed intelligenza nel sito web dell’Università di Yale.

Si tratta di una guida di stile: integra al suo interno elementi di design, senza mai dimenticare le necessità dell’usabilità.

Al testo, giunto recentemente alla seconda edizione, abbiamo dedicato una approfondita recensione.

Il manuale è particolarmente adatto per introdurre i concetti di web design e web usability a classi di studenti.

Web Style Guide – Second Edition ¤ di Patrick J. Lynch e Sarah Horton ¤ lingua inglese ¤ pagine 220 ¤ prezzo 18.95 dollari ¤ edito da Yale University Press

Sito del manuale [nuova finestra] (versione online del manuale)

Web Usability – Jakob Nielsen

È il “classico” della web usability. Spesso criticato per le centinaia di linee guida costrittive che produce, Jakob Nielsen rimane comunque tra i maggiori esperti in questo campo e la sua newsletter quindicinale, Alertbox [nuova finestra], non va mai trascurata.

Il manuale copre diversi aspetti dell’usabilità web:

  • il design della pagina
    • come lo spazio va suddiviso tra contenuto, pubblicità e navigazione
    • la necessità di creare siti fruibili a diverse risoluzioni
    • realizzare siti cross-browser
    • come costruire i link
    • riflessioni sull’uso dei frame
  • il design dei contenuti
    • come l’utente legge e come si scrive per il web
    • come pensare i titoli e i sommari
    • uso efficace di immagini, video e suoni
  • il design del sito
    • la home page è diversa dal resto del sito
    • come costruire la navigazione
    • le funzionalità di ricerca
    • costruzione efficace degli Url
  • design per l’intranet
  • accessibilità web

Il libro è piuttosto teorico: non troverete mezza linea di codice Html a corredo delle spiegazioni. Molti sono però i siti presentati di cui sono analizzati i limiti (tanti) e i pregi (quasi nessuno).

Se applicate alla lettera tutto quello che dice Nielsen, finirete per realizzare siti di solo testo. Il vostro scopo è però diverso: dovete essere al corrente di quali sono tutte le regole di usabilità web. In questo modo potrete decidere a quali rinunciare e quali, invece, utilizzare per la costruzione delle pagine.

Web Usability (titolo originale Designing Web Usability) ¤ di Jakob Nielsen ¤ lingua italiana ¤ Edito da Apogeo (editore originale New Riders) ¤ Pagine 480 ¤ Prezzo: 40.28 euro

Sito del manuale [nuova finestra] (scheda)

Usability for the Web – Brinck, Gergle, Wood

È un manuale di cui solitamente non si parla, ma che ha il vantaggio di analizzare l’impatto dell’usabilità durante l’intero processo di realizzazione di un progetto web, dall’analisi dei requisiti sino alla messa in produzione. Visto che l’usabilità è parte di ogni proposta, decisione e realizzazione, gli autori hanno coniato il termine di pervasive usability“.

Leggendo il testo vestirete i panni del project manager, del web architect, del web designer, dello sviluppatore e infine del tester.

Il manuale (di cui abbiamo apprezzato anche il “design dell’impaginazione”, tanto che ha influenzato la costruzione di FucinaWeb.com) è suddiviso in 7 parti:

  • Pervasive usability (cos’è, come è composto il processo di realizzazione di un sito web, vantaggi e svantaggi dei diversi approcci alla web usability
  • Analisi dei requisiti (capire gli utenti e le loro richieste, intervistarli e realizzare i focus group)
  • Conceptual design (task analysis e information architecture)
  • Realizzazione dei prototipi (come costruirli, come presentarli, come valutarli)
  • Produzione (scrivere contenuti per il web, il design degli elementi della pagina)
  • Lancio del sito (il test di qualità pre e post lancio)
  • Valutazione dell’usabilità

Il manuale è particolarmente consigliato se vi occupate di progetti di medie dimensioni, dove molto probabilmente oltre che web designer potreste ricoprire il ruolo di grafico, editor o sviluppatore di pagine Html. Troverete anche spunti interessanti per argomentare le vostre ragioni durante le riunioni di progetto.

Usability for the Web: Designing Web Sites that Work ¤ di Tom Brinck, Darren Gergle, and Scott D. Wood ¤ lingua inglese ¤ Edito da Morgan Kaufmann ¤ Prezzo 49.95 dollari ¤ 430 pagine ¤ Lingua: inglese

Sito del manuale [nuova finestra] (scheda, materiale)

Don’t make me think – Steve Krug

La caratteristica che colpisce per prima è la dimensione: appena 200 pagine. Non si tratta infatti di un manuale che analizza tutti gli aspetti dell’usabilità web, ma di un’efficace guida che vi presenta cosa è fondamentale considerare nella realizzazione di un sito. Il tono è amabile, a volte addirittura scherzoso: vi sembrerà di leggere un fumetto piuttosto che un manuale. Steve Krug si comporta da psicologo e come tale vi porta a capire come l’utente si comporta di fronte alle vostre pagine, cosa pensa e cosa ricerca. L’utente è il vero protagonista di questo testo.

Gli argomenti affrontati sono:

  • L’utente non ha voglia di pensare troppo
  • Come l’utente usa il web
  • Come scrivere per il web
  • La navigazione efficiente
  • L’Homepage è un caso particolare
  • Come lavorare in team
  • Come svolgere un test di usabilità

L’ultima parte del testo è particolarmente interessante: imparerete come realizzare con poca spesa un test di usabilità e, soprattutto, come valutarne i risultati.

Non fatevi spaventare dal numero esiguo di pagine: c’è gran parte di quello che vi serve.

Don’t make me think – Un approccio di buon senso all’usabilità web (titolo originale: Don’t make me think – A common sense approach to Web Usability) ¤ Di Steve Krug ¤ lingua italiana ¤ Edito da Hops (editore originale New Riders) ¤ Pagine 200 ¤ Prezzo 33,05 euro

Sito del manuale [nuova finestra] (scheda)

Homepage Usability – Jakob Nielsen e Marie Tahir

Questo manuale analizza esclusivamente le Homepage di un sito. Al momento della pubblicazione FucinaWeb.com ne ha realizzato una recensione, a cui vi rimandiamo per approfondimenti. Al di là dei casi studio di 50 Homepage, stimolanti sono le linee guida presentate in apertura al volume.

Homepage Usability – 50 siti web analizzati (titolo originale Homepage Usability – 50 Websites Deconstructed) ¤ di Jakob Nielsen, Marie Tahir ¤ lingua italiana ¤ Edito da Apogeo (editore originale New Riders) ¤ Prezzo 45.00 euro ¤ 330 pagine

Sito del manuale [nuova finestra] (scheda, esempi, errata)

Usability: The Site Speaks for Itself – Braun, Gadney, Haughey, Roselli, Synstelien, Walter, Wertheimer

Un manuale che presenta casi studio da 6 siti web di rilievo (tra cui la Bbc e l’Economisti) come se fossero interviste agli autori che hanno progettato e sviluppato il sito.

Un ottimo riferimento per chi si occupa della costruzione di siti web di un certo rilievo e rivolti ad un vasto pubblico.

Ne abbiamo parlato approfonditamente in una recensione dedicata.

Usability: The Site Speaks for Itself ¤ di Braun, Gadney, Haughey, Roselli, Synstelien, Walter, Wertheimer ¤ pagine 280 ¤ prezzo 49.99 dollari ¤ lingua inglese ¤ edito da Glasshaus

Sito del manuale [nuova finestra] (scheda, esempi, errata)