Riproduzione dello studio
Transcript
Riproduzione dello studio
Corso di USER EXPERIENCE RIPRODUZIONE DELLO STUDIO ”ATTENTION WEB DESIGNERS: YOU HAVE 50MS TO MAKE A GOOD FIRST IMPRESSION!” DI G.LINDGAARD, G. FERNANDES, C. DUDEK E J.BROWN Alessia Simonella ANNO ACCADEMICO 2010/2011 Introduzione Questo esperimento si basa sullo studio Attention web designers: You have 50 milliseconds to make a first good impression! effettuato nel 2006 da G. Lindgaard, G. Fernandes, C. Dudek, J. Browñ [1], che condussero un test per verificare quanto velocemente le persone riescono a formare un’opinione sull’estetica di una pagina web. Lo studio era suddiviso in tre test, dei quali ho riproposto solo il primo, in una modalità leggermente differente. Nell’esperimento originale, i partecipanti dovevano valutare l’impatto visivo di una serie di homepage presentate in flash di 500ms. I risultati ottenuti dai tre test dimostrano come sia possibile formare un giudizio anche con la visualizzazione di un’immagine in soli 50ms. Nonostante quindi sia impossibile riconoscere i dettagli precisi dell’immagine, e quindi sia impossibile dare una valutazione ”ragionata”, di ”primo impatto” scattano dei meccanismi all’interno del cervello che ci permettono di definire i gusti e le preferenze personali. Nonostante quanto sostenga Norman [2], ovvero che le emozioni risiedono a pieno titolo solo a livello riflessivo, questo studio dimostra appunto, come invece bastano 50ms per formare una buona o cattiva impressione da parte dell’utente. Da questi studi risulta chiaro che le prime impressioni si formano molto rapidamente e sono coerenti. I risultati ottenuti suggeriscono che i web designers dovrebbero essere molto interessati a scoprire quali sono le caratteristiche che hanno effetto sulla primissima impressione e sui comportamenti successivi, come il proseguimento della navigazione o la scelta di acquistare dei prodotti da un sito anziché da un altro. Nel mio studio, oltre a riproporre parte del test originale ad un target di utenti di età superiore ai 55 anni, cercherò di capire, tramite interviste e operazioni di think aloud, quali sono queste caratteristiche e che peso hanno durante la loro navigazione. iii iv INTRODUZIONE Indice Introduzione iii 1 L’esperimento 1.1 Differenze rispetto allo studio originale 1.2 Partecipanti . . . . . . . . . . . . . . . 1.3 Apparecchiature hardware e software . 1.3.1 Il software . . . . . . . . . . . . 1.4 Materiale . . . . . . . . . . . . . . . . 1.4.1 Scelta delle immagini . . . . . . 1.5 Procedura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 1 2 2 3 3 4 4 2 Analisi dei risultati 2.1 La tendenza dei 50 . . . . . . . . 2.2 La soggettività delle valutazioni . 2.3 Valori medi . . . . . . . . . . . . 2.4 Processo di debriefing - intervista 2.4.1 Colore . . . . . . . . . . . 2.4.2 Immagini . . . . . . . . . 2.4.3 Ordine . . . . . . . . . . . 2.5 Immagini e memoria . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 8 10 11 12 12 14 16 18 3 Ulteriori riflessioni 3.1 Effetti dell’età dei partecipanti sui risultati del test . . . . . . . 3.2 Riflessioni sulla procedura di test . . . . . . . . . . . . . . . . . 3.3 Suggerimenti e modifiche per eventuali versioni future . . . . . . 23 23 24 25 . . . . . . . . . . . . . . . . . . . . . . . . A Homepage utilizzate 27 A.1 Siti poco attraenti . . . . . . . . . . . . . . . . . . . . . . . . . 27 A.2 Siti attraenti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 Bibliografia 31 v vi INDICE Capitolo 1 L’esperimento Come nel caso dell’esperimento originale di Lindgaard, Fernandes e Dudek, l’esperimento da me riproposto ha lo scopo di dimostrare quanto velocemente un utente forma una valutazione sull’aspetto estetico di una pagina web, e quali sono le caratteristiche di un sito che influenzano maggiormente l’utente nella sua valutazione. Gli utenti testati sono stati sottoposti alla visione di una collezione di 80 snapshot di homepage di siti web, somministrati in visualizzazioni di 500ms l’uno. Dopo la visualizzazione di ogni immagine, l’utente doveva valutare l’aspetto della pagina posizionando un cursore su una scala di valutazione continua che andava da Poco attraente a Molto attraente, prima di passare all’immagine successiva. 1.1 Differenze rispetto allo studio originale L’esperimento qui riproposto si differenzia dall’esperimento originale per alcune caratteristiche. • I partecipanti sono un gruppo di 14 persone con un età superiore ai 55 anni, a differenza dell’originale (il primo dei tre esperimenti), che prevedeva la collaborazione di un gruppo di 22 studenti universitari. • Le immagini analizzate sono 80 anziché 100 e l’ordine di visualizzazione non è random, ma è fisso per tutti gli utenti. • La modalità di test è leggermente differente a causa di limiti dovuti al software utilizzato. Il test è stato svolto con l’aiuto di due computer, come verrà spiegato più avanti. 1 2 CAPITOLO 1. L’ESPERIMENTO • Durante la seconda sessione di test è stata svolta un’attività di think aloud, seguita successivamente da una breve intervista per raccogliere eventuali commenti e opinioni. Quest’attivià non era prevista nell’esperimento originale. 1.2 Partecipanti I partecipanti sono 14 persone (7 maschi e 7 femmine) frequentanti l’università della libera età di Pasian di Prato, con un’età compresa tra i 55 e i 75 anni. Alcuni dei partecipanti indossano occhiali a causa di leggeri problemi alla vista, e tutti hanno una minima competenza in ambito di utilizzo del computer e di internet. Le attività più comuni sono la lettura della posta elettronica, la visita di siti di informazione e per alcuni, l’utilizzo di siti di e-commerce (Amazon.com). Solamente due dei partecipanti hanno avuto problemi nell’utilizzo del mouse durante la somministrazione del test, perciò la prova non è stata del tutto indipendente, ma guidata dalla sottoscritta, che registrava col mouse i punti della scala che l’utente indicava sullo schermo con il dito. 1.3 Apparecchiature hardware e software Ogni partecipante è stato testato su una postazione composta da due computer: un computer fisso ed un portatile. I due monitor erano posizionati molto vicini, affinchè uno fosse quasi la continuazione dell’altro. Nell’esperimento originale, il software utilizzato integrava gallery e sistema di valutazione, visualizzando dapprima un’immagine, e subito di seguito la rispettiva scala di valutazione, permettendo cosı̀ di utilizzare un unico monitor. La procedura di valutazione era seguita da una schermata neutra che puliva la vista dell’utente per un secondo, per poi passare all’immagine successiva. Per motivi di conformazione del software qui utilizzato, invece, questo non è stato possibile, poiché gallery e scala di valutazione sono state concepite come due entità separate. L’idea iniziale avrebbe previsto comunque di utilizzare un unico computer, ma le procedure da svolgere ad ogni passaggio, tra la visualizzazione dell’immagine e la valutazione della stessa, avrebbero seriamente condizionato il risultato del test.Il tempo che avrebbe preceduto la valutazione sarebbe stato più lungo della visualizzazione stessa dell’immagine (500ms) e l’utente l’avrebbe trascorso compiendo delle azioni che prevedevano un determinato sforzo mentale (minimizzare una finestra a icona e selezionarne una seconda sulla barra 1.4. MATERIALE 3 delle applicazioni). Queste operazioni avrebbero condizionato molto il risultato del test, perciò si è deciso di utilizzare due monitor in parallelo, in modo da minimizzare le azioni da compiere da parte dell’utente, garantirne l’attenzione e rendere le operazioni più fluide. Nel monitor del computer fisso, quindi, è stata visualizzata la gallery utilizzando il visualizzatore per immagini in dotazione di Windows XP. Successivamente, nel portatile, l’utente eseguiva la valutazione, utilizzando un programma appositamente creato in java. Le analisi dei dati, sono state eseguite con MsExcel. 1.3.1 Il software Il software in figura 1.1, progettato in java, è composto da una finestra posizionata al centro dello schermo. All’interno di questa, vi sono una jslider compresa in un range che va da ”Poco attraente” a ”Molto attraente”, che registra valori da 0 a 100, ma nella quale sono indicate solamente delle tacche ogni 5 punti, a differenza dell’originale, che è priva di tacche. Il cursore di default è posizionato al centro, al valore 50. Figura 1.1: Software utilizzato per il test Sotto alla jslider vi è un pulsante ”Conferma”, che l’utente deve premere per confermare la propria valutazione. Questo pulsante permette di salvare il valore all’interno di un array, che alla fine del test verrà automaticamente salvato in una tabella Excel. Dopo aver premuto il pulsante ”Conferma”, per evitare incomprensioni e limitare gli errori, la finestra automaticamente si minimizza a icona e l’utente è tenuto a ripristinarla prima di passare all’immagine successiva. 1.4 Materiale Sono stati utilizzati 80 screenshots di home page di siti internazionali non famosi e non molto trafficati, che variano molto nell’estetica, come nell’esperi- 4 CAPITOLO 1. L’ESPERIMENTO mento originale. Questi siti, che dovevano apparire particolarmente attraenti o particolarmente sgradevoli, sono stati attinti da una serie di classifiche di migliori e peggiori siti, presenti su testate specializzate in web design (per es. smashingmagazine.com). Gli screenshots di ogni pagina sono stati catturati tramite il browser Google Chrome e trasformati in gif animate temporizzate di 500ms. Queste immagini sono state poi visualizzate dagli utenti a pieno schermo, affinchè la visualizzazione fosse identica a quella di una normale navigazione sul web. 1.4.1 Scelta delle immagini Le homepage selezionate, come nell’esperimento originale, presentano diverse tipologie di contenuti e sono state accuratamente scelte affinché contenessero caratteristiche estetiche omogenee e fossero il più possibile miste nella loro presentazione dei contenuti. Sono stati scelti siti di divertimento, di ecommerce, blog personali, siti di design, siti governativi, siti di onlus e siti vetrina. Le pagine catalogate come ”attraenti” contenevano elementi bilanciati, immagini grandi e chiare, alcune erano progettate in colori pastello, altre con colori più accesi. Alcune immagini seguivano allineamenti e griglie di struttura, altre erano più libere e prive di un ordine negli elementi. Alcune pagine contenevano una grafica più ”fumettosa”, altre erano più rigide e formali. Tutte però denotavano una certa ricercatezza nella composizione e nella scelta di determinate scelte stilistiche. Anche le pagine catalogate come ”poco attraenti” contenevano elementi critici di diversa natura. Alcune pagine facevano un utilizzo smodato di colori e immagini, alcune si caratterizzavano per la quantità di contenuto testuale, altre per la pesantezza visuale data da una quantità eccessiva di elementi presentati in uno spazio limitato. Alcune erano caratterizzate da stili ”fuori moda” come l’uso di frame e di immagini ripetute nello sfondo, altre semplicemente da elementi ”noiosi” e cattive scelte cromatiche. 1.5 Procedura L’esperimento ha seguito la procedura originale del test numero 1 dell’esperimento di Lindgaard, Fernandes e Dudek. I partecipanti sono stati testati individualmente in sessioni di circa 15 minuti. Dopo una breve descrizione del test, ogni partecipante si è accomodato di fronte ai due monitor. 1.5. PROCEDURA 5 Lo slideshow delle gif di 500ms era comandato dalla sottoscritta, che procedeva con la visualizzazione dell’immagine successiva, dopo ogni valutazione. Ogni immagine era seguita dalla visualizzazione di una schermata bianca con scritto ”Ora valuta il sito appena visualizzato. Poi click per continuare”. I partecipanti dovevano visualizzare l’immagine e successivamente, nell’altro pc, valutare l’aspetto della pagina tramite l’apposito software, che appare inizialmente sempre con il cursore in posizione centrale. L’utente doveva trascinare il cursore sulla posizione esatta e premere il pulsante di conferma, dopodichè la finestra si riduceva ad icona. L’utente quindi, prima di passare alla visualizzazione dell’immagine successiva, doveva cliccare sull’icona della barra sottostante, per far ripristinare la finestra. Ogni sessione di test cominciava con un piccolo briefing, in cui all’utente veniva spiegata la procedura e lo scopo del test, veniva verificato il livello di conoscenza di internet e di abilità nell’uso del computer, e venivano raccolti alcuni dati personali, rassicurando l’utente sul fatto che sarebbero stati utilizzati per puro scopo statistico e non sarebbero stati resi pubblici. Prima di cominciare il test vero e proprio, agli utenti è stata fatta una prova, utilizzando 8 immagini diverse da quelle del test principale, in modo che essi potessero familiarizzare con la procedura e il programma. Ci sono state due fasi di test. Nella prima fase, ogni partecipante visualizzava e valutava 80 immagini nella procedura appena descritta, in un certo ordine prefissato. Le immagini, suddivise in ”attraenti” e ”poco attraenti” sono state accuratamente mescolate. L’ordine era lo stesso per tutti gli utenti, a differenza dell’esperimento originale, dove le immagini venivano presentate in ordine random. La seconda fase è servita per un test di affidabilità dei dati, ed è consistita nella stessa prova, fatta a distanza di 7-10 giorni, utilizzando le stesse immagini in un ordine differente. In aggiunta all’esperimento originale, la seconda fase del test è stata accompagnata da un libero commento da parte degli utenti, che giustificavano le loro scelte e spiegavano le caratteristiche che influivano maggiormente sulla loro valutazione. Inoltre, alla fine di ogni sessione è stato fatto un debriefing, in cui sono state raccolte opinioni e considerazioni personali. 6 CAPITOLO 1. L’ESPERIMENTO Capitolo 2 Analisi dei risultati Inizialmente sono stati calcolati elementi di statistica descrittiva, quali medie, valori minimi e massimi, e successivamente, per ogni utente, sono stati confrontati i risultati delle due diverse sessioni e calcolate le rispettive correlazioni. Utente Utente Utente Utente Utente Utente Utente Utente Utente Utente Utente Utente Utente Utente Correlazione 0,681 0,675 0,556 0,654 0,551 0,628 0,511 0,66 0,604 0,746 0,524 0,586 0,545 0,632 1 2 3 4 5 6 7 8 9 10 11 12 13 14 Figura 2.1: Correlazioni per ogni utente delle valutazioni delle due sessioni Le correlazioni di tutti gli utenti (2.1) si posizionano in un range che va da 0.5 a 0.75, quindi i risultati si possono considerare abbastanza affidabili. Dagli scatter plot che rappresentano le valutazioni dei diversi utenti (figure 2.2 e 2.3), è possibile fare alcune riflessioni. 7 8 CAPITOLO 2. ANALISI DEI RISULTATI Figura 2.2: Valutazioni individuali degli utenti Innanzitutto, il valore medio/alto di correlazione individuale si può notare già guardando l’andamento dei pallini nel grafico: i pallini tendono a posizionarsi lungo la diagonale, quindi vi è una certa coerenza nelle votazioni. 2.1 La tendenza dei 50 In numerosi grafici (utenti 2, 4, 5, 7, 9, 11, 12, 13), è diffusa la presenza di serie di votazioni di valore 50, molto più presenti di altre serie di valori uguali (le serie di 50, per esempio, sono molto più diffuse delle serie di 30). Questo molto probabilmente è dato dal fatto che il 50 è il valore di default in cui si presenta il cursore. 2.1. LA TENDENZA DEI 50 9 Figura 2.3: Valutazioni individuali degli utenti Molte valutazioni cosiddette neutre erano accompagnate da commenti come: ”Questa immagine non mi trasmette niente”, seguite da una valutazione veloce. Alcuni utenti, invece, consideravano la posizione di partenza del cursore 10 CAPITOLO 2. ANALISI DEI RISULTATI come un valore zero, a cui aggiungere eventuali maggiorazioni. Quindi, come nel caso dell’utente 12, i valori sotto lo zero sono molto rari e siti considerati negativi venivano giudicati mantenendo il valore 50 di default e non sbilanciandosi verso votazioni sotto al valore medio. Inoltre, soprattutto per gli utenti meno esperti nell’utilizzo del computer e del mouse, lo sforzo della pressione del pulsante nella posizione di default è decisamente meno impegnativo rispetto a quello del trascinamento del cursore nella jslider. Probabilmente la motivazione dell’utente non era abbastanza alta da portarlo a sforzarsi maggiormente per dare una valutazione più personale. 2.2 La soggettività delle valutazioni Analizzando ulteriormente i grafici, si può notare anche una certa differenza caratteriale degli utenti, che si riflette nelle valutazioni fatte. Dal grafico dell’utente 3, per esempio, si può denotare un certo pessimismo. Le valutazioni erano spesso accompagnate da commenti negativi e molto critici. I valori di entrambe le sessioni, infatti, non si spingono in positivo oltre il 70, ma arrivano a 5 o 10 come negativo. La media dei valori infatti è notevolmente sotto al valore medio (valori medi: 41-43). L’utente 11 non si è sbilanciato molto nelle votazioni. Votazioni con commenti molto critici sono state valutate con valori poco sotto il valore medio; lo stesso vale per immagini rilevate molto positive, che hanno ricevuto votazioni abbastanza basse, rispetto a valutazioni fatte da altri utenti. Infatti, la distribuzione del grafico è concentrata in un unico punto attorno alla media, e i valori minimi (40-41) e massimi (56) sono abbastanza vicini tra di loro, in entrambe le sessioni. L’utente 12 in entrambi i casi ha espresso valutazioni molto alte, anche se alcune erano accompagnate da commenti negativi. Oltre alle motivazioni presentate poco fa, non si esclude che la valutazione sia stata influenzata dalla mia presenza a fianco dell’utente, durante il test. La presenza del conduttore del test, infatti, può inibire l’utente che, per paura di offendere, o per paura di giudizi personali, tende a fornire valutazioni positive. Questo è accaduto specialmente nella prima sessione di test. Alcuni utenti, infatti, durante il test tendevano a pormi le loro scuse e a giustificare i loro voti. Questo porta a valutazioni poco personali e poco nitide. Lo stesso comportamento si è presentato durante la seconda sessione di test, nei confronti dei loro voti precedenti. Gli utenti si sono rivelati preoccupati delle loro valutazioni precedenti, temendo di essere poco coerenti con la valutazione in corso, giustificandosi anche qui, e scusandosi per eventuali scorrettezze. In alcuni grafici, invece, come in quegli degli utenti 1,2,4,9,10,14 2.3. VALORI MEDI 11 è possibile notare due grandi cluster, di votazioni positive e negative. Questi rappresentano gli utenti che si sono sbilanciati maggiormente in valutazioni più estreme e meno condizionate. Gli stessi utenti, sono coloro che hanno partecipato più attivamente all’operazione di think aloud e si sono prestati più apertamente al test. 2.3 Valori medi Oltre all’analisi delle valutazioni individuali, sono state analizzate anche le distribuzioni delle medie complessive delle due sessioni di test.(figura 2.4) Figura 2.4: Relazioni tra le valutazioni delle due sessioni La correlazione tra le due medie è molto alta (circa 0.91). Questo indica un alta coerenza nelle valutazioni, e quindi conferma l’esistenza di elementi di bellezza universale che influiscono sulle preferenze e sulle valutazioni delle immagini, che di seguito andrò a presentare. Dallo scatter plot dei valori medi è possibile notare una certa distribuzione lungo l’asse diagonale, risultato appunto dell’alta correlazione, e la presenza di due cluster di risultati posti sopra e sotto il valore medio. Questo suggerisce il riconoscimento da parte di tutti gli utenti della presenza di una serie di immagini attraenti e una serie di immagini meno attraenti. Se le immagini sono state universalmente giudicate in modo simile, significa che contengono particolari riconosciuti da tutti che ne determinano l’estetica. Il debriefing finale e il processo di think aloud svolto durante la seconda sessione ha aiutato a capire quali sono gli elementi che determinano una valutazione positiva o meno da parte degli utenti, e come si può prevedere da questi grafici, questi elementi sono comuni tra quasi tutti gli utenti testati. 12 2.4 CAPITOLO 2. ANALISI DEI RISULTATI Processo di debriefing - intervista Durante la seconda sessione si è cercato di far svolgere agli utenti una procedura cosiddetta di ”think aloud”. È stato infatti chiesto agli utenti di fare liberamente dei commenti sulle immagini e di dire quali caratteristiche li spingeva a dare una votazione positiva o negativa all’immagine. Non tutti gli utenti sono stati molto produttivi nella loro libera espressione. Numeroso utenti rilasciavano commenti solamente se interpellati. Solo un numero ridotto di utenti commentava liberamente le votazioni e giustificava le sue scelte. Alla fine della prova, veniva svolta una breve intervista, libera, per raccogliere ulteriori commenti e pareri. Data la velocità con cui venivano somministrate le immagini, gli utenti valutavano l’immagine dal punto di vista della ”prima impressione”, dell’impatto visivo. La valutazione, quindi, non è data da motivazioni razionali, ponderate, ma più che altro da impressioni, risposte fisiche a brevi stimoli che non permettono uno studio dettagliato dell’immagine. Andiamo ora a capire quali sono gli elementi che colpiscono maggiormente in un’immagine, per un tempo di esposizione cosı̀ breve, e che ne determinano il grado di bellezza percepita. Gli elementi che colpiscono maggiormente gli utenti sono principalmente 3: L’uso del colore, l’uso di immagini grandi e l’ordine. 2.4.1 Colore Dal think aloud, e di conseguenza dalle valutazioni finali, è possibile vedere che le immagini che hanno ricevuto votazioni maggiori, sono state quelle con un uso moderato di colori. Si tendono a preferire immagini con pochi colori ben abbinati e varianti in saturazione piuttosto che in tonalità. L’uso di tanti colori troppo differenti crea confusione, specialmente se questi sono applicati a sfondi o a testi e cornici. Se non c’è un colore dominante all’interno dell’immagine, l’utente è spaesato. Necessita infatti di una gerarchia visiva, del risalto di alcuni elementi a scapito di altri. Se tutti gli elementi hanno colori differenti, non ce ne sarà uno principale, e di conseguenza saranno visti tutti sullo stesso piano: l’utente si distrae e non sa come procedere con la visualizzazione della pagina. Ne è d’esempio l’homepage in figura 2.5 La visualizzazione non è guidata, ma totalmente casuale. Anche l’uso di sfondi troppo decisi e colori troppo scuri possono portare a valutazioni negative. Il sito u39, in figura 2.6, (votazione media 39,9), che presenta un testo blu elettrico su uno sfondo verde scuro molto pesante alla vista. Il contrasto è minimo, e si distinguono a fatica le parole. Gli utenti hanno espresso diverse critiche 2.4. PROCESSO DI DEBRIEFING - INTERVISTA 13 Figura 2.5: Homepage del sito yvettesbridalformal.com Figura 2.6: Homepage del sito karisable.com a riguardo, anche se alcuni di loro hanno prestato valutazioni positive per la presenza in primo piano di una bambina sorridente. Un altro esempio è il sito u38, che ha ricevuto una votazione media di 48. Anche se il testo è scritto in una tonalità di contrasto, siti con contenuto testuale e sfondi troppo scuri vengono percepiti faticosi da leggere. Una cattiva usabilità percepita influisce anche sulla valutazione dell’estetica, nonostante il tempo breve di somministrazione dell’immagine. 14 2.4.2 CAPITOLO 2. ANALISI DEI RISULTATI Immagini Figura 2.7: Homepage del sito converse.com Dal think aloud e dalle interviste finali è emerso che gli utenti valutano più positivamente un sito che contiene immagini grandi e chiare. Le immagini dei Figura 2.8: Homepage del sito drippingfat.com siti p41 (Figura 2.7), p34 (Figura 2.8), p07, p14 e p13 (Figura 2.9)sono stati apprezzati quasi all’unanimità, poiché è presente un’unica grande immagine riconoscibile e ben delineata. 2.4. PROCESSO DI DEBRIEFING - INTERVISTA 15 Figura 2.9: Homepage del sito wooster.edu Inoltre, l’immagine viene valutata con una votazione maggiore, se sono presenti personaggi riconoscibili (Valentino Rossi, Che Guevara, Donna con l’ermellino(Figura 2.5)), anche se non sono in primo piano. I personaggi famosi catturano immediatamente l’attenzione dell’utente e distraggono dall’effettivo aspetto della pagina. Inoltre l’utente tende a dare una valutazione maggiore a siti riguardanti argomenti conosciuti e a cui è particolarmente legato, anche se l’aspetto del sito è mediocre. Figura 2.10: Homepage del sito cmdshiftdesign.com/ilovesmekitty/ 16 CAPITOLO 2. ANALISI DEI RISULTATI Porto come esempio il sito u01 (Figura 2.10). Il sito non è ben fatto e ha caratteristiche poco attraenti: il colore di sfondo è eccessivamente saturo, è progettato con i frame, le immagini, di cattiva qualità, vengono utilizzate ripetutamente come sfondo a un menu progettato su tabelle e reso illeggibile a causa di cattive scelte grafiche (poco contrasto del colore, font troppo piccoli). Nonostante tutto, però, il sito viene valutato bene (una media di 61,6) ”perché mi piacciono i gatti/ gli animali”. Quindi il contenuto piacevole tende a giustificare un’eventuale cattiva estetica. Un comportamento simile si è verificato nei confronti di altri siti con immagini ”buone”, legate alla solidarietà, che potrebbero suscitare emozioni postive, come ad esempio la presenza di immagini di bambini ”perché portano sempre cose belle”, o della protezione civile ”perché fanno del bene alle persone”. Nonostante quindi la cattiva estetica , ai siti sono state quindi attribuite valutazioni positive per motivazioni non direttamente legate a fattori estetici. A siti con immagini positive si tende quindi ad abbonare eventuali errori di progettazione o giustificare un’estetica scadente. 2.4.3 Ordine Gli utenti valutano positivamente siti con strutture chiare, ben delineate. Sono favoriti siti che presentano contenuti ben allineati a griglie, elementi riquadrati e ordinati. Gli elementi in questa disposizione, che segue i canoni dell’estetica classica, vengono recepiti come maggiormente ordinati, chiari, leggibili, limpidi. Un esempio possono essere siti come p38 (62,1 di media), o p19 (68,6 di media). È stato molto apprezzato un buon uso degli spazi, con pochi elementi circondati da molto spazio. Il sito p33, per esempio, nonostante fosse un sito dai colori scuri e con caratteristiche particolari, lontane da quelle di una tradizionale pagina web, è stato valutato positivamente (57,42). Se gli altri due criteri, colore e immagini, hanno presentato valutazioni variabili da un soggetto ad un altro, talvolta anche per lo stesso soggetto, al variare della sessione di test, il criterio di chiarezza e ordine ha avuto molto peso all’interno delle valutazioni, e solitamente determinati siti caratterizzati da confusione e disordine sono stati percepiti allo stesso modo da tutti gli utenti. Non è un caso infatti, che i quattro siti valutati peggiori dagli utenti siano siti molto ricchi di informazioni, immagini e testi posizionati nello spazio senza un criterio preciso (Figura 2.11). L’utilizzo di troppi colori diversi, di allineamenti assenti, o indipendenti da una griglia e la presenza di blocchi di testo troppo complessi, risultano 2.4. PROCESSO DI DEBRIEFING - INTERVISTA 17 Figura 2.11: Homepage del sito havenworks.com, che si è classificato all’ultimo posto della classifica di gradimento. pesanti, affaticano la vista e la navigazione. Alla vista di quei siti, gli utenti reagivano con espressioni di sdegno e con commenti molto critici. È opinione comune che quei siti siano illeggibili e poco pratici. Se l’utente è costretto a cercare una notizia in quel sito, lo fa, ma se dovesse scegliere, cambierebbe sito. Un’impaginazione cosı̀ caotica allontana gli utenti, specialmente se non sono abbastanza motivati per restare sulla pagina. Un’altra valutazione negativa è stata data a siti con un’impaginazione ”giornalistica”, come è stata definita da più utenti. Qualche posizione più su, nella classifica, infatti, si sono posizionati i siti u12, u08, u15 (in figura 2.12), che sono caratterizzati da homepage ricche di testo. Il contenuto è presentato interamente nell’homepage, come fosse la prima pagina di un quotidiano. Il commento più comune è stato ”se voglio quei contenuti, li vado a cercare io, non devono essermi presentati tutti in prima pagina, tutti assieme”. L’impaginazione giornalistica non attira l’utente. Dà un’idea di testo informativo da leggere solo in caso di ricerca di informazioni, non per passatempo. Un affaticamento nella ricerca di informazioni deve essere accompagnato da una grande motivazione, altrimenti l’utente abbandona il sito. L’utente infatti, come si è potuto notare precedentemente, è attirato maggiormente da immagini grandi, spazio, ordine. 18 CAPITOLO 2. ANALISI DEI RISULTATI Figura 2.12: Homepage del sito mod.mil.by. considerata troppo ”giornalistica” 2.5 Presenta un’impaginazione Immagini e memoria Durante la seconda sessione, come previsto, gli utenti non ricordavano gran parte delle immagini viste durante la sessione precedente. C’è stata però un’immagine che è rimasta impressa alla maggior parte degli utenti, ovvero il sito p34 (Figura 2.8). Curiosamente il commento non era immediato, ma veniva fatto qualche immagine successiva, spontaneamente dagli utenti. È stato interessante come la maggior parte degli utenti (almeno tra coloro che partecipavano attivamente al processo di think aloud) avesse avuto la stessa sensazione. Il sito si è posizionato alla decima posizione nella classifica di gradimento, con un voto medio di 66,07. È caratterizzato da una serie di immagini di T-Shirt colorate posizionate in primo piano, ordinate in riga. L’idea è orginale poiché le magliette sembrano sciogliersi come gocce di vernice. Le immagini sono grandi, chiare e sono poste su uno sfondo luminoso, neutro e non invasivo. Indagando sulle homepage ricordate dalla sessione precedente, è emerso che rimangono in mente i siti contenenti immagini grandi e isolate. C’è maggior difficoltà nel ricordare siti come il sito p30 (Figura 2.13) perché, nonostante abbia raggiunto un alto punteggio di gradimento (60,7), comunque contiene grandi immagini senza soggetto. È caratterizzato infatti da una serie di fotografie colorate poste su uno sfondo spaziale. La scritta è grande, e rappresenta l’elemento con gerarchia visiva principale, rispetto al resto. L’equilibrio tra 2.5. IMMAGINI E MEMORIA 19 Figura 2.13: Homepage del sito mattwiggins.net. i colori e la disposizione degli elementi è ottima, ma non rappresentando un soggetto tangibile, la memorizzazione è difficile, specialmente se l’esposizione dura 500ms. È emersa inoltre una certa preferenza nei confronti di siti con immagini di oggetti legati al quotidiano e alla vita di tutti i giorni. Per es il biscotto (p38), la scarpa (p41, Figura 2.7), le magliette(p34, Figura 2.8 ), le tazze di caffè (p07). Questi oggetti infatti, appartenendo al quotidiano, sono maggiormente memorizzabili. Inoltre rappresentavano l’elemento principale all’interno della pagina, l’elemento con maggior gerarchia visiva, e su cui si basava lo scopo primario dei siti, in quanto siti vetrina di aziende rispettivamente di dolci, scarpe, magliette, caffè. L’immagine è unica, grande e distintiva e trasmette subito il messaggio dell’azienda. È interessante inoltre vedere come si confermi la teoria che l’uomo percepisca rapidamente la presenza di volti umani all’interno di un’immagine. Durante la breve esposizione, infatti, le prime caratteristiche che sono state riconosciute, secondo i commenti diretti degli utenti, sono stati i volti delle persone, soprattutto se famose. Può sembrare naturale che in un sito come quello di u04 (Figura 2.5) venga riconosciuta la donna con l’ermellino, perché è l’unica immagine presente ed è posizionata in centro allo schermo. Quello che incuriosisce maggiormente, è come alcuni siti vengano ricordati per dei particolari secondari, che solitamente fanno riferimento a volti di persone e personaggi famosi. 20 CAPITOLO 2. ANALISI DEI RISULTATI Facendo riferimento al sito u12, viene menzionato numerose volte Valentino Rossi, specialmente dagli utenti maschi, nonostante nella pagina occupi una posizione decisamente secondaria, e siano presenti altre immagini in posizione centrale. Il riconoscimento del personaggio, inoltre, come già detto in precedenza, ha giustificato una votazione alta al sito da parte di qualche utente. Figura 2.14: Homepage del sito www.sonypictures.com/movies/thepinkpanther2/site/. Lo stesso vale per il sito p16, riconosciuto come ”il sito del fotografo”, dove l’immagine del fotografo, per quanto diretta e centrale, è solo una in mezzo a una serie di altre immagini della stessa dimensione, ma con caratteristiche differenti (bocche, occhi, obbiettivi di macchine fotografiche, volti tagliati). Un’altra curiosità nasce dalla visione del sito p25 (Figura 2.14), dove il sito è stato più volte ricordato come ”il sito del francese”. È curioso notare come, nonostante la presenza di caratteristiche molto più marcate (la presenza della pantera rosa a fianco o un insolito sfondo rosa acceso), l’elemento che rimane in mente è la fotografia dell’uomo, associato all’aggettivo ”francese” per qualche collegamento logico. Forse gli utenti hanno riconosciuto l’abbigliamento, forse hanno notato velocemente la bandiera francese a lato, o forse hanno comunque notato la pantera rosa, collegandola inconsciamente alla Francia. Sarebbe curioso studiare ulteriormente questo fenomeno con successivi esperimenti mirati. D’altro canto, vi è una notevole difficoltà nel memorizzare siti pieni di scritte e informazioni. Come è stato detto precedentemente, i siti che occupano gli ultimi posti nella classifica di gradimento, sono caratterizzati da un grosso quantitativo di testo, elementi non allineati, uso smoderato di colori e 2.5. IMMAGINI E MEMORIA 21 tonalità diverse, ovvero tutti elementi che portano smarrimento e confusione nell’utente. Questi siti, nonostante avessero ricevuto quasi all’unanimità voti estremamente bassi (u28 (Figura 2.11), per esempio, nei vari test ha ricevuto votazioni che vanno da 0 a 54, con una media di 29,6), non sono rimasti impressi nella memoria come i siti che occupano il vertice della classifica. Questi siti si tendono a ricordare in negativo, per la loro complessità e pesantezza, nel complesso, ma non se ne ricorda un particolare preciso. C’è difficoltà a focalizzare un unico elemento, soprattutto perché non vi è gerarchia visiva e tutti gli elementi sono posti nello stesso piano. Negli utenti, quindi, restava nella memoria l’esistenza di alcuni siti molto disordinati e complessi, ma non vengono memorizzati i singoli siti, come invece accade per quelli estremamente positivi. Gli utenti ricordavano dalla volta precedente di aver trovato siti particolarmente negativi, ma non si sarebbero accorti se quelle homepage durante la seconda sessione fossero state sostituite con altre immagine con caratteristiche simili. 22 CAPITOLO 2. ANALISI DEI RISULTATI Capitolo 3 Ulteriori riflessioni 3.1 Effetti dell’età dei partecipanti sui risultati del test Ulteriori riflessioni sono necessarie per quanto riguarda l’età dei partecipanti e l’influenza che questo fattore ha avuto nella valutazione. Innanzitutto è necessario specificare che due dei 14 partecipanti non hanno eseguito il test come i loro colleghi poiché non erano molto pratici nell’utilizzo del mouse. Di conseguenza, il test è stato guidato dalla sottoscritta, che trascinava il cursore sul punto che l’utente indicava con un dito sullo schermo. Questo probabilmente ha portato a valutazioni meno precise rispetto a quelle dei colleghi, perché l’indicazione su schermo si è rivelata più generica di quella con mouse. Spesso infatti mi veniva indicata la valutazione a voce, ”come la valutazione precedente”. Sicuramente c’è stato un livello di precisione minore rispetto alla modalità via mouse. Dalle valutazioni raccolte, ho notato come alcuni siti che io e le mie fonti in rete avevamo classificato come poco attraenti a causa di scelte grafiche obsolete, abbiano raggiunto valutazioni molto alte. Ne sono d’esempio i siti u26 (media 62,78), u34(media 53,42), u25(media 58,78). La caratteristica principale che mi ha spinto a classificarle tra le homepage ”poco attraenti” è l’utilizzo di accortezze grafiche obsolete, fuori moda. È interessante quindi vedere come questi utenti, che hanno una limitata conoscenza di internet, non sono in grado di riconoscere le mode grafiche, e quindi hanno una valutazione oggettiva e assoluta della pagina. Nel caso di un utente esperto, la valutazione di queste pagine sarebbe influenzata da conoscenze esterne, da paragoni con altri stili, da elementi legati all’estetica espressiva, mentre in questo caso, le caratteristiche più influenti nella valutazione di questi utenti sono gli elementi di estetica classica, quella ”innata” nell’uomo, per l’appunto 23 24 CAPITOLO 3. ULTERIORI RIFLESSIONI colori, allineamenti, ordine, immagini. 3.2 Riflessioni sulla procedura di test Originalmente il test doveva essere composto da due sezioni. Un gruppo di partecipanti doveva valutare delle immagini trasmesse a impulsi di 500ms, e un altro gruppo doveva valutare immagini trasmesse a impulsi di 50ms. Inizialmente, alla presentazione del test di 500ms, ho ricevuto molte critiche per quanto riguardava la velocità delle immagini. Molte immagini non venivano visualizzate e gli utenti si ponevano in modo poco disponibile nei confronti dell’esperimento. Ho perciò deciso di modificare il test e analizzare gli utenti utilizzando solamente la visualizzazione meno veloce, abbandonando l’idea dei 50ms. Probabilmente avrei dovuto insistere nei miei obbiettivi, visto che dopo le prime critiche iniziali, gli utenti hanno eseguito perfettamente il compito ottenendo risultati abbastanza coerenti (indice che le valutazioni erano ragionate), ma avrei rischiato di compromettere il test con valutazioni casuali. Ho preferito perciò limitare il mio test e raccogliere cosı̀ risultati più affidabili. Soprattutto durante la prima sessione di test, quando gli utenti non conoscevano il test e la procedura, ho notato una certa diffidenza da parte degli utenti nei miei confronti e nei confronti del test. Le motivazioni principali credo possano essere le seguenti. Innanzitutto i partecipanti non erano volontari, ma convocati apposta per l’esperimento senza essere stati informati sulle procedure e sulla tipologia di test. Dopo la prima descrizione del test ho riscontrato da parte di molti utenti un senso di sbigottimento e di poca convinzione, confermato dalle critiche che mi sono state mosse sulle modalità di valutazione, sulla velocità di visualizzazione e sulle reali finalità del test stesso. Molto probabilmente questa diffidenza è data anche dal fatto che l’ambito del test è abbastanza lontano dalla loro quotidianità, tratta argomenti poco comuni e utilizza strumenti non molto familiari per gli utenti, e quindi non si sentivano particolarmente coinvolti nelle operazioni. Le critiche che mi sono state mosse, inoltre, riguardavano anche la quantità di materiale da visionare. Dai commenti ricevuti, nonostante avessi diminuito il numero di immagini rispetto al test iniziale, la procedura ripetitiva si è dimostrata particolarmente noiosa, e questo rischia di aver alterato le valutazioni, specialmente per quanto riguarda le ultime immagini della serie. 3.3. SUGGERIMENTI E MODIFICHE PER EVENTUALI VERSIONI FUTURE25 3.3 Suggerimenti e modifiche per eventuali versioni future Se l’esperimento dovesse essere riproposto, innanzitutto suggerirei di farlo dirigere a persone di un’età superiore alla mia, per evitare l’effetto ”nipote” che ho riscontrato durante la somministrazione del test. Come seconda cosa suggerirei di utilizzare un gruppo di partecipanti volontari a cui è stato preventivamente descritto il compito e che partecipano al test spontaneamente, per non influenzare negativamente le valutazioni. 26 CAPITOLO 3. ULTERIORI RIFLESSIONI Appendice A Homepage utilizzate A.1 Siti poco attraenti u01 u02 u03 u04 u05 u06 u07 u08 u09 u11 u12 u13 u14 u15 u16 u17 u20 u21 u22 u24 u25 URL siti poco attraenti http://cmdshiftdesign.com/ilovesmekitty/ http://www.chimesdesign.com/fugly site/index.html/ http://www.ussteel.com/corp/index.asp http://yvettesbridalformal.com/ http://www.pisa.tur.br/ http://www.architettonline.it/ http://www.archibio.com/ http://www.santiebeati.it/ http://www.akkuaria.net/ http://www.analisigrafologica.it/ http://miaeconomia.leonardo.it/ http://www.guardiecologiche.it/ http://www.mil.ru/eng/ http://www.mod.mil.by/news eng.html http://www.cubagob.cu/otras info/minfar/default.htm http://www.mod.gov.ge http://www.visuellerorgasmus.de/ http://www.countrypowerstation.net/ http://www.suonerie.it/ http://www.valfrutta.it/ http://www.oceanside-ca.com/tableof.htm 27 28 APPENDICE A. HOMEPAGE UTILIZZATE u26 u27 u28 u29 u30 u31 u32 u33 u34 u35 u36 u37 u38 u39 u40 u41 u42 u43 u44 u45 A.2 URL siti poco attraenti http://www.alovelyworld.com/ http://www.lingscars.com/ http://www.havenworks.com/ http://mercedesrestaurants.com/ http://www.mrbottles.com/ http://www.nbbd.com/ http://www.wmgh.com/ http://www.historianofthefuture.com/ http://www.fivedoves.com/ http://www.georgehutchins.com/ http://www.goldenmean.info/ http://www.sfpizzeria.com/ http://www.truthism.com/ http://karisable.com/victch.htm http://art.yale.edu/ http://www.siphawaii.com// http://www.jerrypippin.com/ http://www.indiana.edu/ ensiweb/ http://www.tallyhouniforms.com/ http://www.usabilitynet.org/home.htm Siti attraenti b01 b03 b04 b05 b06 b07 b08 b09 b10 b12 b13 b14 b15 URL siti attraenti http://www.hammerdowndesign.com/ http://www.edelwwweiss.com/ http://www.army.mod.uk/ http://www.coffeeclub.com.au/ http://sweetsallies.com/ http://www.farcoast.com/ http://parkavenuecoffee.com/ http://www.melitta.com/ http://www.puravidacoffee.com/ http://www.berea.edu/ http://www.wooster.edu/ http://www.bates.edu/ http://www.bellyshades.de/ A.2. SITI ATTRAENTI b16 b17 b18 b19 b20 b21 b23 b24 b25 b26 b27 b28 b29 b30 b31 b32 b33 b34 b35 b36 b37 b38 b39 b40 b41 b42 b44 URL siti attraenti http://www.arminmorbach.com/ http://www.creativewithak.com/ http://www.dawn.nl/ http://www.figurenschneider.de/ http://misfall.de/ http://www.tanner-tailor.de/ http://www.junopilot.de/ http://www.ibanez.co.jp/world/country/frame italy.html http://www.sonypictures.com/movies/thepinkpanther2/site/ http://www.colorchakra.com/ http://www.magnivate.com/flash us.html http://www.feartox.com/ http://laplanete/sldimension.com/ http://www.mattwiggins.net/ http://www.liliaplanet.com/ http://realcasual.com.ua/ http://www.zunejourney.net/ https://www.drippinginfat.com/ http://www.happywebbies.com/ http://www.patagonia.com/eu/enPT/tinshed/index http://www.abelandcole.co.uk/ http://www.famouscookies.com/ http://www.dogcollars.ca/ http://shop.giraffe.net/ http://www.converse.com/ http://nitarna.cz/ http://hipstery.com/ 29 30 APPENDICE A. HOMEPAGE UTILIZZATE Bibliografia [1] G. Lindgaard, G. Fernandes, C. Dudek, J. Browñ (2006), Attention web designers: You have 50 milliseconds to make a first good impression!. Behaviour and Information Technology, 25:2, pp. 115–126. [2] D. A. Norman (2004), Introduction to this special section on beauty, goodness, and usability. Human–Computer Interaction, pp. 311 – 318. 31