Studio di gestures innovative per l’interazione con app per dispositivi mobili droidcon 2015

27
Droidcon Italy 2015 | Torino | April 2015 | Paolo Spagnoli GDG Milano Capgemini Italia

Transcript of Studio di gestures innovative per l’interazione con app per dispositivi mobili droidcon 2015

Page 1: Studio di gestures innovative per l’interazione con app per dispositivi mobili   droidcon 2015

Droidcon Italy 2015 | Torino | April 2015 | Paolo Spagnoli GDG Milano Capgemini Italia

Page 2: Studio di gestures innovative per l’interazione con app per dispositivi mobili   droidcon 2015

• La UI e la UX

• Cronistoria dell’innovazione sul mobile

• Il progetto Hold & Circle

• Considerazioni

• Alternativa Studiata

• Q&A

• Saluti

Page 3: Studio di gestures innovative per l’interazione con app per dispositivi mobili   droidcon 2015

“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

Page 4: Studio di gestures innovative per l’interazione con app per dispositivi mobili   droidcon 2015

Le differenze tra PC e Smartphone/tablet sono

molte, a partire dalla modalità di interazione

fino alla posizione di utilizzo..

Page 5: Studio di gestures innovative per l’interazione con app per dispositivi mobili   droidcon 2015

Windows Mobile 5 Windows XP

Page 6: Studio di gestures innovative per l’interazione con app per dispositivi mobili   droidcon 2015
Page 7: Studio di gestures innovative per l’interazione con app per dispositivi mobili   droidcon 2015
Page 8: Studio di gestures innovative per l’interazione con app per dispositivi mobili   droidcon 2015
Page 9: Studio di gestures innovative per l’interazione con app per dispositivi mobili   droidcon 2015
Page 10: Studio di gestures innovative per l’interazione con app per dispositivi mobili   droidcon 2015
Page 11: Studio di gestures innovative per l’interazione con app per dispositivi mobili   droidcon 2015
Page 12: Studio di gestures innovative per l’interazione con app per dispositivi mobili   droidcon 2015
Page 13: Studio di gestures innovative per l’interazione con app per dispositivi mobili   droidcon 2015

13

Page 14: Studio di gestures innovative per l’interazione con app per dispositivi mobili   droidcon 2015

14

Gestures Layer

Page 15: Studio di gestures innovative per l’interazione con app per dispositivi mobili   droidcon 2015

15

Page 16: Studio di gestures innovative per l’interazione con app per dispositivi mobili   droidcon 2015

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.

Page 17: Studio di gestures innovative per l’interazione con app per dispositivi mobili   droidcon 2015

17

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

Page 18: Studio di gestures innovative per l’interazione con app per dispositivi mobili   droidcon 2015

18

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

Page 19: Studio di gestures innovative per l’interazione con app per dispositivi mobili   droidcon 2015

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)

Page 20: Studio di gestures innovative per l’interazione con app per dispositivi mobili   droidcon 2015

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.

Page 21: Studio di gestures innovative per l’interazione con app per dispositivi mobili   droidcon 2015

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.

Page 22: Studio di gestures innovative per l’interazione con app per dispositivi mobili   droidcon 2015

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.

Page 23: Studio di gestures innovative per l’interazione con app per dispositivi mobili   droidcon 2015

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?"

Page 24: Studio di gestures innovative per l’interazione con app per dispositivi mobili   droidcon 2015

• È 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

Page 25: Studio di gestures innovative per l’interazione con app per dispositivi mobili   droidcon 2015

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.

Page 26: Studio di gestures innovative per l’interazione con app per dispositivi mobili   droidcon 2015
Page 27: Studio di gestures innovative per l’interazione con app per dispositivi mobili   droidcon 2015