seminario web usability e digital marketing, eyetracking e...

29
Web usability e digital marketing: eyetracking e metodi di eyetracking e metodi di segmentazione Proposte di miglioramento dei siti web al fine di perfezionare l’esperienza di navigazione degli utenti Tea Cinelli [email protected] 24 Novembre 2014

Upload: others

Post on 16-Jun-2020

0 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: seminario Web Usability e digital marketing, eyetracking e ...docenti.luiss.it/protected-uploads/321/2014/11/20141125132139-Cin… · Web Usability • misura la distanza cognitiva

Web usability e digital

marketing:

eyetracking e metodi di eyetracking e metodi di

segmentazioneProposte di miglioramento dei siti web

al fine di perfezionare l’esperienza di navigazione degli utenti

Tea Cinelli

[email protected]

24 Novembre 2014

Page 2: seminario Web Usability e digital marketing, eyetracking e ...docenti.luiss.it/protected-uploads/321/2014/11/20141125132139-Cin… · Web Usability • misura la distanza cognitiva

Evoluzione del sistema

Digital marketing

I driver del cambiamento:

• Dalla COMUNICAZIONE ANALOGICA a quella DIGITALE

• Dal FOCUS sul CONSUMATORE a quello sulla PERSONA

Contestualizzazione dell’elaborato

Web User Experience

Web site

Web usability

• Dai BRAND TOUCHPOINT OFFLINE a quelli ONLINE

• Dall’ UTILITA’ all’ USABILITA’

Creare siti usabili e renderegli utenti soddisfatti

Page 3: seminario Web Usability e digital marketing, eyetracking e ...docenti.luiss.it/protected-uploads/321/2014/11/20141125132139-Cin… · Web Usability • misura la distanza cognitiva

Web Usability

• misura la distanza cognitiva tra il modello del progettista e il modello dell’utente

• è un indicatore di qualità poiché esprime la misura in cui un prodotto funziona con efficienza, efficacia e soddisfazione in uno specifico contesto d’uso(ISO 9241-11 1998)

• fare in modo che una persona di

Web User Experience• rappresenta la sommatoria delle

emozioni, percezioni e reazioni che una persona prova quando entra in contatto con un servizio (J. Nielsen 2010)

• nasce dalla comunione di molteplici fattori: il marketing, il branding, la comunicazione e l’architettura delle informazioni• fare in modo che una persona di

abilità ed esperienza medie possa utilizzare un prodotto secondo il fine per cui è stato progettato (S. Krug 2006)

informazioni

• equivale al grado di riscontro soggettivo tra le aspettative e la soddisfazione

FOCUS SUGLI UTENTI E SULLA CREAZIONE DI UN’

ESPERIENZA DI NAVIGAZIONE IDEALE, SEMPLICE E GRADITA

Page 4: seminario Web Usability e digital marketing, eyetracking e ...docenti.luiss.it/protected-uploads/321/2014/11/20141125132139-Cin… · Web Usability • misura la distanza cognitiva

Utile e necessario testare l’usabilità dei canali digitali

un campione di utenti esegue compiti tipici in un ambiente controllato sotto l’osservazione di esperti che raccolgono

dati e li analizzano per trarne delle conclusioni

Test preliminare

Test successivo

• Il sito è stato progettato correttamente?• È semplice ed immediato?• Soddisfa i bisogni informativi degli utenti?

USABILITY TEST

• Soddisfa i bisogni informativi degli utenti?

«Non esiste un design universale in grado di soddisfare tutti gli utenti»«Non esiste un design universale in grado di soddisfare tutti gli utenti»

D. A. Norman

SEGMENTAZIONE

processo attraverso il quale la domanda viene suddivisa in gruppi che siano il più possibile omogenei al loro interno ed

eterogenei all’esterno

ANALISI STRUTTURE

COMPORTAMENTALI

Page 5: seminario Web Usability e digital marketing, eyetracking e ...docenti.luiss.it/protected-uploads/321/2014/11/20141125132139-Cin… · Web Usability • misura la distanza cognitiva

Gli obiettivi dell’indagine

1. I web designer progettano correttamente le Homepagedei siti web affinché ciascun elemento svolga il ruolo per cui è stato in essa inserito?

2. Può una Homepage confusionaria e mal ideata creare un disagio emotivo nei confronti degli utenti mentre una ben concepita e coerente trasmettere loro sensazioni positive?

Page 6: seminario Web Usability e digital marketing, eyetracking e ...docenti.luiss.it/protected-uploads/321/2014/11/20141125132139-Cin… · Web Usability • misura la distanza cognitiva

La struttura dell’indagine

Somministrazione dei questionari

Esperimento di Eyetracking

Fase preparatoria Fase esecutiva

Analisi Statistica dei dati ottenuti

Preparazione dati Clusterizzazione fuzzy Profilazione dei cluster

SAM, STAI, Homepage Usability's Questionnaire

CONCLUSIONI

Page 7: seminario Web Usability e digital marketing, eyetracking e ...docenti.luiss.it/protected-uploads/321/2014/11/20141125132139-Cin… · Web Usability • misura la distanza cognitiva

Che cosa è l’ Eyetracking?

Metodologia di tracciamento oculare in grado di determinare con ragionevoleesattezza dove un utente sta guardando. Si configura come un processo cheregistra ed analizza il percorso che compie lo sguardo delle persone durantel’osservazione delle immagini

Ipotesi mente - occhio

� registra le aree di maggior interesse� il livello di attenzione� i tempi necessari per svolgere un task

MIGLIORARE I

CONTENUTI DEL WEB

IN FUNZIONE DEGLI

UTENTI FINALI

USER EXPERIENCE

Page 8: seminario Web Usability e digital marketing, eyetracking e ...docenti.luiss.it/protected-uploads/321/2014/11/20141125132139-Cin… · Web Usability • misura la distanza cognitiva

Che cosa è l’ Eyetracking?

COSA RILEVAFissazioni: pause dello sguardo su punti specifici Saccadi: spostamento dello sguardo da una fissazione all’altra

GLI STRUMENTI DI ANALISIMappe termiche: rappresentano le aree dello schermo fissate maggiormente dagli utenti (intero campione)Gaze plot: rappresentano con un reticolato la sequenza delle saccadi (singolo utente)

Page 9: seminario Web Usability e digital marketing, eyetracking e ...docenti.luiss.it/protected-uploads/321/2014/11/20141125132139-Cin… · Web Usability • misura la distanza cognitiva

COSA TESTA

Efficacia di imballaggi, pubblicità, prodotti e software

COSA CONSENTEStudiare i bisogni latenti dei

consumatori, preziosa fonte

decisionale

Page 10: seminario Web Usability e digital marketing, eyetracking e ...docenti.luiss.it/protected-uploads/321/2014/11/20141125132139-Cin… · Web Usability • misura la distanza cognitiva

CAMPIONE 14 utenti

TASK osservazione degli stimoli (Homepage) proposti ogni 10 sec

43%57%

Sesso

M F

86%

14%

Fasce d'età

18-30 31-59

28%

72%

h/gg di Internet

meno di 1 1 - 5

STIMOLI OGGETTO DI ANALISIhttp://www.milka.ithttp://www.unicef.ithttp://www.newbalance.ithttp://www.allianz.ithttp://www.jnjmedical.ithttp://www.barilla.ithttp://www.beniculturali.it/mibachttp://www.rm.camcom.ithttp://www.nutella.it/ithttp://www.mcdonald’s.it

QUESTIONARI SAM (Self-Assessment Manikin), STAI

(State-Trait Anxiety Inventory), Homepage Usability's

Questionnaire

LUOGO Università del Sacro Cuore di Milano, 12/09/2014

Page 11: seminario Web Usability e digital marketing, eyetracking e ...docenti.luiss.it/protected-uploads/321/2014/11/20141125132139-Cin… · Web Usability • misura la distanza cognitiva

STRUMENTAZIONE EyeLink 1000 Desktop Monte della SR Research

Page 12: seminario Web Usability e digital marketing, eyetracking e ...docenti.luiss.it/protected-uploads/321/2014/11/20141125132139-Cin… · Web Usability • misura la distanza cognitiva

Esecuzione dell’esperimento di

eyetracking

1. Firma del Modulo di consenso informato

2. Introduzione al test (strumentazione, task, finalità..)

3. Fase di calibrazione (1 minuto)

4. Fase della validazione (1 minuto)

5. Test preparatorio

6. Test effettivo (1 minuto e 40 secondi)

7. Compilazione dei questionari (4 minuti)

DURATA TOTALE PER CIASCUN UTENTE 8 MINUTIDURATA TOTALE PER CIASCUN UTENTE 8 MINUTI

Page 13: seminario Web Usability e digital marketing, eyetracking e ...docenti.luiss.it/protected-uploads/321/2014/11/20141125132139-Cin… · Web Usability • misura la distanza cognitiva

Modulo di consenso informato

Con la presente dichiaro di aver acconsentito volontariamente di partecipareallo studio intitolato: Eyetracker and Website.Lo scopo dello studio è quello di: esplorare visivamente siti web.

Sono stato informato-a, prima di partecipare al suddetto studio, del mio dirittodi interrompere la mia partecipazione allo studio in qualsiasi momento, senzafornire alcuna motivazione, senza penalizzazione e ottenendo il non utilizzo deifornire alcuna motivazione, senza penalizzazione e ottenendo il non utilizzo deimiei dati. Inoltre, dichiaro di essere stato informato dello scopo del suddettostudio e del fatto che i miei dati (incluse video registrazioni, audio registrazioni,foto, etc) rimarranno anonimi e protetti secondo il Codice in materia diprotezione dei dati personali (D. lgs. n. 196/2003). Sono stato informato chesolo le persone che conducono la ricerca potranno avere accesso ai miei datilimitatamente ai fini della loro elaborazione e alla pubblicazione anonima deirisultati a fine scientifico.

Autorizzo i responsabili del presente studio di utilizzare i miei dati.

Data Firma

Page 14: seminario Web Usability e digital marketing, eyetracking e ...docenti.luiss.it/protected-uploads/321/2014/11/20141125132139-Cin… · Web Usability • misura la distanza cognitiva

FORMA Y – 1

1 = Per nulla 2 = Un po’ 3 = Abbastanza 4 = Moltissimo

Mi sento calmo 1 2 3 4Mi sento sicuro 1 2 3 4Sono teso 1 2 3 4 Mi sento sotto pressione 1 2 3 4Mi sento tranquillo 1 2 3 4 Mi sento turbato 1 2 3 4

STAI (State-Trait Anxiety Inventory)

Mi sento turbato 1 2 3 4 Sono attualmente preoccupato per possibili disgrazie 1 2 3 4Mi sento soddisfatto 1 2 3 4 Mi sento intimorito 1 2 3 4 Mi sento a mio agio 1 2 3 4 Mi sento sicuro di me 1 2 3 4 Mi sento nervoso 1 2 3 4 Sono agitato 1 2 3 4 Mi sento indeciso 1 2 3 4 Sono rilassato 1 2 3 4 Mi sento contento 1 2 3 4 Sono preoccupato 1 2 3 4 Mi sento confuso 1 2 3 4 Mi sento disteso 1 2 3 4 Mi sento bene 1 2 3 4

Page 15: seminario Web Usability e digital marketing, eyetracking e ...docenti.luiss.it/protected-uploads/321/2014/11/20141125132139-Cin… · Web Usability • misura la distanza cognitiva

SAM ( The Self-Assessment Manikin)

VALENZA

EDONICA

ECCITAZIONE

DOMINIO

Page 16: seminario Web Usability e digital marketing, eyetracking e ...docenti.luiss.it/protected-uploads/321/2014/11/20141125132139-Cin… · Web Usability • misura la distanza cognitiva

Le AOI (Area of interesting)

AOI 1 - LOGO AOI 2 – BARRA DELLA

RICERCAAOI 3 –

IMMAGINE

«Il modo in cui le persone guardano una pagina è spiegato dal fatto che gli elementi più

comuni dell’interfaccia sono posizionati nei quadranti superiori, destro e sinistro.» J. Nielsen – K. Pernice 2011

Page 17: seminario Web Usability e digital marketing, eyetracking e ...docenti.luiss.it/protected-uploads/321/2014/11/20141125132139-Cin… · Web Usability • misura la distanza cognitiva

Analisi Statistica dei dati Modelli di segmentazione: la Cluster Analysis Fuzzy

MODELLO DI CLUSTERING K-MEDOIDI FUZZY: in ogni cluster si seleziona il medoide (unità statistica rappresentativa e realmente osservata)

INCERTEZZAINCERTEZZA legata al processo di assegnazione delle unità statistiche ai cluster

statistica rappresentativa e realmente osservata) e si determina la partizione (segmentazione) minimizzando una particolare distanza euclidea tra le unità statistiche (utenti)e i medoidi dei cluster (utenti prototipali)

F.OB:

Page 18: seminario Web Usability e digital marketing, eyetracking e ...docenti.luiss.it/protected-uploads/321/2014/11/20141125132139-Cin… · Web Usability • misura la distanza cognitiva

MATRICE DEI GRADI DI

APPARTENENZA

MATRICE DEI MEDOIDI

Grado con cui un’unità statistica appartiene ad uno o più cluster

Atteggiamento del medoiderappresentativo della struttura

comportamentale dell’intero cluster

UNITA’ FUZZYUNITA’ FUZZY

VARIABILI DI SEGMENTAZIONE:

• Fixation Count: numero di fissazioni • Fixation Duration: durata della fissazione• Dwell Time: tempo di permanenza dello sguardo sull’AOI• Average Fixation Pupil: diametro dilatazione media della pupilla

QUALIFICANO IL MODELLO FUZZY E QUALIFICANO IL MODELLO FUZZY E CONSENTONO DI TENER CONTO CHE NON CONSENTONO DI TENER CONTO CHE NON E’ SEMPRE POSSIBILE SEGMENTARE IN E’ SEMPRE POSSIBILE SEGMENTARE IN MODO PRECISO IL MERCATOMODO PRECISO IL MERCATO

Page 19: seminario Web Usability e digital marketing, eyetracking e ...docenti.luiss.it/protected-uploads/321/2014/11/20141125132139-Cin… · Web Usability • misura la distanza cognitiva

Algoritmo e Cluster validity

4

4,5

MIN INDICE XIE-BENI: PARTIZIONE OTTIMALE: max compattezza e max separazione

SOFTWARE STATISTICO:programma open source R predisposto per realizzazione di analisi statistiche

XB k=2 XB k= 3 XB k=4

AOI 1 1,5005 1,3134 1,143317

AOI 2 2,6555 2,372809 3,836808

AOI 3 0,88966 1,26691 0,895

0

0,5

1

1,5

2

2,5

3

3,5

4

Page 20: seminario Web Usability e digital marketing, eyetracking e ...docenti.luiss.it/protected-uploads/321/2014/11/20141125132139-Cin… · Web Usability • misura la distanza cognitiva

Risultati Questionario STAI

Tester ANSIA STATO Y1 ANSIA TRATTO Y2 SCORE %

1 32 53 37,65%

2 30 41 42,25%

3 31 39 44,29%

4 37 58 38,95%

5 32 34 48,48%

6 44 53 45,36%6 44 53 45,36%

7 22 38 36,67%

8 31 39 44,29%

9 32 49 39,51%

10 38 49 43,68%

11 28 40 41,18%

12 25 35 41,67%

13 39 59 39,80%

14 22 39 36,07%

Page 21: seminario Web Usability e digital marketing, eyetracking e ...docenti.luiss.it/protected-uploads/321/2014/11/20141125132139-Cin… · Web Usability • misura la distanza cognitiva

Risultati Web Usability's Questionnaire

Tester Sesso Età Ore giornaliere sul Web Elemento di attenzione sul Web

1 M 18-30 1 - 5 Immagine

2 F 31-59 1 - 5 Immagine

3 M 31-59 meno di 1 ora Logo

4 F 18-30 meno di 1 ora Immagine

5 M 18-30 1 - 5 Immagine

6 F 31-59 meno di 1 ora Colore6 F 31-59 meno di 1 ora Colore

7 M 18-30 1 - 5 Colore

8 F 18-30 1 - 5 Immagine

9 M 18-30 meno di 1 ora immagine/carattere

10 F 18-30 1 - 5 Immagine

11 F 18-30 meno di 1 ora logo/immagine

12 M 18-30 1 - 5 Logo

13 F 18-30 1 - 5 Colore

14 F 18-30 1 - 5 Colore/immagine

https://docs.google.com/forms/d/1rOBjfvmnjFEfgImEE04xxQL7xMTRWd-Po-8MqmC52bE/viewform?c=0&w=1&usp=mail_form_link

Page 22: seminario Web Usability e digital marketing, eyetracking e ...docenti.luiss.it/protected-uploads/321/2014/11/20141125132139-Cin… · Web Usability • misura la distanza cognitiva

Analisi AOI 1 - LOGOPARTIZIONE OTTIMALE per k= 3

ui10101010 11 14

1 0,28 0,66 0,05

2 0,86 0,07 0,07

3 0,99 0,01 0,00

4 0,19 0,20 0,61

MATRICE DEI GRADI DI APPARTENENZA

5 0,06 0,94 0,00

6 0,81 0,19 0,00

7 0,14 0,83 0,03

8 0,17 0,17 0,66

9 0,80 0,20 0,00

10 1,00 0,00 0,00

11 0,00 1,00 0,00

12 0,29 0,66 0,04

13 0,76 0,17 0,06

14 0,00 0,00 1,00

Page 23: seminario Web Usability e digital marketing, eyetracking e ...docenti.luiss.it/protected-uploads/321/2014/11/20141125132139-Cin… · Web Usability • misura la distanza cognitiva

Analisi AOI 1 - LOGO

10

1° {2,3,6,9,10,13}

11

2° {1,5,7,12,11}

14

3° {4,8,14}

discreto interesse ma poco motivato e molto superficiale soprattutto per i loghi più conosciuti. Nutella e Johnson&Johnson sono stati

scarso interesse per quasi

tutti i loghi fissati. Quelli di Milka e Barilla hanno ricevuto 3 fissazioni ciascuno, con una durata totale rispettivamente

interesse quasi nullo, tuttavia questo cluster è quello che si abbandona più liberamente alle emozioni. Rappresenta l’utente target su

RUOLO IDENTIFICATIVO ed EMOZIONALE

Johnson&Johnson sono stati fissati rispettivamente 5 e 3 volte. Il tempo speso su questo ultimo è stato di 943 mls. Gli utenti appartenenti a questo cluster tendono al non lasciarsi trasportare dai sentimenti espressi dal logo (average fixpupil di 440 mm)

durata totale rispettivamente di 712 mls e 582 mls. Gli utenti di questo cluster, in prevalenza maschi, mostrano quindi un forte interesse verso il settore alimentare e per la famiglia.Si emozionano maggiormente (dilatazione media della pupilla mediamente alto di 640 mm)

Rappresenta l’utente target su cui il ruolo del logo produce i suoi evidenti effetti. McDonald’s riceve 1 fissazione della durata di 328 mls e registra una dilatazione media di pupilla pari ad 869 mm

NON RIESCE A STIMOLARE L’ATTENZIONE DEGLI UTENTI PUR AVENDO

UN PRECISO RUOLO IDENTIFICATIVO NELLA HOMEPAGE

Page 24: seminario Web Usability e digital marketing, eyetracking e ...docenti.luiss.it/protected-uploads/321/2014/11/20141125132139-Cin… · Web Usability • misura la distanza cognitiva

Analisi AOI 2 – BARRA DELLA RICERCA

ui9 2 8

1

0,43 0,07 0,50

2

0,00 1,00 0,00

3

0,99 0,00 0,01

4

0,26 0,28 0,46

PARTIZIONE OTTIMALE per k= 3

MATRICE DEI GRADI DI APPARTENENZA

0,26 0,28 0,46

5

0,79 0,15 0,06

6

0,52 0,47 0,01

7

0,00 0,00 1,00

8

0,00 0,00 1,00

9

1,00 0,00 0,00

10

0,01 0,00 0,99

11

0,08 0,05 0,87

12

0,99 0,00 0,01

13

0,07 0,01 0,92

14

0,08 0,89 0,03

Page 25: seminario Web Usability e digital marketing, eyetracking e ...docenti.luiss.it/protected-uploads/321/2014/11/20141125132139-Cin… · Web Usability • misura la distanza cognitiva

Analisi AOI 2 – BARRA DELLA RICERCA

RUOLO FUNZIONALE ed AUSILIARE

NESSUN UTENTE HA MOSTRATO INTERESSE VERSO QUESTA AOI:

L’ELEMENTO E’ PRESENTE NELLO SPAZIO MA NON VIENE RICONOSCIUTO

Page 26: seminario Web Usability e digital marketing, eyetracking e ...docenti.luiss.it/protected-uploads/321/2014/11/20141125132139-Cin… · Web Usability • misura la distanza cognitiva

Analisi AOI 3 - IMMAGINEPARTIZIONE OTTIMALE per k= 2

ui14 11

1

0,00 1,00

2

0,98 0,02

3

0,55 0,45

4

0,26 0,74

MATRICE DEI GRADI DI APPARTENENZA

5

0,87 0,13

6

0,47 0,53

7

0,91 0,09

8

0,95 0,05

9

1,00 0,00

10

0,01 0,99

11

0,00 1,00

12

1,00 0,00

13

0,12 0,88

14

1,00 0,00

Page 27: seminario Web Usability e digital marketing, eyetracking e ...docenti.luiss.it/protected-uploads/321/2014/11/20141125132139-Cin… · Web Usability • misura la distanza cognitiva

Analisi AOI 3 - IMMAGINE

RUOLO EMOZIONALE e LINGUAGGIO COMUNICATIVO

14

1° {1,4,10,11,13}

11

2° {2,5,7,8,9,12,14}

intenso e forte interesse cui è

associato un’ altrettanta elevata

attenzione emotiva (circa 900 mm di

dilatazione media). Le immagini delle Homepage di McDonald’s e New Balance

intenso e forte interesse distribuito proporzionalmente tra le immagini di tutti gli stimoli, anche se gli utenti appartenenti a questi cluster tendono a non emozionarsifacilmente rispetto al 1° cluster , registrando così livelli nettamente più bassi

ELEMENTO IN ASSOLUTO PIU’ FISSATO E CATALIZZATORE DI ATTENZIONE:

DIFFUSIONE DEI SITI DINAMICI E DIMENSIONI MAGGIORI CONFERISCONO

RUOLO PREDOMINANTE

Homepage di McDonald’s e New Balance

sono le più fissate ( 20 ciascuna), con durate totali molto lunghe rispettivamente di 3577 mls e 2375 mls.

registrando così livelli nettamente più bassi di Average Fixation Pupil ( circa 540 mm).

Le unità 3 e 6 sono definite UNITA’FUZZY

Page 28: seminario Web Usability e digital marketing, eyetracking e ...docenti.luiss.it/protected-uploads/321/2014/11/20141125132139-Cin… · Web Usability • misura la distanza cognitiva

Conclusioni

1. AOI 1 - LOGO

AOI 2 - BARRA DELLA RICERCA

LIVELLI INSODDISFACENTIDI USABILITA’

LIVELLI MOLTO ELEVATI

Evidenze empiriche

AOI 3 - IMMAGINELIVELLI MOLTO ELEVATI DI USABILITA’

2. Forte relazione esistente tra le emozioni e gli interessi che

caratterizzano l’utente e le sue fissazioni (interesse/attenzione)

Page 29: seminario Web Usability e digital marketing, eyetracking e ...docenti.luiss.it/protected-uploads/321/2014/11/20141125132139-Cin… · Web Usability • misura la distanza cognitiva

Conclusioni proposta

LOGO BARRA DELLA RICERCA IMMAGINE

• aumentarne le dimensioni

• usare colori di sfondo della Homepage che

• ridimensionare (siti istituzionali)IMMAGINE:

Conclusioni

dimensioni• progettare ed ideare

loghi con simboli (evitando le scritte)

della Homepage che contrastino

• attenzionedistribuzione degli elementi nello spazio

istituzionali)• usare immagini

comunicative ed identificative (siti dinamici)

IMMAGINE:

l’Homepage del

futuro ?