User Experience: diagrammi e grafici

Una collezione per chi si interessa a UX e web design: dalla progettazione di un sito alla sua realizzazione.

In passato era già capitato di discutere di User Experience: in Italia se ne parla ancora poco, ma è un aspetto fondamentale per la realizzazione di un buon progetto web.

Se siete interessati ad approfondire l’argomento, ho raccolto una serie di grafici e diagrammi da applicare soprattutto all’ambito web, tra cui la fantastica UX Wheel di Magnus Revang.

Tutti descrivono in maniera più o meno dettagliata le competenze necessarie per realizzare un sito web completo, illustrando la strada da percorrere. Non è sempre facile tenere presenti gli obiettivi finali: questi diagrammi possono essere d’aiuto anche per capire l’utilità di certe attività durante lo sviluppo.

Studi di usabilità, attenzione per l’accessibilità e per l’architettura dell’informazione: sono tutte parti fondamentali della creazione di un sito se si vuole offrire un’esperienza positiva all’utente finale.

I diagrammi

UX Wheel

Praticamente d’obbligo stamparla e tenerla sempre presente. Descrive le varie fasi creative associando i risultati a dei processi produttivi, per arrivare ad ottenere un valore finale.

UX Honeycomb

Al contrario del diagramma precedente qui non viene identificato un processo produttivo, ma un insieme di fattori che contribuiscono al raggiungimento di una user experience positiva. Non esiste infatti solo l’usabilità.

UX Treasure Map

Peter Morville ha raccolto in un unico schema molti fattori, rappresentando il tutto come un percorso da seguire per raggiungere l’obiettivo.

The Fundamentals of Experience Design

Un modello di grande impatto visivo dove vengono riunite le persone, le loro attività, ed il contesto di queste attività. Sotto le annotazioni superficiali esistono poi livelli più approfonditi: basta voler scavare.

Questi sono alcuni dei diagrammi più interessanti pubblicati anche su UX Booth qualche giorno fa. Se volete approfondire il discorso fate riferimento al post completo, dove troverete altro materiale. In aggiunta, voglio condividere anche le risorse che seguono.

The Disciplines of User Experience

Un diagramma che vuole rappresentare tutte le discipline coinvolte nel raggiungimento di una user experience positiva. Interessante la domanda che si pone l’autore nel post: cosa può essere indentificato come UX Design, escludendo le varie attività da cui è costituito (visual design, interaction design, ecc.)? E’ difficile identificare infatti l’UX Design come un’attività separata ed autonoma, a meno che ci si limiti a considerarlo come semplice coordinamento.

User Experience Diagram Rationalization

Luke Wroblewski ha riunito in un unico schema il lavoro fatto da altri esperti del settore per rappresentare gli obiettivi, i processi e le discipline coinvolte nella realizzazione di un prodotto. Tutto in una sola immagine.

Se conoscete altre risorse simili segnalatele nei commenti, sono a vostra disposizione.

Flickr redesign: la nuova pagina foto

La nuova pagina foto di Flickr è un miglioramento per gli utenti?

Gli utenti abituali di Flickr se ne saranno già accorti: da qualche giorno è stata resa pubblica la nuova versione della pagina foto.

Come consuetudine la novità è stata pubblicata come preview per gli utenti, che possono decidere se mantenere la vecchia versione per qualche tempo o utilizzare la nuova: questa pratica è ormai consolidata e concede ad una buona fetta di utenti di abituarsi al cambiamento, senza imposizioni da un giorno all’altro. Le critiche non mancheranno comunque, ma sarebbe un’utopia pensare di fare felici tutti con un redesign di un’interfaccia.

Per l’elenco delle novità in dettaglio vi rimando al post ufficiale sul blog di Flickr: io preferisco soffermarmi solo su alcuni aspetti del cambiamento, e su come certi dettagli siano stati molto apprezzati dagli utenti abituali. E’ stata una sorpresa infatti leggere molti pareri positivi, cosa che non era successa con altri redesign (vedi il caso di Facebook).

I dettagli più interessanti

Foto più grandi

In un sito che ha nelle immagini la sua ragione di esistere, aumentare la dimensione di default delle stesse è una mossa vincente. Le foto iniziavano infatti ad essere troppo piccole per le risoluzioni sempre più elevate dei nuovi monitor: adesso arrivano ad una larghezza di 640 pixel, sicuramente più accettabile.

Ingrandimento con un clic

Questa è una delle novità più interessanti: molti utenti infatti inserivano nella descrizione delle foto un link alla stessa immagine più grande su sfondo nero. Sono nati anche servizi esterni per questo, e Yahoo! ha deciso di assecondare gli utenti offrendo la feature direttamente su Flickr. Adesso con un clic sull’immagine questa viene visualizzata a schermo intero su sfondo nero, e la resa è ottima:

Geotagging in evidenza

Mettere in evidenza le informazioni geografiche collegate ad una foto qualche anno fa sarebbe stata una follia. Adesso non lo è più. Con smartphone e fotocamere dotate di GPS, geolocalizzare le foto è automatico, e comunque è sempre possibile farlo anche manualmente dopo aver importato gli scatti.

Inserire questa feature al primo posto sulla sidebar destra fa capire la sua importanza. In questo modo diventa ancora più facile ritrovare tutti gli scatti di una certa località e scoprire le foto più popolari di un luogo.

I difetti

Nonostante il redesign sia positivo, alcune cose potrebbero essere ulteriormente migliorate.

Avrei apprezzato molto uno spazio dedicato ai dati EXIF delle immagini: Flickr è una community ricca di fotografi, e certe feature sarebbero sicuramente apprezzate. In questo redesign invece i metadati rimangono su una pagina separata: sarebbe stato interessante vedere almeno apertura, tempo di esposizione ed ISO.

Per quanto invece riguarda il codice e l’accessibilità delle pagine, non mi è mai piaciuta (e continua a non piacermi) l’eccessiva dipendenza da JavaScript di alcune funzioni. E’ comprensibile che certe azioni siano impossibili senza appoggiarsi a degli script, ma si potrebbe fare di meglio anche solo per quanto riguarda i menu di navigazione: con JavaScript disabilitato infatti la maggior parte dei link non funzionano ed i menu non possono essere aperti (cosa che sarebbe facile da implementare con qualche riga di CSS).

Sono invece funzionanti i nuovi link di zoom e di navigazione (foto successiva / precedente): è possibile che per alcuni nuovi elementi dell’interfaccia sia stata prestata più attenzione, ed altre parti del sito come il menu generale siano rimaste invece con i vecchi difetti. Questo redesign infatti riguarda solo la pagina foto di Flickr, tutto il resto è rimasto inalterato.

In conclusione

Il nuovo design è piacevole e più funzionale: il parere complessivo è decisamente positivo. Ci sono alcuni elementi che potrebbero essere ulteriormente migliorati, ma riguardano più la piattaforma intera di Flickr che la pagina delle singole foto. Per il momento fa piacere vedere qualcosa di nuovo in un sito che era rimasto fermo da anni: le modifiche faranno contenti i molti utenti pro che decidono ogni anno di rinnovare il proprio abbonamento.

IA Summit 2010, il resoconto

Le mie impressioni sul quarto summit italiano di Architettura dell’Informazione, a Pisa.

Reduce da due giorni trascorsi a Pisa per il quarto summit italiano di Architettura dell’Informazione, mi sembra giusto tirare le somme e fare un resoconto dell’evento.

Gli ospiti internazionali

La prima cosa che ho pensato tornando a casa, è stata che le presenze internazionali sono un grande valore aggiunto per eventi come questo. Ascoltare il talk di apertura di Jason Hobbs sull’importanza dell’Architettura dell’Informazione (ma soprattutto del gettare le basi di una scienza comune a cui fare riferimento) è stato illuminante. Trovate la sua presentazione (con alcune differenze) su SlideShare: “The door, the wind, the bird and the valise”, ed il video che appare nella slide 15 è questo:

Notevole anche il keynote conclusivo di Andrew Hinton: un lungo intervento su IA ed organizzazione delle informazioni, passando da D&D e Quake (!) al web design. Tanto materiale su cui riflettere, presentato in maniera eccellente: è apparso evidente come certi personaggi siano abituati a stare sul palco parlando di questi argomenti.

Gli interventi italiani

Gli ospiti stranieri di cui ho parlato valevano da soli il viaggio, ma sono stato contento di ascoltare anche altri talk interessanti: sicuramente quello di Federico Fasce, che aspettavo con curiosità e che non ha deluso le aspettative, ma anche un bell’intervento di Cristiano Rastelli sull’esperienza utente nei quotidiani online, con replica in sala di un rappresentante del gruppo dell’Espresso/Repubblica.

Ci sono state alcune note stonate, interventi troppo autoreferenziali o poco in tema con il summit, ma sono state poche eccezioni che non hanno abbassato di troppo la qualità media dell’evento.

Quando possibile cerco sempre di non mancare ad appuntamenti come questo: sono un’ottima occasione per discutere con altri lavoratori del settore, fare nuove conoscenze, e trovare spunti interessanti nei talk presentati. Mi rendo conto di averlo già scritto altre volte parlando di eventi simili e barcamp, ma non posso fare a meno di ripetermi. Partecipare a questi incontri permette di allargare i propri orizzonti, assorbendo quante più informazioni possibili. Il guadagno può essere sia culturale che interpersonale, ed ha poca importanza quale sia dei due l’aspetto prevalente, perché il bilancio sarà comunque positivo.

Alberto Mucignat ha raccolto in un video alcuni pareri sull’evento:

Microsoft e la scelta del browser

Le possibili conseguenze dell’introduzione del “ballot screen” nei sistemi operativi Windows.

Schermo per la selezione del browserL’Unione Europea ha annunciato l’accordo con Microsoft: da Aprile 2010 tutti i sistemi operativi della casa di Redmond (Windows Xp, Vista e 7) dovranno permettere all’utente di scegliere quale browser utilizzare, senza imporre Internet Explorer.

Potete leggere maggiori dettagli a riguardo su Punto Informatico: la cosa fondamentale da sapere è che la novità riguarderà tutti i computer europei dove IE è il browser predefinito, e sarà possibile scegliere tra dodici alternative. La lista dei browser verrà aggiornata ogni sei mesi, ed inizialmente prevederà:

  • Internet Explorer
  • Firefox
  • Chrome
  • Safari
  • Opera
  • K-Meleon
  • AOL
  • Slim Browser
  • Maxthon
  • Avant Browser
  • Flock
  • Sleipnir

La decisione sembra rilevante, anche se la sentenza della UE alla fine ha coinvolto browser con percentuali di mercato minime. La concorrenza doveva essere garantita, ma adesso i tanti nomi entrati in gioco rischieranno di confondere ancora di più gli utenti.

Per gli sviluppatori cambierà qualcosa? Impossibile prevederlo con precisione, ma è quasi certo che la maggior parte degli utenti continuerà a scegliere ciò che conosce meglio, ed Explorer resterà a farci compagnia ancora per molto tempo.

Proviamo ad immaginare quello che succederà sul computer di un utente medio con IE come browser predefinito:

  • l’utente che vuole accedere ad internet e si troverà davanti una schermata mai vista
  • gli verrà detto di scegliere tra dodici alternative, la maggior parte mai sentita prima
  • riconoscerà l’icona o il nome di Internet Explorer e lo selezionerà

Sarà interessante vedere le statistiche di utilizzo dei browser nel periodo immediatamente successivo all’introduzione del ballot screen, ma difficilmente ci saranno rivoluzioni: molto dipenderà anche da come sarà presentata la selezione. Per il momento l’unica anteprima a disposizione mostra un elenco con scrollbar orizzontale, che avvantaggerà i primi browser dell’elenco. Secondo voi cambierà qualcosa?

Festival della Creatività e UX Camp: il resoconto

Cronaca del primo barcamp italiano sulla User Experience, a Firenze.

UX CampIl 17 ottobre si è tenuto a Firenze il primo UX Camp italiano, barcamp dedicato alla User Experience. L’evento è stato organizzato all’interno del Festival della Creatività, e devo ammettere che è stato uno degli incontri più interessanti a cui ho partecipato negli ultimi tempi. Merito della compagnia, della presenza di altri lavoratori del web con cui discutere, ma anche dei talk interessanti che ho avuto modo di ascoltare.

Rispetto ad altri barcamp, il fatto che l’argomento fosse molto selettivo lasciava sicuramente meno spazio alle divagazioni, e questo ha aiutato ad aumentare la qualità degli interventi. Ero presente per discutere di interfacce ed esperienza utente, e non sarebbe stato altrettanto interessante trovare dei talk troppo lontani dall’argomento: è una riflessione che mi farebbe piacere vedere approfondita anche nell’organizzazione di altri incontri, vedi il WordCamp 2010 o eventi in cui gli speech tecnici dovrebbero sempre avere una certa importanza.

Per questo ho apprezzato particolarmente l’intervento di Cristiano Rastelli e Daniela Panfili su un possibile social network per la terza età (una bella sfida), così come l’intervento di Alberto Mucignat o quello di Davide Casali e Gianandrea Giacoma. Ammetto che a tratti il camp possa essersi rivelato un pò ostico, ma nell’insieme gli interventi mi sono sembrati adatti ad un target vario: c’era materiale interessante per tutti.

Oltre a questo, come sempre una delle parti migliori è conoscere e ritrovare gli amici del web provenienti un pò da tutta Italia. E’ stato un piacere riuscire finalmente a scambiare due chiacchiere con i Googlisti, e devo dire che quest’anno è sicuramente FriendFeed il social network più frequentato dai presenti (mi trovate a questo indirizzo). Se volete vedere un pò di foto dell’evento, ne ho pubblicate alcune sul mio account Flickr.

#fdc09Per quanto riguarda il Festival della Creatività, devo ammettere che sono rimasto sorpreso da alcuni dettagli. Mi ha stupito trovare dei poster con l’hashtag di Twitter dell’evento (#fdc09), così come un megaschermo che mostrava in tempo reale le conversazioni sull’argomento. Sono solo dei particolari, ma qualcosa si sta muovendo, e non so se avrei pensato lo stesso qualche anno fa. E’ stato anche annunciato il Wi-Fi gratuito in 12 piazze di Firenze a partire dal 26 ottobre, e tutto questo non può e non deve passare inosservato. Non sarà una rivoluzione, ma grazie a questi piccoli passi è finalmente possibile cogliere qualche segnale di miglioramento.

Usabilità e User Experience

L’usabilità è solo uno dei fattori che contribuiscono ad una buona esperienza di navigazione.

User Experience - diagrammaSpesso si sente parlare di usabilità dei siti internet, ma le idee sulla definizione precisa si confondono e si sovrappongono, arrivando a spiegazioni anche molto diverse. In linea generale l’usabilità può essere definita come la facilità di interazione tra una persona e lo strumento che utilizza.

Riferendosi ad internet, il rapporto da considerare è quello tra un utente ed il sito che sta navigando.

Cos’è la User Experience?

Qualcuno potrebbe pensare che l’esperienza dell’utente (in inglese user experience o UX) sia la stessa cosa, ma in realtà non è così. L’usabilità è solo uno dei fattori che servono a raggiungere una buona user experience: sono poi da considerare accessibilità, architettura delle informazioni, user interface design ed interaction design.

L’esperienza dell’utente è il risultato della combinazione di tutti questi aspetti: riguarda emozioni, sensazioni e comportamenti, non solo l’efficienza con cui vengono raggiunti determinati obiettivi.

Buona Usabilità non significa sempre buona User Experience

Un sito usabile non assicura quindi sempre un riscontro positivo da parte degli utenti. Sicuramente aiuta, ma da sola l’usabilità non è sufficiente.

Pensate ad un blog con le categorie bene organizzate, titolo della pagina corrente ben in evidenza, menu e testi leggibili ed anche una ricerca funzionale. Sembrerebbe tutto perfetto, ma se i contenuti dei post fossero incompleti o avessero evidenti errori grammaticali?

I visitatori ricorderebbero molto più facilmente quest’ultimo aspetto, giudicando negativamente il sito senza altre possibilità di appello.

L’esperienza utente va oltre l’usabilità, perchè tiene anche conto di altri fattori:

Desiderabilità

Gli utenti devono avere un motivo per voler navigare il vostro sito. E’ bene che sia funzionale ed efficiente, ma deve essere in grado di offrire qualcosa di più per piacere. La chiave è invogliare i visitatori a tornare.

Credibilità

I testi sono attendibili? Questo aspetto vale per un blog come per un sito aziendale: i messaggi devono essere credibili, e questo ovviamente implica anche la correttezza grammaticale.

Personalità

La personalità di un sito è importante, soprattutto per quelli aziendali: il modo di rivolgersi al visitatore deve essere studiato senza improvvisare. In questo caso sono i dettagli che contano, dai messaggi di avviso alle etichette dei menu, passando per le indicazioni delle azioni da compiere.

Coerenza

Il messaggio trasmesso dal sito deve essere coerente in tutte le pagine. Il modo di rivolgersi al visitatore non può cambiare tra l’homepage ed una procedura di acquisto.

I vantaggi di una User Experience positiva

Ottenere un feedback positivo dai visitatori è fondamentale, e per farlo è sempre bene partire da un sito usabile ed accessibile. L’importante è ricordare come questo da solo non basti per raggiungere una buona user experience. L’utente soddisfatto, a cui piace interagire con il vostro sito, tornerà più spesso e vi porterà altre visite, cosa che non succederà con tutti coloro che avranno un’esperienza negativa.

Immagine: Paul Veugen

Nota: questo articolo è stato ispirato da Usability to the UX, su redant.co.uk.