FLUPA UX-Day 2012 - Atelier Usage des modalités d'interaction sur smartphones - par J.C. Tarby & X. Le Pallec

Usage des modalités
d’interaction sur
smartphones
t h

Jean Claude
Jean-Claude Tarby Xavier Le Pallec
jean-claude.tarby@univ-lille1.fr xavier.le-pallec@univ-lille1.fr

www.lifl.fr/~tarby www.lifl.fr/~lepallex

Plan

1. Qu'est-ce qu'une modalité ?
Système - Capteur - Modalité

2. Tour d'horizon d'un smartphone actuel
Les capteurs (sur Android) et les modalités qui en découlent

Fini le temps d clavier+souris !
Fi i l t du l i i

3. Contraintes

Qu est ce qu une
Qu'est-ce qu'une
modalité ?
Système interactif, capteur,
périphérique, modalité
périphérique modalité...

Modalité ?

Système interactif
"Un système interactif est un système dont le fonctionnement dépend
d'informations fournies par un environnement externe qu'il ne contrôle pas"
WEGNER P., « Why interaction is more powerful than algorithms» Communications of the ACM,
P algorithms», ACM
vol. 40, n°5, p. 80–91, 1997

Smartphone Ordinateur
de bureau Maison
intelligente

Modalité ?

Capteur
"Organe qui élabore, à partir d'une grandeur physique, une autre grandeur
physique, souvent de nature électrique, utilisable à des fins de mesure ou de
commande."
d "
Dictionnaire Larousse

Capteur Capteurs de Gyroscope
Accéléromètre
CMOS contact d'un
clavier
l i

Modalité ?

Périphérique
"Un objet composé d'un ou plusieurs capteurs, agencé d'une certaine manière
et qui communique avec un système interactif"
Nous : )
:-)

Caméra
Clavier

Kinect Accéléromètre

Modalité ?

Capteurs sur les androphones
Le nombre de capteurs n'a cessé d'augmenter depuis le début d'Android,
mais ce nombre devrait vite stagner...

Android 1.6 et 2.1 Android 2.3.3 Android
4.0

Modalité ?

Modalité
p : périphérique

Modalité
M d li é = <p,r>|<modalité,r>
d li é

r : un système représentationnel, c’est-à-dire un
y p ,
système conventionnel structuré de signes
assurant une fonction de communication
langage pseudo-naturel (micro), squelette d'une personne
(kinect), QRCode (caméra), inclinaison (accéléromètre)

Modalité ?

Pour réserver un vol...

Quelle(s) modalité(s) ?
Sortez une feuille !

Modalité ?


Le classique clavier/souris

<Clavier , langage
naturel>
+
<Souris , formulaire
graphique>

Modalité ?


A la voix (Vocal)
"Je veux partir de Paris le 11 Mai
pour aller à New York"

<Micro , langage naturel>

Modalité ?


QRCode
QRC d
Des carrés blancs et noirs
dans un carré

<Caméra , QRCode>

Modalité ?

Et la multi-modalité ?
Mono système - multi-modal

Vocal

Où trouver "ce" produit ?

QRCode

Modalité ?

Multi système - multi-modal
Ordinateur /
Smartphone / touch pad
accéléromètre

Zoom
Rotation

Modalité ?

Propriétés CARE
p
Complémentarité, Assignation, Redondance, Equivalence

Alternée/Synergique…
é
Composition
Spatiale/temporelle/syntaxique/sémantique

Nombreuses références bibliographiques
Conférences : ICMI + HCI, CHI, UIST, …

Tour d'horizon d un
d horizon d'un
Androphone actuel
Les capteurs
et l modalités qui en dé
t les d lité i découlent
l t

Androphone

Au préalable
Durée des délais entre
événements...
é é

Info: 1 mS (USA) = 1 µs ! (FR)
Soit 1 millionième de seconde
donc 20000 mS (USA)= 20 ms (FR)

Androphone

Au préalable
Des variations...

Suivant les fabricants :
• les capteurs disponibles ne sont pas forcément
les mêmes.
o par exemple, la Galaxy Tab possède en plus
un gyroscope...
• les capteurs n'ont pas les mêmes sensibilités /
résolutions.

Androphone

Aperçu des unités de valeurs
Dimension
Nom Unité Sémantique Values[]
du vecteur
[0] axe x
Accelerometer 3 m/s2 Mesure de l'accélération (gravité incluse) [1] axe y
[2] axe z

[0] vitesse angulaire
autour de x
Mesure la rotation en termes de vitesse autour de [1] vitesse angulaire
Gyroscope 3 Radian/seconde
chaque axe autour de y
[2] vitesse angulaire
autour de z

Light 1 Lux Mesure de la luminosité [0]valeur

[0] axe x
Magnetic_Field
Magnetic Field 3 µTesla
Tesla Mesure d
Mes e du champ magnétique
magnétiq e [1] a e y
axe
[2] axe z

[0] Azimut entre l'axe y et
le nord
[1] Rotation autour de
Orientation 3 Mesure l'angle entre le nord magnétique
l angle
degrés l'axe x (-180,180)
[2] Rotation autour de
l'axe y (-90,90)

Pressure 1 KPascal Mesure la pression [0] valeur

Mesure la distance entre l'appareil et un objet
Proximity 1 mètre [0] valeur
cible

Temperature 1 Celsius Mesure la température [0] valeur

Androphone

Important

Si vous ne voulez pas que vos clients aient de mauvaises surprises, vous
devez déclarer le capteur dans votre AndroidManifest car l'Android Market
analyse votre manifeste et proposera votre application uniquement aux
appareils possédant le capteur que vous avez déclaré.

Androphone

Exemple de Manifest

Androphone

C est
C'est parti !

Androphone

Capteurs et
modalités d'entrée
d entrée

Androphone

1. Mode
portrait/paysage
p p y g

Androphone

Mode portrait/paysage
Capteur "intrinsèque" du téléphone, mais pas un capteur "réel"
Utilise des capteurs réels que nous verrons + loin
4 orientations possibles
• landscape, landscape inversé, portrait, portrait inversé.
• utilisation t i
tili ti typique d capteur orientation
du t i t ti
→ peut se combiner avec le capteur de lumière, de proximité…

Application eMosaïc

Androphone

Mode portrait/paysage
Exemples d'usages :
• passage obligatoire en mode paysage pour certains j
bli t i d t i jeux (A
(Angry Bi d )
Birds)
• visionnage de photos + aisé en mode paysage

Androphone

2.
2 Le tactile

Androphone

Tactile
Un des "capteurs" de base des smartphones
Distingue les "touch", "long touch", "multi-touch"...

touch long touch

→ peut se combiner avec l’accéléromètre, le capteur de lumière…

Androphone

Tactile

zoom en multi-touch, mais pourquoi pas
multi touch,
zoom en touch + inclinaison du
téléphone...


Androphone

3.
3 Capteur de lumière

Androphone

Capteur de lumière
Ce capteur permet de savoir quelle est l'intensité lumineuse
détectée par le téléphone (l'unité est le Lux).
(l unité
Sa sensibilité dépend du fabricant.

→ peut se combiner avec l’accéléromètre,
p ,
le capteur de lumière…

Androphone

Capteur de lumière
Sur l’Acer Liquid, le capteur est en haut à droite de l’écran

Androphone

Capteur de lumière

Des valeurs prédéfinies dans Android :
• LIGHT_NO_MOON
_ _ 0.001
• LIGHT_FULLMOON 0.25
• LIGHT_CLOUDY 100
• LIGHT_SUNRISE
G S RS 400.0
00 0
• LIGHT_OVERCAST 10 000.0 (cloudy)
• LIGHT_SHADE
LIGHT SHADE 20 000 0
000.0
• LIGHT_SUNLIGHT 110 000.0
• LIGHT_SUNLIGHT_MAX
_ _ 120 000.0

Androphone

Capteur de lumière

Androphone

Capteur de lumière
Exemples d'usage

• Classique : Intensité automatique de l'écran

• Pourquoi pas :
o Cacher le capteur de lumière p
p pour créer un nouveau type de clic !
yp
o Détecteur de lumière localisée pour un éclairage personnalisé dans
une maison intelligente
o mais aussi ...

Androphone

Capteur de lumière
Affichage de l'heure silencieux

Affiche l'heure quand on l'illumine
Smartphone pas t
S t h trop près ( d ) et l
è (ondes) t lampe d poche sous l' ill
de h l'oreiller
Pas de bruit/clic

Androphone

Capteur de lumière
Détection d'intrus

modalité d'interaction "autrement"

Androphone

Capteur de lumière
Lire dans son lit et tourner les pages au laser !

(bien) viser le capteur
de lumière pour
tourner une page !

Androphone

4.
4 Capteur de proximité

Androphone

Capteur de proximité
Sa sensibilité/réponse dépend du fabricant.
• valeur en mm cm m
mm, cm,
• parfois 2 seules valeurs (proche ou non)
dans ce cas « capteur qui détecte la présence du corps humain au niveau
de l'écouteur de l'appareil »
→ peut se combiner avec l’accéléromètre, le capteur
de lumière…
d l iè

Il s'agit souvent d un capteur de
s agit d'un
proximité dit "actif"

+

Androphone

Sur l’Acer Liquid, la led IR est à côté du capteur de lumière

Androphone

Exemples d'usage

• Classique : écran éteint quand vous avez le téléphone sur l'oreille, et
allumé sinon.

• Pourquoi p :
q pas
o Le clic du capteur de lumière ;
o ronronthéraphie en se frottant avec son téléphone comme si on
caressait un chat.
o Utilise aussi des capteurs de « mouvement » (cf. + loin )

Androphone

Quand le téléphone sonne,
si on le range alors on refuse l'appel
l appel.

Androphone

Quand le téléphone sonne,
on met la main dessus pour refuser l'appel
l appel.

Androphone

Avec un capteur de proximité non-binaire, en mode lecture,
s approcher zoomer,
s'approcher = zoomer idem pour prendre une photo !

Normal

Agrandir Réduire

Androphone

Exemple

Androphone

Caméra
Une ou deux caméras par téléphone/tablette
Caméra frontale ou dorsale

Exemples :
• photographier et filmer
• lecteur de QRCode
• suivi de regard
• reconnaissance faciale
• traduction de textes (OCR)
• mesure de distance
• mesure de taille
• ...

→ peut se combiner avec l’
bi l’accéléromètre, l capteur d l iè
élé è le de lumière…

Androphone

Caméra

Exemples :
• suivi de regard
eco a ssa ce ac ale
• ...

Androphone

Caméra

Exemples :
• suivi de regard
• ...
→ peut se combiner avec l’accéléromètre, le
capteur de lumière…

Androphone

Caméra

Exemples :
• suivi de regard
• traduction de textes
• ...


Androphone

6.
6 Microphone

Androphone

Microphone
Le capteur le + répandu (sinon pas d'appel téléphonique
possible)

Fortement couplé au vocal, mais peut très bien être utilisé
sans cette modalité.
tt d lité

→ peut se combiner avec l’accéléromètre, le capteur de lumière… sauf pour la
reconnaissance vocale (a priori).

Androphone

Microphone
Exemple d'application : sonomètre

Androphone

Microphone
Exemples d'usages : reconnaissance vocale
• recherche Google
• traduction
• ordre donné au téléphone
p

Androphone

Microphone
Exemples d'usages : reconnaissance vocale
• recherche Google
• traduction
• ordre donné au téléphone

Androphone

7.
7 Accéléromètre

Androphone

Accéléromètre
Principe

Masse M
M

subit une
au repos
accélération

La différence sur D est proportionnelle à l'accélération subie

Androphone

Accéléromètre
Accéléromètre non asservi type capacitif
(classique dans smartphone)

Plaque 1
Pl
P1
isolant
isolant

Plaque 2 P2

au repos subit une
accélération

La capacité du condensateur varie en fonction de la
é
distance de ses 2 plaques

Androphone

Accéléromètre
Accéléromètre non asservi type capacitif

Androphone

Accéléromètre
L'accéléromètre d'un smartphone est composé de 3 accéléromètres :
un par axe (x,y,z)

L'accéléromètre donne le vecteur de force (c’est-à-dire d'accélération)
tridimensionnel (x,y,z) qui s'applique sur l smartphone
t idi i l( ) i ' li le t h

Au repos l'accélération vaut 9,81m/s2
l accélération 9 81m/s

Ax Pour 2 axes
Pour 3 axes

A A= Ax2+Ay2+Az2
Ay A= Ax2+Ay2

Androphone

Accéléromètre
À partir de ce capteur, on obtient deux autres "capteurs" :
p p , p

• l Accélération
l'Accélération Linéaire : fournit l’accélération
l accélération
(x,y,z) épurée de la gravité.
Calcul pas si simple
p p

• la Gravité : fournit la composante gravitationnelle
(x,y,z).

→ peuvent se combiner avec le capteur de lumière, le capteur de distance...

Androphone

Accéléromètre
G
Gravités définies p Android :
par
• GRAVITY_EARTH
• GRAVITY JUPITER
GRAVITY_JUPITER
• GRAVITY_MARS
• GRAVITY MERCURY
GRAVITY_MERCURY
• GRAVITY_MOON
• GRAVITY NEPTUNE
GRAVITY_NEPTUNE

Accéléromètre, Accéléromètre Androphone

linéaire et Gravité
Exemple

= force appliquée

: sa vitesse = la force
appliquée

: son accélération =
la force appliquée
Tester aussi avec la gravité
seule, et l’accélération linéraire
(toujours dans la même
position, par exemple téléphone
posé sur la table)

Rappel :
accéléromètre =
accéléromètre linéaire + gravité


Exemple d'application : le niveau à bulle

téléphone vertical téléphone posé à plat


Exemple d'application: "suivi" des activités d’une personne...
(pourrait être couplé au microphone, etc.)

Androphone

8.
8 Capteur magnétique

Androphone

Capteur magnétique
Ce capteur permet de mesurer le champ magnétique terrestre.
Valeurs (x,y,z) en µ-Tesla
µ Tesla
Sa sensibilité dépend du fabricant.

→ peut se combiner avec le capteur de distance,
l'accéléromètre...

1 cm

Androphone

Capteur magnétique
Basé sur l'effet Hall

Tension de Hall observé !

courant élé i
éléctrique

matériau semi-conducteur
semi conducteur

Androphone

Capteur magnétique
Exemple

Androphone

Capteur magnétique
Exemple

Dans cet exemple, nous
avons ajouté une modalité de
sortie...
sortie
Si vous pointez le Nord
(1ère valeur autour de 0)
le téléphone vibrera,
utile pour un "guidage"
guidage
sans regarder l'écran...

Téléphone posé sur la table… puis tourné d’un quart
de tour à droite

Androphone

Capteur magnétique
Exemple classique : la boussole

Androphone

Capteur magnétique
Autre exemple : détecteur de métaux

Androphone

Capteur magnétique
Exemple de modalité plus évoluée :
sélecteur selon angle / Nord
3

2 4

1 5

Androphone

9.
9 Capteur d'orientation
d orientation

Androphone

Capteur d'orientation
Capteur "virtuel" issu de 2 autres capteurs :
• Accéléromètre
• Capteur magnétique

Ce capteur n'est plus conseillé à partir de la version 2.2
Des fonctions sont fournies pour le calculer à partir des valeurs des 2 précédents
capteurs.

→ peut se combiner avec le capteur de distance, le capteur de lumière...

Androphone

Donne l'orientation (le Nord pour faire simple)
= la boussole du téléphone
téléphone. Z
3 notions associées :
• l'azimut Y
• le pitch
• le roll
X

Androphone

Exemple (solution déconseillée par Google)

Tablette à plat (horizontal) Vertical À plat, sur le côté gauche
-180 < Pitch = -81 < 180 -90 < Roll = 84 < 90

Androphone

Azimut
Z
• Angle des Y par rapport au
Nord Nord
o 0 pour le Nord

• Rotation autour de Z
• De 0 à 360

Androphone

Pitch
• Rotation autour de X
• Négatif quand on oriente le téléphone vers soi
• De -180 à 180
zéro
+90° -90°
°

X

-/+180°

Androphone

Roll
• Rotation autour de Y
• Positif quand rotation vers x négatif(et vice-versa)
• De -90 à +90 Y
zéro°
+90° -90°

Androphone

En utilisant la méthode recommandée par Google, le pitch et le roll
changent de valeurs :
• le pitch varie entre -90 et +90:
o 0 : le téléphone est parallèle au sol, face vers le ciel ou
l'appareil est parallèle au sol, f
l' il t llèl l face vers l sol ;
le l
o +90 : le téléphone est perpendiculaire au sol, tête vers le bas ;
o -90 : le téléphone est perpendiculaire au sol, tête vers le haut.
• le roll varie entre -180 et +180. Quand sa face est vers le haut :
o 0 : le téléphone ne penche pas, il est face au ciel ;
o +90 : le téléphone penche à gauche ;
90
o -90 : le téléphone penche à droite ;
o 180 : le téléphone ne penche pas, il est face contre sol.

Androphone

Exemple (solution recommandée par Google)

Tablette à plat (horizontal) Vertical À plat, sur le côté gauche
-90 < Pitch = -84 < 90
90 84 -180 < Roll = -84 < +180

Androphone

Exemple : Gravitometer
Utilise la solution préconisée par Google

Androphone

Exemple multi-modal combinant l'orientation + la caméra

Androphone

10.
10 Gyroscope

Androphone

Gyroscope
Calcule la vitesse angulaire

La rotation va entraîner un
changement de la capacité du
"transistor"...
transistor ...

source : http://www.electroiq.com/

Androphone

Gyroscope
Principe précédent sur les 3 axes (x,y,z)

Plus précis sur les rotations que l'accéléromètre

Non disponible avant Android 2.3
Seuls quelques téléphones le proposent

→ peut se combiner avec le capteur de proximité, le capteur de lumière…

Androphone

Gyroscope
Exemple (sur Galaxy Tab)

Rotation autour de l'axe X
Tablette posée à p
p plat
vers l'utilisateur
l utilisateur

Androphone

Gyroscope
TouchWiz (S2) > Navigateur Internet (tactile + gyroscope)

Agrandir
Réduire

Androphone

Gyroscope
TouchWiz (S2) > Choix d'un bureau/écran (tactile + gyroscope)

Changement

Androphone

Autres "capteurs" auxquels
capteurs
on ne pense p forcément...
p pas

Androphone

Wifi
Récepteur Wifi :
- Puissance de réception du Wifi,
- Wifi on/off,
- détection d un nouveau réseau, etc.
d'un

→ peut se combiner avec l’accéléromètre le capteur de lumière
l accéléromètre, lumière…

Fonctionne aussi pour le Wifi direct
Exemple d'usage avec deux téléphones : en Android 4
• Téléphone 1 = hotspot wifi
• Téléphone 2 capte la puissance de réception du wifi du téléphone 1 ➔
coopération pour interaction (ex: délimiter une zone, changer le
zone
contenu/débit des infos envoyées…)

Androphone

Wifi
Exemple : Wifi Analyzer

Androphone

GPS
Application JogTracker
De + en + présent sur les smartphones

Connaître sa position (géolocalisation)
Suivre un parcours
S i
Mesurer
o d surfaces rectangulaires ou rondes
des f l d
avec deux points
o des surfaces d autres types par
d'autres
relevé de plusieurs points
→ requiert l activation par l utilisateur
l'activation l'utilisateur
→ peut se combiner avec l’accéléromètre, le capteur de
lumière…

Androphone

GPS
Exemples :
- réalité augmentée (visualiser les baraque à frites les + proches avec Barakafrit)
- localiser un arbre remarquable (BucoLille)
- trouver un itinéraire pour une baraque à frites (Barakafrit)

Application Barakafrit

Application BucoLille

Androphone

13. NFC
(Near Field Communication)

Androphone

NFC
Lecture d'un tag

Exemples :
• Paiement direct
• Information sur un tableau dans un musée

→ requiert l'autorisation de l'utilisateur


Androphone

14.
14 Bluetooth

Androphone

Bluetooth
Peut se faire avec l'autorisation de l'utilisateur
(conseillé) ou sans son autorisation

Découverte de nouveaux périphériques
é é é

Connexion/Déconnexion
Réception de données

Nécessite la permission associée dans le Manifest :
p
<uses-permission
android:name="android.permission.BLUETOOTH" />

Androphone

Capteurs et
C t t
modalités d sortie
d l é de

Androphone

Capteurs et modalités de sortie

N oubliez
N'oubliez pas qu on peut les combiner
qu'on
avec les capteurs et modalités d'entrée

Androphone

Le Son
Son diffusé par le(s) haut(s)-parleur(s)
o mono
o stéréo ==> information perçue
différemment

mais aussi Synthèse Vocale
o simple lecture à haute voix,
o traduction,
o conversion multilingue...

Androphone

LED
Certains téléphones ont une LED qui p
p q peut
s'allumer/s'éteindre/clignoter, mais aussi
c a ge
changer de couleur
couleu

Androphone

17.
17 Le vibreur

Androphone

Vibreur
Un des capteurs de base des smartphones
Vibrations d d é variables
Vib ti de durées i bl
Excellent moyen de fournir du feedback

Nécessite la permission associée dans le Manifest :
p
<uses-permission android:name="android.permission.VIBRATE"/>

→ peut se combiner avec l’accéléromètre, le capteur de
lumière…
Exemple : vibrer quand on pointe le Nord

Androphone

Sans oublier
oublier...

Androphone

Sans oublier
En entrée :
• Capteur de pression
• C
Capteur d'h idi é
d'humidité
• Capteur de température

En sortie :
• l'écran
l écran
soit 21 capteurs déjà disponibles !!!
...et ceux encore à venir !
• écran sensitif (déjà en cours avec perception du relief sous les doigts)
• écran transparent (donc double face sensitive ?)
• tablette braille ?
• sens olfactif ? etc., etc., etc...

Contraintes

Contraintes associées
• Les capteurs consomment de la batterie
o N'activer le GPS / Bluetooth / Wifi dans une
application que lorsque c'est nécessaire

• Problèmes liés au soleil
o adapter la luminosité,
o adapter des layouts différents entre usage
dedans et usage dehors ?

Contraintes

• Perte de lisibilité, par exemple avec l'inclinaison
o changer la luminosité ? la police ?

• Problème du tactile avec la pluie, le froid, les
gants...
gants

• Le multitouch implique souvent l'usage des deux
mains (sauf si on dispose d un support)
d'un

Contraintes

• Problème du vocal avec le vent, en milieu
bruité (centre commercial, maison...)
b ité ( t i l i )
o oblige souvent à regarder l'écran
o prévoir une modalité équivalente

Contraintes

• Difficile d'utiliser certaines modalités en
marchant
h t
o tactile : prévoir des zones réactives assez grosses
o accéléromètre/gyroscope : compenser les mouvements
o adapter automatiquement le layout, la police...?

Conclusion
Les smartphones proposent des capteurs qui offrent des
services de base qui ne demandent qu à être utilisés et
qu'à
combinés pour de nouvelles interactions
soyons inventifs !!!!
y

Attention aux problèmes d'ergonomie
d ergonomie

Le
L smartphone :
h
o un nouveau couteau suisse ?
o notre nouveau compagnon inséparable ?
é
o Attention à la « nomophobie » !

Liens
• http://mathias-seguy.developpez.com/cours/android/android-capteurs
• http://www.touchqode.com/misc/20101025_jsug/20101025_touchqode_sen
sors.pdf

et bien sûr...
• http://developer.android.com

Questions...?

Merci pour votre attention

Jean-Claude Tarby Xavier Le Pallec
jean-claude.tarby@univ-lille1.fr xavier.le-pallec@univ-lille1.fr

www.lifl.fr/~tarby www.lifl.fr/~lepallex

FLUPA UX-Day 2012 - Atelier Usage des modalités d'interaction sur smartphones - par J.C. Tarby & X. Le Pallec

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à FLUPA UX-Day 2012 - Atelier Usage des modalités d'interaction sur smartphones - par J.C. Tarby & X. Le Pallec

Similaire à FLUPA UX-Day 2012 - Atelier Usage des modalités d'interaction sur smartphones - par J.C. Tarby & X. Le Pallec (20)

Plus de Flupa

Plus de Flupa (20)

FLUPA UX-Day 2012 - Atelier Usage des modalités d'interaction sur smartphones - par J.C. Tarby & X. Le Pallec