WEB DESIGNWEB DESIGN A COMPLESSITÀ ADATTIVA:A COMPLESSITÀ ADATTIVA:

PRESTAZIONI COGNITIVEPRESTAZIONI COGNITIVEE PROFILAZIONE UTENTEE PROFILAZIONE UTENTE

UNIVERSITA’ DEGLI STUDI DI PAVIAUNIVERSITA’ DEGLI STUDI DI PAVIA

Corso di Laurea Specialistica Interfacoltà in Corso di Laurea Specialistica Interfacoltà in Editoria e Comunicazione MultimedialeEditoria e Comunicazione Multimediale

Relatore: Prof. Massimo CELLARIO Correlatore: Prof. Marco PORTA

Tesi di laurea diDiego MASTROTOTARO

Obiettivo del lavoroObiettivo del lavoro

Progettazione di Progettazione di prototipi di siti web prototipi di siti web adattiviadattivi in base alle prestazioni cognitive in base alle prestazioni cognitive dell’utentedell’utente

Rielaborare l’Rielaborare l’adattività alle prestazioniadattività alle prestazioni insita nei giochi di tipo Brain training per insita nei giochi di tipo Brain training per riutilizzarla nell’ambito del Web Design riutilizzarla nell’ambito del Web Design

Struttura dell’elaboratoStruttura dell’elaborato

Analisi dello Analisi dello stato dell’artestato dell’arte

Presentazione delPresentazione del progetto progetto

Stato dell’arteStato dell’arte

Web designWeb design Rispettare le convenzioniRispettare le convenzioni Design centrato sull’utenteDesign centrato sull’utente

Psicologia dell’utentePsicologia dell’utente Capacità eCapacità e limitilimiti propensione al minore propensione al minore

spreco possibile di risorse spreco possibile di risorse

cognitivecognitive

Profilazione utenteProfilazione utente Profilazione esplicitaProfilazione esplicita

vs.vs.

Profilazione implicitaProfilazione implicita

Sistemi e siti adattiviSistemi e siti adattivi Adattamento aAdattamento a

caratteristiche dell’utentecaratteristiche dell’utente

comportamento nell’usocomportamento nell’uso

Ambiente d’utilizzoAmbiente d’utilizzo

Il progettoIl progetto

Progettazione di prototipi di siti adattiviProgettazione di prototipi di siti adattivi

Adattamento a cosa:Adattamento a cosa:

alle prestazioni cognitive dell’utentealle prestazioni cognitive dell’utente

Che cosa viene adattato: ? Che cosa viene adattato: ?

L’adattività che si vuole realizzare è L’adattività che si vuole realizzare è basata sulla basata sulla modifica automatica del modifica automatica del layoutlayout del sito del sito

Parametri di variazione:Parametri di variazione: Dimensione elementiDimensione elementi Posizione elementiPosizione elementi Numero elementiNumero elementi

TestTest – scopo – scopo

Lo scopo dei test è Lo scopo dei test è valutare levalutare le prestazioniprestazioni dell’utente nell’individuare e dell’utente nell’individuare e cliccare un cliccare un determinato elementodeterminato elemento (il ‘target’) tra i vari (il ‘target’) tra i vari elementi presenti in uno spazio delimitato elementi presenti in uno spazio delimitato visualizzato su uno schermo (lo ‘scenario’)visualizzato su uno schermo (lo ‘scenario’)

Test – Test – scoposcopo

Test – Test – variabili variabili coinvoltecoinvolte

Si vuole verificare che al variare di tre Si vuole verificare che al variare di tre parametri strutturali del layoutparametri strutturali del layout DimensioneDimensione del target del target PosizionePosizione del target del target NumeroNumero di elementi di elementi

sia riscontrabile una differenza sia riscontrabile una differenza significativa nel significativa nel tempo di rispostatempo di risposta

Test –Test – ipotesi ipotesi da verificareda verificare

1.1. DimensioneDimensione: si suppone che all’aumentare della : si suppone che all’aumentare della dimensione del target il tempo di risposta diminuisca.dimensione del target il tempo di risposta diminuisca.

2.2. NumeroNumero: si presume che al diminuire del numero di : si presume che al diminuire del numero di elementi presenti nello scenario il tempo di risposta elementi presenti nello scenario il tempo di risposta diminuisca.diminuisca.

3.3. PosizionePosizione: si prevede che all’avvicinarsi del target alla : si prevede che all’avvicinarsi del target alla posizione nell’angolo in alto a sinistra dello scenario il posizione nell’angolo in alto a sinistra dello scenario il tempo di risposta diminuisca.tempo di risposta diminuisca.

4.4. Distanza relativaDistanza relativa: al diminuire della distanza tra : al diminuire della distanza tra elemento di attenzione precedente e nuovo elemento elemento di attenzione precedente e nuovo elemento target dovrebbe corrispondere una diminuzione del target dovrebbe corrispondere una diminuzione del tempo di risposta. tempo di risposta.

Test – Test – esempiesempi

Test – gruppo di Test – gruppo di controllocontrollo

Test – somministrazioneTest – somministrazione

La sessione di test si compone di La sessione di test si compone di trenta singoli trenta singoli testtest presentati in maniera consecutiva presentati in maniera consecutiva

Campione utenti:Campione utenti: 20 utenti per il test base20 utenti per il test base 8 utenti per il test di controllo8 utenti per il test di controllo

Indicazione fornita agli utenti:Indicazione fornita agli utenti:““Cliccare l’elemento targetCliccare l’elemento target(pulsante ‘prodotti’ nel test base, ‘I’ nel test di controllo) (pulsante ‘prodotti’ nel test base, ‘I’ nel test di controllo)

nella maniera più veloce e precisa possibile” nella maniera più veloce e precisa possibile”

RisultatiRisultati – test base – test baseGrafico gruppo test base

0

1000

2000

3000

4000

5000

6000

test

1te

st2

test

3te

st4

test

5te

st6

test

7te

st8

test

9

test

10

test

11

test

12

test

13

test

14

test

15

test

16

test

17

test

18

test

19

test

20

test

21

test

22

test

23

test

24

test

25

test

26

test

27

test

28

test

29

test

30

utente_1

utente_2

utente_3

utente_4

utente_5

utente_6

utente_7

utente_8

utente_9

utente_10

utente_11

utente_12

utente_13

utente_14

utente_15

utente_16

utente_17

utente_18

utente_19

Media

Risultati – test Risultati – test controllocontrollo

Grafico gruppo test controllo

0

500

1000

1500

2000

2500

test

1te

st2

test

3te

st4

test

5te

st6

test

7te

st8

test

9

test

10

test

11

test

12

test

13

test

14

test

15

test

16

test

17

test

18

test

19

test

20

test

21

test

22

test

23

test

24

test

25

test

26

test

27

test

28

test

29

test

30

utente_1

utente_2

utente_3

utente_4

utente_5

utente_6

utente_7

utente_8

media

Risultati Risultati – – confrontoconfronto test base vs test base vs test controllotest controllo

confronto media tempi test

0

500

1000

1500

2000

2500

3000

test1

test2

test3

test4

test5

test6

test7

test8

test9

test1

0

test1

1

test1

2

test1

3

test1

4

test1

5

test1

6

test1

7

test1

8

test1

9

test2

0

test2

1

test2

2

test2

3

test2

4

test2

5

test2

6

test2

7

test2

8

test2

9

test3

0

tempi medi test basetempi medi test controllo

Risultati – Risultati – livello difficoltàlivello difficoltà test test

Grafico livello difficoltà per test

-0,1

0,1

0,3

0,5

0,7

0,9

1,1

test

1te

st2

test

3te

st4

test

5te

st6

test

7te

st8

test

9

test

10

test

11

test

12

test

13

test

14

test

15

test

16

test

17

test

18

test

19

test

20

test

21

test

22

test

23

test

24

test

25

test

26

test

27

test

28

test

29

test

30

livel

lo d

iffi

colt

à

numero dimensione posizione distanza relativa distanza dal centro media difficoltà media tempi

Normalizzazione della scala dei valori adottati dai Normalizzazione della scala dei valori adottati dai parametri esaminatiparametri esaminati

Risultati Risultati – confronto tempi medi vs – confronto tempi medi vs parametroparametro numeronumero

Confronto tempi medi vs numero

-0,1

0,1

0,3

0,5

0,7

0,9

1,1

test1

test2

test3

test4

test5

test6

test7

test8

test9

test1

0

test1

1

test1

2

test1

3

test1

4

test1

5

test1

6

test1

7

test1

8

test1

9

test2

0

test2

1

test2

2

test2

3

test2

4

test2

5

test2

6

test2

7

test2

8

test2

9

test3

0

numero media test base

Confronto tempi medi vs dimensione

-0,1

0,1

0,3

0,5

0,7

0,9

1,1

test1

test2

test3

test4

test5

test6

test7

test8

test9

test1

0

test1

1

test1

2

test1

3

test1

4

test1

5

test1

6

test1

7

test1

8

test1

9

test2

0

test2

1

test2

2

test2

3

test2

4

test2

5

test2

6

test2

7

test2

8

test2

9

test3

0

dimensione media test base

Risultati Risultati – confronto tempi medi vs – confronto tempi medi vs parametroparametro dimensionedimensione

Confronto tempi medi vs posizione

-0,1

0,1

0,3

0,5

0,7

0,9

1,1

test1

test2

test3

test4

test5

test6

test7

test8

test9

test1

0

test1

1

test1

2

test1

3

test1

4

test1

5

test1

6

test1

7

test1

8

test1

9

test2

0

test2

1

test2

2

test2

3

test2

4

test2

5

test2

6

test2

7

test2

8

test2

9

test3

0

posizione media test base

Risultati Risultati – confronto tempi medi vs – confronto tempi medi vs parametroparametro posizioneposizione

Confronto tempi medi vs distanza relativa

-0,1

0,1

0,3

0,5

0,7

0,9

1,1

test1

test2

test3

test4

test5

test6

test7

test8

test9

test1

0

test1

1

test1

2

test1

3

test1

4

test1

5

test1

6

test1

7

test1

8

test1

9

test2

0

test2

1

test2

2

test2

3

test2

4

test2

5

test2

6

test2

7

test2

8

test2

9

test3

0

distanza relativa media test base

Risultati Risultati – confronto tempi medi vs – confronto tempi medi vs distanza relativadistanza relativa

Prototipi – funzionamento basePrototipi – funzionamento base

Personalizzazione del layout del sitoPersonalizzazione del layout del sito

Modellazione utenteModellazione utente basata sulle prestazioni basata sulle prestazioni cognitive rilevate durante l’interazione con il sitocognitive rilevate durante l’interazione con il sito

Elemento cardine del profilo utente è il Elemento cardine del profilo utente è il tempo medio tempo medio di interazionedi interazione

In base al profilo il sistema procede a In base al profilo il sistema procede a classificare classificare l’utente inl’utente in una delle tre una delle tre categoriecategorie previste previste

A ciascuna categoria è associata uno specifica A ciascuna categoria è associata uno specifica personalizzazione dell’interfacciapersonalizzazione dell’interfaccia

Prototipi - adattamentoPrototipi - adattamento

L’adattività realizzata, basata sulla L’adattività realizzata, basata sulla modifica automatica del layout del sito, si modifica automatica del layout del sito, si propone di soddisfare, attraverso lo stesso propone di soddisfare, attraverso lo stesso sistema, due opposte necessità:sistema, due opposte necessità:

SemplificazioneSemplificazione

Maggiori potenzialitàMaggiori potenzialità

Prototipo Prototipo risultati motore di ricercarisultati motore di ricerca

Prototipo Prototipo galleria immaginigalleria immagini

Prototipo Prototipo tag cloudtag cloud

Una Una tag cloud tag cloud è una è una rappresentazione rappresentazione visivavisiva delle etichette o delle parole-chiave delle etichette o delle parole-chiave usate in un sito web.usate in un sito web.

È concepita come una lista ponderata in È concepita come una lista ponderata in cui la cui la dimensionedimensione attribuita ad una parola attribuita ad una parola è una rappresentazione della sua è una rappresentazione della sua importanzaimportanza..

Prototipo Prototipo photo cloudphoto cloud

Prototipo Prototipo sito e-commercesito e-commerce::home pagehome page

Prototipo sito e-commerce:Prototipo sito e-commerce:pagina pagina elenco prodottielenco prodotti

Prototipo sito e-commerce:Prototipo sito e-commerce:pagina pagina scheda prodottoscheda prodotto

Conclusioni –Conclusioni – possibili possibili applicazioniapplicazioni

Il sistema adattivo proposto trova naturale Il sistema adattivo proposto trova naturale applicazione nel campo dell’applicazione nel campo dell’e-learninge-learning, , oltre che nell’ambito del Brain training e oltre che nell’ambito del Brain training e dell’e-commerce.dell’e-commerce.

In generale può essere applicato a In generale può essere applicato a qualunque sito, purché venga qualunque sito, purché venga adeguatamente adeguatamente testato con gli utenti realitestato con gli utenti reali..

Conclusioni –Conclusioni – possibili possibili sviluppisviluppi

Estensione dell’adattività ad Estensione dell’adattività ad altri parametrialtri parametri che possono modificare il layout di un sitoche possono modificare il layout di un sito

Aggiunta di altri Aggiunta di altri metodi di analisi delle metodi di analisi delle prestazioniprestazioni o dei comportamenti o dei comportamenti

Integrazione con sistemi di profilazione e Integrazione con sistemi di profilazione e modellazione dell’utente standardmodellazione dell’utente standard