Visualisation et Interaction sur dispositifs mobiles

Visualisation et Interaction sur dispositifs mobiles
Anne Roudaut
Eric Lecolinet
TELECOM ParisTech - CNRS LTCI UMR 5141
46, rue Barrault75013, Paris, France
[email protected]
RESUME
Le foisonnement des dispositifs mobiles dans nos vies
soulève de nombreux défis : Petits écrans, mode d’entrée
différents et limités, et utilisation en condition de mobilité sont les nouveaux challenges de la conception sur mobiles. Les règles d’interaction classiques doivent donc
s’adapter et se renouveler pour d’autres contextes
d’usage. Ce travail de thèse vise à définir les règles sousjacentes à la création et au développement de techniques
d’interaction sur dispositifs mobiles. Cet article en présente la démarche en trois volets : Caractérisation de
l’état de l’art, création de nouvelles techniques et réalisation.
MOTS
CLES
:
Dispositifs
mobiles,
techniques
d’interaction.
ABSTRACT
Mobile devices are omnipresent in our everyday lives,
and their forms raise new challenges for the designers:
Small screens, different and limited set of input devices,
and the use in mobility conditions. The traditional rules
of interaction must therefore be adapted for other contexts. This PhD work intends to define the rules for the
creation and development of interaction techniques on
mobile devices. This article presents the three steps of
my research: the characterization of the state of the art,
the creation of new interaction techniques and their development.
CATEGORIES AND SUBJECT DESCRIPTORS: H.5.2.
User Interfaces: Input Devices and Strategies, Interaction
Styles, Screen Design; D.2.2 User Interfaces
INTRODUCTION
Les dispositifs mobiles sont aujourd’hui omniprésents
dans nos vies quotidiennes. Petits, transportables et avec
des capacités (de puissance et de stockage) qui rejoignent de plus en plus celles des ordinateurs de bureau,
les dispositifs mobiles sont souvent assimilés à des ordinateurs miniaturisés. Cependant leur utilisation est soumise à des contraintes différentes : petits écrans tactiles,
et modes d'entrée différents et limités (stylet, clavier réduit ou inexistant). De plus ils s’utilisent en conditions
de mobilité (lorsque l’utilisateur se déplace, par exemple). Ainsi, un dispositif mobile se tient généralement à
une main, en interagissant au pouce [4, 6]. Dès lors, les
interfaces qui reposaient sur l’utilisation du clavier et de
la souris, ne correspondent plus à ce nouveau contexte
d’usage et doivent être repensées pour s’adapter au cas
des dispositifs mobiles.
Plusieurs travaux ont été proposés récemment. Certains
ciblent la visualisation d’information sur petits écran [1,
3], alors que d’autres traitent de l’interaction sur écrans
tactiles [5, 10], en particulier pour l’entrée de texte [9].
Cependant de telles techniques sont créées au cas par cas
et il n’existe pas de réel guide de style régissant le développement de ces techniques. En particulier de nombreuses applications sont, aujourd’hui encore, construites sur
les styles d’interaction des ordinateurs de bureau. Quelles sont les capacités interactives des dispositifs mobiles,
et comment interagir avec de telles ressources ? Ce sont
les questions soulevées dans ce travail de thèse.
Cet article présente trois volets complémentaires qui
s’articulent autour de ce sujet. Le premier volet consiste
à caractériser l’état de l’art et à mettre en évidence les
problématiques. De cette caractérisation nous proposons
de nouvelles techniques d’interaction. Enfin, un ensemble d’outils sera proposé pour aider à la création et à la
conception de nouvelles techniques d’interaction.
CARACTERISATION DE LʼETAT DE LʼART
Afin de mettre en évidence les principaux problèmes
rencontrés lors de l’utilisation d’un mobile, ce travail a
suivi une approche descendante. J’ai tout d’abord proposé une taxonomie [7] basée sur la définition de modalité
en entrée et en sortie. Cette taxonomie a permis de classer les techniques d’interaction et de visualisation existantes, mais surtout de mettre à jour des problématiques
intéressantes. En particulier, étant donné le nombre
d’informations à présenter à l’utilisateur, les interfaces se
composent majoritairement de petits objets graphiques.
Or, peu d’études traitent de la manipulation de petites cibles en condition de mobilité (en particulier aucune ne
reflète vraiment la réalité d’utilisation des mobiles, qui
s’utilisent préférentiellement à une main). Je me suis
donc penché sur le problème du pointage au pouce sur
écrans tactiles, qui à ce jour n’est pas totalement résolu.
Nous distinguons trois contraintes lors de l’interaction au
pouce :
•
•
•
L’occlusion : le pouce cache une partie de
l’interface et des cibles
L’accès au bords : les bords sont difficilement accessibles à cause de la morphologie de la main. De
plus les bords de l’écran peuvent être épais et gêner
le positionnement du pouce sur les bords
La précision : Le pouce étant plus large et plus instable qu’un stylet il est plus difficile de pointer précisément. De plus, il est difficile pour l’utilisateur de
prédire la position du pointeur sous son doigt
De ces travaux [8], deux constats apparaissent : Les solutions existantes sont basées sur le principe du « tap-draglift » qui permet de manipuler un curseur avec le pouce
pour améliorer la précision de la sélection (la sélection
par tap direct étant trop imprécise). Deuxièmement, ces
techniques ne solutionnent pas simultanément les trois
contraintes que nous avons décrites. Ceci nous a conduit
à proposer deux nouvelles techniques, TapTap et MagStick pour répondre complètement à cette problématique.
interfaces multi échelles, il n’y a pas de control interactif
du zoom. Ainsi TapTap est très efficace, et l’utilisateur
peut le voir comme un double clic avec un rapide ajustement du pouce entre les deux clics. Ce design a aussi
d’autres avantages : il n’y a pas d’occlusion, l’accès au
bord est résolu (le taille de la zone d’intérêt étant suffisamment large), et la sélection est précise.
MagStick
MagStick (Figure 2) est basée sur le principe du « tapdrag-lift ». L’utilisateur appuie sur l’écran pour définir
un point de référence. En bougeant son pouce, un bâton
(« stick ») télescopique apparaît. Ce « stick » a un mouvement inversé, ainsi lorsque le pouce s’éloigne de la cible, le curseur s’en approche. Enfin le curseur est magnétique pour améliorer la précision et éviter les erreurs
de sélection au relâchement du pouce.
ELABORATION DE TECHNIQUES DʼINTERACTION
En se basant sur notre espace de classification, nous
avons proposé deux approches pour le pointage de cibles
sur écrans tactiles [8] : TapTap qui est une approche par
tap direct, et MagStick qui est une stratégie de « tapdrag-lift ». Ces deux techniques ont l’avantage de pouvoir sélectionner précisément et rapidement des cibles de
3mm de largeur (au-delà de ce seuil les cibles seraient
difficilement visualisables).
TapTap
TapTap est basée sur un idée simple : Si un tap n’est pas
assez précis, un second tap peut servir a préciser la sélection d’une cible. Comme le montre la figure 1,
l’utilisateur appuie sur la cible, ce qui permet de définir
une zone d’intérêt. Cette zone est ensuite zoomée et placée au centre de l’écran. Les cibles étant plus larges,
l’utilisateur peut les sélectionner facilement.
a)
b)
c)
Figure 1. TapTap : a) le premier tap défini une zone
d’intérêt ; b) la zone d’intérêt est agrandie et placée au centre ; c) le second tap permet une sélection précise.
TapTap utilise une stratégie de multiplexage temporel :
Le premier tap sert a définir une zone d’intérêt sur la vue
originale, et le second tap permet la sélection à un niveau
de zoom augmentant la précision. TapTap est aussi basée
sur une stratégie de zoom. Cependant, contrairement aux
a)
b)
c)
Figure 2. MagStick : a) l’utilisateur appuie sur l’écran pour
définir un point de référence ; b) en déplaçant le pouce un
bâton (« stick ») télescopique apparaît. Le stick a un mouvement inversé ; c) le curseur est magnétisé par les cibles
pour éviter les erreurs lors du relâchement du pouce.
MagStick a plusieurs atouts : Le mouvement symétrique
du stick permet à l’utilisateur de prédire rapidement le
geste à effectuer pour atteindre la cible. De plus il n’y a
pas d’occlusion puisque le pouce s’éloigne de la cible au
lieu de s’en rapprocher. Cette propriété est complétée par
l’effet magnétique qui arête le curseur sur une cible et
permet une sélection rapide en augmentant la précision.
Enfin MagStick résout le problème des bords de l’écran
puisqu’il est possible d’interagir seulement au centre de
l’écran. Une expérimentation contrôlée a permis de
prouver ce constat. Nous avons observé que l’ensemble
des gestes de nos participants était concentré au centre
de l’écran.
L’expérimentation contrôlée qui a été menée avait deux
buts : Prouver l’efficacité de nos techniques mais aussi
évaluer les techniques existantes pour cerner leur couverture des contraintes d’interaction au pouce. Cette expérimentation a permis de révéler que nos techniques
étaient plus efficaces que l’état de l’art : Elles sont plus
rapides, causent moins d’erreurs et couvrent simultanément les trois contraintes de l’interaction au pouce.
CONCLUSION ET TRAVAUX FUTURS
Mon travail de thèse a commencé par une approche descendante : caractériser l’état de l’art en matière de techniques de visualisation et d’interaction m’a permis de
mettre en évidence plusieurs problématiques. Mes premiers travaux ont cerné le pointage de cible au pouce sur
écran tactile. Sur ce sujet, une taxonomie a été proposée
ainsi que deux nouvelles techniques d’interaction. Désormais, plusieurs pistes de recherche sont à envisager :
•
•
•
Tout d’abord, l’étude sur le pointage a permis de
mettre en évidence de nouveaux problèmes: Les
techniques basées sur le « tap-drag-lift » ne permettent pas les opérations de Drag and Drop. En effet
elles consomment les opérations de drag pour le déplacement du curseur à l’écran. Cette lacune n’est
d’ailleurs pas traitée dans les travaux existants, ni
sur les dispositifs mis sur le marché. Par exemple,
sur un iPhone il n’y a pas de Drag and Drop, excepté sur l’écran d’accueil ou l’utilisateur doit faire un
appui long sur une cible pour passer en mode Drag.
Or ce délai est aussi utilisé pour l’activation des menus contextuels. Ce recouvrement d’opérations nous
intéresse particulièrement. Nous souhaitons donc affiner notre espace de caractérisation pour prendre et
compte cette nouvelle contrainte du manque de ressources interactives. Ce travail aura aussi pour but
de trouver des alternatives pour combler ce manque
de ressources.
Nous souhaitons aussi nous pencher sur d’autres
pistes de recherche révélées dans notre état de l’art.
En particulier, l’absence de clavier (et ainsi de mode
expert dans les techniques de menus), nous a
conduit à proposer une nouvelle technique de menu.
Le Leaf menu est un menu linéaire augmenté de
gestes inspirés du Flower Menu [1] pour la sélection
en mode expert. Nous élaborons aussi un logiciel
permettant d’analyser les mouvements du pouce sur
l’écran tactile. Etant donné la morphologie de la
main et la largeur du pouce, les points récupérés par
l’écran peuvent varier selon la position du pouce sur
l’écran. Nous avons notamment utilisé cet outil pour
l’évaluation du Leaf Menu. Ceci a permis de révéler
des variabilités importantes dans les gestes effectués
par nos utilisateurs. Nous envisageons d’enrichir cet
outil et de l’utiliser pour étudier les traces formées
par le pouce lors de diverses interactions.
Finalement, nous souhaitons aussi proposer des outils d’aide à la conception de techniques
d’interaction. En particulier une librairie graphique
est en court de réalisation. En effet même si les évolutions rapides des outils de développent (SDK de
l’iPhone ou Android par exemple), permettent maintenant de prendre en compte plusieurs doigts, ou les
mouvements du dispositif dans l’espace, aucun outil
n’intègre le développement de techniques
d’interaction avancées.
Ces travaux de thèses ont pour finalité de proposer des
outils pour aider les concepteurs à la création de techniques d’interaction adaptées aux dispositifs mobiles. Sur
un plan plus large, ils apportent aussi un cadre de réflexion sur l’utilisation des dispositifs mobiles : les services proposés sur ordinateur de bureau sont ils réellement transposables sur dispositifs mobiles ? Notamment,
une application de bureautique ne sera peut être pas utilisée sur un mobile alors que d’autres applications, qui
proposent des services « en contexte », le seront.
BIBLIOGRAPHIE
1.
Bailly, G., Lecolinet, E. and Nigay, L. (2008)
Flower Menus: A New Type of Marking Menus
with Large Menu Breadth, within Groups and
Efficient Expert Mode Memorization. ACM
AVI'08, to appear.
2.
Bederson, B., Czerwinski, M.P., Robertson,
G.G. (2002), A Fisheye Calendar Interface for
PDAs: Providing Overviews for Small Displays, CHI 2002.
3.
Huot, S., Lecolinet, E., (2007) Focus+Context
Visualization Techniques for Displaying Large
Lists with Multiple Points of Interest on Small
Tactile Screens, Interact07.
4.
Karlson, A., Bederson, B., Contreras-Vidal, J.
(2007) Understanding on User Interface Design
and Evaluation for Mobile Technology, Idea
Group, 2007.
5.
Karlson, A. K. and Bederson, B. B. (2008) Onehanded touchscreen input for legacy applications. In Proceeding of Human Factors in Computing Systems, ACM Press, 1399-1408.
6.
Pascoe, J., Ryan, N., Morse, D. (2000) Using
while moving: HCI issues in fieldwork environments. ACM Trans. Comput.-Hum. Interact.
7(3):417-437. 2000.
7.
Roudaut A. et Lecolinet E. (2007). Un espace
de classification pour l'interaction sur dispositifs mobiles. IHM'07.
8.
Roudaut A., Huot, S. et Lecolinet E. (2008).
TapTap and MagStick: Improving One-Handed
Target Acquisition on Small Touch-screens.
ACM AVI'08, to appear.
9.
Uguen G., Poirier F. (2005), Saisie de données
pour interfaces réduites avec Glyph : principes,
niveaux de saisie et évaluations théoriques.
IHM’05.
10. Vogel, D. and Baudisch, P. (2007). Shift: a
technique for operating pen-based interfaces
using touch. Proc. CHI'07. 657-666. 2007.