UNIVERSITA’ DEGLI STUDI DI PAVIA
Corso di Laurea Specialistica Interfacoltà in
Editoria e Comunicazione Multimediale
WEB DESIGN
A COMPLESSITÀ ADATTIVA:
PRESTAZIONI COGNITIVE
E PROFILAZIONE UTENTE
Relatore:
Prof. Massimo CELLARIO
Correlatore:
Prof. Marco PORTA
Tesi di laurea di
Diego MASTROTOTARO
Obiettivo del lavoro
Progettazione di prototipi di siti web
adattivi in base alle prestazioni cognitive
dell’utente
Rielaborare l’adattività alle prestazioni
insita nei giochi di tipo Brain training per
riutilizzarla nell’ambito del Web Design
Struttura dell’elaborato
Analisi dello stato dell’arte
Presentazione del progetto
Stato dell’arte
Web design


Rispettare le convenzioni
Design centrato sull’utente
Profilazione utente

vs.

Psicologia dell’utente


Capacità e limiti
propensione al minore
spreco possibile di risorse
cognitive
Profilazione esplicita
Profilazione implicita
Sistemi e siti adattivi

Adattamento a
caratteristiche dell’utente
comportamento nell’uso
Ambiente d’utilizzo
Il progetto
Progettazione
di siti adattivi
L’adattività
chedisiprototipi
vuole realizzare
è
basata sulla modifica automatica del
layout
del sitoa cosa:
Adattamento
alle prestazioni cognitive dell’utente
Parametri di variazione:
Dimensione elementi
Che cosa viene adattato: ?
 Posizione elementi
 Numero elementi

Test – scopo
Lo scopo dei test è valutare le prestazioni
dell’utente nell’individuare e cliccare un
determinato elemento (il ‘target’) tra i vari
elementi presenti in uno spazio delimitato
visualizzato su uno schermo (lo ‘scenario’)
Test – scopo
Test – variabili coinvolte
Si vuole verificare che al variare di tre
parametri strutturali del layout



Dimensione del target
Posizione del target
Numero di elementi
sia riscontrabile una differenza
significativa nel tempo di risposta
Test – ipotesi da verificare
1.
Dimensione: si suppone che all’aumentare della
dimensione del target il tempo di risposta diminuisca.
2.
Numero: si presume che al diminuire del numero di
elementi presenti nello scenario il tempo di risposta
diminuisca.
3.
Posizione: si prevede che all’avvicinarsi del target alla
posizione nell’angolo in alto a sinistra dello scenario il
tempo di risposta diminuisca.
4.
Distanza relativa: al diminuire della distanza tra
elemento di attenzione precedente e nuovo elemento
target dovrebbe corrispondere una diminuzione del
tempo di risposta.
Test – esempi
Test – gruppo di controllo
Test – somministrazione
La sessione di test si compone di trenta singoli
test presentati in maniera consecutiva
Campione utenti:


20 utenti per il test base
8 utenti per il test di controllo
Indicazione fornita agli utenti:
“Cliccare l’elemento target
(pulsante ‘prodotti’ nel test base, ‘I’ nel test di controllo)
nella maniera più veloce e precisa possibile”
Risultati – test base
Grafico gruppo test base
6000
utente_1
utente_2
utente_3
5000
utente_4
utente_5
utente_6
4000
utente_7
utente_8
utente_9
utente_10
3000
utente_11
utente_12
utente_13
2000
utente_14
utente_15
utente_16
1000
utente_17
utente_18
utente_19
Media
te
st
1
te
st
2
te
st
3
te
st
4
te
st
5
te
st
6
te
st
7
te
st
8
te
st
te 9
st
10
te
st
11
te
st
12
te
st
13
te
st
14
te
st
15
te
st
16
te
st
17
te
st
18
te
st
19
te
st
20
te
st
21
te
st
22
te
st
23
te
st
24
te
st
25
te
st
26
te
st
27
te
st
28
te
st
29
te
st
30
0
t1
t3
t5
t8
t
te 9
st
10
te
st
11
te
st
12
te
st
13
te
st
14
te
st
15
te
st
16
te
st
17
te
st
18
te
st
19
te
st
20
te
st
21
te
st
22
te
st
23
te
st
24
te
st
25
te
st
26
te
st
27
te
st
28
te
st
29
te
st
30
te
s
te
s
t7
te
s
t6
te
s
te
s
t4
te
s
te
s
t2
te
s
te
s
Risultati – test controllo
Grafico gruppo test controllo
2500
utente_1
2000
utente_2
utente_3
1500
utente_4
utente_5
1000
utente_6
utente_7
500
utente_8
media
0
te
st
1
te
st
2
te
st
3
te
st
4
te
st
5
te
st
6
te
st
7
te
st
8
te
st
te 9
st
1
te 0
st
1
te 1
st
1
te 2
st
1
te 3
st
1
te 4
st
1
te 5
st
1
te 6
st
1
te 7
st
1
te 8
st
1
te 9
st
2
te 0
st
2
te 1
st
2
te 2
st
2
te 3
st
2
te 4
st
2
te 5
st
2
te 6
st
2
te 7
st
2
te 8
st
2
te 9
st
30
Risultati – confronto test base vs
test controllo
confronto media tempi test
tempi medi test base
tempi medi test controllo
3000
2500
2000
1500
1000
500
0
Risultati – livello difficoltà test
Grafico livello difficoltà per test
numero
dimensione
posizione
distanza relativa
distanza dal centro
media difficoltà
media tempi
1,1
0,9
0,5
0,3
0
t3
9
t2
te
s
8
t2
te
s
7
te
s
6
t2
t2
te
s
5
t2
te
s
4
t2
te
s
3
te
s
t2
2
te
s
1
t2
t2
te
s
0
t2
te
s
9
t1
te
s
8
t1
te
s
7
te
s
6
t1
t1
te
s
5
t1
te
s
4
t1
te
s
3
te
s
2
t1
t1
te
s
1
t1
te
s
0
t1
te
s
t9
te
s
t8
te
s
t7
te
s
t6
te
s
t5
te
s
t4
Normalizzazione della scala dei valori adottati dai
parametri esaminati
te
s
t3
te
s
t2
te
s
te
s
-0,1
t1
0,1
te
s
livello difficoltà
0,7
Risultati – confronto tempi medi vs
parametro numero
Confronto tempi medi vs numero
numero
media test base
1,1
0,9
0,7
0,5
0,3
0,1
-0,1
te
1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0
st est est est est est est est est st1 st1 st1 st1 st1 st1 st1 st1 st1 st1 st2 st2 st2 st2 st2 st2 st2 st2 st2 st2 st3
t t t t t t t t te te te te te te te te te te te te te te te te te te te te te
te
st
1
st
2
te
st
3
te
st
4
te
st
5
te
st
6
te
st
7
te
st
te 8
s
te t9
st
1
te 0
st
1
te 1
st
1
te 2
st
1
te 3
st
1
te 4
st
te 1 5
st
1
te 6
st
1
te 7
st
1
te 8
st
1
te 9
st
2
te 0
st
2
te 1
st
2
te 2
st
te 2 3
st
2
te 4
st
2
te 5
st
2
te 6
st
2
te 7
st
2
te 8
st
2
te 9
st
30
te
Risultati – confronto tempi medi vs
parametro dimensione
Confronto tempi medi vs dimensione
dimensione
media test base
1,1
0,9
0,7
0,5
0,3
0,1
-0,1
-0,1
te
st
1
te
st
2
te
st
3
te
st
4
te
st
5
te
st
6
te
st
7
te
st
8
te
st
te 9
st
1
te 0
st
1
te 1
st
1
te 2
st
1
te 3
st
1
te 4
st
1
te 5
st
1
te 6
st
1
te 7
st
1
te 8
st
1
te 9
st
2
te 0
st
2
te 1
st
2
te 2
st
2
te 3
st
2
te 4
st
2
te 5
st
2
te 6
st
2
te 7
st
2
te 8
st
2
te 9
st
30
Risultati – confronto tempi medi vs
parametro posizione
Confronto tempi medi vs posizione
posizione
media test base
1,1
0,9
0,7
0,5
0,3
0,1
te
st
1
st
2
te
st
te 3
st
4
te
st
5
te
st
6
te
st
te 7
st
8
te
s
te t9
st
te 1 0
st
1
te 1
st
1
te 2
st
te 1 3
st
1
te 4
st
1
te 5
st
1
te 6
st
te 1 7
st
1
te 8
st
1
te 9
st
te 2 0
st
2
te 1
st
2
te 2
st
te 2 3
st
2
te 4
st
2
te 5
st
2
te 6
st
te 2 7
st
2
te 8
st
2
te 9
st
30
te
Risultati – confronto tempi medi vs
distanza relativa
Confronto tempi medi vs distanza relativa
distanza relativa
media test base
1,1
0,9
0,7
0,5
0,3
0,1
-0,1
Prototipi – funzionamento base
Personalizzazione del layout del sito
Modellazione utente basata sulle prestazioni
cognitive rilevate durante l’interazione con il sito
Elemento cardine del profilo utente è il tempo
medio di interazione
In base al profilo il sistema procede a
classificare l’utente in una delle tre categorie
previste
A ciascuna categoria è associata uno specifica
personalizzazione dell’interfaccia
Prototipi - adattamento
L’adattività realizzata, basata sulla
modifica automatica del layout del sito, si
propone di soddisfare, attraverso lo stesso
sistema, due opposte necessità:

Semplificazione

Maggiori potenzialità
Prototipo risultati motore di ricerca
Prototipo galleria immagini
Prototipo tag cloud
Una tag cloud è una rappresentazione
visiva delle etichette o delle parole-chiave
usate in un sito web.
È concepita come una lista ponderata in
cui la dimensione attribuita ad una parola
è una rappresentazione della sua
importanza.
Prototipo photo cloud
Prototipo sito e-commerce:
home page
Prototipo sito e-commerce:
pagina elenco prodotti
Prototipo sito e-commerce:
pagina scheda prodotto
Conclusioni – possibili applicazioni
Il sistema adattivo proposto trova naturale
applicazione nel campo dell’e-learning,
oltre che nell’ambito del Brain training e
dell’e-commerce.
In generale può essere applicato a
qualunque sito, purché venga
adeguatamente testato con gli utenti reali.
Conclusioni – possibili sviluppi
Estensione dell’adattività ad altri parametri
che possono modificare il layout di un sito
Aggiunta di altri metodi di analisi delle
prestazioni o dei comportamenti
Integrazione con sistemi di profilazione e
modellazione dell’utente standard