Per certi versi ero anche più motivato, perché comunque a me piace insegnare e quindi poter raccontare un aspetto del mio lavoro – e delle mie passioni – a dei ragazzi non poteva che essere due volte più interessante.

Ho guardato sul sito un po’ anche le altre presentazioni e ho capito che potevo spaziare un attimo oltre ad un taglio verticale su Motivational Design, così ho strutturato la lezione in 4 passaggi:

1. Mindset: in altri termini quali sono alcuni atteggiamenti mentali che ritengo importanti. Non ho cercato di essere esauriente, ma piuttosto ho provato a dare un taglio più su quelle cose che “normalmente non vi vengono dette” e invece sono a mio avviso importanti… e non solo come professionisti.
2. Theory: sostanzialmente Motivational Design, con un po’ di spiegazione, un po’ di esempi e alcune note sulla progettazione.
3. Go deeper: qui ho voluto evidenziare la differenza sensibile di prospettiva che si ottiene provando qualcosa e su quale sia secondo me il reale significato di “provare“. Questo è anche uno spunto di discussione interessante, se volete aggiungere qualcosa.
4. Practice: metodo. Perché ritengo che il metodo sia una delle cose più importanti per portare a casa progetti, idee e lavori. Tutti abbiamo un metodo, anche se pensiamo di non averlo in realtà è semplicemente qualcosa che abbiamo sempre fatto e assimilato dall’ambiente. Avere chiaro che esiste e quanto sia importante per me è un elemento chiave. E poi si combinava bene con la lezione appena dopo di Fullo che parlava di project management.

In più vi sono stati due temi che ho toccato più volte, uno in modo esplicito, ovvero il concetto di fail fast, uno in modo implicito, ovvero l’importanza della semplicità, con la quale ho anche reso onore a Bruno Munari in chiusura.

Curioso a dirsi, dopo la pubblicazione di sabato le slide sono state anche selezionate come “Featured: We thank you for this terrific presentation” su SlideShare: tutt’ora è ancora in prima pagina. Cosa che nel suo piccolo mi ha dato una certa soddisfazione.

Purtroppo non sono riuscito a seguire tutte le presentazioni che avrei voluto: un po’ per sovrapposizioni e un po’ per il pranzo (eccellente, nonostante i piatti zebrati e leopardati) tirato per le lunghe a chiaccherare… su argomenti che potevano peraltro tranquillamente essere portati in un paio di slot dell’UXcamp stesso.

Due appunti, a mia memoria e vostro spunto:

1. Luca Mascaro (con Ivana) mi riporta in mente il discorso dell’iperlocale. Parentesi: io amo EveryBlock. Credo anche io che ci sia uno spazio molto interessante qui, vedo però poco sperimentare, almeno in Italia, e forse tutti progetti troppo “grossi”. Ancora nessuna idea che mi affascini fino in fondo, a parte il pensiero di iscrivermi al Twitter del panettiere sotto casa per sapere quando c’è il pane appena sfornato… se solo lo facesse il mio panettiere.
   Forse è solo che la tecnologia di oggi non va bene per l’idea nuova, non so.
2. Progetti digitali per il supporto agli anziani, tema interessante che sto affrontando anche io, seppure devo ancora inquadrare esattamente gli scopi, perché io personalmente ragiono in termini di qualità della vita, prima ancora che di assistenza. Progettare l’assistenza è “facile” (per un senso lato di facile).

Mi trovo purtroppo a fare la solita recriminazione, ma stavolta sarò breve: non era un BarCamp. Ma pazienza, ignorando il fatto l’evento è andato bene e tanto basta.

Vi riporto le slide (in inglese) della presentazione che ho fatto al mattino con Gianandrea. Questa volta abbiamo preso un approccio più ludico e più vicino ai designer, cercando di collegare il più possibile un aspetto singolo della metodologia di Motivational Design, le motivazioni relazionali, con il lavoro di tutti i giorni degli user experience designers. La presentazione è come sempre su Slideshare: Mo.De. Motivational Design: Motivational Hooks.

Abbiamo ricevuto un po’ di complimenti, in effetti mi è sembrata andare bene come presentazione, ma mi piacerebbe sentire anche qualche critica. Se ne avete, siete i benvenuti.

Purtroppo so che le slide da sole sono molto scarne e che quindi chi non ci ha sentito avrà qualche problema in più. Sono giusto un accompagnamento allo speech, ma la parte di gioco e i passaggi essenziali dovrebbero comunque essere comprensibili. ]]> http://im.digitalhymn.com/2009/10/19/mode-uxcamp-di-firenze/feed/ 0 http://im.digitalhymn.com/2009/09/14/mode-fondamenti-15/ http://im.digitalhymn.com/2009/09/14/mode-fondamenti-15/#comments Mon, 14 Sep 2009 07:17:25 +0000 Folletto Malefico http://im.digitalhymn.com/?p=1226

Per semplificare l’approccio alla metodologia del Motivational Design (Mo.De.) io e Gian abbiamo preparato una sintesi in 3 pagine. Questo documento spiega in breve cosa è il Motivational Design e i suoi quattro fondamenti: Bisogni Funzionali, Usabilità Sociale, Motivazioni Relazionali e Flusso di Attività Circadiano.

Da questa parte è esclusa la prassi metodologica, per la quale rimandiamo ancora al documento principale di Motivational Design. Sia sintesi che il documento principale corrispondono alla versione 1.5 della metodologia.

Questa sintesi introduttiva ci ha anche permesso di fare una traduzione in inglese, sempre con il supporto di Sara, che ringraziamo per i suoi consigli.

• Fondamenti di Motivational Design 1.5, in italiano (~250kb).
• Fundamentals of Motivational Design 1.5, in inglese (~250kb).

I documenti “Design Motivazionale” ed “Elementi Teorici per la Progettazione dei Social Network” sono stati fusi in un unico documento. In questo modo il percorso di lettura è più completo, partendo dalle basi ed arrivando all’analisi e progettazione.

Il nuovo documento è “Motivational Design: una metodologia per il social network design“, sempre per mano mia e di Gianandrea Giacoma.

In questa nuova versione non ci siamo ovviamente limitati a fare una semplice fusione dei due testi, ma abbiamo anche chiarito alcuni passaggi più complessi, questo grazie a tutti i commenti e le critiche costruttive che abbiamo ricevuto in questi mesi. In più, abbiamo anche arricchito i primi due capitoli con un bel numero di esempi.

Il documento come sempre è scaricabile liberamente e pubblicato sotto licenza Creative Commons by-sa 2.5 (ita):

• Scarica Motivational Design in PDF da qui (748Kb).
• Guarda Motivational Design su Scribd.
• Leggi il post di Motivational Design 1.5 sul blog di Gianandrea.

Per il futuro sappiate che c’è una versione successiva già in cantiere – ci sono ancora delle parti che vogliamo chiarire e alcune rifiniture da fare – e anche alcune sintesi: ci rendiamo conto che un testo di oltre 70 pagine non è affrontabile alla leggera.

Se avete commenti, critiche o curiosità segnalatecele pure, come sempre avete fatto, grazie!

1. Parte 1
2. Parte 2
3. Parte 3

Nella presentazione sono evidenziati i quattro elementi chiave (Functional Needs, Social Usability, Relational Motivations, Circadian Activity Flow), con anche un buon numero di esempi. Se ci fossero dubbi potete naturalmente leggere il paper, in italiano, oppure fare domande sotto: ci sono delle parti che sono molto criptiche e che ovviamente necessiterebbero la presenza di un supporto vocale.

So that’s what days were like. A bunch of tiny frustrations, and a bunch of tiny successes. But they added up. Even something which seems like a tiny, inconsequential frustration affects your mood. Your emotions don’t seem to care about the magnitude of the event, only the quality.

And I started to learn that the days when I was happiest were the days with lots of small successes and few small frustrations.
Years later, when I got to college, I learned about an important theory of psychology called Learned Helplessness, developed by Dr. Martin E. P. Seligman. This theory, backed up by years of research, is that a great deal of depression grows out of a feeling of helplessness: the feeling that you cannot control your environment.

The more you feel that you can control your environment, and that the things you do are actually working, the happier you are. When you find yourself frustrated, angry, and upset, it’s probably because of something that happened that you could not control: even something small.

— Joel Spolsky (2000) Controlling your environment makes you happy.

Io consiglio di leggere l’articolo completo, non servono competenze tecniche. Inizia con un breve racconto di vita, pone questo cardine centrale che ho trascritto, e alla fine fa alcune considerazioni di design (altrettanto interessanti, ma che conosco bene e quindi non mi han colpito).

Questo passaggio si riferisce ai dettagli, alle piccole cose alle quali spesso non diamo peso, ed invece… contano. Su una cosa che alla fine è estremamente critica perché condiziona tutto il nostro tempo: l’umore.
Io poi che ho mood swing piuttosto ampi, capisco bene cosa significhi.

La riflessione più interessante che parte da qui però secondo me è ancora un’altra: come uscirne? Come trasformare una sequenza di piccole frustrazioni che colpiscono l’umore in una sequenza invece positiva?

Non solo sul livello riflessivo e personale, ma anche proprio sul discorso ambientale. Lasciare le cose indietro perché sopportabili, alla lunga erodono chiunque. Meglio sistemare, riordinare secondo il proprio ordine mentale. Penso soprattutto allo spazio che mi circonda, sia reale (il cavo continuava ad impigliarsi, tutte le mattine che lo staccavo… i 2 minuti in più impiegati a trovare il motivo non sono persi) che virtuale (continua a lanciarsi il programma A quando apro quei file, invece voglio B… i 30 secondi necessari a cambiare l’associazione non sono persi).

Credo però mi servano esempi migliori. E’ che sono dettagli. E i dettagli si dimenticano in fretta, ma si sommano senza che ce ne accorgiamo. Buffo vero?

Abbiamo impiegato un anno, un mese e una settimana più molte discussioni e revisioni (alcune anche molto drastiche) per proporvi il secondo passo dopo il precedente documento redatto assieme a Gianandrea Giacoma, “Elementi Teorici per la Progettazione dei Social Network”.

Costruendo su questa prima opera e aggiungendo i feedback ricevuti, le discussioni fatte ed ovviamente la nostra esperienza sul campo siamo andati oltre in una dimensione più pragmatica e proponiamo qui una metodologia di analisi e progettazione che integra i fattori psicologici e sociali, ovvero la persona, con le dinamiche dello User Centered Design.

Questo secondo documento si intitola “Design Motivazionale: Usabilità Sociale e Group Centered Design”.

La nostra proposta metodologica, il Design Motivazionale, si fonda su quattro concetti chiave:

1. Bisogni Funzionali: gli obiettivi di progettazione rivisti in chiave di necessità.
2. Usabilità Sociale: l’usabilità rivista in dinamica sociale (partendo dalla definizione di Nielsen).
3. Motivazioni Relazionali: il concetto di motivazione rivisto in chiave relazionale (one-to-one e sociale).
4. Flusso di Attività Circadiano: le attività abituali delle persone durante la giornata.

Fra queste, le componenti caratterizzanti sono come intuibile Usabilità Sociale e ancora più Motivazioni Relazionali. La prima definisce quattro proprietà “RICE“: Relazioni interpersonali, Identità, Comunicazione ed Emergenza dei gruppi, mentre la seconda quattro motivazioni “CECA“: Competizione, Eccellenza, Curiosità, Appartenenza.

Vista la quantità di concetti, alcuni anche nuovi quantomeno per molte persone, abbiamo cercato di strutturare il più possibile il paper in modo semplice, con parole chiave ben evidenziate, definizioni, schemi e un bel glossario alla fine.

Ecco quindi il documento, disponibile sotto licenza Creative Commons by-sa 2.5 (ITA):

• In formato PDF, versione 1.0 (700kb, con reflow attivo, fatemi sapere se funziona).
• sul Wiki di Bzaar.net, aperto per l’editing collaborativo.
• su Scribd.
• sul post parallelo di Gianandrea, dove vi fornisce il suo punto di vista.

Qualunque feedback è il benvenuto, anche più di un feedback se vi va.

Good design is innovative.
It does not copy existing product forms, nor does it produce any kind of novelty for the sake of it. The essence of innovation must be clearly seen in all functions of a product.
The possibilities in this respect are by no means exhausted. Technological development keeps offering new chances for innovative solutions.

Good design makes a product useful.
A product is bought in order to be used. It must serve a defined purpose – in both primary and additional functions.
The most important task of design is to optimise the utility of a product.

Good design is aesthetic.
The aesthetic quality of a product – and the fascination it inspires – is an integral part of the its utility.
Without doubt, it is uncomfortable and tiring to have to put up with products that are confusing, that get on your nerves, that you are unable to relate to. However, it has always been a hard task to argue about aesthetic quality, for two reasons.
Firstly, it is difficult to talk about anything visual, since words have a different meaning for different people.
Secondly, aesthetic quality deals with details, subtle shades, harmony and the equilibrium of a whole variety of visual elements. A good eye is required, schooled by years and years of experience, in order to be able to draw the right conclusion.

Good design helps a product to be understood.
It clarifies the structure of the product. Better still, it can make the product talk.
At best, it is self-explanatory and saves you the long, tedious perusal of the operating manual.

Good design is unobtrusive.
Products that satisfy this criterion are tools. They are neither decorative objects nor works of art.
Their design should therefore be both neutral and restrained leaving room for the user’s self-expression.

Good design is honest.
An honestly-designed product must not claim features it does not have – being more innovative, more efficient, of higher value.
It must not influence or manipulate buyers and users.

Good design is durable.
It is nothing trendy that might be out-of-date tomorrow.
This is one of the major differences between well-designed products and trivial objects for a waste-producing society.
Waste must no longer be tolerated.

Good design is consistent to the last detail.
Thoroughness and accuracy of design are synonymous with the product and its functions, as seen through the eyes of the user.

Good design is concerned with the environment.
Design must contribute towards a stable environment and a sensible use of raw materials.
This means considering not only actual pollution, but also the visual pollution and destruction of our environment.

Good design is as little design as possible.
Less is better – because it concentrates on the essential aspects and the products are not burdened with non-essentials. Back to purity, back to simplicity.

— Dieter Rams (wiki, flickr)
[via Bru, via Freegorifero — thanks a lot]

Ringrazio quindi Cyanto per aver fatto un post che segnala alcune numeriche e studi qualitativi in merito. Tre sono stati pubblicati da ClickTale, basati su analisi effettuate a partire dal loro servizio di tracciamento (2006/12, 2007/10, 2007/12). Due invece sono del sito User Interface Engineering, che fa alcune osservazioni qualitative (1998/07, 2006/08).

Analisi Quantitative (ClickTale)

La prima ricerca (2006/12), eseguita su un campione di 120.000 views, riporta una evidenza interessante. Nelle pagine in cui è presente una scrollbar la maggior parte degli utenti (22%, più di 1 su 5) visualizza il 100% della pagina indipendentemente dall’altezza della stessa, con un divario notevole rispetto a tutte le altre percentuali:

Il secondo dato interessante che si nota su questi dati è che non c’è correlazione fra la quantità di pagina vista e la lunghezza della stessa, come si nota da questo grafico (notate comunque la fluttuazione verso l’alto sulle prime tre altezze minori):

La ricerca successiva del 2007/10 esegue analisi più complesse su un campione più ampio ma conferma questi dati. Interessante invece quella del 2007/12 che aggiunge il fattore tempo, ovvero correla i dati precedenti con la quantità di tempo che gli utenti spendono su una determinata parte della pagina.
ClickTale cita il tempo speso come “attention” (“attenzione”) ma credo sia un errore stabilire una correlazione diretta fra i numeri analizzati e l’attenzione dell’utente. Preferisco usare “permanenza”:

Il grafico in questo caso è un po’ confuso, si notano però alcune caratteristiche interessanti. La prima è il picco intorno ai 500 pixel, quasi ovvio visto che è lo spazio che appare immediatamente caricata la pagina. Successivamente c’è un rapido declino (esponenziale) fino ai 1000 pixel (si vede meglio sugli altri grafici riportati da ClickTale) e dai 1000 in poi il calo è lineare, con un nuovo picco a fondo pagina, probabilmente perché spesso è presente un footer navigabile e in generale l’utente si interroga su come proseguire la navigazione.

Queste analisi numeriche non rispondono alla mia domanda iniziale (“scroll o next?”), ma sono un interessante insight su alcune dinamiche che avvengono e buoni suggerimenti su come progettare la pagina.

Analisi Qualitative (UIE)

L’articolo del 1998 di Jared M. Spool “As the Page Scrolls” inizia così:

Users say they don’t like to scroll. As a result, many designers try to keep their web pages short.

But one of the most significant findings of our research on web-site usability is that users are perfectly willing to scroll. However, they’ll only do it if the page gives them strong clues that scrolling will help them find what they’re looking for.

L’introduzione è già di per sé una ottima sintesi del resto dell’articolo: sintetizza sia il problema cognitivo degli utenti sia la risposta progettuale.

L’evidenza di queste affermazioni è stata portata alla luce da alcuni test utente fatti su due versioni di un sito: uno con pagine lunghe, l’altro con pagine che stavano perfettamente nello spazio visuale del browser (quindi, senza barre di scorrimento).
Il risultato è che l’utente non ha avuto alcuna percezione di miglioramento in quella senza barre e al contrario è riuscito a raggiungere più facilmente l’obiettivo quando i contenuti erano presentati su una sola pagina.

Il problema evidenziato è che nel caso di pagine corte gli utenti per reperire informazioni dovevano continuamente fare una navigazione a rimbalzo, ovvero continuare a clickare avanti, tornare indietro, clickare avanti e così via.

Una pagina lunga diventa ancora più efficace se viene fatto un raggruppamento logico e funzionale sia dei link che portano altrove, sia dei contenuti interni, in modo che l’utente con un colpo d’occhio è in grado di localizzare l’informazione che richiede. Non dimentichiamo infatti che in media gli utenti non leggono, scansionano.

L’articolo seguente sempre di Jared M. Spool, “Utilizing the Cut-off Look to Encourage Users To Scroll”, fornisce una ultima indicazione: dare alle pagine lunghe un look “tagliato” (“cut-off look”), in modo che vi sia l’affordance visuale di un contenuto che prosegue.

In Sintesi, i Principi

Da tutta questa discussione possiamo rilevare alcuni punti interessanti:

1. La lunghezza della pagina non influenza il comportamento di scrolling.
2. L’utente è propenso a usare lo scroll, frequentemente fino in fondo (22%, circa 1 su 5).
3. E’ necessario fornire forti suggerimenti visuali indicanti che la pagina prosegue oltre la parte immediatamente visibile (“cut-off look”).
4. La lunghezza della pagina è quindi determinata solamente dal contenuto: se ci sono tante informazioni correlate è meglio che siano raggruppate assieme, altrimenti si possono separare in differenti pagine.

In generale io propendo alla presentazione panottica dei dati, perché consente all’utente di vedere meglio la struttura dell’informazione e quindi migliora la sua possibilità di scelta, gli da controllo. Più in generale, le informazioni presentate simultaneamente su un ampio spazio sono più fruibili di piccoli contenuti spezzati.

Spesso questa tesi viene contraddetta dicendo che l’utente vuole poche informazioni e si “spaventa” se ci sono troppe informazioni: è vero, ma questo è un problema di presentazione, non di quantità. A parità di contenuti ci sono molti modi di veicolare il messaggio: alcuni semplici, altri complicati. Come sempre accade fare una cosa semplice è difficile ed è il motivo per cui nella maggior parte dei casi le pagine lunghe sono anche caotiche.

Una piccola precisazione su questo ragionamento: utilizzare più spazio rende più fruibili le informazioni, ma spesso questo si scontra con i problemi di gestione dello spazio stesso: un giornale è scomodo da sfogliare, a causa delle sue dimensioni. Un libro invece sta nello zaino. E un cellulare in tasca. Bisogna quindi tenere in considerazioni anche questi fattori, come sempre trovando un bilanciamento. Ovvero, il ruolo del designer.