User Experience e Interaction Design.

Ministero dell’Istruzione, dell’Università e della Ricerca

Alta Formazione Artistica, Musicale e Coreutica Diploma Accademico di Primo Livello in graphic design indirizzo Comunicazione d’impresa Anno Accademico 2013/14 Candidato Salvatore Allegrezza Relatore Ciro Esposito Progetto grafico Salvatore Allegrezza Nessuna parte di questo libro può essere riprodotta o trasmessa in qualsiasi forma o con qualsiasi mezzo elettronico, meccanico o altro senza l’autorizzazione scritta dei proprietari dei diritti e dell’editore.

Pubblicazione composta in Univers 55, disegnato da Adrian Frutiger nel 1955. ©Copyright 2015 Accademia di Belle Arti di Catania Salvatore Allegrezza Tutti i diritti riservati www.accademiadicatania.com

Salvatore Allegrezza

User Experience e Interaction design.

Come muoversi all’interno della progettazione UX.

accademia di belle arti catania

Introduzione 9 User Experience Da dove nasce?

Le figure

13 14 15

Cos’è l’interaction design Breve storia dell’interaction design I 4 approcci Elementi dell’interaction design Le leggi Design di interfacce

18 19 21 25 28 41

Le fasi operative della progettazione UX 50 Pianificazione 50 Analisi 51 Crea! 54 Progettazione 56 Test 61 Gestione 66 Presentazione 68

Caso di studio: Help! - guide e tutorial sul mondo informatico 71 L’idea 72 I wireframe 73 I wireframe per il web 76 I prototipi 79 Test 82

Indice

8

Introduzione

Il termine User Experience si è diffuso molto negli ultimi anni, in molti contesti e ambiti disciplinari differenti; questa rapida diffusione non è stata però accompagnata da una precisa definizione del concetto ma vengono attribuiti differenti significati, tutti però accomunati dallo scopo di realizzare prodotti che assecondino le percezioni e le reazioni di un utente in base alla sua aspettativa di utilizzo.

Creare una esperienza utente avvincente è molto più che fare un prodotto utilizzabile, significa realizzare servizi interessanti, divertenti ed essenziali per la vita delle persone.

Esistono diversi percorsi che possono essere intrapresi per arrivare a questa realizzazione: partendo dalla definizione degli utenti e dei loro requisiti fino ad arrivare ai test di usabilità.

Proveremo ad analizzarli ricordando però che il design è un processo che muta nel tempo, esso si evolve e cambia secondo i cambiamenti delle esigenze dei clienti, noi dobbiamo imparare ad essere fluidi e flessibili per adattarci a queste differenti esigenze e riuscire a creare un prodotto che non solo sia usabile, ma anche essenziale per le persone.

9

10

Introduction

The term User Experience has spread a lot in recent years, in many different contexts and disciplines; this rapid spread was not, however, accompanied by a precise definition of the concept but are assigned different meanings, but all united by the goal of creating products furthering the perceptions and reactions of a user based on his expectation of use.

Create a compelling user experience is much more than making a usable product, is to realize services interesting, fun and essential to people’s lives.

There are different paths that can be taken to get to this realization: starting from the definition of users and their requirements up to the usability testing.

We will try to analyze them, but remember that the design is a process that changes over time, it evolves and changes according to changes in customer needs, we must learn to be fluid and flexible to adapt to these different needs and be able to create a product that not only is usable, but also essential for people.

11

12

User Experience La UX è un approccio che investe un insieme di discipline e valuta come le persone si rapportano a un sistema. Si focalizza su come ognuno di noi reagisce all’utilizzo di un meccanismo fisico o di un sistema digitale affrontando aspetti pratici, ergonomici, tecnologici, ma anche cognitivi, psicologici, antropologici e sociali La UX può essere applicata a qualsiasi ambito della vita umana. È un processo iterativo che non segue un percorso lineare ma può tornare sui propri passi e intraprendere nuove strade: sono infatti le risposte degli utenti a fornire l’indirizzo. Ha natura poliedrica perchè interviene nella sfera dell’esperienza individuale, dei sentimenti e delle emozioni.

La UX coinvolge molte discipline ed è applicabile a qualsiasi campo preveda l’interazione tra la persona e un oggetto o un processo.

Costruire un buon prodotto che venga utilizzato facilmente dall’adolescente come dalla persona matura è una sfida complessa che l’ambiente digitale cerca di cogliere da sempre.

Dall’applicazione della UX all’interazione uomo/macchina nascono due discipline fondamentali: UCD - User centered design definito anche “usabilità pervasiva” e applicato agli ambiti più disparati. È un approccio alla progettazione che prevede il coinvolgimento di chi utilizzerà quel prodotto prima, durante e dopo il processo.

IDEO (www.ideo.com) società di consulenza e innovazione che ha fatto dell’esperienza d’uso dell’utente la propria bandiere. Realizza progetti nei settori più diversi: dal sociale al meccanico, dalle energie al software engineering, al design industriale fino all’interaction design e al design visivo.

13

UXD - User experience design mette in pratica i principi di progettazione per e con gli utenti.

“Clienti insoddisfatti diventano clienti di qualcun’altro” Processo iterativo che tiene conto dell’utente e del suo bagaglio esperienziale.

Da dove nasce?

Jakob Nielsen

Donald Norman

14

L’usabilità è un principio universalmente riconosciuto per misurare l’efficacia e l’efficienza di un sito web.

Negli anni 80 Jakob Nielsen e Donald Norman iniziarono a lavorare al miglioramento dei siti attraverso i principi che caratterizzano l’usabilità.

All’epoca non si parlava ancora di user experience, ma solo dell’obiettivo finale, gettando però le basi della nuova disciplina. Gli esperti di usabilità sono partiti dall’osservazione del funzionamento del “prodotto sito”, stabilendo regole e modi per assicurarne l’efficacia.

Poi, con il tempo, si sono resi conto che, per essere efficace, un sistema digitale non deve solo funzionare bene o essere usabile, ma deve anche tenere conto degli utilizzatori e dello specifico contesto d’uso, dando vita a un ambiente più complesso e sfaccettato: quello della user experience.

La user experience ha come obiettivo finale l’usabilità delle interfacce di un sito web, di un’applicazione touch, di un software, di un widget mobile o di un prodotto kinect.

Un’interfaccia usabile è il risultato dell’analisi del modo in cui le persone interagiscono con lo strumento e del livello di soddisfazione raggiunto.

Le figure Vediamo in pratica quali figure professionali sono impegnate nel processo di user experience design.

Queste figure hanno in comune l’obiettivo dell’usabilità di prodotto e di ambiti operativi molto affini. Non tutte le aziende o organizzazioni hanno bisogno di uno specialista che lavori in ognuna delle discipline; una persona ad esempio può essere chiamata per una disciplina ma sicuramente - si ritroverà a svolgere anche un’altra.

Tutte le discipline stanno sotto l’ombrello dello user experience design ma è proprio la disciplina che importa, non il titolo.

Guardano tutti agli aspetti dell’incontro tra l’utente e un prodotto o servizio.

User-experience design Industrial design

Information architecture

Communication design

User-interface engineering

Human factors Interaction design

Usability engineering

Human-computer interaction

15

Architetto dell’informazione (AI) si occupa della struttura dei contenuti e della navigazione dei prodotti informativi e lo fà come un architetto tradizionale. Lavora sugli impianti del sito attraverso il contenuto, lo cataloga, il modo in cui impostare il passaggio tra un singolo elemento e l’altro affinche tutte le informazioni siano trovabili dal maggior numero di persone perchè un informazione non trovabile è un’informazione persa.

Con la tecnologia, l’informazione diventa a-spaziale: può risiedere in più luoghi conYahoo! o Amazon offrono tutti e due un ottimo esemtemporaneamente. pio di information architecture, molte aree di contenuL’AI si occupa attraverso una serie di proto etichettate e categorizzate. cessi, di stabilire quali sono i luoghi più corretti per posizionarla, quali le correlazioni tra informazioni.

Industrial design (ID) lavora sulla “forma”degli oggetti, in modo da comunicare il loro uso rendendoli anche funzionali. Sedie, tavoli, ecc... tutti oggetti che si conformino alle limitazioni del corpo umano, sia fisicamente che psicologicamente.

Communication design (CD) si occupa di creare un linguaggio visivo per comunicare i contenuti: sono un esempio font, colori e layout di siti web e dei materiali stampati.

Human computer interaction (HCI) legata all’interaction design ma i suoi metodi sono più quantitativi.

Studia tutte le implicazioni, da quelle psicologiche a quelle fisiche, del rapporto tra l’uomo e i sistemi complessi.

Interaction design (IxD) si basa sull’ HCI, si occupa di progettare l’interazione tra i sistemi e gli utenti e il suo ruolo oggi è diventato chiave nella riuscita dei progetti.

IxD progetta la sequenza di azioni e le relative risposte che compiono gli utenti: dalla semplice iscrizione a un sito al videogioco in modalità gestuale.

L’interaction design si confronta con l’ossimoro dei nostri tempi: a si16

stemi sempre più complessi devono corrispondere interfacce e interazioni sempre più semplici e intuitive, e non è cosa da poco.

User interface engineering (UIE) è un sottoinsieme dell’interaction design e dell’ HCI e si focalizza sui controlli di un dispositivo digitale; il display di una macchina fotografica ad esempio.

Usability engineering (UE) si occupa di sottoporre a test i prodotti per assicurarsi che abbiano senso per l’utente Content strategy (CS) si occupa del vero cuore del progetto: il contenuto.

Pianifica la creazione, la pubblicazione e la gestione di contenuti strategici per il cliente e per gli utenti, lavora a loro fianco per comprenderne i bisogni e processi mentali in modo da creare i contenuti più adatti.

Rientra nella UX per la capacità di recepire le richieste di chi utilizzerà o utilizza il prodotto e per l’abilità a costruire una stretta relazione con le altre professionalità del processo iterativo di progettazione.

Gli esseri umani si sà, hanno una tendenza ad abituarsi alle cose terribili, scomode e inopportune; possiamo convivere con situazioni orribili per periodi lunghi aspettando qualcosa di meglio, qualcosa di cui potremmo persino non sapere di aver avuto bisogno.

Sono le piccole cose che con l’andare del tempo ci logorano: le macchie dei vestiti che non vanno via, il telefono che non esegue la chiamata.

Tutti questi piccoli problemi sono il pane quotidiano degli interaction design che provano ad alleviarci da questi fastidi, accertandosi che i prodotti e i servizi con cui la gente ha a che fare abbiano senso, siano usabili e utili e siano anche coinvolgenti.

Insomma, gli interaction design rendono il mondo migliore rimuovendo quei piccoli problemi della vita, cercando anche di facilitare le interazioni tra persone in modo migliore, più ricco e profondo.

17

Cos’è l’interaction design?

Come abbiamo detto, l’interaction design è l’arte di facilitare le interazioni fra esseri umani attraverso i prodotti e i servizi.

L’interaction design è un’arte applicata; l’utilità si vede nella sua applicazione a problemi reali come capire qual’è il modo migliore per mandare una mail. Molte volte interaction design è invisibile, funziona dietro le quinte.

Un’esempio sono Windows e Mac OS X, che fondamentalmente fanno la stessa cosa ma ci danno sensazioni diverse.

Questo perchè l’interaction design riguarda il comportamento, e il comportamento è molto più difficile da osservare e capire rispetto all’apparenza. È molto più facile accorgersi e discutere di un colore vistoso che di un’impercettibile transazione che può, nel tempo, farci impazzire.

Gli interaction design sono dei designer, nel bene o nel male, quindi devono: • Focalizzarsi sugli utenti.

Agli utenti interessa svolgere i propri compiti e raggiungere i propri obiettivi entro i propri limiti; i designer sono sostenitori degli utenti finali.

• Trovare alternative.

Fare del design significa “creare una terza opinione” • Utilizzare l’ideazione e la prototipazione.

Trovate le soluzioni, i designer, costruiscono modelli per sottoporli a test. Ogni prototipo rappresenta solo una soluzione, serve creare diversi prototipi per arrivare ad un singolo prodotto.

• Collaborare e affrontare i vincoli.

Raramente i designer hanno carta bianca per poter fare ciò che vogliono. Devono rispondere a obiettivi di business, stabilire compromessi con colleghi e rispettare scadenze.

18

• Creare soluzioni appropriate.

I designer portano con se la loro esperienza che cresce da un progetto al successivo, ma una soluzione non può essere usata in altri contesti.

Bisogna creare soluzione appropriate solo per un particolare contesto in un particolare momento. esempio Amazon • Attingere a un ampio raggio di influenze.

Ogni designer ha con sè uno spettro ampio da cui attingere ispirazioni e soluzioni • Incorporare le emozioni.

Nel design, prodotti privi di una componente emotiva non comunicano niente alle persone.

L’emozione ha bisogno di essere inclusa nelle decisioni di design.

Breve storia dell’interaction design L’IxD ha probabilmente inizio con gli Indiani d’America quando usavano i segnali di fumo per comunicazioni a lunga distanza, poi con i Celti che usavano tumuli di pietra per comunicare il tempo.

Negli anni ‘30, Samuel Morse creò un sistema per trasformare semplici impulsi elettromagnetici in un linguaggio codificato per comunnicare parole su lunghe distanze; negli anni successivi, il codice Morse e il telegrafo si diffusero in tutto il mondo, ma anche l’intero sistema per usarlo.

Richiesero ingegneri della progettazione anche altri strumenti di comunicazione di massa, dove interfacce e sistemi furono necessari non solo per i riceventi (telefoni, radio, televisione) ma anche per i dispositivi usati per creare e inviare messaggi (centralini telefonici, microfoni, telecamere) Di grande importanza fù la prima generazione di computer (ENIAC) un risultato dell’ingegneria, non solo del design. Gli esseri umani dovevano adattarsi ad usali, non viceversa e questo significa parlare il 19

Un esempio è Amazon che informa cosa acquistano gli altri utenti.

20

linguaggio delle macchine, non il nostro.

Gli ingegneri infatti spesero pochissime energie nel design al fine di rendere i primi computer più usabili, ma lavorarono principalmente per renderli più veloci e potenti Solo negli anni 60 gli ingegneri cominciarono a focalizzarsi sulle persone, quando iniziarono a escogitare nuovi metodi di input.

Nel 1990 Bill Moggridge, dirigente dell’azienda di design IDEO, si rese conto che lui con i suoi colleghi stavano creando un tipo di design veramente diverso; non era un design di prodotto anche se stavano disegnando prodotti; non era design di comunicazione anche se usassero alcuni strumenti di quella disciplina; non era nemmeno informatica anche se avessero avuto molto a che fare con computer e software.

Era qualcosa di differente.

Derivava da tutte quelle discipline ma era qualcosa che aveva a che fare con il mettere in comunicazione le persone attraverso i prodotti che usavano.

Moggridge chiamò questa nuova pratica interaction design.

Negli anni seguenti l’interaction design passò da una piccola disciplina specialistica a una pratica attuata da decina di migliaia di persone in tutto il mondo.

Con il maturare di Internet, maturarono anche tutte le tecnologie; dalla fine degli anni 90 infatti, Internet è usato più per fare cose come: scambiare azioni di borsa, vendere oggetti, condividere foto.

Internet oggi è diventata una piattaforma per applicazioni, che possono avvantaggiarsi delle numerose caratteristiche che internet offre: come la raccolta passiva di dati.

Ma non è solo Internet, è anche l’accesso a internet, attraverso connessioni a banda larga, reti Wifi; tutto questo sta cambiando i tipi di interazioni che abbiamo e il luogo in cui averle.

Ecco perchè non c’è mai stato momento migliore per essere interaction designer.

I 4 approcci al interaction design.

Design centrato sull’utente

Design centrato sulle attivitĂ

Design di sistemi

Design di genio (secondo Dan Saffer)

21

Quando si verifica un problema durante l’iter progettuale (analizzato in dettaglio qualche pagina più avanti), il designer, dopo averlo esaminato da diverse angolature, può arrivare alla soluzione attraverso quattro approcci principali.

Spetta a lui scegliere quelli più adatti.

Design centrato sull’utente.

La filosofia alla base di questo approccio è semplicemente che: “gli utenti lo sanno meglio”.

Le persone che useranno un prodotto o un servizio conoscono i propri bisogni, obiettivi e preferenze e sta al designer scoprire queste cose e disegnare per esse.

Non si può progettare qualcosa senza prima chiedere agli utenti.

Questo concetto di design esiste da lungo tempo e ha le sue radici nel design industriale, nell’ergonomia e nella convinzione che i designer debbano adattare i prodotti alle persone e non il contrario.

Gli obiettivi nell’UCD sono veramente importanti, i designer si concentrano su ciò che l’utente vuole ottenere in ultima analisi; poi determina compiti e mezzi necessari per raggiungere quegli obiettivi, ma avendo sempre presenti bisogni e preferenze degli utenti.

In questo approccio infatti, i designer coinvolgono gli utenti in ogni stadio del progetto: li consultano all’inizio per vedere se la proposta risponderà ai loro bisogni e conducono una ricerca estesa per determinare quali sono i loro obiettivi nella situzione attuale. Poi, sviluppano modelli in relazione al progetto o prototipi che verranno testati sugli utenti.

Questo approccio però, anche se basato sugli utenti, non è sempre funzionale. Può essere basato sul tipo sbagliato di utenti ad esempio.

Design centrato sulle attività.

Questo approccio non si concentra sugli obiettivi o sulle preferenze degli utenti, ma sulle attività appunto.

Le attività possono essere le azioni svolte per uno scopo, possono essere brevi e semplici o dispendiose in termini di tempo.

Alcune attività possono avere un termine prefissato, altre non hanno un termine fissato a priori; ogni attività termina nel momento in cui 22

l’attore decide che è finita.

Il design centrato sulle attività permette ai designer di focalizzarsi strettamente sul lavoro considerato e creare supporto per l’attività invece che per obiettivi più distanti. Quindi è particolarmente adatto per azioni complicate.

Le attività sono fatte di azioni e decisioni, i designer li chiamano compiti. I compiti possono essere costituiti da un unico atto come schiacciare un pulsante o più complicati. Ogni compito è un momento nella vita di un’attività.

Esempio eseguire una chiamata, uno dei compiti è trovare il numero di telefono.

Come nel UCD, il design centrato sulle attività si basa sulla ricerca per le intuizioni; i designer osservano e intervistano gli utenti per comprendere i loro comportamenti più che i loro obiettivi. Dopo catalogano tutte le attività e i compiti e poi disegnano soluzioni per aiutarli a completare il compito, non a raggiungere un obiettivo.

Design di sistemi.

Il design di sistemi è un modo molto analitico di affrontare i problemi; usa un’organizzazione stabilita di componenti per creare soluzioni di design.

A differenza del design centrato sull’utente, dove al centro c’è l’utente appunto, quà c’è il sistema; un insieme di entità che agiscono una sull’altra.

I sistemi non devono essere per forza computer, ma possono essere persone, dispositivi, macchine. Possono essere semplice, come l’impianto di riscaldamento domestico, o molto complessi, come interi governi.

In questo approccio, l’enfasi sugli utenti diminuisce a favore del contesto. I designer che fanno uso del design di sistemi si focalizzano sull’intero contesto d’uso, non solo sugli oggetti o dispositivi.

In poche parole delinea tutti i componenti che il sistema dovrà avere, fornendo ai designer un chiaro tracciato da seguire: un obiettivo, un sensore, un comparatore e un attuatore.

Il design di sistemi è un approccio molto logico e analitico all’interaction design, infatti le emozioni, le passioni e la fantasia hanno solo una piccola parte in questo tipo di design.

23

Il punto di forza di questo design è comunque la sua utilità nel vedere il quadro completo del progetto.

Design di genio. (secondo Dan Saffer) Il design di genio si affida solamente alla saggezza e all’esperienza del designer.

L’utente viene coinvolto (forse) solo alla fine del progetto per provare se funzioni veramente come previsto. Questo, però, può avere i suoi pro e i suoi contro.

La Apple ad esempio preferisce non fare nè ricerca nè test sugli utenti, forse per motivi di protezione. Può andar bene, e creare un design di grande effetto, come l’iPod, ma può creare anche grandi fallimenti come Newton, il primo dispositivo portatile Apple.

Questo approccio si basa quindi pesantemente sull’eperienza del designer.

Essendo un approccio più facile degli altri, il design di genio viene praticato anche da designer privi di esperienza; richiede molto meno sforzo, basta abbozzare sulla lavagna piuttosto che svolgere un’accurata ricerca sugli utenti.

Tutti e quattro sono usati per creare prodotti di successo, dai siti web all’elettronica di consumo, a servizi non digitali.

I migliori designer sono quelli capaci di muoversi fra gli approcci, applicando quello più adatto alla situzione e a volte applicando approcci multipli anche all’interno di uno stesso progetto.

24

Elementi dell’interaction design A prescindere dal tipo di approccio usato, per l’interaction design, le nozioni di base impiegate nelle soluzioni restano le stesse.

A differenza delle altre discipline di design, che usano elementi visivi come la linea o forme 3D, nell’interaction design gli elementi sono concettuali.

Movimento Per movimento s’intende il comportamento dei prodotti in risposta al comportamento delle persone.

Movimento colorato da atteggiamenti, cultura, personalità e contesto.

C’è un ampia variazione persino in comportamenti così universali e apparentemente semplici quali camminare (questo è il motivo per cui abbiamo bisogno di scarpe da ginnastica da corsa o girelli per anziani) e i design che creiamo devono recepire e rispondere a queste variazioni. Persino un movimento semplice come premere un tasto può essere difficile se siamo anziani o disabili.

Ogni movimento innesca una reazione (o feedback dell’azione).

Senza movimento non può esserci interazione.

Spazio Il movimento avviene in qualche tipo di spazio. Gli interaction design lavorano sia su spazi 2D che 3D. Molto spesso, l’interaction design comporta una combinazione di spazio fisico e digitale, come girare la manopola dello stereo, vedremo poi i risultati sul display.

Una caratteristica che molto spesso gli interaction design sottoutilizzano è ciò che i pittori del Rinascimento scoprirono tempo fà: la prospettiva.

Gli oggetti possono dare l’impressione di muoversi avanti e indietro anche in uno spazio 2D come se fossero in uno 3D. Cosa che è molto carente sui siti web. Lo spazio fornisce un contesto per il movimento; che sia in un ufficio postale o in un aeroporto, l’azione considerata avviene in qualsiasi luogo.

25

Tempo Tutte le interazioni avvengono in uno spazio, ma anche nel tempo.

A volte un’interazione può avvenire istantaneamente, come il click del mouse, altre volte può durare più a lungo.

Completare un movimento attraverso lo spazio richiede tempo.

Gli interaction design devono avere consapevolezza del tempo. Alcuni compiti sono complicati e completarli richiede molto tempo, ad esempio cercare e acquistare un prodotto.

Sarebbe una cosa negativa se Amazon o altri siti di commercio, farebbero scadere la sessione dopo pochi minuti e richiedano di registrarsi di nuovo.

Certamente, il tempo digitale non è il tempo umano. Il tempo digitale si misura in millisecondi, i cambiamenti realizzabili da pc possono essere quasi istantenei a tal punto da far disporre ai programmatori dei ritardi in modo tale che gli utenti possano accorgersene. Un ritardo però può anche creare una situazione di frustrazione, rabbia.

Il tempo crea ritmo, e gli interaction design controllano anche quello; la velocità con cui si apre o si chiude una cartella, quanto lentamente si apre un menù a discesa.

La durata delle batterie è un altro elemento di tempo del quale i designer devono essere consapevoli.

James Jerome Gibson è stato uno psicologo statunitense. È considerato uno dei più importanti psicologi del XX secolo nel campo della percezione visiva

26

Aspetto visivo L’aspetto visivo di un oggetto ci fornisce indizi su come l’oggetto si comporta e su come dovremmo interagire con quell’oggetto.

L’aspetto visivo è una sorgente importante di ciò che lo psicologo cognitivo James Gibson, nel 1966, chiamò affordance.

Gibson esplorò questo concetto nel suo libro del 1979 “The Ecological Approach to Visual perception”.

Un’affordance è una proprietà o un’insieme di proprietà di un oggetto, che fornisce indicazioni su come interagire con quell’oggetto o con una sua caratteristica.

Il termine si diffuse nel design grazie a Don Norman nel 1988.

tratto da: Nielsen Norman Group I principi relativi alle interfacce a schermo, su come i nuovi utenti capiscono cosa fare.

Seguire l’utilizzo convenzionale, sia nella scelta delle immagini e nelle interazioni ammissibili.

Le convenzione vincolano gravemente la creatività.

A volte vogliamo introdurre un nuovo tipo di azione per la quale non ci sono ancora convenzioni, tuttavia, se non si seguono le convenzioni principali, siamo destinati a fallire. Coloro che violano le convenzioni, anche quando sono convinti che il loro nuovo metodo è superiore, sono destinati a fallire.

Oggi non si può introdurre con successo una tastiera non-QWERTY, o invertire la barra di scorrimento, o improvvisamente richiedere un doppio clic sui link.

Usare le parole per descrivere l’azione desiderata (ad esempio, “clicca qui” o utilizzare le etichette su oggetti già percepiti).

Questo perché possono essere relativamente facile da comprendere: l’azione risultante è descritta verbalmente.

Le parole da sole però non possono risolvere il problema, occorre la rappresentazione di un oggetto. Le etichette con una parola singola falliscono per la maggior parte delle persone, perchè ognuno ha una parola preferita, ma la varietà di parole preferite è schiacciante.

Le parole possono anche causare problemi con l’adozione internazionale.

Così, come la segnaletica stradale che spesso usa la grafica, esiste uno standard internazionale. Ma la maggior parte della gente non capisce questi standard.

Le parole accompagnate dalla grafica è ancora più facile da comprendere.

Utilizzare la metafora.

La metafora è utile e dannosa. Il problema con la metafora è che non tutti gli utenti possono capire il punto. Peggio ancora, possono prendere la metafora troppo alla lettera e fare altro rispetto all’idea iniziale.

Ma questo dipende dal modo di formazione e dalla conoscenza dell’utente.

27

Suono Il suono è una piccola parte di molti design di interazione ma può essere molto importante, specialmente per gli avvisi e i dispositivi ambientali.

Il suono è composto da tre componenti principali, ognuna delle quali può essere regolata da un designer: • tonalità: quanto alto è un suono in frequenza; • volume: quanto alto è un suono in intensità; • qualità del timbro o del tono: che tipo di suono è.

Il suono è sottoutilizzato, ma nell’interaction design può produrre una differenza importante in un prodotto. Basti pensare alla manopola dell’iPod, Steve Jobs insistette parecchio affinche producesse un click udibile anche senza cuffie.

Tutti questi elementi devono essere assemblati da un’interaction design secondo alcuni principi o leggi.

Le leggi dell’interaction design Considerando che l’interaction design è un campo relativamente nuovo, gli interaction designer stanno scoprendo molti dei principi base del lavoro che svolgono.

Nonostante ciò esistono già molte leggi che gli interaction designer hanno usato con successo, ad eccezione della legge di Moore, che i designer devono solo capire ma non mettere in pratica.

Moore, co-fondatore del produttore dei circuiti Intel , predisse che ogni due anni il numero di transistor sui circuiti sarebbe raddoppiata.

Ed è quello che accade e sta accadendo, se solo si pensi che oggi c’è più potenta di calcolo in un pc che in tutto il centro controllo della NASA del 1969 quando mandarono il primo uomo sulla Luna.

I designer quindi possono concepire dispositivi ancora più piccolo e veloci di quanto si potesse immaginare una decina di anni fà.

28

La legge di Fitts Sviluppata nel 1954 dallo psicologo Paul M. Fitts, nel Journal of Experimental Psychology, la legge di Fitts stabilisce che il tempo di raggiungimento di un obiettivo (un’area, un bottone) in un compito di puntamento dipende dalla distanza dell’oggetto da raggiungere e dalle dimensioni di tale oggetto. Banalmente, più grande e vicino è l’oggetto, più veloce sarà il compito di puntamento. Per compito di puntamento intendiamo un movimento continuo che parta da una certa posizione e termini sopra l’obiettivo.

Ovviamente, dire che tanto più grande e vicino è un oggetto, e tanto più veloce sarà posizionarcisi sopra non sembra a prima vista una gran scoperta.

La legge di Fitts però definisce in termini numerici, quantitativi, il tempo di acquisizione, dati distanza e dimensione del target e note alcune variabili, secondo la seguente formula:

MT= a + b log2 (d/s+1) dove: MT = movement time to a target, ovvero tempo di acquisizione dell’oggetto d = distanza tra il dispositivo di puntamento (ad esempio il puntatore sullo schermo) e l’oggetto s = size, ovvero dimensione dell’oggetto (misurata sull’asse del movimento).

Nella formula originale i valori di a e b erano: a = 0,230 sec; b = 0,166 sec., ma variano a seconda delle situazioni e possono essere ricavati sperimentalmente.

s d

OBIETTIVO 29

In questo schema, un puntatore (freccia bianca) deve raggiungere un obiettivo di dimensione s attraverso un percorso lineare di lunghezza d.

La legge di Fitts è dunque una formula che riesce a predire in maniera piuttosto precisa il tempo di puntamento di un oggetto.

E’ stata ripetutamente confermata empiricamente.

Le conseguenze per la progettazione di interfacce grafiche sono molte.

La più importante, probabilmente, è che il punto più rapido da raggiungere è quello in cui il puntatore già si trova! E’ ovvio, perché non c’è alcun movimento da fare, nè rapido nè lento.

Questa proprietà è implementata nel menu contestuale, quello che si attiva cliccando il pulsante destro di un mouse.

A parte il punto in cui il cursore del mouse si trova, la legge di Fitts stabilisce anche quali sono gli altri punti più rapidi da raggiungere sullo schermo. Come si può facilmente immaginare, i punti più rapidi non dipendono affatto da dove il cursore si trova.

Si tratta infatti di punti rapidissimamente raggiungibili da qualunque punto sono infatti i quattro angoli dello schermo.

Il motivo è semplice: il movimento può essere rapidissimo (si può lanciare il mouse verso l’angolo), senza necessità di ricorrere agli aggiustamenti fini, dato che l’angolo non consente al mouse di andare oltre.

In questo modo, è come se l’oggetto “angolo” avesse dimensione infinita, dato che possiamo immaginarlo come un oggetto che si estende a piacere oltre i limiti dello schermo.

Dopo i 4 angoli, ovviamente i punti più rapidi da raggiungere sono i lati: anche se in una direzione sola, anche per loro vale l’assunzione di dimensione infinita.

E’ per questo motivo che l’interfaccia del Mac ha fin dalle sue prime versioni le barre di menu confinanti con il limite dello schermo.

Una caratteristica che rende molto agevole il raggiungimento delle voci di menu.

Un errore commesso da tutte le versioni di Windows e in parte corretto solo con la versione XP è che distanzia di pochi pixel dal margine dello schermo le voci disposte sulla barra dei compiti, in basso, unito al fatto che distanzia, sempre di pochi pixel, anche il bottone di avvio, che invece potrebbe trarre giovamento dalla posizione angolare.

Occorre specificare che il fatto che gli oggetti siano staccati di pochi 30

pixel dal bordo non li rende “solo un po’” meno rapidi da raggiungere.

Rende infatti necessario controllare i movimenti fini (che sono quelli che fanno perdere tempo) e dunque gli oggetti, sebbene vicini ai bordi, sono oggetti come tutti gli altri a tutti gli effetti.

O sono disposti esattamente sul bordo, o non trarranno alcun vantaggio dalla legge di Fitts, rispetto ad altri oggetti di pari dimensione.

Altre conseguenze per le interfacce web Ovviamente, per come è fatto il web, nessuna pagina può giovarsi dal posizionare bottoni o link adiacenti al margine dello schermo, semplicemente perché le finestre del browser hanno un margine di pochi pixel che rende vano il tentativo (recentemente Safari per Mac ha eliminato completamente i margini laterali, ma la finestra fluttua sullo schermo e dovrebbe essere l’utente a posizionarla esattamente sul bordo, prima di poter trarre vantaggio da eventuali link posizionati sul lato). Tuttavia, una supposizione statistica che si può fare è che il puntatore del mouse gravita mediamente più spesso vicino alla barra di scorrimento della finestra del browser, sulla destra.

Ovviamente il guadagno è piccolo e non merita vincoli di design molto rigidi: ma è pur sempre una considerazione mirata alla facilità d’uso.

Oggigiorno, con il diffondersi delle rotelle sul mouse, il puntatore sarà meno probabilmente relegato nella zona destra dello schermo, e anche i vantaggi di questo posizionamento diminuiranno lentamente. Inoltre, passata la prima schermata (quando i menu spariscono), il vantaggio scompare.

La legge tiene conto del tempo di acquisizione, ma non parla di tasso d’errore.

In teoria, naturalmente le zone che sfruttano al massimo la legge di Fitts, come il menu contestuale, gli angoli o i lati hanno tassi di errore bassissimi o nulli.

Talvolta, la necessità obbliga a inserire molte icone e tasti in poco spazio, riducendone le dimensioni e aumentando in tal caso il tasso di errore.

Se le icone troppo piccole sono adiacenti, allora un errore può far sì che si clicchi il tasto sbagliato, facendo partire un’azione indesiderata.

Per ridurre questo rischio i progettisti talvolta usano inserire un piccolo spazio (pochi pixel sono sufficienti) non cliccabile fra icona e icona, detto area di buffer.

31

L’area di buffer non riduce l’errore: fa sì che l’errore non produca conseguenze indesiderate.

Questo ovviamente va contro la legge di Fitts (infatti serve a non far cliccare...).

Il motivo è evidente: dato un certo spazio disponibile e un certo numero di oggetti (tasti, icone), l’inserimento di zone di buffer riduce la dimensione degli oggetti.

Le zone di buffer dovrebbero dunque essere inserite con una certa cautela, solo dove i target siano piccoli e i rischi di errore possano dar vita ad azioni indesiderate. In ogni caso non dovrebbero essere superiori a pochi pixel.

Laddove è possibile, il tasso di errore si riduce semplicemente rendendo più grandi le singole zone cliccabili, cosicché sia più improbabile per un utente cliccare sul margine e più probabile cliccare al centro.

La legge di Fitts, applicata al web, dovrebbe farci ricordare anche che condizioni e variazioni per casi particolari (ad esempio per soggetti con disturbi motori) dovrebbero essere testate.

I disabili motori non hanno tutti gli stessi problemi e non utilizzano nemmeno tutti gli stessi dispositivi di puntamento.

La legge di Fitts vale finché il movimento è continuo e c’è una corrispondenza lineare fra movimento fisico e movimento del puntatore virtuale.

Se, per effetto di un mancato controllo dei movimenti fini, o per l’uso di sistemi di cursore a rotazione, o di altri meccanismi discreti di puntamento, le premesse non vengono rispettate, non bisogna considerare attiva in quel caso la legge di Fitts, e bisogna verificare caso per caso quali sono i problemi di quella categoria di disabili.

32

La legge di Hick.

La legge di Hick sostiene che il tempo richiesto agli utenti per prendere decisioni è determinato dal numero di possibili scelte che hanno a disposizione.

Se ci sono n alternative equiprobabili, il tempo che impieghiamo a sceglierne una è proporzionale al logaritmo in base2 del numero di scelte più 1:

tempo= a+b log2 (n+1) Questo si può spiegare con il fatto che, al momento di una scelta, anzichè considerare una alla volta ogni opzione dell’insieme, noi suddividiamo l’insieme di opzioni in categorie, scartandone progressivamente una parte (circa la metà a ogni passaggio) Perciò, a parità di condizioni (costanti a e b) all’aumentare del numero di opzioni aumenta senz’altro anche il tempo di reazione.

Non sempre però è applicabile.

Infatti, nel caso di una lista di opzioni disordinata è difficile operare quella scomposizione mentale in categorie che la legge di Hick presuppone; il tempo di scelta diventa allora lineare e la formula perde significato.

Viceversa, se una lista di opzioni è presentata secondo un criterio logico (ad esempio alfabetico) risulta possibile utilizzare un criterio di scomposizione delle scelte; il tempo in questo caso è in relazione non lineare con il numero di alternative e la legge è pertinente.

Una conseguenza controversa di questa legge è che sia meglio per i prodotti dare agli utenti più scelte simultaneamente invece che organizzare le scelte in gruppi gerarchici, come nei menù a discesa.

Se seguito all’estremo, questo approccio creerebbe dei design spaventosi.

Immaginiamo se siti ricchi di contenuti come Yahoo o Amazon presentassero tutti i link sulla pagina principale o lo smartphone mostrasse tutte le funzionalità in una sola schermata.

La legge di Hick dichiara anche che il tempo richiesto per prendere una decisione è influenzato da due fattori, la familiarità con le scelte, ad esempio per l’uso ripetuto, e il formato delle scelte: sono suoni o parole, video o pulsanti?

33

Caso di studio: Il paradosso della scelta in profumeria (Ilenia Meconcelli)

Oggi tutti i punti vendita di cosmetici hanno per lo più il medesimo layout. Quando entriamo ci troviamo generalmente di fronte a uno o più corridoi, ai lati dei quali troviamo gli scaffali sui quali sono posizionati i profumi, divisi in genere per sesso e ordinati alfabeticamente per marca. Il profumo serve infatti a creare benessere personale e come esternazione del proprio carattere.

Ma come aiutare l’utente a scegliere il giusto profumo per la sua personalità?

Come può un cliente che non ha mai comprato un profumo scegliere quello adatto alla sua persona?

Come può scegliere la marca del suo profumo se non provando tutti i prodotti che offre quel determinato settore?

Come si può scegliere di regalare un profumo basandosi solo sulla marca?

L’obiettivo di questo studio è proprio quello di rispondere a queste domande, cercando di elaborare uno standard di classificazione per le profumerie in genere. Creare soluzioni pratiche che agevolino la scelta del prodotto per il cliente, e che possano fargli vivere un’esperienza confortevole al momento dell’acquisto.

L’organizzazione dei profumi per marca aiuta solo il cliente consapevole, cioè colui che sa già cosa vuole. La classificazione alfabetica è indubbiamente utile e convenzionale Ma è funzionale anche per il cliente?

La risposta è insieme affermativa e negativa. Affermativa nel caso in cui il cliente conosca già il profumo e la marca che desidera. Negativa nel caso invece in cui il cliente si trovi per la prima volta a scegliere un profumo, o nel caso voglia fare un regalo per un’altra persona.

La classificazione dei profumi è in effetti questione complessa.

Ogni profumo, oltre ad essere diviso per marca e sesso, può venire classificato per tipo (eau de parfum, eau de toilette, eau de cologne — 34

a seconda che contenga più o meno essenza pura), e soprattutto per famiglia olfattiva (freschi, dolci, speziati).

La complessità dei profumi è conseguenza della grande varietà di punti di vista dai quali si possono guardare. Privilegiandone uno piuttosto che un altro, si può ottenere ogni volta un diverso metodo di classificazione, in quanto ciascun punto di vista corrisponde a una diversa necessità o scopo che si prefigge il cliente. Un unico criterio di classificazione non potrà mai soddisfare tutti i clienti. Ogni cliente infatti attua una propria strategia di ricerca dell’informazione (information seeking) che cambia in base alle esigenze, al contesto e ad altri fattori.

Marcia Bates infatti distingue quattro principali modalità di information seeking, derivanti da una matrice a due assi: • l’asse verticale indica il grado di consapevolezza dell’oggetto ricercato; la strategia è diretta, quando possiamo specificare cosa stiamo cercando; indiretta, quando non sappiamo cosa stiamo cercando o non possiamo specificarlo con precisione; • l’asse orizzontale indica il grado di volontarietà (cioè lo sforzo impiegato nella ricerca); la strategia è attiva, quando intraprendiamo volontariamente la ricerca di un’informazione; passiva, quando è l’informazione a raggiungere noi, senza uno sforzo attivo da parte nostra.

35

Dalle combinazioni di questi assi scaturiscono le quattro strategie di ricerca fondamentali: • searching: ricerca consapevole e attiva (massimo sforzo impiegato) • monitoring: acquisizione consapevole ma passiva di un’informazione (siamo raggiunti da un’informazione che non abbiamo cercato ma che riguarda un argomento di nostro interesse sul quale abbiamo scelto di restare aggiornati; l’esempio più tipico è quello della newsletter) • browsing: ricerca non consapevole ma attiva (non abbiamo un bisogno specifico ma ci esponiamo alla possibilità di acquisire nuove informazioni; ne sono un esempio lo zapping, il navigare di link in link, l’andare per negozi) • awarness: acquisizione non consapevole e passiva d’informazione (minimo sforzo impiegato).

La strategia che impieghiamo maggiormente durante la giornata (e nell’arco della nostra intera esistenza) è proprio l’ultima, l’awarness (80% dei casi circa) — l’acquisizione di un’informazione, bene o servizio di cui non sapevamo di aver bisogno e che non abbiamo cercato.

Seguono il monitoring (14%), il browsing (5%) e il searching (1%). Vige cioè il principio del minimo sforzo, per cui tendiamo a impiegare le strategie che richiedono minor fatica; solo se queste falliscono passiamo a quelle a maggior costo (attive e consapevoli).

Ecco perché il cliente ha bisogno, quando entra in un punto vendita qualsiasi, di semplicità. Vuole sapersi orientare senza bisogno di pensare, vuole trovare un percorso precostituito che non richieda sacrificio, ma che sia intuibile e rispondente a all’esigenza del momento.

Una sovrabbondanza di elementi non solo non stimola all’acquisto, ma in molti casi può addirittura disincentivarlo. Il cliente non consapevole potrebbe preferire non comprare affatto piuttosto che sforzarsi di cercare (legge del minimo sforzo).

Si crea cioè un’ansia da scelta dovuta a un eccesso d’informazione Ecco perché in questo scenario la semplicità, la possibilità di restringe36

re le opzioni di scelta in base al contesto, o (ancora meglio) la possibilità che siano le informazioni e i prodotti stessi d’interesse a venire verso di noi (anziché viceversa) acquistano un valore cruciale. È la cosiddetta modalità push.

NO TE OR IE

LI EA

LI TA N

NO TE FL O R

Classificazione a faccette La classificazione a faccette sfrutta un sistema di attributi mutuamente esclusivi rappresentanti ciascuno un aspetto o proprietà persistente dell’oggetto e capaci nel loro insieme di descrivere esaustivamente l’oggetto stesso. Tali attributi sono detti faccette, termine introdotto in questa accezione dal bibliotecario e matematico indiano Ranganathan.

Questo sistema di classificazione, nato per i libri e le biblioteche, è applicabile perfettamente sia agli spazi fisici sia a quelli digitali.

Il pregio di questa classificazione è proprio la soluzione al problema della scelta fin troppo ampia che ci troviamo di fronte quando entriamo in profumeria.

Le faccette agevolano infatti più logiche di accesso — adattandosi a tutte e quattro le principali modalità di information seeking — e sono perciò in grado di soddisfare potenzialmente tutto il pubblico, anche clienti che hanno un basso grado di consapevolezza o volontarietà.

La classificazione a faccette può essere affiancata dalla classificazione emotiva, un tipo di classificazione che impiega come criterio di divisione aspetti riconducibili alla sfera delle emozioni.

E H

NOTE LE GN O SE

Fragranze Aromatiche

NOT E F RE SC

37

Chi invece (probabilmente la maggioranza) attua un tipo di ricerca non consapevole non trae alcun vantaggio da questo tipo di organizzazione.

La famiglia olfattiva, fra l’altro, consente di fondere più esigenze insieme: • sensazioni ed emozioni • età • sesso La classificazione per emozioni è un approccio che non si adatta certamente all’impiego su vasta scala, ma trova il suo campo di applicazione elettivo per lo più in settori specifici, dove la sfera emotiva rappresenta un modello comportamentale di ricerca e scelta effettivamente pertinente.

7: il numero magico I principi della legge di Hick sembrano contraddire la regola del magico numero 7 di Miller George Miller, nel 1956, determinò che la mente umana è più capace di ricordare informazioni in pezzi di sette elementi.

Sembra che abbiamo difficoltà a tenere più di quella quantià di informazione nella nostra memoria a breve termine in ogni dato momento.

Molti designer hanno portato il numero sette all’estremo, accertandosi che non ci siano più di 7 elementi su uno schermo in un determinato momento.

Ma i designer devono invece aver cura di non creare prodotti che causino sovraccarico cognitivo (cognitive overload) perchè ignorano la legge del numero 7, non creando quindi dispositivi che costringano gli utenti a ricordare elementi non familiari che si trovano in schermate o pagine differenti.

38

La legge di Tesler o conservazione della complessità.

Larry Tesler, uno dei pionieri dell’interaction design, coniò questa legge che stabilisce che una certa quantità di complessità è inerente a qualsiasi processo. C’è un punto oltre il quale non si può ulteriormente semplificare un processo; si può solo spostare la complessità inerente da un parte all’altra.

Se, ad esempio, durante l’invio di una mail manca l’indirizzo del destinatario o del mittente, la mail non può essere inviata. È una complessità necessaria.

Ogni volta che mandiamo una mail non dobbiamo inserire ogni volta il nostro indirizzo, la stessa cosa per quello del destinatario; il software memorizza gli indirizzi recenti, cosi non dobbiamo ricordarli.

La complessità non se n’è andata, ma una parte di essa si è invece spostata verso il software.

La legge di Tesler dovrebbe essere ricordata da ogni interaction designer per due ragioni.

Primo, i designer dovrebbero rendersi conto che tutti i processi hanno elementi che non possono essere semplificati.

Secondo, devono cercare i posti ragionevoli dove spostare questa complessità nei prodotti che creano.

39

40

Design di interfacce Analizziamo adesso la “parte visibile” dell’interaction design, la punta dell’iceberg: le interfacce.

Un’interfaccia è il luogo in cui si realizzano le scelte dell’interaction designer su come le persone possono entrare in relazione con un prodotto e su come quel prodotto deve rispondere.

Nel caso dell’interaction designer, dovrà creare interfacce visive.

Alla base di tutto il design visivo delle schermate c’è il layout: dove e come le caratteristiche, i comandi e il contenuto vengono posizionati.

Fornisce la struttura in cui questi elementi risiedono e la gerarchia, consentendo agli utenti di capire cosa è più importante o meno.

Il layout è particolarmente importante per i piccoli schermi, dato che lo spazio è prezioso.

Una griglia aiuta il designer a organizzare le informazioni in uno scherma coerente; raramente possono sbagliare se partono con un sistema di griglie.

41

Si inizia suddividendo lo schermo in aree razionali di base, che comprendono i gutter, gli spazi bianchi che separano righe e colonne.

Le griglie sono delle linee guida che aiutano il designer a organizzare il layout in uno schema coerente, non sono obbligatorie ma fortemente consigliabili, in quanto, come diceva Mark Boulton nel lontano 2005, “facilitano la creatività fornendo al lavoro un framework e risponde in anticipo ad alcune domande del futuro design...”.

Inoltre, le griglie instaurano un ordine nella presentazione del flusso visivo e consentono all’utente di individuare facilmente dove cercare le necessarie informazioni, bottoni, comandi, widgets, conferendo al layout una certa continuità.

La scelta della gliglia dipende dal device per il quale stiamo progettando e dalla tipologia di prodotto che stiamo creando.

Per un app di fotografia la griglia può essere diversa da quella per le notizie, ma la tendenza generale è la convergenza e l’universalità, per cui le griglie di oggi si frammentano in tante celle, consentendo sempre maggiore flessibilità della progettazione.

Le differenze principali sono dettate dalle dimensioni/proporzioni degli schermi dei dispositivi, legate alla piattaforma di appartenenza. È possibile costruire la griglia propria, ad hoc per un determinato progetto con l’uso di strumenti online e offline come Adobe Illustrator, Adobe Indesign oppure avvalersi della varietà del materiale gratuito e disponibile in rete in formati diversi (.psd, .ai, .png), importante è tenere conto della continua e rapida evoluzione di formati e tendenze.

Flusso visivo Progettare il flusso visivo significa fornire indizi su dove l’utente dovrebbe guardare.

Le soluzioni che i designer propongono devono tener conto della cultura e della situazione in cui i futuri utenti vivono.

Nel mondo occidentale l’occhio si muove generalmente da sinistra a destra e dall’alto verso il basso e i designer devono essere consapevoli di questo e progettare di conseguenza.

Raggruppare, subordinare, distanziare, allineare crea il flusso visivo 42

mettendo in evidenza certe funzioni rispetto ad altre, assimilando le informazioni bisbigliando all’utente cosa è più importante rispetto ad altro, in quale ordine bisogna procedere per completare certa procedura e quali altre possibilità parallele vi sono nello stesso percorso.

Per progettare bene il flusso visivo è utile tenere in mente le leggi di Gestalt.

Le linee, le forme, gli sfondi e persino gli spazi banchi - o meglio le particolari relazioni di tutti questi elementi - suggeriscono, secondo la teoria, il movimento, il significato, la gerarchia, la coerenza e di conseguenza la possibilità d’interazione utente-oggetto.

Lo stesso oggetto ha caratteristiche diverse se preso singolarmente o inserito all’interno di qualche altra figura o raggruppamento e lo stesso oggetto, inserito in due diverse totalità, può assumere significati diversi.

Il flusso visivo ben costruito si traduce nel movimento psicologico nella mente dell’user e lo porta o dritto all’obiettivo o fuori strada.

Caso di studio: Destra o sinistra?

(Luca Rosati)

Meglio la navigazione a sinistra o a destra?

Meglio piuttosto riformulare la domanda. Perché ciò che conta davvero non è la posizione del menu ma la sua affordance.

Nell’alertbox di aprile, Nielsen (Nielsen Norman Group) sostiene che l’attenzione degli utenti si concentrerebbe al 69% sulla porzione sinistra della pagina e solo al 31% su quella di destra; concludendo che i layout tradizionali con navigazione a sinistra sarebbero preferibili a quelli con navigazione a destra.

“Web users spend 69% of their time viewing the left half of the page and 30% viewing the right half. A conventional layout is thus more likely to make sites profitable (Nielsen 2010).”

43

La conclusione deriverebbe da una serie di test condotti da Nielsen con l’eye-tracking. Ma il condizionale è d’obbligo.

Non mettendo in dubbio i test con l’eye-tracking (sui quali però Nielsen non fornisce alcun dettaglio), ma la generalizzazione che ne deriva.

Qui sta infatti il problema: l’eye-tracking ci consente di capire cosa guarda un determinato utente in una determinata pagina web, ma non perché (o meglio, questo è soggetto a interpretazione).

Ecco il motivo per cui ricavare da questo comportamento specifico una euristica generale è pericoloso – o quanto meno va fatto con attenzione.

Mettendo in guardia dai limiti di questo approccio, Maurizio Boscarol commenta che Nielsen: “si è dimenticato di dirci quante pagine, fra quelle viste dagli utenti nel suo esperimento, hanno effettivamente il layout con navigazione a sinistra! Non saranno mica, diciamo, attorno al 70%?… Perché se così fosse, i dati si potrebbero spiegare anche con il layout delle pagine viste. Potrebbe essere quello a determinare il pattern di visione (questa sarebbe la mia prima ipotesi).” (Boscarol 2010).

O forse, nei layout testati, (anche se la navigazione era a destra) a sinistra erano presenti elementi capaci di attrarre il focus attentivo. Oppure la navigazione (pur situata a destra) non era riconoscibile come tale dagli utenti.

Insomma: dire che la maggioranza degli utenti sottoposti a test su un certo numero di pagine tendono a concentrarsi sulla colonna di sinistra della pagina non basta per trarne la generalizzazione: “gli utenti si aspettano la navigazione a sinistra”.

Bisogna capire il perché di questo comportamento (e i dati forniti da Nielsen non ce lo permettono).

Posizione o affordance?

Non è il dove si posiziona il menu che è fondamentale ma il come; come questo è progettato e la sua capacità di essere riconosciuto e usato come tale, vale a dire la sua affordance.

A dimostrazione che la posizione sia poco influente ci sono importanti evidenze: • i test con utenti per il redesign del sito Audi (condotti su 2 layout 44

speculari, uno con navigazione a destra e uno con navigazione a sinistra) • una serie di test con utenti condotti da Maurizio Boscarol e Sofia Postai.

D’altra parte, Nielsen non è certo nuovo a questo approccio normativo e dirigista all’usabilità, fatto di ricette rigide e pronte all’uso più che di metodi e buone pratiche.

E se questo poteva essere utile in un primo tempo per traghettare l’usabilità dalla ricerca di alto livello al mercato, oggi rischia senz’altro di essere dannoso.

Euristiche e falsi miti Più in generale, le euristiche rappresentano strumenti preziosi, ma che non dovrebbero mai essere disgiunti dall’analisi sul campo.

Anche perché ricordiamoci che l’usabilità è per definizione legata a specifici utenti, specifici contesti e specifici obiettivi o compiti. Se una di queste variabili cambia, cambia anche il risultato.

45

A

Typography Il testo è l’ingrediente principale della maggior parte delle interfacce, le scelte tipografiche diventano importantissimi non solo per la leggibilità ma anche per la personalità del prodotto digitale.

La typography del prodotto indica la maturità del suo design e costituisce la parte rilevante dell’UX. Il testo digitale fruito attraverso i dispositivi deve essere innanzitutto leggibile (la sua lettura è più affaticante che su carta), altrimenti non ha proprio importanza se il font con cui è battuto il testo è bello e elegante e se rispecchia il carattere dell’utente tipo — se non si legge non funziona.

Ma la leggibilità è il parametro piuttosto relativo, certo, dipende dalle caratteristiche proprie di ogni font specifico come dal kerning, dal peso dei singoli caratteri, dal contrasto tra le parti delle lettere, dalla presenza o non delle grazie, insomma, dall’anatomia dei singoli simboli, ma il criterio individuale della leggibilità è la dimensione del testo.

In un buon prodotto digitale la leggibilità di un testo deve essere equilibrata per ogni utente specifico, deve quindi adottare la tecnica del dynamic type, cioè della possibilità da parte dell’utente di impostare la grandezza del testo in base alle proprie esigenze e di conseguenza dovrebbe assicurare l’allineamento dell’intero layout.

A

L’altra regola cui è buono attenersi è quella di non usare tanti font diversi o tante varianti dello stesso font all’interno dello stesso prodotto.

Tanti caratteri messi insieme, soprattutto nella stessa schermata per il semplice gusto di “abbellire”, creano rumore inutile, distraggono l’utente tirando su di sé l’eccessiva attenzione, bisogna evitare quindi di utilizzare più font all’interno dello stesso prodotto.

La tipografia indica anche la gerarchia dei contenuti, ci guida dall’inizio alla fine di un processo e anche all’interno del testo stesso, quindi occorre distinguere tipograficamente i titoli dalle note, aumenta l’usabilità.

Infine, ricordando che il medium è il messaggio, pensiamo, appunto, al messaggio che comunica la nostra typography, se condivide i valori del prodotto e se ne esprime il carattere.

Agli albori dello sviluppo delle applicazioni mobile o web, la tipografia veniva terribilmente trascurata e appariva accidentale, ma negli anni successivi si è raggiunta la maturità della progettazione più attenta e 46

consapevole della web typography, grazie anche alla sempre maggiore compatibilità di browser, alla diffusione di web fonts per piccoli e grandi schermi, lo sviluppo di CSS e la migliore capacità di interpretazione da parte dei dispositivi.

Colore Il colore è un altro strumento potentissimo per indicare all’utente un corretto utilizzo dell’interfaccia, nonché per esprimere la sua personalità. Il colore, se applicato bene, conferisce la vitalità al prodotto e fornisce ai suoi contenuti la continuità visiva.

L’uso del colore anch’esso aiuta a costruire la gerarchia.

Giocando con tinta, saturazione e le loro combinazioni si può dichiarare una barra di navigazione più importante dell’altra, subordinare un bottone a un determinato gruppo di funzionalità, oppure comunicare lo stato attivo/passivo, acceso/spento, interattivo e non di un certo elemento.

Nella progettazione della paletta di un’app, ad esempio, bisogna tener conto della portatilità del dispositivo mobile, attraverso il quale si fruisce l’applicazione.

In condizioni di luce diverse, all’aria aperta sotto il sole, piuttosto che in ufficio con l’illuminazione artificiale a luci led, le combinazioni di colore da noi impostate produrranno i risultati diversi, bisogna testare per essere certi dell’efficacia delle proprie scelte. Inoltre, un altro limite da considerare è il daltonismo del 10% della popolazione maschile — la difficoltà di distinguere il rosso dal verde.

Per escludere l’impedita usabilità dei nostri prodotti digitali, bisogna evitare le situazioni in cui l’unico fattore della presa della decisione sia la scelta tra rosso e verde.

Non sempre i colori comunicano le stesse cose, il colore, al contrario di quanto si possa pensare, non è il mezzo universale, in diverse culture assume le accezioni diverse.

In Cina e Giappone, per esempio, il bianco connota il lutto, una possibile complicazione, in occidente, per i trend dal design chiaro e con abbondante presenza di bianco.

Ma analizzando attentamente i nostri utenti tipo, non dovremmo sbagliare.

Ugualmente alle relazioni forma/sfondo della teoria Gestalt, le combinazioni tra il colore di background (sfondo) e la figura che vi si trova 47

possono avere le rese differenti: gli sfondi bianchi tendono a scurire e possono anche affievolire i colori; gli sfondi neri tendono ad illuminare i colori.

La regola d’oro in una bilanciata progettazione è sempre quella di non abusare: troppi colori, come troppi fonts distraggono e confondono l’utente.

Comandi e controlli.

Affinché l’utente azioni le funzionalità del prodotto, le app dispongono dei comandi e dei controlli. Questi elementi dell’UI del prodotto/servizio digitale rappresentano il perno centrale dell’interattività.

Comandi e controlli di un’app spiegano cosa l’app può fare, nonché forniscono il potere di concretizzare tali possibilità.

I comandi digitali possono assumere forme e principi diversi, anche essi in continua evoluzione e espansione: checkbox, radio button, twist, scrolls, drop-down menu, list box, text box, spin box, search bars, notifications a tant’altro ancora. L’importante è che comunichino la loro interattività, producendo, feedforward e feedback di solito attraverso il colore, l’animazione o il suono.

Il feedback, come utilizzato comunemente, è un’indicazione che qualcosa è accaduto; e dovrebbe avvenire presto e spesso.

Muovere il mouse dovrebbe fa muover il cursore sul display, digitare il tasto sul cellulare dovrebbe par apparire il numero ecc...

Se non c’è un feedback immediato o ovvio, gli utenti ripeteranno l’azione che hanno appena fatto. Questo può causare problemi, come acquistare accidentalmente un prodotto due volte, o se il macchinario è pericoloso potrebbe causare anche morti o feriti.

Creare il feedback appropriato è il compito del designer, oltre a determinare quanto velocemente il prodotto o servizio risponderà e in che modo.

Correlato al feedback è il feedforwar: sapere ciò che accadrà prima di eseguire un’azione.

Il feedforwar potrebbe essere un messaggio semplice o un semplice indizio come un link ipertestuale.

Questo permette agli utenti di eseguire un’azione con sicurezza perchè dà loro un’idea di ciò che accadrà dopo.

Con lo sviluppo della tecnologia multi-touch (evoluzione dello schermo tattile) tanti comandi e controlli di app o siti si sono smaterializzati, si 48

sono sostituiti dai gesti.

Tap, double tap, long press, swipe and drag, swipe away, pinch close/ pinch open; sono tutti i modi per interagire con il sistema, i comandi invisibili che possiamo eseguire senza toccare nessun tasto in particolare. Se il sistema è predisposto per questo linguaggio, ci capirà.

I controlli invisibili sono molto utili per «sfoltire» l’interfaccia dai numerosi bottoni: premete e tenete premuta un’immagine e vi rivelerà dei comandi-bottoni per poter condividere, salvare o aggiungere ai preferiti l’elemento interessato.

Questo tipo d’interazione funziona esattamente come il mondo naturale: ruotiamo un pacco per vedere di cosa è formato, esploriamo, ecc...; con il touch succede sostanzialmente la stessa cosa, se abbiamo davanti un elemento, proviamo a manipolarlo attraverso lo swip, slide orizzontale, verticale e vediamo come ci risponde.

Ancora non tutti noi siamo abituati ad interagire con i prodotti digitali in questa maniera, ma le interfacce gestuali se applicate bene, possono davvero rendere il dialogo con il sistema più veloce e naturale.

49

Fasi operative della progettazione UX In genere prima dello start vi è un cliente, o uno stakeholder interno alla vostra azienda che richiede un sito perchè è partito con un determinato progetto o devono ancora partire e hanno bisogno di un sito; le richieste saranno comunque le più disparate.

Analizziamo le fasi operative accompagnati da tanta pazienza.

Pianificazione È la fase in cui si acquisiscono tutte le informazioni e si fissano i punti come gli obiettivi e le risorse per raggiungerli.

Le informazioni raccolte in questa fase subiranno dei necessari assestamenti nel corso della progettazione; gli obiettivi di progetto vengono rivisti alla luce degli incontri con gli utenti e i committenti.

Perchè il progetto è importante per l’azienda?

In che modo il cliente valuterà il progetto come un successo?

Che metodologia verrà utilizzata?

Quali sono i punti di attenzione sui quali è necessaria un approvazione da parte del cliente?

Inizia tutto con una chiacchierata agile e informale con il committente sugli obiettivi e le aspettative del progetto, sul perchè quel prodotto migliorerà il proprio business. Ma questo non capita quasi mai.

Capita sempre di sentirsi dire: “voglio un sito perchè và di moda” “Voglio essere social” Quindi dobbiamo tirare fuori (nel vero senso della parola) tutti gli obiettivi reali di progetto.

Gli obiettivi però devono essere misurabili dal cliente.

Dovranno essere: • facili da capire, descritti usando parole semplici • chiari, eliminando concetti astratti • misurabili, anche con obiettivi più generici proviamo a individuare criteri misurabili 50

Proprio dagli obiettivi inizia il progetto.

• Obiettivo strategico; “l’obiettivo dell’azienda è diventare leader nel settore conquistando nuove fasce di mercato”.

• Obiettivo progettuale; “per conquistare nuove fasce voglio creare un applicazione per smartphone che fidelizzi il target adolescenziale”.

L’obiettivo di progetto a differenza di quello strategico, diventa misurabile con risultati concreti: aumento del 10% delle vendite online; aumento del 20% dei guadagni ecc..

Questo è aiutato anche dalla rivoluzione digitale perchè oggi l’interazione digitale è sempre meno anonima.

Infatti, “Se vuoi utilizzare il mio sito?” o “Vuoi scaricare la mia applicazione?” - Registrati! (cosi d’ora in poi io-azienda saprò chi sei).

Per focalizzarci sugli obiettivi possiamo aiutarci con le valutazioni generali sull’azienda: punti di forza e debolezza, opportunità, modelli offerti dai concorrenti.

Gli aggiustamenti fanno parte del percorso ma gli obiettivi devono restare sempre chiari.

Analisi Il primo passo è quello dello “sniffing”.

L’indagine si differenzia in base al prodotto: se è completamente nuovo o và riprogettato.

Se un prodotto è nuovo, l’analisi sarà molto generica: si lavora studiando dati e informazini che riguardano ambiti affini a quello digitale ma in grado di fornire un quadro ristretto dell’ambiente con il quale interagiremo.

Se un prodotto và riprogettato, le cose sono più semplici perchè l’analisi sarà sull’esistente (AS IS).

Il primo passo consiste in una navigazione approfondita del sito per capire la struttura, la logica, le pagine e quali servizi offre. Poi si stabiliscono quali sono i punti di forza e di debolezza (SWOT analisys), queste valutazioni vengono poi approfondite tramite altri sistemi di analisi come le intervist, i questionari mirati o i focus group.

51

Dopo aver raccolto gli obiettivi di business e le richieste dei clienti, arriva il momento di mettere insieme i dati sulle aspettative.

Un progetto per essere efficace deve mantenere l’equilibrio tra: • le richieste (desiderability) • la fattibilità (feasibility) • i costi di realizzazione (viability) Analisi competitiva o di mercato Serve a posizionare il sito web all’interno del mercato, individuando le best practice a tutti i livelli: architettura, navigazione, usabilità, grafica e servizi.

L’analisi competitiva è utile a tutti: al committente per focalizzare le idee, al team di sviluppo per cominciare a capire le evoluzioni di progetto Questo documento ha senso se viene realizzato all’inizio del progetto, nella fase ideativa, dove ha sopratutto tre vantaggi: • amplia la conoscenza del mercato in cui ci andiamo a posizionare • identifica le migliori pratiche della concorrenza • aiuta il confronto sulle soluzioni all’interno del team.

GENERALE

•

sitoconcorrente1.com sitocliente.com

sitoconcorrente3.com sitoconcorrente4.com sitoconcorrente5.com SPECIFICO

52

COMMERCIALE

CONTENUTO

sitoconcorrente2.com

individuati i concorrenti e i prodotti simili, si costruisce un’asse cartesiano che fotografi la posizione del sito rispetto agli altri.

I siti concorrenti possono essere analizzati in vari modi: secondo criteri generali (navigazione, struttra del sito, servizi offerti) oppure attraverso aspetti specifici (funzionamento del form di prenotazione, usabilità del contenuto).

Dopo aver stabilito se condurre un analisi più ampia o più capillare, lo step successivo consiste nello scegliere tra due tipologie di studio: qualitativo e quantitativo Analisi qualitativa L’analisi qualitative descrive i prodotti dei concorrenti attraverso livelli e criteri di valutazione; ad esempio, l’efficienza della navigazione, la chiarezza organizzativa, la chiarezza del design, la soddisfazione delle aspettative dell’utente, l’efficacia del visual design, la leggibilità e la scansione delle informazioni, la facilità con la quale l’utente raggiunge l’obiettivo e l’efficienza dell’assistenza all’utente.

Quest’analisi può anche comprendere i punti di forza e di debolezza (SWOT) Un esempio può essere l’analisi di un sito attraverso le principali categorie della navigazione, la struttura del layout della home e delle pagine interne o l’azione che compie un utente nella fase d’acquisto.

La verità è che per l’analisi qualitativa non esiste un formato standard, ma si può spaziare in base alle proprie preferenze e necessità: di tempo e di mediazione con clienti e sviluppatori.

Analisi quantitativa Quest’analisi può risultare più semplice da condurre per chi ha poca esperienza di test.

Si tratta di osservare i siti concorrenti e annotare la presenza o meno dei servizi che offrono.

Uno tra le tipologie di documento più usate è quello tabellare, che permette di visualizzare a colpo d’occhio la presenza o meno di un determinato servizio. Si può scegliere di osservare nello specifico un servizio della concorrenza, il tempo e i clic di prenotazione ad esempio.

53

Inventario dei contenuti L’inventario è una lista ragionata dei contenuti del sito.

Cosa s’intende per contenuti? Oggi nel web abbiamo numero tipi di informazioni e formati: dalle pagine web ai file audio, file video o contenuti provenienti dai social.

In qualsiasi sito le pagine si aggiornano, cambiano e si rinnovano, quindi mantenere tutto sotto controllo diventa sempre più difficile.

A questo serve l’inventario: a classificare e tenere sotto controllo tutti i contenuti del sito.

Un inventario ben impostato è un documento che ritroveremo nel tempo, la chiave per costruire altri documenti come la mappa del sito, i process flow e i wireframe, e sopratutto fornisce una visione panoramica sul progetto, alla base di una buona riuscita e fondamentale per la prossima fase.

Crea!

La mappa concettuale è lo step iniziale, il documento che racchiude i valori, la logica e il funzionamento del nostro prodotto.

Secondo Dan Brown, la mappa concettuale ha un’importanza fondamentale perchè fin dall’inizio permette di: • evidenziare problemi di progettazione, magari trascurati; • spostare l’attenzione dalla tecnologia all’impatto sull’organizzazione che il progetto può avere; • stabilire connessioni tra concetti apparentemente distanti; • focalizzare concetti essenziali eliminando idee secondarie o superflue.

Anche la mappa concettuale può essere un documento semplice o complesso, utile al cliente ma a differenza di altri non subisce ulteriori aggiornamenti.

54

Si parte da carta e penne colorate, disegnando mappe insieme con gli altri componenti del team; è una proiezione dei ragionamenti del gruppo di lavoro su foglio bianco o una lavagna, e va sempre fotografato dato che è a rischio cancellazione.

Infine la mappa disegnata a mano libera può essere rielaborata attraverso strumenti digitali.

Come si arriva alla creazione della mappa?

Create un ambiente tranquillo e confortevole, aiuta il fluire delle idee.

Mettete a disposizione dei partecipanti una lavagna con pennarelli di colori diversi. I partecipanti possono andare da 5 a 10, più numerosi diventano difficili da gestire.

Dopo una breve introduzione, disegnate il concetto chiave al centro del foglio o lavagna e lasciate spazio alla creatività. Incentivate il fluire delle proposte senza giudici o valutazioni, ma solo ascoltando e registrando i dati.

55

Progettazione Dopo aver raccolto tutte le informazioni, aver osservato e aver analizzato i dati, si costruiscono le basi dell’architettura informativa (AI) Cosi per i prodotti digitali: il complesso lavoro condotto sull’informazione, invisibile durante la fruizione, permette la riuscita di un buon prodotto.

L’architettura dell’informazione è un investimento a garanzia di un buon recupero dei contenuti, ne permette una crescita armonica nel tempo e una più agevole fruizione a seconda degli strumenti.

L’organizzazione dei contenuti quindi è alla base dei sistemi di navigazione, i siti o portali infatti si navigano in base all’impianto iniziale deciso dalla progettazione.

I sistemi organizzativi dei contenuti possono essere infiniti: tanti quanti sono le sfaccettature del pensiero umano. A complicare tutto è arrivato anche l’ipertesto. Con la carta stampata l’informazione veniva fruita in modo lineare, nel web con l’ipertesto le cose cambiano!

Alla pagina A non seguirà più solo la pagina B ma C, D, E, ecc...

Quindi il contenuto è diventato fluido e si trasforma in base alle relazioni di esso.

Possiamo avere relazioni: • gerarchiche: basate su una relazione asimmetrica (è il capo di.. , è parte di...). Queste relazioni sono asimmetriche nel senso che se funzionano in un verso non funzionano nell’altro. Quando i due nodi sono in relazione, uno è designato come superiore (o genitore) e l’altro come il subordinato (figlio) • equivalenti: basate su una relazione simmetrica, dove il contenuto è associato agli altri in base a una o più caratteristiche intrinseche o oggettive. Questa relazione permette di inserire il contenuto in più gruppi contemporaneamente • associative: basate su criteri esterni al contenuto stesso. In questo caso il criterio è soggettivo e non viene scelto in base alle caratteristiche peculiari del contenuto.

L’informazione digitale è sempre organizzata su questi tre tipi di relazioni. L’organizzazione del contenuto permette la progettazione e la 56

riuscita di un prodotto realmente efficace sia dal punto di vista dell’esperienza dell’utente sia del recupero dell’informazione.

Wireframe I wireframe sono uno strumento per pensare, utile anzitutto al team di progetto. È bene effettuare più tipi di wireframe in funzione delle diverse fasi del progetto. Spesso quindi la scelta fra sketch (schizzi grezzi), wireframe a bassa e alta fedeltà è un falso problema.

Il più delle volte servono tutti!

Cercare di produrre sketch già nelle prime fasi del progetto; in quanto schizzi nessuno si affeziona, si possono buttare e rifare con facilità.

Solo quando l’architettura informativa di base è stata definita, si può passare a wireframe a bassa fedeltà, in seguito, si possono produrre prototipi navigabili più che singoli wireframe ad alta fedeltà; questi sono utili per test di vario tipo, e consentono al graphic designer di essere più libero nella costruzione dell’interfaccia.

Oltre che alle diverse fasi del progetto, i diversi tipi di wireframe sono anche funzionali al tipo di destinatario Ogni wireframe dovrebbe contenere dei metadati: il nome del designer, la data in cui è stato costruito, il numero di versione e cosa è cambiato dall’ultima versione, documenti correlati, problemi irrisolti e una parte per note generali.

57

I Prototipi La prototipazione è il momento in cui, alla fine, tutti i pezzi del design si raggruppano in un’unità. Molti clienti infatti avranno difficoltà a capire un design fino a che non vedono e usano il prototipo.

La forma di questi prototipi dipende sia dalle risorse del designer sia dal tipo di prodotto che viene disegnato. Se le risorse sono appropriate si possono produrre prototipi che appaiono e si comportano come la realtà.

I prototipi sono l’espressione ultima della visione dell’interaction design. Molti designer ritengono appunto che la creazione di prototipi sia l’attività di design e che tutto ciò che viene prima sia solo un preludio.

I prototipi più diffusi sono di tre tipi: • Prototipi cartacei; sono solitamente i più veloci da creare per dimostrare un prodotto o servizio. Ogni pezzo di carta contiene un momento del design, che può essere una pagina web, uno schermo o una parte di un servizio.

Lo spettatore può quindi esplorare le pagine del prototipo in un ordine particolare; le pagine infatti vanno numerate e corredate da istruzioni per muoversi fra esse.

Con questo tipo di prototipo, durante la fase di test, i designer possono scrivere i commenti o annotazioni direttamente sul prototipo.

• Prototipi fisici; questo tipo di prototipi possono essere costruiti per semplici parti di un design (un pulsante o una manopola) o, nel caso dei servizi, possono essere ambienti fisici e completi che assomigliano ad una scenografia teatrale.

Un dispositivo può essere costruito con i materiali esatti di cui sarà composto alla fine o può essere approssimato con materiali com il legno o argilla.

• Prototipi digitali; possono assumere varie forme, da immagini statiche a panoramiche 3D simili a film; possono avere funzionalità limitate, come fare clic su immagini, oppure possono essere ad alta fedeltà, mettendo gli utenti in grado di interagire interamente con il prodotto come farebbero con quello finale.

58

Con quest’ultimi bisogno stare attenti però, perchè il cliente potrebbe pensare che sia il prodotto finale.

Un vantaggio di questi prototipi rispetto ai precedenti è che possono essere facilmente distribuibili.

Possono essere caricati sul web o inviati in giro e farli provare agli utenti ovunque essi siano.

Alcuni software usati per la prototipazione: Prott Prott è un nuovo e potente strumento di prototipazione per la progettazione e lo sviluppo di applicazioni mobili.

Attraverso prototipazione rapida è possibile modellare immediatamente le vostre idee. Basta scattare una semplice foto.

Non importa dove ti trovi, è possibile verificare i prototipi e condividere le vostre idee.

Il tutto senza scrivere una riga di codice.

Axure RP Axure RP è lo standard nel software wireframing interattivo; consente di sviluppare prototipi ad alta fedeltà. Il programma contiene una vasta libreria di widget e di icone che possono essere riutilizzati per altri progetti. I prototipi sono resi in HTML e Javascript e possono essere visualizzati su tutti i principali browser in modo che gli utenti possano interagire con il prototipo senza dover installare alcun software aggiuntivo.

I progetti possono avere più collaboratori e raccogliere i feedback dai soggetti interessati direttamente all’interno del prototipo.

59

Il mockup Occore aprire una parentesi tra la fase di wireframing/prototipazione e lo sviluppo.

Il mockup è una documentazione visiva dello stile del prodotto che facilita gli sviluppatori nel loro lavoro.

Si ottiene molto di più se un mockup è usato come mezzo per esplorare la fattibilità tecnica del progetto e non solo un documento consegnato fuori agli sviluppatori.

Se non altro, il mockup, aiuta i clienti ed evita la tipica frase: “Lo so quando lo vedo.”

60

Test!

Il testing con gli utenti è una delle fasi cardini di un progetto user experience. I risultati dei test servono a mantenere il progetto aderente alla realtà.

Rilevano difficoltà, gradimento e aspettative degli utenti di un sito, di un app, di un software o di parti di esso.

Coinvolgere gli utenti finali nella progettazione, in vario modo aiuta la riuscita finale del prodotto. Uno di questi modi è proprio testare il prodotto con le persone.

Steve Krug ci ricorda che: “se volete un gran sito dovete testarlo” in modo semplice e veloce e anche economico.

Ma è fondamentale gestire bene le informazioni delle sessioni di test perchè possono essere molteplici e complesse.

Testare è importante quindi, ma non bisogna fare su un’unica osservazione, il valore statico conta: quante più persone diranno che quel colore rende difficile la lettura maggiore sarà la necessità di intervento.

Le stesse regole che guidano la ricerca di design guidano anche l’esecuzione di test: andiamo dagli utenti, parliamo con loro, annotiamo cose.

L’intero processo di testing presenta tre fasi: • la pianificazione, con la scelta dell’approccio, la progettazione di tempi e luoghi e il reclutamento di persone • l’attività di test, con l’elaborazione delle guide e le regole di facilitazione • l’analisi dei risultati, con l’elaborazione delle raccomandazioni.

61

La pianificazione, cosa, come, chi, quando e dove.

Il testing, come molte attività UX è un processo iterativo: può essere ripetuto più volte in vari momenti del progetto.

Prima i test venivano eseguiti solo alla fine del processo, prima del rilascio. Ma il testing come attività semifinale è poco efficace, gli interventi prima della modifica hanno sempre l’effetto di un aggiustamento in corsa.

Il test pre-rilascio, User Acceptance Test (UAT), è importante, ma non viene condotto sugli utilizzatori finali, viene condotto all’interno del team per assicurarsi che tutte le richieste del cliente sono state realizzate in maniera corretta.

Le sessioni di testing invece possono essere svolte dall’inizio alla fine del progetto, anche prima della progettazione quando il prodotto non esiste.

Durante la progettazione possiamo testare singole parti di prodotto come una funzionalità (il processo di acquisto, un form di presentazione di una domanda), una navigazione.

Oppure scegliere di testare il prodotto nel suo insieme.

In sostanza l’unica differenza sta nello scegliere se testare l’insieme o una parte.

Alle persone possiamo chiedere di: • capire l’impianto, il concept, la logica del sito; per esempio chiedere cosa contenga questa determinata etichetta o cosa vuol dire.

• eseguire uno specifico compito; per esempio, durante l’acquisto di un prodotto, chiedere dove cliccherebbe per avere più info.

Altra caratteristica dei test è la modalità di svolgimento: in presenza o in remoto?

I test in remoto possono essere un ottima soluzione quando ci sono impedimenti al contatto diretto; è un ottima soluzione anche se si ha poca dimestichezza con le persone. I risultati di questi test però sono sempre minori rispetto a quelli di una sessione di test dal vivo; il linguaggio non verbale si perde: un’esitazione, un incarnarsi del sopracciglio, sono elementi che possono essere colti solo di presenza.

62

Un’altra modalità che si sta diffondendo è il guerrilla testing, consiste nell’analizzare le persone in luoghi pubblici o direttamente nei luoghi degli utenti, registrando le loro reazioni e intervistandole in maniera informale; le persone quindi sono più libere di essere sè stesse e di interagire in maniera naturale.

Applicare questo metodo però non significa sorvolare la pianificazione, anzi bisogna progettare e stabilire prima la modalità di registrazione dei dati e la modalità di analisi.

Per pianificazione s’intende come adottare i dati, in maniera qualitativa o quantitativa.

I test quantitativi lavorano con i numeri, i clic, il numero di volte in cui si compie un’azione. I dati vendono rilevati numericamente ed è ciò che permette risultati molto nitidi.

I test qualitativi, conosciuti anche come test formativi, lavorano sull’osservazione delle scelte degli utenti che si muovono nel sito o nell’applicazione. Scopo finale è imparare osservando gli utenti, cosa funziona e cosa non funziona in un sito, se gli utenti riescono a portare a termine un compito assegnato.

In questo tipo di test, a differenza di quelli quantitativi, non c’è un numero statistico di dati. Non c’è in genere un numero sufficientemente alto di utenti da poter assumere che il loro comportamento rappresentativo dell’intera popolazione.

Chi testare?

Quello del reclutamento è un tema abbastanza complesso.

Si possono scegliere utenti simili a chi userà il sito ma, cosa più importante, i test vanno fatti subito e spesso.

“Il mio motto è reclutare in scioltezza” - Steve Krug Steve Krug è uno tra i più noti e rispettati esperti di Web Usability. Da anni con Circle.com lavora “dietro le quinte” conducendo test di usabilità per aziende come Apple, IBM, Netscape, AOL, Excite

63

Proprio secondo Krug il numero perfetto di utenti è tra 3 o 4 persone per ogni sessione di test. In questo modo si incontreranno probabilmente tutti i problemi più significativi, si potrà fare una seconda sessione rilevando magari problemi meno importanti e si potrà elaborare un report nella stessa giornata.

A questo punto abbiamo molto materiale: scritto, filmato, audio registrato e dobbiamo necessariamente metterlo in ordine. L’ideale è agire subito: testare le persone la mattina, evidenziare i problemi e nel pomeriggio elaborare le prime raccomandazioni.

Si può lavorare su diversi passaggi: • Elaborare una scala di priorità; “triage” secondo Krug, un bollino rosso per i problemi da risolvere subito, uno verde per quelli da risolvere e uno giallo per quelli da risolvere quando avanza tempo.

• Esaminare, in base alla scala redatta, quali problema risolvere prima e come. Senza prendere in considerazione quei “problemi kajak”, cioè quelli dove l’utente ha una difficoltà che riesce a risolvere da solo tornando in carreggiata.

Non cedete alla tentazione di inserire tutti i servizi e le funzioni richiesti dalle persone.

I Risultati I risultati possono essere raccontati al cliente, ma può essere ancora più utile presentarglieli.

Possiamo elaborare uno storytelling, con le foto delle persone e gli screenshot dei principali passaggi del test. Oppure spiegare in maniera sintetica e generale l’impatto che l’interfaccia ha avuto sugli utenti.

Possiamo presentare gli screenshot delle pagine con i dati d’interesse, i commenti.

Sicuramente i dati quantitativi forniscono un impatto diverso da quello narrativo, se dobbiamo convincere il cliente di un determinato fatto mostrare che “4 utenti su 5 la pensano cosi” funziona.

Possiamo mostrare i dati anche tramite rappresentazioni informali come il fumetto oppure possiamo numerare le parti dell’interfaccia testata con i relativi problemi.

64

Si può assegnare un valore cromatico per rappresentare la frequenza di un’azione: colore più chiaro = minore frequenza colore più scuro = alta frequenza Infine abbiamo le raccomandazioni, che sono la conseguenza dell’osservazione.

Possono provenire da noi o dagli altri utenti e sono la soluzione al problema. Vengono integrati con i dati, come abbiamo visto per gli screenshot, o in alternativa si può creare un documento testuale che spieghi il problema, le cause e la soluzione.

Nonostante tutto però non bisogna avere fretta di stravolgere un’applicazione che ha evidenziato qualche problema. Molte volte basta solo dare rilievo o mettere in evidenzia le giuste funzionalità.

Per creare c’è sempre tempo, ma la capacità di valorizzare l’esistente è sicuramente più sfidante.

Attraverso il testing si scopre questo e molto altro.

65

Gestione Arrivati alla fine (si fà per dire) adesso è il momento di “scrivere” il futuro del nostro progetto.

Guide di stile e design patterns sono i documenti che ci permettono di rappresentare il futuro della nostra applicazione.

Guida di stile Nasce dal vertice del team ed è condivisa da tutte le persone coinvolte. È un documento fondamentale che si elabora al termine della progettazione o ri-progettazione. È un documento che descrive come mantenere e far crescere il prodotto in base a principi e regole di coerenza.

Se si lavora in un team, queste guide sono un documento fondamentali per la condivisione di standard. Sono molto importanti anche perchè assicurano la memoria a scelte avvenute nel tempo, facilitano la condivisione del lavoro, aiutano la formazione nella gestione dei prodotti e permettono di mantenere una coerenza nella crescita del prodotto.

Le guide di stile servono anche a giocare d’anticipo stabilendo dei principi e regole su possibili problemi futuri.

Può capitare anche che questa guida di stile non funzioni, che non venga percepita come strumento fondamentale da ci ha a che fare con la comunicazione digitale, i motivi possono essere tanti; non ha la corretta diffusione all’interno del team, non è coerente o le informazioni non sono organizzate correttamente.

Quindi per mantenere una corretta guida di stile bisogna renderla credibile, consultabile da tutti (anche tramite intranet), può essere anche stampata.

Design pattern (o pattern library) È un archivio di soluzioni a problemi ricorrenti nella progettazione di una o più parti dell’applicazione.

Il termine deriva dall’ambiente di sviluppo e si può tradurre come schema di progettazione e può essere definito come “una soluzione progettuale generale a un problema ricorrente” Possono essere descritti aspetti complessivi (pattern libray) o parti delle interfacce (component library) come ad esempio l’header, il footer ecc...

La scelta dipende dalla complessità della realtà in cui si lavora o dalle 66

esigenze di mercato.

Questo è un documento sicuramente meno diffuso dagli altri ma non per questo meno importante, infatti molte grandi agenzie hanno un gran numero di prodotti digitali da gestire e in documento di pattern design ha i suoi vantaggi: evita di riprogettare da capo soluzioni già affrontate e rappresenta la certezza che il design adottato si mantenga in linea con le scelte aziendali.

Come per le guide di stile, i pattern design, servono a mantenere viva e a disposizione di tutti le soluzioni piĂš interessanti; anche quando i professionisti vanno e vengono, le soluzioni devono sopravvivere e permette di tenere sotto controllo possibili imprevisti che ogni progetto si troverĂ ad affrontare.

67

Presentazione Arrivati quasi al termine delle varie fasi di progetto, adesso occorre potenziare il messaggio attraverso la presentazione.

I processi e documenti che abbiamo analizzato hanno natura differenti, alcuni nettamente tecnici, altri più analitici come l’analisi di mercato o le interviste, ma per tutti conta la presentazione che può influire in maniere determinante sul progetto.

Una presentazione efficace, narrativa o visuale, aiuta a convincere e a creare consenso.

Una buona idea presentata male può diventare una cattiva idea.

Per presentare al meglio un documento, dobbiamo tener conto di tre fattori fondamentali: cosa (tipologia di documento), come (strumenti e capacità a disposizione) e chi (pubblico di riferimento).

Incrociando questi tre aspetti si può realizzare un buon prodotto.

Ci sono documenti che possono essere presentati attraverso link, oppure essere disegnati su una lavagna o carta. Se siamo bravi con i disegni o sappiamo scrivere possiamo dare vita a delle storie, se siamo tecnologicamente capaci possiamo presentare prototipi ingegnosi.

Adattandoci al cliente, possiamo introdurre anche nuovi modi di presentazione.

Infine, bisogna uscire dagli stereotipi aziendali e parlare con “voce umana”, essere il più chiaro e naturale possibile.

Questa fase, oltre alla presentazione finale, comprende anche la presentazione, al cliente o al team, di un problema da risolvere.

Possiamo scegliere diverse modalità: • Realizzare uno storyboard. È un documento in forma di testo e immagini come se ci fosse una trama che si svolge da un punto di partenza ad un epilogo finale. Il miglior strumento per presentare e spiegare come si svolge un processo, come il percorso di acquisto di un prodotto online o per mostrare il comportamento del consumatore.

Lo storyboard semplifica la comunicazione di processi complessi, e in situazioni dove occorre inquadrare un problema, dà la possibilità di inquadrarlo da un altro punto di vista, quello dell’utente, che scatena l’azione e invita tutto il team a risolvere quel bug.

68

• Realizzare uno storytelling.

Questo documento non usa questionari ma le emozioni dei protagonisti; lavora con materiale ufficale, ascolta e fà parlare le persone del team, ne interpreta le immagini, i racconti dando vita a documenti più emotivi. Racconta un processo, una dinamica.

“Come agisce il protagonista? Perchè non riesce a trovare quello che cerca?”, tutto questo attraverso i sentimenti di delusione, di indecisione, di soddisfazione.

• Narrative report. È il documento che racchiude in forma narrativa parte dei documenti elaborati durante il progetto, dall’analisi di mercato al prototipo. È una relazione che spiega come nasce il progettto, perchè, quali sono stati gli obiettivi, la metodologia e i risultati.

A differenza degli altri documenti, esistono vari tipi di narrative report.

A parte le tematiche di ogni singolo progetto, esistono delle voci comuni applicabili a qualsiasi progettazione interattiva: titolo, indice, introduzione, scenario, obiettivi, metodologia, risultati, tempi, modi, raccomandazioni, passi futuri.

Il narrative report serve a ripercorrere in maniere critica tutto il progetto, il lavoro fatto, le difficoltà incontrate e gli obiettivi raggiunti. Analizza il progetto in corso e aiuta ad evitare di incorrere negli stessi errori in futuro.

Per chi lavora nel web ed è abituato a lavorare con tempi più veloci, magari può essere impegnativo fermarsi a scrivere pagine e pagine, ma è un investimento su lavori futuri.

• Lo scenario.

Molti documenti che abbiamo visto descrivono una situazione, un’azione o un processo; creare uno scenario è come scrivere un copione, fondamentale per tecniche come lo storyboard.

Nello scenario, come la sceneggiatura di un film, ha un protagonista (l’utente in questo caso) che compie un’azione: iscriversi al sito o compiere una ricerca all’interno di esso. Quest’azione innescherà conseguenze e soluzioni che vengono affrontate da documenti come: l’analisi di mercato (confrontiamo come agisce l’utente quando si iscrive ai vari siti concorrenti), la mappa (valutiamo il comportamento dell’utente di fronte all’architettura del sito), il process flow (analizziamo come 69

gli utenti, magari timorosi, partecipano al forum fornendo i propri dati).

Senza scenario il racconto non prende vita, sarebbe senza emozioni e le emozioni sono quelle che supportano la capacità di giudizio. Quanto più accurati saremo nel creare contesto e trama, tanto più eviteremo di progettare su ipotesi.

Cliff Atkinson è uno scrittore e consulente indipendente.

Ha lavorato con i più importanti avvocati e dirigenti aziendali di tutto il mondo per rendere la loror comunicazione più chiara.

70

• La presentazione. È un prodotto informativo con una struttura logica e un andamento sequenziale ma è autosufficienti, prende vita solo se accompagnata da un’esposizione orale. Deve essere un buon mix di testo, grafica e oralità verbale per comunicare l’essenziale e avere l’approvazione del team.

La presentazione che unisce testo e immagine, possiede le massime potenzialità comunicative e persuasive infatti fà aumentare dell’80% l’apprendimento.

Secondo Cliff Atkinson: in base al principio di segnalazione dobbiamo evitare titoli generici o poco incisivi, non “l’offerta dei competitor” ma “cosa distingue i siti concorrenti?”, “cosa si aspetta il cliente?”; in base al principio di segmentazione dobbiamo offrire un colpo d’occhio sintetico e incisivo su ogni tema, uno per slide; in base al principio di modulazione dobbiamo tenere alta l’attenzione di chi ascolta separando l’elemento visivo da quello sonoro, la domanda la facciamo scritta nella slide ma la risposta la daremo a voce; in base al principio di multimedialità dobbiamo sfruttare al massimo il linguaggio visivo, immagini suggestive accompagnate magari da qualcosa che crei aspettativa, può risultare più incisiva.

Caso di studio:

Help!

Guide e tutorial online sul mondo informatico

71

Nei precedenti capitoli abbiamo analizzato le varie fasi della progettazione, le leggi e gli elementi da applicare per un “buon” interaction design.

Proveremo adesso a metterli in pratica!

Partendo da un idea, analizzeremo i possibili utenti e creeremo una serie di wireframe fino ad arrivare ad un prototipo.

Ricordando sempre che il prototipo non è un prodotto finito!

L’idea L’idea è semplice.

L’utente che riscontra un problema informatico di qualsiasi tipo o voglia leggere news sul mondo informatico, tramite l’applicazione può cercare la guida/tutorial più adatta.

Un punto di forza rispetto ai siti concorrenti è il fatto che l’utente può capire quanto tempo impiegherà a risolvere il problema seguendo quella determinata guida e sopratutto quanto risparmierà se risolverà il problema.

Terminata la lettura della guida, l’utente, se ha risolto il problema, potrà valutarla attraverso il metodo delle 5 stelle.

Se invece l’utente non è riuscito a risolvere il problema, nonostante abbia seguito tutti i passaggi, l’applicazione fornirà aiuto guidandolo al centro assistenza più vicino.

72

I wireframe.

Come detto in precedenza, i wireframe, servono a pensare e capire le possibili configurazioni di layout.

Partendo da schizzi fatti a mano sono passato alla creazione di wireframe ad alta fedeltà.

L'applicazione si apre con una schermata di home e due sezioni: una con le ultime guide caricate e una con le più lette.

Nella parte alta, in maniera abbastanza visibile, è posizionata la barra di ricerca (parte fondamentale che l’utente dovrà riuscire a trovare subito) e il menù con le principali categorie accompagnate da sottocategorie cosi da facilitare meglio la ricerca se si preferisce ricercare dal menù.

Durante la ricerca, l’utente, verrà aiutato anche da una lista a comparsa dove può trovare le parole più cercate dagli altri utenti.

Guardando poi i risultati di ricerca, può selezionare la guida che ritiene più opportuna.

Chi si rivolge ad un tecnico d’informatica, oltre alla non-conoscenza, è per un fattore di tempo.

Se io volessi risolvere un problema ma non ho tempo, mi rivolgerò a qualcuno che lo faccia per me. Per questo motivo, un’altro dei punti di forza possibili che può avere quest’applicazione è il fatto che l’utente, oltre al titolo e al sottotitolo della guida, può capire in quanto tempo potrà risolvere il problema.

Inoltre può capire anche quanto risparmierà risolvendo il problema con questa guida e quindi sarà ancora più motivato a seguirla; può vedere se quella guida è valutata positivamente o meno dagli altri utenti tramite le 5 stelle.

73

Terminata la lettura della guida, l’utente, attraverso uno “swipe” da destra a sinistra potrà accedere alle opzioni della guida: può scegliere se aumentare o diminuire il corpo del carattere (tecnica del dynamic type); può valutare la guida e quindi se ha soddisfatto le sue necessità (feedback, per capire se la guida va migliorata o meno); può condividere la guida sui social o inviarla tramite mail; può scegliere di segnalare errori o suggerimenti tramite apposita schermata di segnalazione; infine, se dopo aver seguito la guida non riuscisse a risolvere il problema, può richiedere assistenza fisica tramite il servizio Help ME!, l’utente verrà reindirizzato ad una schermata con una mappa dove, tramite il sistema di geolocalizzazione, verranno indicati tutti i negozi d’informatica e centri assistenza aderenti al servizio.

L’utente selezionando uno dei centri assistenza può avere tutte le info di contatto e come raggiungerlo.

74

75

I wireframe per web.

Eliminare le domande dell’utente.

L’utente deve agire subito, ma non tutto può esser reso autoevidente.

Bisogna tuttavia rendere le pagine autoevidenti ed autoesplicative.

Nella parte alta della home troveremo subito la tagline: è una piccola frase che caratterizza l’intera impresa mostrando cos’è e cosa la rende grande. E’ il proposito del sito.

Le tagline sono chiare ed informative, non vaghe, devono trasmette differenziazione e sottolineare un beneficio.

In questo caso l’utente verrà avvisato che è un servizio principalmente per mobile e verrà quindi invitato a scaricare l’applicazione.

Sotto, l’utente troverà subito davanti a sè la barra di ricerca.

L’utente che visita un sito solitamente si sofferma solo su aree che catturano immediatamente la sua attenzione. Non le leggono, diciamo che le scansionano velocemente, cercando cose che catturino l’occhio.

Sotto la barra di ricerca posizioneremo una barra di navigazione persistente che ci dà anzitutto la conferma che siamo nello stesso sito.

“Site ID > Home > Cerca > Risultati ricerca > Tutorial1”

Ma attenzione: a volte è necessario non usare la navigazione persistente nella home page per non distrarci o metterla in una versione ridotta.

Dobbiamo quindi disegnare le pagine per lo scanning visivo.

Nella parte centrale posizioneremo il menù e l’articolo della settimana (il più letto).

Sotto troveremo tre sezioni con le guide più lette dagli utenti, le ultime guide caricate e una sezione con gli ultimi video caricati nella guide.

Cosa fare per essere sicuri che le persone vedano il più materiale possibile del nostro sito?

Una chiara gerarchia visuale su ogni pagina - rompere le pagine in aree definite - rendere chiaro cos’è cliccabile - minimizzare il rumore.

L’apparenza delle cose sulla pagina deve chiaramente definire la loro relazione: ogni pagina deve avere una chiara gerarchia visuale: le cose più importanti sono più grandi o si notano di più; le cose in relazione logica sono anche in relazione visuale.

76

77

Se non c’è una buona gerarchia si perde più tempo perché tutto sembra ugualmente importante.

Dopo queste sezioni, troviamo la parte riguardante il servizio HelpMe!.

Infine troviamo il footer con le informazioni sui social e i contatti.

Dividere le pagine in aree chiaramente definite aiuta l’utente a scegliere velocemente dove concentrarsi. E rendere chiaro cosa è cliccabile e cosa no.

Altro argomento è il rumore visivo. Tipi di rumore visivo sono lo spazio tutto occupato e pieno di inviti a comprare oppure piccoli rumori visivi che distraggono l’attenzione, come linee in eccesso. Ciò che conta è quanto è difficile per un utente ogni click per arrivare a ciò che cerca.

Bisogna far in modo che l’utente possa compiere la sua scelta in poco tempo senza scervellarsi.

78

I prototipi.

79

80

81

Test.

Come abbiamo detto in precedenza, è meglio testare un utente che nessuno. Testare su persone che saranno come gli utenti del nostro sito, e farlo presto.

Se vuoi sapere se il tuo sito è abbastanza facile da usare, guarda la persone che lo usano e vedi dove si trovano in difficoltà.

Sopratutto bisogna sempre annotare tutti i dati.

Di cosa deve tener nota l’osservatore?

• se l’utente capisce da dove cominciare e cos’è il sito; • se trova la navigazione; • se non riconosce qualcosa che a noi sembra molto evidente.

Tenere presente che nella situazione dei test le persone si comporteranno meglio e con più attenzione rispetto a come fanno a casa. Bisogna quindi prestare più attenzione alle azioni che alle opinioni.

Dopo i test, bisogna rileggere le osservazioni e decidere cosa fare, rivedere i problemi e capire quali sono quelli importanti e trovare come risolverli senza cambiare le parti che funzionano.

Tutto ciò che viene dopo è la fase della gestione dove vengono elaborate le linee e le soluzioni adottate durante il processo. La gestione non influisce sugli obiettivi ma è un fondamentale investimento per il futuro.

82

83

84

1. Dan Saffer, Design dell’interazione. Creare applicazioni intelligenti e dispositivi ingegnosi con l’interaction design, Paravia Bruno Mondadori Editori, 2007 - versione italiana.

Bibliografia

2. Steve Krug, Don’t Make Me Think! - seconda edizione, HOPS, 2005.

3. Luca Rosati, Architettura dell’informazione - Trovabilità: dagli oggetti quotidiani al Web, Apogeo Saggi - versione Kindle.

4. Maria Cristina Lavazza, Comunicare la User Experience: dall’idea al progetto, Percorsi di studio, Apogeo Saggi - versione Kindle.

1. www.lucarosati.it

Sitografia

2. www.trovabile.org 3. www.usabile.it 4. www.creativebloq.com 5. www.prototypingtools.co

85