When we see things that we like in others, it illuminates those things that we like and admire in ourselves. You have a math tutor and a date! If he/she disagrees ask him what he thinks. You may find that your perfect mate on the hiking trip is married, or that there are no potential spouses in the auto detailing club, whereas singles groups are guaranteed singleness at least! Shortly before leaving for your date, floss and brush your teeth thoroughly. Its not what you give a girl friend but its all about conveying to your girl friend why you gave a particular gift. I know how u feel ive been there. Keep your jealousy to yourself. This is how to ask a girl out using a love letter. How to End a Long Distance Relationship. When you don't know her well, avoid the jokes, including sarcastic or dark ones. Pull her hair a little bit: just tug on it, don't go crazy. People assume we are busy or not approachable when we're wearing headphones, explains Avgitidis. Don't be afraid to hold his hand across the table, especially if he initiates the contact. Put your pinkie over her pinkie Put your pinkie over hers so your pinkies make kind of this X shape. It's not like there are only one a year. The hit and run approach is highly recommended. Don't feel guilty because you don't want to; it's your body and your choice. Is it making someone laugh? Don't phoenix chat rooms be shy at making use of your abilities to convey the side of things, from pulling faces to walks! Turn on a movie or music to break the awkwardness and that could bring up music, favourite celebrities, favourite movies etc. In fact, it can go from being fun to tedious if you overdo the joking. Whisper in her ear how badly you want her. Maybe let him teach you how to throw san antonio free dating a football. If you're into underwater basket weaving, and he's taking a class on submarine repair welding, casually ask what kind of wetsuit he prefers, or if he's ever had trouble with his oxygen tank. You're not single. Don't force los angeles black dating your smile. If you're not comfortable putting your picture up online, avoid overselling your appearance with dubious claims like Sharon Stone look-alike.

Nuovo Sito Fineco: il primo passo verso il Social Trading

E’ andato online oggi il nuovo sito di Fineco Bank. Ben fatto, pulito, in grado di presentare numerose informazioni mantenendosi leggibile.

Ha sicuramente raccolto molti dei feedback arrivati dai propri utenti, utilizzando un paradigma di progettazione dal basso, che se ben controllato funziona molto bene.

Le nuove funzionalità sono parecchie:

a) la possibilità di vedere la valorizzazione del proprio patrimonio direttamente in home page, e scegliere come vederla nelle successive interazioni

b) la composizione del portafoglio con visualizzazione grafica del peso di ogni singolo titolo

c) il giudizio degli esperti e tante altre cose.

La più interessante di tutte a mio avviso è sapere quanti altri utenti in fineco possiedono un determinato titolo. E’ un primo passo verso il social trading, verso le raccomandazioni dei peer, ed eventualmente “acquisti di gruppo”, o meglio di massa, in conformità con la legge ovviamente.

Il prossimo passo sarà l’unione di home banking come Fineco con servizi come questo? Che ne pensate?

Google+ ha preso il meglio dei Social Network

Un primo commento a caldo: Google+ mi piace. Questa volta big G non ha inventato nulla di nuovo, si è semplicemente limitato a prendere le caratteristiche vincenti (l’abilità è stata individuarle) dei Social Network esistenti e metterle insieme.

L’interfaccia è identica a Facebook, tant’è che quando l’ho vista ho pensato al pesce d’aprile, con una importante differenza: l’importanza data ai circles. E questo a mio avviso il vero punto di forza: l’amicizia su Facebook è bidirezionale, su Google+ no.

I circles non sono altro che una mini-architettura dell’informazione aggiunta al concetto di follower e following di Twitter: ho una categorizzazione delle persone che seguo (following) e allo stesso modo i miei post compaiono nello stream delle persone che mi seguono (followers). Il fatto di poter categorizzare l’incoming stream è utilissimo, un utente Twitter lo sa benissimo: se segui 500 profili è facile perderti la maggior parte delle cose interessanti, specialmente se 4 o 5 di queste persone scrivono 50 tweet al giorno.

Non mi è piaciuta molto invece la parte di hangout (anche in questo caso non si tratta di nulla di nuovo, ma qualcosa preso da iChat e Skype) perché non è intuitiva, richiede l’installazione di un plugin, ed è settata su un valore di default (“hanging out with our circles”) che dubito sia quello che verrà utilizzato la maggior parte delle volte. Abilitare la chat solo a determinati circle è un’idea molto intelligente, invece il fatto che in automatico vengano aggiunte anche le persone che possono chattare con me su gmail, senza darmi la possibilità di disabilitare questa opzione, invece lo trovo molto stupido.

In ogni caso interessante. Stiamo a vedere cosa succede. E voi che ne pensate, come è stata la vostra prima esperienza su Google+?

Corso di User Experience Design

Anche quest’anno, nell’ambito del master in Web Design organizzato dalla Scuola Politecnica di Design, mi appresto a tenere il corso di User Experience Design. Il corso inizia ad ottobre 2010, sono quindi in tempo per fare qualche modifica in base ai consigli e ai suggerimenti che spero vogliate darmi. Rispetto agli anni passati web marketing e SEO (che sarà invece trattato in un apposito workshop SEO di una settimana a fine febbraio) hanno lasciato ampio spazio ai temi dell’information design.

Il corso prevede circa 40 ore in aula divise tra teoria e laboratorio. L’obiettivo del corso è dare agli studenti le nozioni fondamentali di usabilità e offrire loro gli strumenti teorici e pratici per affrontare la progettazione di interfacce utente; come novità importante studieremo le linee guida per la realizzazione di interfacce per iphone, ipad, android e blackberry.

La struttura del corso:

human information processing

Il corso inizia introducendo i principi di human information processing, ovvero di come gli esseri umani elaborano le informazioni. Così come un corso di informatica inizia con lo studio di come è fatto un computer (architettura degli elaboratori) allo stesso modo, in una disciplina che mette l’utente al centro, si comincia con lo studio di come funziona l’essere umano.

Si introduce il modello di Atkinson e Shiffrin per comprendere i meccanismi legati alla memoria a breve e lungo termine, e alle nostre percezioni sensoriali. Si procede con l’effetto Stroop, la legge di Fitts, la ricerca di Miller (il numero magico 7, più o meno 2) e le implicazioni che tutto questo ha nella progettazione di interfacce utente.

progettare con l’utente al centro

Si passa poi ad esaminare l’utente e i suoi modelli cognitivi/ concettuali. Si inizia a introdurre il concetto di usabilità e a spiegare come progettare con l’utente al centro: analisi attraverso questionari, interviste, osservazione sul luogo di utilizzo, studio dell’ambiente di utilizzo e del contesto d’uso.

Come ci ricorda Nielsen “Usability is always relative to two things: the users and their tasks“. Una volta analizzato l’utente si analizza ciò che l’utente vuole fare: definizione dei task.

10 euristiche di usabilità

Sempre a proposito di Nielsen si parla del suo decalogo di euristiche per l’usabilità, che viene analizzato punto per punto, vedendo diversi esempi presi dalla rete che li rispettano e che li violano, lasciando agli studenti il tempo di interiorizzare i 10 principi.

documentazione di user experience

Dato questo primo scorcio alla teoria si presentano gli strumenti di lavoro, ovvero i principali i elementi costitutivi della documentazione di user experience: definizione di personas, albero di navigazione, diagrammi di flusso, wireframe, wireframe annotati, varianti, mappe di contenuti.

Altro strumento di lavoro è il software utilizzato per il corso: balsamiq. La scelta ricade su questo piuttosto che su altri software per diversi motivi: ha un tempo di apprendimento molto veloce, dopo circa un giorno di utilizzo ci si può ritenere degli utenti esperti; consente di prototipare, anche se in modo molto elementare e non condivisibile a distanza (cosa che invece Axure permette di fare esportando direttamente in HTML), feature che lo rende utile per fare degli user test in classe, durante le ore di laboratorio. Balsamiq viene utilizzato per disegnare i wireframe, l’output è piuttosto grezzo ma a mio avviso (e non solo mio) avere layout che sono evidentemente delle bozze progettuali aiuta in fase di discussione e favorisce il cambiamento.

metriche di usabilità e user testing

Come si misura l’usabilità di un sito o di una applicazione? Le 5 metriche di Nielsen servono come base per affrontare il tema dei test con gli utenti, sono le variabili a cui fare attenzione durante un test. Utilizzando i prototipi prodotti con balsamiq andiamo a condurre degli user test: definizione dei task, set up dell’ambiente di test, recuiting degli utenti, intervista con l’utente e sessione di test durante la quale gli studenti svolgono a turno diversi ruoli: facilitatore, note-taker, osservatore, progettista e utente.

Si spiegano diversi tipi di coinvolgimento degli utenti nelle diverse fasi progettuali e l’utilità di fare user testing. Non c’è esperienza migliore che vedere qualcun altro usare l’interfaccia da noi prodotta per capire quanto sia utile effetturare dei test!

linee guida per smartphone

Sempre più persone utilizzano il proprio “telefono” per navigare su internet o utilizzare applicazioni dedicate connesse alla Rete. Presto saranno più i device mobili che i pc, è opportuno pertanto conoscere le linee guida per la progettazione di interfacce utente per mobile. Partendo da iphone – per motivi di penetrazione del mercato quantomeno è il più importante – vedremo le differenze rispetto ad ipad, blackberry e android.

social architecture

Per concludere, essendo la user experience sempre più vissuta all’interno di social network vedremo come integrare il flusso di navigazione tra sito e social network oltre che integrare contenuti provenienti dai social network su siti e applicazioni. Accenneremo all’Open Graph di Facebook, alle applicazioni e alle pagine Fan.

Come dicevo all’inizio dell’articolo ogni consiglio è gradito. Grazie.

Metriche di usabilità

Le 5 metriche di usabilità – come citate nel sito useit da Jacob Nielsen nel 1997 – sono:

  • Apprendibilità: quanto è facile per gli utenti portare a termine compiti di base la prima volta che si trovano di fronte all’interfaccia?
  • Efficienza: Una volta che gli utenti hanno appreso l’itnerfaccia, quanto rapidamente riescono a eseguire dei compiti?
  • Memorabilità: Quando gli utenti tornano all’interfaccia dopo un periodo di inutilizzo, quanto gli è facile usarla di nuovo in modo efficiente?
  • Errori: Quanti errori fanno gli utenti, quanto sono gravi, e quanto facilmente possono ritornare alla situazione precedente?
  • Soddisfazione: Quanto è piacevole usare l’interfaccia?

Unitamente a queste possiamo considerarne altre 7 – ISO 9241- 110:2006 (Ergonomic requirements for office work with visual display terminals):

  • Adeguatezza al compito: le informazioni e i comandi necessari per l esecuzione delle azioni da parte
    dell utente devono essere sempre disponibili e percettibili
  • Autodescrittività: le informazioni e i comandi necessari per l esecuzione delle azioni devono essere facili da capire e da usare
  • Conformità alle aspettative dell’utente: stessi simboli, messaggi e azioni devono avere gli stessi significati in tutta l’interfaccia
  • Controllabilità: l’interfaccia deve comunicare il suo stato e gli effetti delle azioni compiute (quello che Norman chiama golfo dell’esecuzione e golfo della valutazione);
  • Adeguatezza alla personalizzazione: l’interfaccia deve tener conto di profilature individuali e di differenti contesti d’uso
  • Tolleranza degli errori
  • Adeguatezza all’apprendimento

Sviluppo Agile e User Centered Design, ovvero Agile UX

Questo articolo è in risposta a quanto scritto da Sefano qui.

Innazitutto credo fermamente che la metodologia agile sia applicabile a progetti Web, e concordo con quanto scritto da Stefano sul fatto che questa vada adattata, essendo il contesto e gli attori differenti.

Il team degli sviluppatori nell’agile classico viene sostituito dal team nella sua interezza, dal team agile UX: programmatori, web writer, information interaction designer, graphic designer, SEO specialist, …

Quando si pensa a chi è il constraint sul progetto, il collo di bottiglia, si deve pensare a tutto il team, non solo ai programmatori.

Per quanto riguarda la “pubblicazione” del sito, anche nella metodologia Agile classica si fa riferimento al MMF: Minimum Marketable Features, ovvero il minimo insieme di funzionalità che il prodotto deve avere prima di essere lanciato sul mercato. Non è vero che dopo il primo sprint si ha sempre un qualcosa che possa diventare pubblico. Anzi. Nell’Agile UX questo corrisponde al minimo set di funzionalità che rendono un sito pubblicabile, anche se in versione alpha o beta.

Per quanto riguarda la progettazione dell’architettura dell’informazione ritengo sufficiente una mappa del sito e dei flowchart che mostrino quali sono le azioni da fare per portare a compimento i processi/task principali. Fatte queste, per ogni sprint si creano wireframes e mock-up da condividere con il team e con il cliente. L’approvazione del cliente è determinante. Mock-up ben fatti salvano un sacco di tempo al team e permettono di fare test di usabilità. Non importa che il cliente veda del software funzionante quando può avere un prototipo che fa la stessa cosa. In questo mi dissocio dall’approccio Agile che dice “niente documentazione solo software funzionante”, ma non perchè sia contrario all’idea, ma perchè semplicemente lo scenario qui è diverso.

Il coinvolgimento del cliente, anche 30 minuti alla settimana, è fondamentale e irrinunciabile. E’ col cliente che si fa il planning game, che si introducono nuove storie, ed eventualmente se ne tolgono altre, perchè tutto il lavoro deve essere fatto in un timebox ben determinato. Al cliente bisogna spiegare che per ogni nuovo story point che entra nel progetto ne deve uscire uno tra quelli già pianificati (magari senza spaccare il capello…).

Per quanto riguarda i test di usabilità parafrasando Jakob Nielsen si può dire che è comunque sempre meglio testare un utente 10 minuti che non testare affatto. Credo che 10 minuti li si possa trovare tutti.

Grazie Stefano per l’ottimo articolo!

Due colleghi in pair programming 🙂

Communicating Design: Improving User Experience Deliverables

User Experience 2008 – 18 Nov

Un bel corso, molto hands-on, tenuto da due persone brillanti:

Dan Brown, Nathan Curtis

Il ciclo di vita della documentazione di User Experience

La documentazione di User Experience (UX) accompagna il progetto di design, dall’inizio alla fine. Svolge diversi compiti e comunica, di volta in volta, ad audience differenti.

Nella prima fase di progetto la documentazione è di alto livello. Serve a raccontare e propagare la storia del progetto, sia al team che agli stakeholders. Tracciare le scelte di design, ratifica le decisioni, a colma i buchi nella storia, con l’aggunta di passi intermedi e dettagli. Il project manager parte da qui per fare la pianificazione delle attività.

Nella fase di sviluppo è la traccia comune per l’intero team di progetto; descrive: le interazioni, gli stati e i comportamenti del sistema, i vincoli sui dati visualizzati e quelli inseriti, l’aspeto visuale delle singole pagine, i contenuti da associare o creare per ogni pagina.

L’audience di un documento di UX è ampia: executives, product manager, site strategist, visual designer, developer, QA e copywirter.

Nella prima fase l’uso di flowchart, mappe del sito e storyboard serve a executives, product manager e site strategist a comunicare e tracciare le decisioni prese. Nella fase di sviluppo visual designer, developer, QA e copywirter hanno invece bisogno di wireframe annotati e specifiche funzionali.

Brown e Curtis consigliano di partire con un documento che sia facile da estendere, mantenere nel tempo e presentare in modo diverso a diverse audience. La loro scelta aziendale come software di riferimento per la documentazione di user experience è Adobe Indesign. Utilizzano alcuni script per la costruzione del documento a partire da una base di template che hanno creato negli anni. Purtroppo questi template non sono tra gli materiali del corso.

Si crea un primo documento di alto livello, con strategia, flow chart e mappe del sito. Questo documento viene successivamente integrato con i wireframe e le specifiche funzionali, entrando in un livello di dettaglio maggiore.

La manutenzione è un processo critico, da tenere presente fin dall’inizio, in modo che non diventi ardua nel tempo. Il processo di design, non lineare per sua natura, crea la necessità di modificare ed eliminare parti del flusso di navigazione, presentare delle varianti di pagina e tener traccia delle decisioni. Se si organizza il documento di UX in due macroparti e se si usano delle convenzioni si diminuisce drasticamente l’overhead dovuto alla manutenzione.

Nella preparazione di un documento di UX Dan Brown ci invita ad applicare i principi di user centered design al documento stesso. Se è difficile da leggere, non ha una struttura, non risponde alle domande dell’audience in modo diretto e chiaro, non è un buon documento. Sollecita di fatto gli interaction designer ad applicare le proprie conoscenze alla scrittura della documentazione.

Flow Chart e Mappe del sito

Si parte all’americana, con un esercizio in classe: disegnare a scelta un flow chart che descriva una tra queste attività:

  • inserimento nota spese
  • aggiunta di un contatto
  • tracciamento delle ore lavorate

Discussi alcuni flow chart fatti dai partecipanti viene data la definizione di flow chart: un diagramma che mostra come una persona (o un gruppo di persone) cambi lo stato di una situazione, tipicamente manipolando e trasformando l’informazione. In modo meno astratto: è la risposta a “come fanno gli utenti a fare X?”, fornita in termini di visualizzazione di come portare a compimento una specifica azione oltre che essere uno strumento per l’individuazione dei requisiti funzionali.

Un flow chart racconta il flusso tra ha un punto iniziale e uno finale. Un esempio che è entrato nella storia è la carta figurativa che descirve il percorso fatto da Napoleone con le sue truppe durante la campagna di Russia:

Fig 1. Carta figurativa, Minard.

In una singola pagina Minard, l’autore della carta figurativa, comunica dati relativi al numero delle truppe, la direzione, le distanze, latitudine, longitudine, il tempo, la temperatura, i fiumi principali attraversati.

Prima di disegnare un flow chart ci si deve chiedere:

  • come utilizzarlo, quale sarà il suo scopo
  • chi è l’audience
  • quanto dettaglio andremo a inserire
  • se è sufficiente usare un vocabolario standard o se ne si deve inventare uno nuovo
  • come definire il contesto, ovvero quante informazioni di background vanno inserite nel flow chart
  • come trattare i diversi scenari, ovvero quante variazioni vanno presetate
  • come strutturarlo in forma narrativa

Dan Brown ha una sua metodologia:

  • individua il punto di ingresso e i punti di uscita
  • definisce quali sono gli elementi: i singoli passi (boxes), i momenti di decisione (diamonds), i percorsi (paths / arrows)
  • elabora gli elementi: differenzia tra diversi scenari (compresi quelli di errore), variazioni, dettagli, e gruppi di azioni
  • raffina gli elementi: aggiunge note di rpoduzione, dettagli tecnici, eventi che scatenano determinate situazioni

Il vocabolaro di simboli da cui si attinge spesso non permette di raccontare nel migliore dei modi la nostra storia. Siamo liberi di inventare nuovi simboli, metterli in legenda e ricordarci sempre del nostro target.

Fig 2. Esempio di flow chart.

Il flow chart serve in particolar modo per raccontare delle azioni, è lo strumento di base dell’interaction design. La mappa del sito invece è utile a descriverne la classificazione dei contenuti ed è connessa all’information architecture. A meno che non si abbia a che fare con una web application i siti di informazione vengono bene raccontati da una mappa del sito e in alcune parti, particolari azioni, possono essere illustrate tramite flow chart.

Annotated Wireframes e Specifiche funzionali

L’ultima parte del corso riguarda la creazione dei wireframe con annotazioni e le specifiche funzionali. Nathan Curtis ci mostra diversi wireframe creati in Indesign. C’è una separazione netta tra il layer contenente l’artwork da quello con le annotazioni.

Anche in questo caso si parte con un esercizio: disegnare il wireframe di un momento specifico del flow chart creato in precedenza. Scelgo di creare il wireframe per l’inserimento della nota spese e lo discutiamo in aula. Non ne si discute tanto la bontà del design quanto la capacità documentativa.

Si arriva di seguito alla definizione di wireframe: un diagramma che rappresenta il contenuto dello schermo e le priorità/importanza degli elementi. In modo meno astratto: è la risposta a “cosa vedono gli utenti sullo schermo?”, un modo per illustrare funzionamento e comportamenti.

Operativamente occorre chiedersi:

  • chi è l’audience
  • quanto aderente all’aspetto finale deve essere
  • che livello di dettaglio si deve raggiungere
  • in che formato finale viene presentato
  • qual è il numero di persone che lavorano al documento (sviluppatori, IxD, information architect, copywriter, ..)
  • qual è il minimo necessario che posso fare per le diverse audience?

Con ogni probabilità questo è il documento più dettagliato e comprensibile che gli stackeholder e l’intero team di progetto avranno sotto mano per diverso tempo, finchè non si iniziano a vedere i primi prototipi o addirittura il sito/applicazione funzionante.

E’ importante perciò che questo documento sia utilizzato per ratificare le decisioni di design, che Dan Brown ricorda non debbono essere motivate da “la mia opinione è che…” quanto piuttosto da ricerche, letteratura e user data. Una delle trappole più insidiose è quella di trovarsi a discutere in una riunione basandosi solo sulle opinioni.

Durante una presentazione è importante fare domande per:

  • validare quanto fatto
  • chiarire se manca qualcosa
  • scegliere tra le diverse alternative presentate (e quindi eliminarne alcune variazioni)
  • comprendere le implicazioni a livello funzionale e organizzativo di ciò che si sta presentantdo, ovvero assicurarsene la fattibilità sia tecnica che a livello di orgranizzazione

Anche Nathan Curtis ha una sua metodologia operativa:

  • definisce quali sono gli elementi: aree di contenuto, descrizione, priorità
  • elabora gli elementi: elementi interattivi, annotazioni, scenari e varianti, razionali
  • raffina gli elementi: layout e visual design, contesto e contenuti d’esempio

Il documento di UX, contenente il flow chart, mappa del sito e wireframe annotati deve avere una struttura rigorosa. In particolare per la sezione relativa ai wireframe annotati i consigli sono: proporzionare bene lo spazio per l’artwork e quello per le annotazioni tenendo in considerazione la quantità di dettaglio alla quale si desidera arrivare, che annotazioni e artwork devono stare vicini e che deve esserci un formato standard per tutto il documento. Scegliere i template che si utilizzano per presentare variazioni di pagina o di componenti,  piuttosto che altri tipi di imamgine o di struttura.

Nathan Curtis prende in rassegna diversi tipi di annotazioni: overlay, callout e markers. In pratica negli esempi che mostra l’uso dei marker (in particolare dei notched marker e dei margin marker) è quello prevalente. Si tratta quasi sempre di annotazioni puntuali. I callout a square braket e outline servono invece a raggruppare il soggetto delle annotazioni.

Fig 3. Notched marker e corrispondente annotazione.

La notazionè è numerata se si sta decrivendo una lista di oggetti, per favorire la lettura, mentre invece utilizza le lettere quando indica dati e tabelle, variazioni di pagina e componenti. Il marker deve essere posizionato con precisione in modo da non risultare ambiguo. Quando si mostrano variazioni di pagina, è bene non diplicare le parti che rimangono invariate, ma concentrarsi sui componenti o gli elementi che variano. Questo per motivi di convenienza in fase di manutenzione.

Per l’annotazione di un wireframe si procede come segue:

  • si inserisce il wireframe nella pagina
  • lo si divide in elementi, che vengono marcati
  • si dettaglia ogni elemento
  • ne si identificano gli attributi, tipicamente:
    1. comportamento (es. onclick, onmouseover, …)
    2. stato (es. visibile|nascoso)
    3. dati (es. [nome cognome], o l’uso delle {parentesi graffe} per descrivere un contenuto opzionale
    4. eventuali guide editoriali per i copywirter e per il SEO

La rappresentazione dei dati all’interno di un wireframe è stato un momento importante del pomeriggio. Riassumendo quanto detto:

  • il “lorem ipsum” va bene solo per testi lunghi
  • i dati reali rischiano di sviare l’attenzione degli stakeholder, che si concentrano sui dati invece che sull’interfaccia
  • i dati fittizzi (es. Mario Rossi) hanno lo stesso problema, possono essere confusi per dati veri e posso essere interpretati in modo ambiguo.
  • le [label] sembrano essere il migliore compromesso nella maggior parte dei casi, anche se si deve fare attenzione che non rappresentano visivamente il dato e quindi possono trarre in inganno come dimensioni (es: [codice fiscale], [nome], [cognome], …). Inoltre se si intende fare dei test di usabilità è meglio usare dati fittizzi/reali

Integrazione dei contenuti

Una delle sfide più ardue è l’integrazione deicontenuti con l’interfaccia utente in modo che la user experience risulti seamless. Una delle prime difficoltà è dovuta al fatto che contenuto e interfaccia di solito hanno diversi responsabili, processi di approvazione e livello di dettaglio.

Se pensiamo a un progetto come composto da:

  • struttura: relazioni e reperibilità – responsabili: information designer
  • contenuto: voce, linguaggio e leggibilità – responsabili: copywriter, content strategist e SEO
  • interazione: comportamento e usabilità – responsabili: interaction designer

Queste tre aree devono cooperare in mododo da consentire:

  1. istruzioni e feedback tra contenuto e interazione,
  2. tassonomie e metadati tra contenuto e struttura.
  3. flusso e dati tra interazione e struttura.

Infine abbiamo commentato alcuni wireframe prodotti in aula. A scopo puramente dimostrativo prendo un già buon wireframe annotato e provo a commentarlo sulla base di quanto appreso durante il corso.

Fig 4. wireframe annotato esemplificativo. PDF pagina5, fonte: bitmama.it

Questo wireframe presenta una diversificazione per lingua della medesima FORM. E’ interessante vedere come mediante le annotazioni siano state fatte emergere solamente le differenze tra le tre versioni, per facilitarne la comprensione.

Un utilizzo diverso delle annotazioni é lo vediamo a pagina 6 per documentare le funzioni degli elementi di interfaccia, i valori de default, eventuali animazioni. E’ stata scelta un’annotazione notched marker con numerazione (1, 2, 3, …).

E… grazie a tutti.

Fundamental Guidelines for Web Usability

User Experience 2008 – 16 Nov

Un breve rissunto della giornata, per chi non c’era.

Relatori: Jakob Nielsen, Hoa Loranger and Kara Pernice

Introduzione

Un po’ di consigli utili in base agli ultimi studi di ricerca. Buona notizia è che l’usabilità dei siti migliora di anno in anno sia come percentuale di task completati con successo sia come tempo impiegato per concluderli.

Nell’89% dei casi (fonte: User Experience 2008) gli utenti cominciano la propria navigazione da un motore di ricerca. Il 25% delle volte da qui raggiungono la home page, il 75%  una pagina interna. Questi dati rivelano una diminuita preponderanza della home page sulle altre pagine del sito; ne segue che ancora maggior attenzione vada posta nella progettazione delle pagine interne.

Sui motori di ricerca il 95% degli utenti non procede oltre la prima pagina (i primi 10 risultati, di solito), e solo il 48% scolla la pagina per vedere i risultati non immediatamente visibili (fonte: User Experience 2008).

E’ aumentato l’uso della scrollbar: nel 70% dei casi gli utenti scoprono altro contenuto se la pagina è più lunga dello schermo (fonte: User Experience 2008).

La lunghezza delle stringhe di ricerca nell’ 82% dei casi è inferiore ai 30 caratteri, con una prevalenza – moda – di 18/21 caratteri. Jakob Nielsen consiglia vivamente di lasciare abbastanza spazio affichè l’utente possa leggere per intero tutto quanto viene scritto nel box di ricerca.

E infine la borsa: il valore di un utente:

  • 1.31$ se proviene da da motori di ricerca, risutati organici
  • 1.91$ se viene da un link sponsorizzato
  • $5.69 se raggiunge il sito scrivendo l’indirizzo o richiamandolo dal bookmark

Fidelizzare gli utenti sembra essere un buon investimento.

L’usabilità dei contenuti

Grande enfasi è stata posta sui contenuti e la posizione dell’utente al centro, invece che l’azienda che costruisce/finanzia il sito, nelle scelte di design. Questo porta fornire contenuti utili all’utente (vedi task analysis & flow), usando un linguaggio comprensibile, scrivendo frasi brevi, e senza essere autocelebrativi. “what’s in it for me” diventa molto importante. Così come sono importanti i benefit di un prodotto/servizio rispetto alle feature (es. “questo frullatore fa smoothies perfetti” vs “questo frullatore ha un motore da 1000 Watt”). In modo particolare i relatori sono soffermati sui seguenti elementi di interfaccia:

  1. link e titoli
  2. testi
  3. immagini
  4. messaggi di errore

Il testo dei link o dei titoli deve essere una promessa fatta all’utente: deve raccontare cosa “succede poi”, deve permettere all’utente di predire cosa stia dall’altra parte del link o quale sia il contenuto di ciò che segue un titolo. In passato ho letto spesso che “click here” è cattivo design, oggi Jakob Nielsen ha affermato che “more…” e “read more…” lo sono altrettanto. La vita è troppo breve per cliccare su link che non sappiamo dove ci portino. Gli oggetti prominenti dovrebbero essere cliccabili. L’area di click il più grossa possibile. Ovviamente per Nielsen i link sono blu e sottolineati, ma con gli anni si è ammorbidito e oggi accetta anche link non blu. Purchè sottolineati.

I testi devono essere formattati, possibilmente non usare parole inutili o complesse. La Nielsen Norman Group ci ricorda che poco meno della metà degli utenti Web (per l’esattezza il 43% – fonte: User Experience 2008) hanno una scolarizzazione non sufficiente per:

  • sintetizzare informazioni contenute su più pagine
  • confrontare informazioni complesse (es. le caratteristiche di diverse carte di credito)
  • determinare causa ed effetto
  • riconoscere lo scopo dell’autore

Inoltre, nella scrittura dei testi, è importante sapere che le persone leggono tipicamente:

  • le prime due parole del titolo
  • i primi due elementi di una lista
  • le prime due riche di una pagina o di un paragrafo
  • i due primi risultati di tornati da un motore di ricerca

se non trovano ciò che cercano passano oltre. Questa viene chiamata la regola del 2.

Altro punto fondamentale è la consitenza della struttura tra contenuti omogenei. Quindi se state ad esempio decidendo per struttura delle pagine che descrive i corsi della User Experience 2008, per esempio “Fundamental Guidelines for Web Usability“, allora potete optare per: what you will learn, course outline, format, handouts, who should attend, …

Le immagini hanno un ruolo importante. Così come il testo deve avere un buon contrasto con lo sfondo, le immagini devono risaltare il prorio messaggio. Interessante scoprire che siamo interessati (rivelazioni fornite da test fatti con eyetracking) alle immagini di altre persone, specialmente volti sorridenti che guardano direttamente in camera, e tendiamo a focalizzare lo sguardo in particolare sulle parti intime. Anche degli animali :-O

Le immagini devono comunicare, invece che essere delle blande risposte alla richiesta fatta al team di designer: “questo sito è triste, mettete un po’ di immagini per renderlo cool“.

I messaggi d’errore vanno posti vicini all’errore. Un indizio dovrebbe essere dato vicino a dove l’utente ha cliccato per procedere. I messaggi devono essere ben visibili e aiutare l’utente a risolvere l’errore. Se fosse possibile poi far si che non sembrino scritti da un automa (“errore: nome utente non valido”, con voce metallica) tanto di guadagnato.

Task analysis & flow

L’altro argomento importante affrontato oggi è come guidare l’utente attraverso una serie di decisioni, ovvero come farlo navigare sul nostro sito. Innanzi tutto bisogna iniziare a capire quali sono i bisogni dell’utente e formularli come se fossero compiti da svolgere (task). Fatta una lista di questi si va a lavorare in modo particolare su quelli che interessano anche a noi, ovvero a chi commissiona il sito.

Due esempi portati sono stati www.cheese.com e www.robbinsbros.com, rispettivamente un sito sui formaggi e uno sugli anelli di fidanzamento. In entrabe i casi è stato fatto notare l’ottimo lavoro fatto per cercare di capire come guidare l’utente nella scelta.

Altro ottimo lavoro è la homepage di jetblue dove non compaiono informazioni inutili e frasi autocelebrative, e gli utenti possono immediatamente iniziare a fare quello per cui sono arrivati. Anche la scelta del posto a sedere è estremamente intuitiva e inserita nel flusso di navigazione.

La regola dei tre click invece è una “cagata pazzesca” come direbbe Fantozzi. Inizialmente era stata data come regola generale per cercare di limitare i danni dovuti a un cattivo design. Il KPI (Key Performance Indicator) corretto non è quanti click fa l’utente per completare il task, ma quanto costa, in termini di sforzo mentale e di tempo, la catena dei click.

Il tempo speso in una navigazione per lo shopping online, nel caso di acquisto emozionale di prodotti, per una desired exploration del sito, non conta in termini di sforzo mentale: è un piacere.

I click fatti per rivelare nuovi elementi di interfaccia quando occorrono, non vengono percepiti come frustranti dagli utenti che navigano, ma forniscono una progressive disclosure delle informazioni, che compaiono al momento giusto.

Standard

Jakob Nielsen riprende la parola in chiusura e ci ricorda di seguire gli standard e ci parla di innovazione. Utilizzare gli standard porta ad avere utenti che si sono a proprio agio, senza stare a reinventare la ruota tutte le volte. Gli utenti vogliono trovare le cose nei posti dove sono soliti trovarle, beneficiando di una consistenza sia all’interno del singolo sito, sia tra altri siti analoghi.

Nielsen racconta alcuni siti e fornisce un po’ di esempi. Un sano ripasso: “il box di ricerca in alto a destra, fatto solo di un campo per il testo e il bottone Cerca. Anche Vai va bene ma Cerca è meglio…”. Diciamo maestrino e un po’conservatore sul finale.

Mi sorprendono infatti le slide sull’innovazione, anche se anticipate dall’ammonizione “Pioneering can be Dangerous Business“.

Innovazione descritta con due equazioni:

  1. new designs + usable = become standard
  2. new designs + unusable = expire

Proprio come avviene per le lingue: un nuovo termine (innovazione) inizia a diffondersi; i più lo trovano utile e lo comprendono; questo crea un nuovo standard che diventa parte della lingua stessa (new usable designs become standard).

Ma non siate troppo ottimisti sull’innovazione, pare che l’evoluzione del comportamento degli utenti sul Web e delle Guidelines si stia stabilizzando.

skillRank

Who does own a specific knowledge in your Enterprise? How easy is it to find knowledge holders? Can you do it with a few clicks? And how do you award valuable knowledge holders?

The sad truth is that big enterprises suffer from the massiveness of their size and their burocracy. For talented, or just willing to contribute, is difficult to emerge. Managers often hire a consultant, whom skills are well known and “advertised”, without knowing they have the right people in their company, ready to shoot!

Web 2.0 teach us something: the larger the information set the easier it is to find useful information – allowing favouriting, commenting, tagging and rating important information emerges from a flat schema.

As pageRank (google trademark) brings order to the Web, skillRank can be a solution to bring order to the Enterprise.

SkillRank is an analysis algorithm that assigns a numerical weighting to each tag associated to user’s contribution, be it a document, a picture, an article, a video, … basically everything that can be tagged, rated, favourited or commented.

The idea behind skillRank algorithm is that when a user contributes to an enterprise environment she’s actually contributing for what her skills and interests are. Other users can appreciate the quality of the contribution performing certain actions on the contribute. This propagates the user herself. The algorithm is tag-centric, i.e. the user inherits the tag associated to the contribution.

The algorithm works more or less like this:

  • CONTENT gets tagged when published (editor tag has more value, let’s say 10 votes). The tag vote propagates to the USER (just 1 vote)
  • CONTENT can be tagged after other users read it. This count 1 vote (for each user tagging) for the CONTENT. This vote propagates to the USER
  • CONTENT can be tagged when other users save it to their “favourites”. This vote (one for each user favouriting) propagates to the USER
  • CONTENT gets rated: the vote propagates to the USER (-2 -1 0 +1 +2 based on the number of stars)

This algorithm is moving its first steps. Any idea or comment will be very appreciated.

skillrank

Ricordare le scelte degli utenti

Chi disegna interfacce di applicazioni di utilizzo quotidiano (sistemi di home banking, client di posta, word processor, applicazioni per call center e via dicendo) dovrebbe tenere a mente questi due comportamenti tipici degli utenti:

  • la tendenza a usare un limitato set di funzionalità – ognuno le sue
  • la ripetitività delle scelte effettuate in termini di visualizzazione dei dati

Queste considerazioni aiutano l’interaction designer a progettare applicazioni che aumentino le performance dell’utente e riducano l’overload mentale.

Vediamo un paio di esempi:

1) L’home page dell’applicazione dovrebbe riportare, salvo rare controindicazioni, la lista delle ultime n attività svolte o quelle svolte più di frequente.

Sul mio sito di home banking per esempio vorrei vedere:

  • bonifico
  • pagamento F24
  • movimenti ultimo mese
  • bonifico internazionale

Queste sono le operazioni che effettuo più frequentemente.

2) Se l’applicazione offre diverse modalità di presentazione dei dati allora dovrebbe ricordare le scelte effettuate quando l’utente accede nuovamente alla piattaforma.

Sempre parlando di home banking mi viene in mente l’analisi tecnica di un titolo; le scelte in questo caso sono numerose, si possono modificare gli intervalli temporali, la forma del grafico (candela, lineare, …), le medie mobili e numerosi altri indicatori. Pensate se queste scelte dovessere essere ripetute ad ogni accesso, quanto tempo sprecato!

Articoli di Interaction Design (IxD)

hci gurus

Nutro un forte interesse per l’interaction design ormai diversi anni, più precisamente da quando ho seguito le indimenticabili lezioni della prof.sa Xristine Faulkner alla South Bank University di Londra, nel lontano 1999/2000.
In questi ultimi mesi l’interesse si è trasformato in passione sia per la scoperta di alcuni articoli e libri interessanti sia per il coinvolgimento professionale.

Vi segnalo: