STUDIO SULLA GRAPHIC USER INTERFACE (GUI) DI PULSANTI

INTERATTIVI

RELAZIONE DI PSICOFISICA E PERCEZIONE

GAIA BRIZI

STEFANO BOZZI

GABRIELE RUSCELLI

OBIETTIVO PROGETTUALE

Il seguente progetto ha lo scopo di indagare come la grafica di un elemento, in questo caso di pulsanti interattivi, influisca sulla affordance e sulla cliccabilità degli stessi e se vi siano discordanze nelle preferenze fra maschi e femmine.

INTRODUZIONE

La grafica e il web design sono mutevoli, in continua evoluzione

con la tecnologia che accompagnano, per questo motivo è difficile

stabilire uno stile che rimarrà valido negli anni.

• Dal 2013 stile grafico «flat»

Esempi Glossy VS Flat

PROCEDURE SPERIMENTALI

- Sono stati progettati e creati quattro tipi di pulsanti interattivi avvalendosi di due delle tecniche grafiche più in voga nel web design: flat e glossy

- Successivamente sono stati ideati tre blocchi di schermate per contestualizzare l’inserimento dei pulsanti

• Sei sicuro di voler eliminare il file tesi.doc?• Sei sicuro di voler salvare le modifiche al file tesi.doc?• Sei sicuro di voler sovrascrivere il file F24.doc?

- I tre blocchi sono stati sottoposti a 18 soggetti, 9 di sesso femminile e 9 di sesso maschile ed i dati sono stati analizzati per verificare gli obiettivi progettuali

PULSANTI

SCHERMATE

STIMOLI PRESENTATI

Per procedere con l’esperimento, sono stati presentati gli stimoli

combinati fra loro formando i sei diversi abbinamenti, secondo il

metodo del confronto per coppie di Thurstone, ottenendo i seguenti

accoppiamenti:

• Flat chiaro – Flat scuro

• Glossy chiaro – Glossy scuro

• Flat chiaro – Glossy chiaro

• Flat scuro – Glossy scuro

• Flat scuro – Glossy chiaro

• Flat chiaro – Glossy scuro

Flat Chiaro Flat Scuro Glossy Chiaro Glossy ScuroFlat Chiaro 9,00 7,00 4,33 5,67Flat Scuro 11,00 9,00 4,00 5,00

Glossy Chiaro 13,67 14,00 9,00 7,33Glossy Scuro 12,33 13,00 10,67 9,00

Media frequenze assolute - generale

Frequenze assolute delle risposte date da femmine e maschi nei tre diversi blocchi

Media frequenze relative - generale

Frequenze relative delle risposte date da femmine e maschi nei tre diversi blocchi

Flat Chiaro Flat Scuro Glossy Chiaro Glossy ScuroFlat Chiaro 0,50 0,39 0,24 0,31Flat Scuro 0,61 0,50 0,22 0,28

Glossy Chiaro 0,76 0,78 0,50 0,41Glossy Scuro 0,69 0,72 0,59 0,50

Flat Chiaro Flat Scuro Glossy Chiaro Glossy ScuroFlat Chiaro 0,00 -0,29 -0,74 -0,49Flat Scuro 0,29 0,00 -0,88 -0,61

Glossy Chiaro 0,74 0,88 0,00 -0,24Glossy Scuro 0,49 0,61 0,24 0,00

Media 0,38 0,30 -0,35 -0,33

Media trasformazione probit (punti Z) - generale

Trasformazione Probit (punti Z) delle risposte date da femmine e maschi nei tre diversi blocchi

Trasformazione grafica 10 8,9 0 0,3

Grafico 1 - Trasformazione grafica delle medie totali di tutti i soggetti

Flat Chiaro Flat Scuro Glossy Chiaro Glossy ScuroFlat Chiaro 4,50 3,67 2,33 3,67Flat Scuro 5,33 4,50 2,33 2,67

Glossy Chiaro 6,67 6,67 4,50 4,67Glossy Scuro 5,33 6,33 4,33 4,50

Media frequenze assolute - femmine

Frequenze assolute delle risposte date dai soggetti di sesso femminile nei tre diversi blocchi

Media frequenze relative – femmine

Frequenze assolute delle risposte date dai soggetti di sesso femminile nei tre diversi blocchi

Flat Chiaro Flat Scuro Glossy Chiaro Glossy ScuroFlat Chiaro 0,50 0,41 0,26 0,41Flat Scuro 0,59 0,50 0,26 0,30

Glossy Chiaro 0,74 0,74 0,50 0,52Glossy Scuro 0,59 0,70 0,48 0,50

Media trasformazione probit (punti Z) - femmine

Trasformazione Probit (punti Z) delle risposte date dai soggetti di sesso femminile nei tre diversi blocchi

Flat Chiaro Flat Scuro Glossy Chiaro Glossy ScuroFlat Chiaro 0,00 -0,24 -0,65 -0,24Flat Scuro 0,24 0,00 -0,71 -0,54

Glossy Chiaro 0,65 0,71 0,00 0,05Glossy Scuro 0,24 0,54 -0,05 0,00

Media 0,28 0,25 -0,35 -0,18

Trasformazione grafica 10 5,8 0 2,7

Grafico 2 - Trasformazione grafica delle medie totali dei soggetti di sesso femminile

Media frequenze assolute - maschi

Frequenze assolute delle risposte date dai soggetti di sesso maschile nei tre diversi blocchi

Flat Chiaro Flat Scuro Glossy Chiaro Glossy ScuroFlat Chiaro 4,50 3,33 2,00 2,00Flat Scuro 5,67 4,50 2,00 2,33

Glossy Chiaro 7,00 7,00 4,50 2,67Glossy Scuro 7,00 6,67 6,33 4,50

Media frequenze relative - maschi

Frequenze relative delle risposte date dai soggetti di sesso maschile nei tre diversi blocchi

Flat Chiaro Flat Scuro Glossy Chiaro Glossy ScuroFlat Chiaro 0,50 0,37 0,22 0,22Flat Scuro 0,63 0,50 0,22 0,26

Glossy Chiaro 0,78 0,78 0,50 0,30Glossy Scuro 0,78 0,74 0,70 0,50

Media trasformazione probit (punti Z) - maschi

Trasformazione Probit (punti Z) delle risposte date dai soggetti di sesso maschile nei tre diversi blocchi

Flat Chiaro Flat Scuro Glossy Chiaro Glossy ScuroFlat Chiaro 0,00 -0,37 -0,86 -0,81Flat Scuro 0,37 0,00 -0,81 -0,71

Glossy Chiaro 0,86 0,81 0,00 -0,54Glossy Scuro 0,81 0,71 0,54 0,00

Media 0,51 0,29 -0,28 -0,51

Trasformazione grafica 10 7,8 2,2 0

Grafico 3 - Trasformazione grafica delle medie totali dei soggetti di sesso maschile

COMPARAZIONE FEMMINE - MASCHI

Grafico 4 - Grafico 1 - Comparazione delle trasformazioni grafiche dei soggetti di sesso femminile e maschile

CONCLUSIONI

I risultati ottenuti hanno complessivamente confermato l’ipotesi di partenza

e la tendenza grafica del momento, ovvero che la preferenza di maschi e

femmine ricade uniformemente sul pulsante flat. All’opposto, invece, il

bottone che è risultato meno cliccabile è quello “glossy chiaro”.

La grafica flat risulta la migliore, per la precisione due volte su tre è stato

scelto il bottone “flat chiaro” e la restante volta “flat scuro”, questo a

conferma di come sia la grafica ad influire sulle scelte, più che il colore usato.

GRAZIE PER L’ATTENZIONE