The Elements of User Experience

Interaction design, information architecture, information design, ecc. Termini e discipline che molto spesso è difficile collocare o descrivere, tanto sembrano sinonimi gli uni degli altri.

Eppure, lavorando nel web, questa distinzione di competenze è spesso fondamentale per capire come realizzare siti che soddisfino realmente gli utenti.

A far chiarezza in questa babele ci ha pensato Jesse James Garrett, che ha realizzato un semplice diagramma [Pdf 17 Kbyte] (disponibile anche in italiano [Pdf 20 Kbyte]) in cui presenta queste discipline, le relazioni che intercorrono tra loro e i punti in cui si collocano rispetto allo sviluppo web.

Sulla scia del successo del diagramma, l’autore ha quindi ricavato un libro in cui ha tutto il tempo di descriverne, completarne ed estenderne i concetti, senza mai esagerare (il testo ha il grosso pregio di non superare le 200 pagine).

Come è facile immaginare, si parte dalla descrizione di User Experience, ovvero come un prodotto (nel nostro caso, un sito), viene realmente usato da un acquirente o da un utente. Capire cos’è la User Experience è il primo passo per realizzare siti che tengano in considerazione le esigenze degli utenti (si parla in questo caso di User Centered Design).

Garrett ha suddiviso il diagramma in 5 fasi (Strategy Plane, Scope Plane, Structure Plane, Skeleton Plane, Surface Plan), presentate orizzontalmente dalla più astratta a quella più vicina all’utente, e a ognuna ha riservato un intero capitolo.

Decisamente ottima l’idea di dividere ulteriormente il diagramma, anche verticalmente, basandosi sulla doppia natura del web, da un lato quello di interfaccia software, dall’altro quello di sistema ipertestuale. Questa ulteriore distinzione permette di raggruppare le discipline direttamente coinvolte nel reperimento, catalogazione e creazione dei contenuti, e quelle più vicine allo sviluppo tradizionale di applicazioni.

Senza la pretesa di voler approfondire ogni disciplina dello User Centered Design, all’autore va sicuramente il merito di descrivere con accuratezza e semplicità ogni fase del diagramma, suggerendo alla fine di ogni capitolo i migliori testi di approfondimento.

La lettura del manuale è caldamente consigliata a chiunque si trovi coinvolto nello sviluppo di un sito web di medie o grandi dimensioni e voglia capire quali sono gli attori coinvolti, ma anche a chi, al termine del proprio percorso di studi, stia valutando la possibilità di un impiego specialistico in questo mondo.

Informazioni

The Elements of User ExperieceUser Centered Design for the Web ¤ di Jesse James Garrett ¤ pagine 190 ¤ prezzo 29.99 dollari ¤ edito da New Riders

5 manuali di web design

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 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 vertità 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, Peter Morville * Edito da O’Reilly * Prezzo 39.95 dollari * 460 pagine * Pubblicato nel 1998

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 font scegliere, usare e forzare i cascading style sheet)
  • 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, registrare gli utenti)

Le scelte di Jeffrey Veen 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 ¤ Edito da Apogeo (editore originale New Riders) ¤ Prezzo 35.64 euro ¤ 250 pagine ¤ Pubblicato nel 2001

Sito del manuale [nuova finestra] (scheda)

Dalla Carta al Web – Jeffrey 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 gli style sheet, cosa può fare il codice Javascript)

Interessante l’analisi dei font riguardo lo standard Css

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 ¤ Edito da Hops (editore originale New Riders) ¤ prezzo 35.12 euro * 420 pagine ¤ Pubblicato nel 2001

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

Web Navigation – Jennifer 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 comunque con alcune linee guida sulla 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 ¤ Edito da Hops (editore originale O’Reilly) ¤ Prezzo 25.31 euro ¤ 330 pagine ¤ Pubblicato nel 1998

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

Web Guida di Stile – Patrick 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 giunto 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: Guida di stile (titolo originale Web Style Guide) ¤ Di Patrick J. Lynch, Sarah Horton ¤ Edito da Apogeo (editore originale Addison Wesley) ¤ Prezzo xxx ¤ Pagine 200

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

Designing Web Usability – Jakob Nielsen

È il “classico” della web usability. Spesso criticato per le centinaia di linee guida costrittive che produce, Jakob Nielsen rimane comunque il maggior esperto 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.

È senza dubbio il primo manuale che dovreste acquistare

Web Usability (titolo originale Designing Web Usability) ¤ Di Jakob Nielsen ¤ Edito da Apogeo (editore originale New Riders) ¤ Pagine 480 ¤ Prezzo: 40.28 euro ¤ Pubblicato nel 1999

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 metodi di 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 realizzarli, 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 ¤ Edito da Morgan Kaufmann ¤ Prezzo 49.95 dollari ¤ 430 pagine ¤ Lingua: inglese ¤ Pubblicato a Ottobre 2001

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 ¤ Edito da Hops (editore originale New Riders) ¤ Pagine 200 ¤ Prezzo 33,05 euro ¤ Pubblicato a Ottobre 2000

Sito del manuale [nuova finestra] (scheda)

Homepage Usability

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 ¤ Edito da Apogeo (editore originale New Riders) ¤ Prezzo 45.00 euro ¤ 330 pagine ¤ Pubblicato ad Aprile 2002

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

Usability: The Site Speaks for Itself

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)

Watchfire Bobby 5.0

E’ da poco uscita la versione 5 di Bobby, uno di quegli strumenti che aiutano gli sviluppatori web ad evidenziare carenze di accessibilità nelle pagine web.

Bobby è disponibile in una versione gratuita (per il momento ancora la versione 4) utilizzabile online e una versione desktop (venduta a 299 dollari, 199 per chi la acquista entro il 7 Maggio 2003), arricchita di funzionalità, di cui ci occuperemo.

Come ben sanno i lettori del nostro corso di accessibilità web, è impossibile per un software evidenziare nel modo corretto tutte le problematiche relative all’accessibilità, dal momento che molte dipendono da fattori (chiarezza del linguaggio, utilizzo sensato del markup) non misurabili.

L’utilizzo di questi strumenti è comunque utile per “scremare il grosso” degli errori di accessibilità, spianando così la strada all’intervento umano.

State comunque sempre attenti: se da un lato un software può non rilevare problematiche esistenti, dall’altro (complici le carenze delle linee guida Wai) potrebbe intestardirsi nel sottolineare errori che sono in realtà di poco conto.

Detto questo, analizziamo alcune significative caratteristiche di questa versione.

Niente più Java

Uno dei limiti della precedente versione di Bobby era dato dal peso dell’applicativo, costruito interamente in Java.

Questa versione di Bobby è completamente nativa Windows, rendendo più agevole e veloce l’uso e la personalizzazione dell’interfaccia grafica.

Una schermata di bobby: una treeview con a destra un pannello di dettaglio

Interfaccia grafica che è stata completamente riveduta ed è ora più semplice da usare, anche se poteva essere fatto qualche sforzo in più per organizzare organicamente le diverse funzioni del programma.

Verifiche veloci e puntuali sia online, sia offline

La principale differenza rispetto alla versione precedente è la possibilità di configurare con precisione il sito (o i siti) da analizzare. Non solo è possibile definire il punto di partenza e lasciare a Bobby l’ingrato compito di seguire i link delle pagine ad esso collegati, ma possiamo specificarne la profondità, ed eventualmente i documenti da escludere.

E’ possibile analizzare sia siti online, sia offline. Nel primo caso basta semplicemente inserire l’Url di partenza, e Bobby si occupa di interrogare e scaricare le pagine dal server.

Pannello che consente di introdurre il nome del sito e il livello di profondità da analizzare

Nel caso si voglia invece analizzare un sito locale, è possibile specificare anche la directory di partenza del sito, in modo che link del tipo <a href=”/percorso/”> vengano risolti correttamente.

Pannello che consente di specificare la directory locale di riferimento per risolvere i link

Alcune opzioni avanzate consentono inoltre di interagire con siti protetti da password, siti che completano la QueryString con riferimenti alla sessione (e che vanno tolti, per evitare a Bobby di analizzare più volte la stessa pagina), siti distribuiti su più domini.

Test personalizzati

Un’importante caratteristica di Bobby 5.0 è data dalla possibilità di scegliere il tipo o il numero di linee guida da verificare per il proprio sito.

Questo non vuol dire semplicemente scegliere tra Wai A,AA,AAA e Section 508, ma scegliere puntualmente quali utilizzare e quali no.

E' possibile selezionare una per una ogni linea guida

E’ un’utile funzione, soprattutto considerando le carenze di alcune linee guida.

Risultati simili alla versione precedente

Chi si aspettava un miglioramento nella capacità di rilevare problematiche inerenti l’accessibilità potrebbe rimanere deluso. I risultati della versione 5 sono infatti pressoché identici a quella precedente. Nulla di cui stupirsi comunque: il problema è che alcune linee guida non possono essere verificate via software; per tutte le altre, già la versione 4 di Bobby svolgeva un ottimo lavoro.

L’unica differenza è che questa versione dello strumento, che è più efficiente nello scovare Url non collegati direttamente ad una pagina (ad esempio in un’istruzione Javascript, in un’animazione Flash o in una form), potrebbe trovare errori prima non raggiungibili.

Bobby cerca di estrarre link anche da file javascript e animazioni Flash

Report completi

La qualità dei report è stata migliorata e organizzata, come dimostra una prova che abbiamo realizzato. L’unica nota negativa è che non sembra essere possibile passare agevolmente dai report Wai A ad AA, AAA o Section 508 senza ripetere l’analisi del sito, anche se il manuale recita il contrario. Notevole la mancanza di un’opzione di salvataggio o di stampa, a cui si può ovviare agendo con il pulsante destro del mouse all’interno della pagina, che altro non è se non una finestra del browser.

Manuale in Pdf

La versione desktop è accompagnata da un comodo manuale in formato Pdf, che avrebbe però potuto presentare qualche esempio concreto oltre ad una sterile lista di operazioni.

Conclusioni

La versione 5 di Bobby, dal punto di vista dell’organizzazione dell’interfaccia e delle opzioni disponibili, compie notevoli passi avanti. La caratteristica più importante, e cioè la capacità di aiutare nel costruire un sito accessibile, è però praticamente invariata. Se non lavorate con siti di grosse dimensioni, quindi, non otterrete praticamente nessun vantaggio nel passare a questa versione.