1. UNIVERSITA’ DEGLI STUDI MILANO-BICOCCA
Corso di Laurea Magistrale in Teoria e Tecnologia della Comunicazione
Corso di Design dell’Interazione (modulo II)
VMS
(Visual Message System)
Prof.ssa Alessandra Agostini Relazione di:
Elisa Bordoli, matr. 725433
Serena Leggieri, matr. 725019
Anno Accademico 2009-2010

2. 1. Introduzione
L’idea di realizzare questo prototipo è nata leggendo una curiosa e bizzarra
notizia proveniente da Londra: la Safe Text (Fig.1).
Secondo uno studio britannico, il dieci per cento delle persone nel Regno Unito
che scrive messaggi di testo con il proprio cellulare mentre cammina si fa male
sbattendo contro lampioni, cassonetti, panchine, etc.
Da questo studio è partita l’iniziativa Safe Text che ha proposto di rivestire tutti i
lampioni presenti sulle strada di un materiale utile a proteggere dagli urti.
Il progetto pilota è stato avviato nella strada Brick Lane di Londra, strada dove è
stato riscontrato il maggior numero di incidenti di questo tipo.
Fig.1: Safe Text.
I ricercatori hanno rilevato che il 44% dei pedoni è favorevole a quest’iniziativa,
anzi, un buon 27% ha aggiunto che addirittura si potrebbe pensare a realizzare
delle corsie dedicate ai lettori di SMS.
Dai dati di questo studio la percentuale di persone che utilizza gli SMS
camminando è davvero alta, ma perché foderare un’intera città rendendola forse
anche “ridicola”? Non si potrebbe sfruttare la tecnologia per aggirare il
2

3. problema? I telefoni di nuova generazione sono tutti dotati di fotocamera,
strumento che secondo la nostra proposta potrebbe permettere di evitare
l’imbottitura dell’arredo urbano.
1.1 La nostra idea
Soffermandoci in particolare sul prodotto iPhone della Apple, abbiamo pensato
ad un’applicazione che permetta di comporre SMS sfruttando la fotocamera del
dispositivo: anziché scrivere sul classico sfondo bianco, il nostro prototipo
permette di impostare come sfondo del messaggio quello che viene ripreso dalla
fotocamera mentre si cammina.
Inizialmente l’idea è nata solo per gli SMS, successivamente abbiamo pensato
che questa applicazione potesse tornare utile in tutti i casi in cui è richiesto
scrivere del testo: email, facebook…
3

4. 2. Related work
2.1 Analisi del sistema
Prima di iniziare a realizzare in nostro prototipo, abbiamo analizzato il sistema
relativamente alla composizione di SMS e email per cercare di ricreare una
situazione d’uso simile a quella esistente.
2.1.1 SMS
Accedendo alla sezione relativa agli SMS e scegliendo l’opzione che permette di
creare un nuovo messaggio di testo, compare una schermata come quelle
mostrate nelle figure seguenti.
Fig. 2a: SMS iPhone Fig.2b: SMS iPhone
Lo schermo appare diviso in due parti principali: nella parte inferiore compare
una tastiera virtuale che permette di digitare il testo; nella parte superiore sono
presenti il campo per l’inserimento del destinatario (Fig. 2a) e quello occupato
4

5. dal testo del messaggio. La casella di testo si espande automaticamente in base
alla lunghezza del messaggio, come mostrato nella Fig. 2b.
2.1.2 Email
La logica adottata dalla Apple per la creazione di nuovi SMS è la stessa
riproposta per la composizione di un’email (Fig.3).
Fig.3: email iPhone
Anche in questo caso lo schermo è diviso in due sezioni: una per il testo e una
per la tastiera.
2.2 Leggibilità del testo
2.2.1 Scelta del font
La scelta del font è stata guidata da due principali fattori:
• schermo piccolo del dispositivo
• sovrapposizione del testo su un immagine.
5

6. Quindi abbiamo ritenuto necessario ricercare un font ad alta leggibilità e la
nostra scelta è ricaduta sul font Verdana (Fig. 4).
Fig.4: font Verdana
Il font Verdana, disegnato da Matthew Carter, appartiene alla famiglia sans-serif
(senza grazie) diventata lo standard de facto per il testo visualizzato sullo
schermo, dove fornisce una resa pulita e molto leggibile rispetto ai font serif
(graziati).
Verdana è stato pensato per essere leggibile sullo schermo di un computer anche
a basse risoluzioni. L’eliminazione delle grazie, la grande larghezza, le ampie
proporzioni, la spaziatura larga e le distinzioni accentuate per i caratteri simili
sono caratteristiche scelte per aumentare la leggibilità. Il font Verdana, infatti, è
molto più leggibile rispetto ad altri font altrettanto diffusi e della stessa taglia.
6

7. 2.2.2 Esperimento sugli utenti
Abbiamo condotto un esperimento al fine di valutare la leggibilità del font
sovrapposto ad un immagine.
L’esperimento è stato condotto su quattro tipi di immagini scattate attraverso la
fotocamera di un iPhone.
Le immagini selezionate sono quelle riportate in Fig. 5, Fig. 6, Fig. 7 e Fig. 8 e
sono state scelte perché rappresentative delle diverse situazioni d’uso del
prototipo.
L’immagine in Fig. 5 è stata scelta perché presenta sia situazioni d’ombra sia
situazioni di luce, ossia situazioni in cui uno stesso font ha una diversa
leggibilità.
Fig. 5
L’immagine in Fig. 6 è stata selezionata per testare la leggibilità di un font
anche in una location “bucolica”.
7

8. Fig. 6
L’immagine in Fig. 7 rappresenta quella che può essere una classica situazione
d’uso: un marciapiede.
Fig. 7
8

9. Infine l’immagine in Fig. 8 è stata scelta perché presenta molto rumore di
sfondo: ostacoli, diversi oggetti di colore diverso, zone d’ombra.
Fig. 8
Durante lo scatto delle immagini abbiamo inclinato il telefono immaginando di
stare scrivendo il messaggio, in modo da tenere in considerazione anche il
raggio di inquadratura della fotocamera.
Utilizzando Photoshop abbiamo modificato le immagini aggiungendo tre
tipologie di testo a ogni fotografia selezionata:
• bianco
• nero
• bianco con contorno nero.
A questo punto abbiamo modificato la trasparenza delle immagini appena
create, realizzando quindi 6 varianti per ogni immagine:
9

10. 10

11. 11

12. 12

13. 13

14. Per l’esperimento abbiamo realizzato una presentazione in cui abbiamo mostrato
a coppie1 le varie immagini, evitando di confrontare un’immagine con sé stessa.
Abbiamo utilizzato un campione di 5 soggetti, ai quali abbiamo chiesto di
indicarci quale immagine di ogni coppia risultasse più leggibile.
Le risposte dei soggetti sono state inserite in Tabella 1a, 1b, 1c, 1d. La generica
frequenza fj>k indica il numero di volte in cui uno stimolo Sj (in colonna) è stato
preferito allo stimolo Sk (in riga).
Come si vede, per le celle Sj-Sj lungo la diagonale principale non esiste una
frequenza di scelta, in accordo con la decisione di non presentare uno stimolo
con sé stesso.
Tabella 1a: frequenze relative a Fig. 5
1
Il metodo di presentazione a coppie è stato utilizzato prendendo come riferimento il metodo
di giudizi comparativi di Thurstone approfondito nel corso di Psicofisica e Percezione tenuto
dal prof. Natale Stucchi.
14

15. Tabella 1b: frequenze relative a Fig. 6
Tabella 1c: frequenze relative a Fig. 7
15

16. Tabella 1d: frequenze relative a Fig. 8
Il passo successivo è stato quello di calcolare le probabilità di risposta per ogni
stimolo presentato, dividendo le frequenze di scelta per il numero totale dei
confronti (N=5), Tabelle 2a, 2b, 2c, 2d.
Tabella 2a: proporzioni relative a Fig. 5
16

17. Tabella 2b: proporzioni relative a Fig. 6
Tabella 2c: proporzioni relative a Fig. 7
17

18. Tabella 2d: proporzioni relative a Fig. 8
Come è possibile notare, l’ultima riga delle precedenti tabelle contiene la somma
per colonna dei valori delle celle. Questi valori hanno reso possibile il
riordinamento delle matrici secondo l’ordine di preferenza, come mostrato in
Tabella 3a, 3b, 3c, 3d.
Tabella 3a: proporzioni ordinate relative a Fig. 5
18

19. Tabella 3b: proporzioni ordinate relative a Fig. 6
Tabella 3c: proporzioni ordinate relative a Fig. 7
19

20. Tabella 3d: proporzioni ordinate relative a Fig. 8
Per una maggiore chiarezza, riportiamo in scala le preferenze ottenute per i
quattro tipi di foto.
Fig. 13: preferenze relative a Fig. 5
20

21. Fig. 14: preferenze relative a Fig. 6
Fig. 15: preferenze relative a Fig. 7
21

22. Fig. 16: preferenze relative a Fig. 8
Si può notare che le scale non riportano le stesse preferenze per i quattro tipi di
immagini, ciò nonostante evidenziano tutte una preferenza assoluta per
l’immagine caratterizzata dal testo nero e sfondo in trasparenza.
Questo risultato sarà tenuto in considerazione nella fase di prototipazione.
22

23. 3. Il prototipo
3.1 Scenario d’uso e persona
Per persona2 si intende un archetipo di persona coinvolta in un prodotto o in un
servizio; lo scenario, invece, fornisce un modo veloce ed efficace per
immaginare l’utilizzo del design concepito. I protagonisti degli scenari sono le
persona.
Nel nostro progetto abbiamo individuato 3 persona:
• Anna, la casalinga sempre di fretta
• Diego, l’uomo d’affari con la necessità di essere sempre connesso
• Valentina, che scambia sms e messaggi sui social network con i suoi
amici.
2
Persona è un termine coniato dai designer di lingua inglese. Per evitare l’ambiguità con la parola italiana
“persona”, il termine inglese è posto in corsivo.
23

24. Anna (Fig. 17) è sempre di corsa per gestire la casa e i figli e ha poco tempo per
fermarsi e inviare SMS.
Fig. 17: scheda persona Anna
Abbiamo immaginato la situazione in cui di corsa si reca a prendere i figli a
scuola o a fare la spesa e si ricorda di dover inviare un SMS per confermare il
caffè con le amiche, avvisare la baby sitter di un ritardo, chiedere al marito di
svolgere un compito all’uscita dall’ufficio.
24

25. Diego (Fig. 18), invece, è il giovane uomo d’affari che non si distrae un attimo
dal lavoro, ha bisogno di accedere in ogni momento alla sua casella di posta.
Fig. 18: scheda persona Diego
Per Diego abbiamo immaginato lo scenario in cui mentre esce dall’ufficio per la
sua pausa pranzo riceve un’email di lavoro cui deve urgentemente rispondere.
25

26. Infine Valentina (Fig. 19) è l’adolescente che, come tutti i suoi coetanei,
scambia una notevole quantità di messaggi con i suoi amici.
Fig. 19: scheda persona Valentina
Valentina l’abbiamo immaginata mentre è in giro a fare shopping e tramite
messaggi (SMS o Facebook) desidera avvisare le amiche del suo nuovo paio di
scarpe, oppure nella situazione in cui deve avvisare i genitori che non rientrerà a
pranzo perché è in giro con le amiche.
26

27. 3.2 Analisi dei compiti
Partendo dalle necessità di queste persona, abbiamo stilato una lista delle attività
che il design finale del nostro prototipo dovrà supportare.
Le situazioni d’uso del prodotto sono essenzialmente 3:
• SMS
• email
• social network (Facebook, Twitter, etc.)
Gli utenti dovranno essere capaci di:
• accedere all’applicazione
• digitare il testo
• uscire dall’applicazione copiando il testo
• uscire dall’applicazione senza copiare il testo
• annullare l’uscita
27

28. 3.3 Visual Message System (VMS)
3.3.1 Il logo
Il logo che abbiamo progettato per la nostra applicazione è mostrato in Fig. 20.
Fig. 20: logo VMS
Abbiamo ritenuto che la silhouette di un uomo in movimento potesse ben
rappresentare graficamente il concetto del nostro prototipo.
Il colore verde utilizzato come sfondo del nostro logo è lo stesso che la Apple ha
utilizzato per il logo relativo agli SMS. Abbiamo deciso di mantenere lo stesso
colore per creare nella mente dell’utente un’associazione fra applicazioni simili.
3.3.2 Il prototipo
Il nostro prototipo permette di comporre normalmente un messaggio di testo,
ma, anziché farlo su uno sfondo bianco, accende la fotocamera dell’iPhone e fa
scrivere in trasparenza sull’immagine che viene inquadrata, permettendo di
“vedere” attraverso il proprio cellulare.
Grazie all’icona presente sul desktop dell’iPhone (Fig. 21) si accede alla nostra
applicazione VMS.
28

29. Fig. 21: desktop iPhone
La Fig. 22 mostra l’interfaccia della nostra applicazione.
Fig. 22: interfaccia applicazione VMS
29

30. Come le altre applicazioni già presenti nell’iPhone che permettono di scrivere
un messaggio e analizzate nel paragrafo 2.1, anche l’interfaccia di VMS risulta
divisa in due parti. Nella parte inferiore troviamo la solita tastiera virtuale; nella
parte superiore viene visualizzato quanto ripreso dalla fotocamera. In accordo
con i risultati del nostro esperimento (paragrafo 2.2.2), il testo compare su
un’immagine in trasparenza ed è di colore nero.
Una volta conclusa la scrittura del testo, attraverso il tasto in alto a destra
l’utente potrà decidere cosa farne. Comparirà una nuova schermata, come quella
mostrata in Fig. 23.
Fig. 23: menù uscita
Scegliendo il tasto Esci verrà chiusa l’applicazione cancellando quanto digitato.
Il tasto Annulla fa tornare indietro all’applicazione.
Il tasto Copia ed Esci uscirà dall’applicazione, salvando in memoria quanto
digitato. A questo punto l’utente deciderà dove utilizzare il testo, incollandolo
nell’applicazione desiderata.
30

31. Le figure seguenti, mostrano un esempio di utilizzo del testo per l’SMS (Fig.
24a, Fig. 24b), la mail (Fig. 25a, Fig. 25b) e Facebook (Fig. 26).
Fig. 24a: incolla in SMS Fig.24b: testo incollato
Fig. 25a: incolla in email Fig.25b: testo incollato
31

32. Fig. 26: incolla in Facebook
Una volta effettuata l’operazione incolla, il messaggio è pronto per essere
inviato.
32

33. 4. Conclusioni e sviluppi futuri
Nella parte sperimentale che ha preceduto la realizzazione del prototipo, non
abbiamo preso in considerazione immagini notturne. Questa scelta è legata ad un
limite tecnologico dell’iPhone 3G: la fotocamera non possiede flash.
Durante la realizzazione di questo progetto, la Apple ha messo in commercio il
nuovo iPhone 4G dotato di flash per la fotocamera.
Si potrebbe a questo punto pensare di rivedere la parte relativa all’esperimento,
aggiungendo delle immagini notturne. In questo modo si potrebbe verificare se
la variante del testo nero su immagine in trasparenza risulta ancora la più
leggibile o se, con l’inserimento di nuove immagini, i risultati dell’esperimento
portano a soluzioni diverse.
33