In the last years, mobile devices with a touch screens display, such as smartphones and tablets, have been a significant increase in sales and interest from the public. These devices have a way of use completely different than the classic personal computers or old cell phones; for example the type of interaction, the way of use, the type of applications, the size of the device and also the position of use are totally different. For this reason, more and more studies that attempt to design methods of interaction and interfaces more user friendly and better suited to these devices. A usability study very carefully during the design phase of a user interface can lead to the success of an application and improve the user experience. It is therefore preferable to study and design innovative interfaces that take advantage of the full potential of these devices, making sure not to replicate the classic interfaces that are used on typical desktop and laptop systems, since little finger friendly. In this study we therefore wanted to design, implement, and finally test the App with interaction modes completely new and innovative. Have been designed two applications using different paradigms of interactions, which were then being tested by some users. The first prototype is the pure replication of an interface for PC, with menus and icons. The second is an innovative user interface with no icons or menu, in this case the user can interact with the application only through gesture. She has also been designed and built also a new zoom mode for virtual maps alongside other already present.

1. Droidcon Italy 2015 | Torino | April 2015 | Paolo Spagnoli GDG MilanoCapgemini Italia

2. • La UI e la UX
• Cronistoria dell’innovazione sul mobile
• Il progetto Hold & Circle
• Considerazioni
• Alternativa Studiata
• Q&A
• Saluti

3. “L'interfaccia utente, o UI, è tutto ciò che si frappone tra
una macchina e un utente, consentendo l'interazione tra i
due.” 1
“Per esperienza d’uso, o UX, si intende ciò che una
persona prova quando utilizza un prodotto, un sistema o
un servizio.” 2
“… le percezioni e le reazioni di un utente che derivano
dall’uso o dall’aspettativa d’uso di un prodotto, sistema o
servizio”. 3
1. Fonte Wikipedia: http://it.wikipedia.org/wiki/Interfaccia_utente
2. Fonte Wikipedia: http://it.wikipedia.org/wiki/User_Experience
3. Definizione ISO 9241-210

4. Le differenze tra PC e
Smartphone/tablet sono
molte, a partire dalla
modalità di interazione
fino alla posizione di
utilizzo..

5. Windows Mobile 5 Windows XP

13. 13

14. 14
Gestures Layer

15. 15
’

16. 16
Sequenza per l’applicazione del filtro
1° Azione: Premere in maniera continua la mappa con un dito.
Reazione dell’Applicazione: • Piccola vibrazione del device
• Mappa opaca di color grigio chiaro
• Suggerimento della prossima azione da compiere
tramite una scritta nella parte superiore dello
schermo
Reazione in caso di Interruzione: • La mappa torna allo stato originario
2° Azione: Disegnare una linea chiusa (cerchio, quadrato,
triangolo ecc...) con un altro dito.
Reazione dell’Applicazione: • Durante le operazioni di disegno saranno mostrate
le tracce del movimento
Reazione in caso di Interruzione o fallimento: • Se la gesture non è stata compresa:
1. Lo schermo rimarrà grigio opaco
2. Sarà mostrata a video una notifica di
errore
3° Azione: Sollevare il dito che tiene ferma la mappa.
Reazione dell’Applicazione : • Se la gesture precedente è stata compresa alla
mappa sarà applicato lo zoom necessario per
effettuare il fit della zona selezionata.
• Verrà mostrata un’impronta digitale nella porzione
di schermo occupata dal dito che fermava la
mappa.
Reazione in caso di Interruzione o fallimento: La mappa torna allo stato originario.
’

17. 17
Android 2.2 o Superiore
Maps API V2
1 GestureOverlayView
1 Gestures Archive Library

18. 18
LINK APK Hold&Circle Demo: http://goo.gl/fErJLq

19. Modalità di zoom N° di interazioni con l’App Fattore di Zoom Massimo
Doppio-Tap 5 +1
Pinch-to-Zoom 2 +4
Hold&Circle 1 +8
I possibili vantaggi che H&C potrebbe apportate sono evidenziati da un
semplice test condotto durante la fase di sviluppo.
Caretterisitche del Device Usato durante i Test:
• Samsung Nexus S (Versione Android Jelly Bean)
• Schermo da 4 pollici
• Smartphone posto in landscape
Obiettivo:
effettuare uno zoom fino ad arrivare ad un livello di zoom pari a 7 partendo
da uno zoom iniziale della mappa pari a 2 (tutto il planisfero è visualizzato)

20. Il test ha previsto la partecipazione di 12 utenti ai quali è stato chiesto
di utilizzare su di una mappa virtuale tre modalità di zoom:
• Doppio tap
• Pinch-to-zoom
• Hold&Circle
Gli utenti hanno dovuto svolgere i seguenti Task :
• Effettuare uno zoom (in e out) nelle varie modalità (task1,2,3)
• Interazione con un Marker (task 4)
• Zoom libero
All’utente non è stata data la possibilità di provare le varie modalità di
zoom, ma sono state solo presentate rapidamente.

21. Utente Hold&Circle tempo effettivo Pinch to zoom tempo effettivo Doppio Tap tempo effettivo
Media 27,7 25,4 31,3
Dev. standard 10,92 9,38 14,85
p-value Hold-Pinch 0,5802
p-value Pinch - Tap 0,2560
p-value Tap - Hold 0,5078
0
50
100
150
Hold&Circle Pinch to zoom Doppio Tap
Non Effettivo
Effettivo
Utente Hold&Circle tempo TASK Pinch to zoom tempo TASK Doppio Tap tempo TASK
Media 113,6 40,4 48,3
Dev. standard 83,59 12,87 17,29
p-value Hold - Pinch 0,0065
p-value Pinch - Tap 0,2166
p-value Tap - Hold 0,0145
* Tutti i dati sono espressi in secondi.

22. Come si può vedere il Doppio tap è la modalità di zoom che ha registrato il tempo
massimo di completamento (effettivo) più alto, mentre Hold&Circle ha registrato il
tempo minimo (effettivo) più basso.

23. 0 0,5 1 1,5 2 2,5 3 3,5 4
Doppio Tap
Pinch-to-zoom
Hold&Circle
"Come hai percepito l’efficacia dei tre tipi di zoom proposti?"
0 0,5 1 1,5 2 2,5 3 3,5 4
Doppio Tap
Pinch-to-zoom
Hold&Circle
"Quanto hai trovato comodo l’utilizzo dei tre tipi di zoom
proposti?"
0 0,5 1 1,5 2 2,5 3 3,5 4
Doppio Tap
Pinch-to-zoom
Hold&Circle
"Quanto spesso pensi di voler utilizzare i seguenti tipi di zoom
proposti?"

24. • È una gestures che non sostituisce le altre
modalità di zoom
• Utile su una mappa
• Modificare la gestures per Smartphone
• Modificare la gestures per
renderla meno “rigida”
• Sperimentare nuove modalità di
zoom out

25. Sequenza per l’applicazione del filtro
1° Azione : Premere in maniera continuativa la mappa
con un dito.
Reazione dell’Applicazione : • Piccola vibrazione del device
• Mappa opaca di color grigio chiaro
• Suggerimento della prossima azione da
compiere
Reazione in caso di Interruzione : • La mappa torna allo stato originario
2° Azione : Disegnare una linea chiusa con lo stesso dito
senza mai staccare il dito dallo schermo.
Reazione dell’Applicazione : • Durante le operazioni di disegno saranno
mostrate le tracce del movimento
Reazione in caso di Interruzione o
fallimento:
• Se la gesture non è stata compresa sarà
mostrata una notifica di errore
3° Azione : Sollevare il dito
Reazione dell’Applicazione : • Se la gesture è stata compresa sarà
ingrandita la porzione di mappa
selezionata.
• Verrà mostrata un’impronta digitale nella
porzione di schermo occupata dal dito.
Reazione in caso di Interruzione o
fallimento:
La mappa torna allo stato originario.

27. ’