Creazione di un applicativo web di crowdsourcing per la raccolta di dati utili alla ricerca sul bilanciamento del bianco condotta dal laboratorio Imaging and Vision dell'Università degli Studi di Milano - Bicocca. Si tratta di un applicativo che richiede agli utenti lo svolgimento di specifiche azioni (annotazione, confronto, trasformazione) su immagini a loro proposte. I dati raccolti vengono memorizzati ed elaborati in fase successiva per estrarre considerazioni rilevanti. Lo sviluppo dell'applicativo ha attraversato diverse fasi: concept, wireframe, design system, struttura, sviluppo vero e proprio, valutazione di usabilità e, infine, infografiche per una corretta interpretazione dei risultati. ​

1. DESIGN E SVILUPPO DI UN APPLICATIVO DI
CROWDSOURCING PER IL BILANCIAMENTO
MANUALE DEL BIANCO
Relatore: prof. Raimondo Schettini
Correlatore: dott. Marco Buzzelli
Enrica Bevilacqua
Matr. 839595
16 ottobre 2020
Anno Accademico 2019/2020
Dipartimento di Informatica, Sistemistica e Comunicazione,
Corso di Laurea Magistrale in:
Teoria e Tecnologia della Comunicazione
Laboratorio Imaging and Vision,
Università degli Studi di Milano - Bicocca

2. WHITE BALANCING - 1
1 / 18
Il bilanciamento del bianco (o white balancing), in fotografia, è un processo molto importante
che ha come obiettivo quello di migliorare l'immagine
Le moderne fotocamere hanno difficoltà a determinare con esattezza le
caratteristiche cromatiche della luce che caratterizza una scena
Migliorare i parametri e la strumentazione delle fotocamere per emulare il processo
che avviene nel cervello umano è oggetto di continua ricerca

3. WHITE BALANCING -2
Fase di acquisizione
Modalità automatiche o semi-automatiche
Fase di post-produzione
Predefiniti, tinta e temperatura, selettori
Tungsteno
Fluorescente
Soleggiato
Nuvoloso
Ombra
Flash
Colore non
elaborato
Colore “naturale”
Colore “white
balanced”
Processo di regolazione effettuato dalla fotocamera in modo che i colori dell’immagine siano visti in modo
naturale, senza essere influenzati dal colore della fonte di luce della scena
Martian Terrain - NASA/JPL-Caltech/MSSS - PIA16800
2 / 18

4. OBIETTIVI
Raccolta dati
Strumento per
acquisire dati utili alla
ricerca
Diffusione
In grado di raggiungere
un elevato numero di
utenti
Usabilità
Utilizzabile da ciascun
utente target e fruibile
su ogni dispositivo
Analisi dati
Permettere un’efficace
analisi finale dei dati
raccolti
3 / 18

5. La fase iniziale di progettazione
Benchmarking, User Personas, Wireframe, Style tile, Struttura
02
4 / 18

6. 01. BENCHMARKING
PROGETTAZIONE INIZIALE - 1
02. USER PERSONAS
03. WIREFRAME
04. STYLE TILE
05. STRUTTURA
Quali sono i competitor migliori e quali aspetti ne determinano l'eccellenza
Photopea (2013)
Visite totali: 5,5 M * Caratteristiche
Aspetti principali
Punti di forza
Tratti distintivi
Estetica
Colore, tipografia,
layout
Analytics
Durata permanenza,
Stati di provenienza,
sorgenti di traffico
Pixlr (2008)
Visite totali: 12.08 M *
Fotor (2012)
Visite totali: 3,26 M *
Polarr (2014)
Visite totali: 80,8 K *
* SimilarWeb, giugno 2020
5 / 18

7. 01. BENCHMARKING
02. USER PERSONAS
03. WIREFRAME
04. STYLE TILE
05. STRUTTURA
Personaggi fittizi rappresentati i futuri possibili utilizzatori
PROGETTAZIONE INIZIALE - 2
5 / 18

8. Architettura e organizzazione spaziale dei contenuti
01. BENCHMARKING
02. USER PERSONAS
03. WIREFRAME
04. STYLE TILE
05. STRUTTURA
PROGETTAZIONE INIZIALE - 3
5 / 18

9. Esplorazione dei
colori, della
tipografia e degli
elementi basilari
01. BENCHMARKING
02. USER PERSONAS
03. WIREFRAME
04. STYLE TILE
05. STRUTTURA
PROGETTAZIONE INIZIALE - 4
5 / 18

10. 01. BENCHMARKING
02. USER PERSONAS
03. WIREFRAME
04. STYLE TILE
05. STRUTTURA
Forma gerarchica che assumono i collegamenti ipertestuali
PROGETTAZIONE INIZIALE - 5
5 / 18

11. 03
Il sito web: frontend e backend
“Application for White Balancing”
6 / 18

12. IL SITO WEB - PAGINE INIZIALI
Username, età, Stato di
provenienza, competenze in
fotografia, password
01. HOMEPAGE
Chi siamo, cosa facciamo, cosa
puoi fare tu, premio finale
02. REGISTRAZIONE E LOGIN
Calibrazione Gamma, Contrasto,
Nero e Bianco
03. TEST DI CALIBRAZIONE
7 / 18

13. Username, età, Stato di
provenienza, competenze in
fotografia, password
Chi siamo, cosa facciamo, cosa
puoi fare tu, premio finale
Calibrazione Gamma, Contrasto,
Nero e Bianco
02. REGISTRAZIONE E LOGIN
01. HOMEPAGE
03. TEST DI CALIBRAZIONE
IL SITO WEB - PAGINE INIZIALI
7 / 18

14. Username, età, Stato di
provenienza, competenze in
fotografia, password
Chi siamo, cosa facciamo, cosa
puoi fare tu, premio finale
Calibrazione Gamma, Contrasto,
Nero e Bianco
02. REGISTRAZIONE E LOGIN
01. HOMEPAGE
03. TEST DI CALIBRAZIONE
IL SITO WEB - PAGINE INIZIALI
7 / 18

15. Tool Annotation
Evidenziare il punto bianco delle
immagini con un rettangolo
Tool Comparison
Scegliere quale delle due immagini
proposte rispecchia meglio la richiesta
Tool Transformation
Modificare l'immagine con speciali
cursori per ottenere il risultato voluto
18 pacchetti
225 immagini
32 pacchetti
360 coppie di
immagini
40 pacchetti
700 immagini
4 modalità di
pre-elaborazione:
● Ambiguous (A)
● Evident (E)
● Intrinsic (I)
● Nocast (N)
IL SITO WEB - 3 STRUMENTI
8 / 18

16. IL TOOL ANNOTATION
03. TIPOLOGIA E
SALVATAGGIO DATI
02. MODALITA’ DI
INTERAZIONE
01. LAYOUT
9 / 18

17. IL TOOL ANNOTATION
Scalable Rect
Free Rect
03. TIPOLOGIA E
SALVATAGGIO DATI
02. MODALITA’ DI
INTERAZIONE
01. LAYOUT
Annotazione Immagine risultante
Annotazione Immagine risultante
9 / 18

18. IL TOOL ANNOTATION
annotation_freerect & annotation_scalablerect
Nome campo
id
id_user
username
image
image_width
image_height
linearized
width
height
translate_x
translate_y
r_value
g_value
b_value
Descrizione
identificativo univoco della riga (auto-increment)
identificativo univoco dell’utente
nome inserito in fase di registrazione dall’utente
identificativo univoco dell’immagine annotata
larghezza dell’immagine
altezza dell’immagine
posizione dello switch chiara/scura
larghezza del rettangolo/quadrato tracciato
altezza del rettangolo/quadrato tracciato
scostamento orizzontale (angolo alto sinistro)
scostamento verticale (angolo alto sinistro)
media canale Red dell’area selezionata
media canale Green dell’area selezionata
media canale Blue dell’area selezionata
03. TIPOLOGIA E
SALVATAGGIO DATI
02. MODALITA’ DI
INTERAZIONE
01. LAYOUT
9 / 18

19. IL TOOL COMPARISON
03. TIPOLOGIA E
SALVATAGGIO DATI
02. MODALITA’ DI
INTERAZIONE
01. LAYOUT
10 / 18

20. IL TOOL COMPARISON
Esempio: scelta dell’immagine sulla sinistra (Image 1)
03. TIPOLOGIA E
SALVATAGGIO DATI
02. MODALITA’ DI
INTERAZIONE
01. LAYOUT
10 / 18

21. IL TOOL COMPARISON
comparison
Nome campo
id
id_user
username
images
chosen_image
Descrizione
identificativo univoco della riga (auto-increment)
identificativo univoco dell’utente
nome inserito in fase di registrazione dall’utente
identificativo univoco dell’immagine annotata
identificativo univoco dell’immagine scelta
03. TIPOLOGIA E
SALVATAGGIO DATI
02. MODALITA’ DI
INTERAZIONE
01. LAYOUT
10 / 18

22. IL TOOL TRANSFORMATION
03. TIPOLOGIA E
SALVATAGGIO DATI
02. MODALITA’ DI
INTERAZIONE
01. LAYOUT
11 / 18

23. IL TOOL TRANSFORMATION
Slider RGB
3 slider in un range [0.01,
6.01] che modificano,
rispettivamente, la
componente R, G e B
dell’immagine
Slider TT
2 slider. Il primo agisce
sulla tinta dell’immagine,
con un range [0.8, 1.5].
Il secondo sulla
temperatura, con un
range [3000, 15000]03. TIPOLOGIA E
SALVATAGGIO DATI
02. MODALITA’ DI
INTERAZIONE
01. LAYOUT
11 / 18

24. IL TOOL TRANSFORMATION
transformation_rgb & transformation_tt
Nome campo
id
id_user
username
image
r_value
g_value
B_value
tint_value
temperature_value
pixel_r
pixel_g
pixel_b
Descrizione
identificativo univoco della riga (auto-increment)
identificativo univoco dell’utente
nome inserito in fase di registrazione dall’utente
identificativo univoco dell’immagine annotata
valore slider Red
valore slider Green
valore slider Blue
valore slider Tint
valore slider Temperature
Canale Red del pixel selezionato sull’immagine TT
Canale Green del pixel selezionato sull’immagine TT
Canale Blue del pixel selezionato sull’immagine TT
transformation_rgb
transformation_tt
03. TIPOLOGIA E
SALVATAGGIO DATI
02. MODALITA’ DI
INTERAZIONE
01. LAYOUT
11 / 18

25. IL SITO WEB - PREMIO FINALE
Completamento di tutti i task
richiesti dai 3 tool
Preciso
“Sei un pensatore e un osservatore
accurato e fiducioso, sai esattamente
cosa ti piace e cosa vuoi ottenere …”
1
Calcolo del punteggio finale
sulla base degli input utente
● Dimensioni rettangolo
tool Annotation
● Scostamento slider RGB
● Colori slider TT
2
Individuazione del
“Profilo Osservatore”3
Naturale
“Sei un osservatore molto stabile e
calmo e ti piace tutto ciò che richiama
la natura e la sua bellezza … ”
Fantasioso
“Sei una persona aperta a nuove
esperienze, ti piace immaginare e
sognare ad occhi aperti … ”
12 / 18

26. 04
La valutazione dell’interfaccia
Valutazione cooperativa e questionario SUS
13 / 18

27. VALUTAZIONE COOPERATIVA
02. QUESTIONARIO
SUS
01. VALUTAZIONE
COOPERATIVA
● 3 interviste pilota + 5 interviste effettive
● Intervista qualitativa semi-strutturata
● Traccia di intervista con tipologia di dati raccolti
12
Problemi principali
rilevati
12
Soluzioni proposte /
implementate
Individuazioni della
numerosità ottimale
per ciascun tool
14 / 18

28. QUESTIONARIO SUS
● 20 potenziali utenti futuri
● 10 domande con scala Likert [1, 5]
● Semplice comprensione e facile
somministrazione
02. QUESTIONARIO
SUS
01. VALUTAZIONE
COOPERATIVA
Jeff Sauro, “5 ways to interpret a SUS score"
72,25
Punteggio:
14 / 18

29. 05
L’interpretazione dei risultati
Semplici infografiche per la lettura dei dati
15 / 18

30. INFOGRAFICHE RIASSUNTIVE - 1
Width
Height Identificativo
univoco
Legenda
% stato
switch
Immagine in analisi
03. TRANSFORMATION
02. COMPARISON
01. ANNOTATION
16 / 18

31. INFOGRAFICHE RIASSUNTIVE - 2
Versione _1
Versione _2
% scelta
Algoritmo
utilizzato
Identificativo
univoco
Utenti
versione
_1
Utenti
versione
_2
03. TRANSFORMATION
02. COMPARISON
01. ANNOTATION
16 / 18

32. INFOGRAFICHE RIASSUNTIVE - 3
Immagine
originale
Immagine con
valori medi RGB
Immagine con
valori medi TT
Valori
medi
RGB
Valori
medi
TT
03. TRANSFORMATION
02. COMPARISON
01. ANNOTATION
16 / 18

33. 06
Conclusioni e sviluppi futuri
17 / 18

34. CONCLUSIONI E SVILUPPI FUTURI
Accessibilità
● Versione per ipovedenti
● Navigabilità tramite tastiera
● Sistema multilingua
1
2
3
Tool Annotation
● Versione mobile
● Breve tutorial iniziale
Tool Comparison
● Aumentare numero di immagini da confrontare
● Domanda dinamica
● Breve tutorial iniziale
4
Tool Transformation
● Aumentare le possibilità di interazione
● Slider dinamici
● Breve tutorial iniziale
Questo lavoro è stato caratterizzato
da un processo di ideazione,
sviluppo, valutazione e successiva
analisi dei risultati di un applicativo
web
Lo strumento realizzato permette la
raccolta di dati soggettivi sul white
balancing
Attraverso il modello di
crowdsourcing, offre la possibilità di
raggiungere risultati e considerazioni
interessanti che potranno essere
offerti dagli utenti futuri
18 / 18

35. Grazie per l’attenzione.