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