183
THESE pr´ esent´ ee pour obtenir le grade de DOCTEUR DU CONSERVATOIRE NATIONAL DES ARTS ET METIERS Discipline : Informatique pr´ epar´ ee au Centre d'Etude et De Recherche en Informatique du CNAM dans le cadre de l'EDITE de Paris Shuo-Hsiu HSU Titre : DESIGN D’INTERFACES DE MOBILES POUR L’EXPLORATION DE GRAND CORPUS D’IMAGES English Title : MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th` ese : M. CUBAUD Pierre Professeur au CNAM Pr´ esident du jury : M. NATKIN St´ ephane Professeur Titulaire de Chaire au CNAM Rapporteurs : Mme. CHEN Lin-Lin Professeur au NTUST, Taiwan Tech M. PIETRIGA Emmanuel Charg´ e de recherche INRIA Examinateurs : Mme. JUMPERTZ Sylvie Ing´ enieur de recherche ` a l'Orange Labs M. GELGON Marc Professeur au PolyTech'Nantes M. TOPOL Alexandre Ma^ ıtre de conf´ erence au CNAM

DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

  • Upload
    others

  • View
    0

  • Download
    0

Embed Size (px)

Citation preview

Page 1: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

THESEpr�esent�ee pour obtenir le grade de

DOCTEUR DU CONSERVATOIRE NATIONAL DES ARTS ET METIERS

Discipline : Informatique

pr�epar�ee au

Centre d'Etude et De Recherche en Informatique du CNAM

dans le cadre de l'EDITE de Paris

Shuo-Hsiu HSU

Titre :

DESIGN D’INTERFACES DE MOBILES POUR

L’EXPLORATION DE GRAND CORPUS

D’IMAGES

English Title :

MOBILE INTERFACE DESIGN FOR

BROWSING LARGE COLLECTIONS OF IMAGES

Soutenue le 17 mai 2010

Directeur de these :

M. CUBAUD Pierre Professeur au CNAM

President du jury :

M. NATKIN St�ephane Professeur Titulaire de Chaire au CNAM

Rapporteurs :

Mme. CHEN Lin-Lin Professeur au NTUST, Taiwan Tech

M. PIETRIGA Emmanuel Charg�e de recherche INRIA

Examinateurs :

Mme. JUMPERTZ Sylvie Ing�enieur de recherche �a l'Orange Labs

M. GELGON Marc Professeur au PolyTech'Nantes

M. TOPOL Alexandre Ma�tre de conf�erence au CNAM

Page 2: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

ii

Page 3: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Resume

La navigation de contenus photos cons�equents et les probl�ematiques qui y sont asso-

ci�ees int�eressent les chercheurs depuis des ann�ees. Les caract�eristiques physiques de

ces contenus font �emerger des probl�ematiques encore plus complexes lorsqu'on les

parcourt sur appareils portables. Les nouvelles sp�eci�cations des appareils portables

et la litt�erale explosion des contenus num�eriques mettent les designers au d�e�. Ils

doivent, d'une part, am�eliorer l'exp�erience de navigation et, d'autre part, donner

corps �a des caract�eristiques produits nouvelles et adapt�ees �a l'usage. La pr�esente

dissertation aborde la navigation de contenus photos cons�equents sur appareils por-

tables selon trois �etapes, techniques de visualisation, techniques d'interaction et,

en�n, design d'interface pour appareils portables. �A travers l'�etude du Casual Info-

vis sur appareils portables, nous cherchons �a proposer un design int�egr�e qui puisse

orienter les futurs d�eveloppements pour la recherche et l'industrie.

Keyword : Personal photo albums, navigation, serendipity, unexpected discovery,

categorization, interface design, interaction, causal infovis, mobile device, gesture,

haptic manipulation.

Version originale : anglais.

Traduction francaise : Melissa Chouikrat-Marcinkowski, 2010

iii

Page 4: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

iv

Page 5: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Remerciements

This dissertation would not be made without the support I received from an extended

community of colleagues, friends, families, and people working in various places. I

would like to express my sincere appreciation to many people and organizations that

contributed to my doctoral studies.

First of all, I would like to thank my advisors and committee members for their

sincere care, interest, and thoughtful feedback. To my advisors Professor Pierre

Cubaud and Mrs. Sylvie Jumpertz - thank you both for your vast reserve of pa-

tience, knowledge and long-term support in directing me through the research and

in integrating the knowledge both from the academic and the industry. To Pro-

fessor Lin-Lin Chen and Dr. Emmanuel Pietriga - thank you for providing helpful

suggestions and precious advice on reviewing my dissertation. To Professor St�e-

phane Natkin, Professor Marc Gelgon and Dr. Alexandre Topol - thank you for your

thought provoking questions and suggestions during the defense. In addition to the

committee, members in Cedric Lab at CNAM have been of great importance in this

work : I am grateful to Professor Eric Gressier-Soudan for his encouragement every

time when I come back to Paris. Thanks, C�ecile LePrado for enlarging my vision in

the domain of sound design ; Rodrigo Almeida, as my sincere trouble shooter, I am

extremely grateful to your help either on the programming, on research discussion,

on bouncing random ideas or on sharing daily life experience ; Pedro Alessio, thank

you for bringing lots of joy to relax the pressure during my doctoral life. Thanks also

goes to Vivane Gal, Hassan Labiah, Fatima-Zahra Kaghat, Areti Damala, Shih-Han

Chang, Antoine Gonot, Olivier Veneri, J�erome Dupire and Xiang Qiu Hou, for your

various help during the time in CNAM. I would like to convey my sincere apprecia-

tion to my colleagues in Orange Labs Rennes for their support of all my research

activities and the fellowship for my doctoral studies over the past three years.

This dissertation would never have been completed without the encouragement and

devotion of my family and friends. I would like to thank two families : my parents,

my aunt, my sister and the family of Mrs. Yi-An Pong, her daughters Chia-Chun

Lu, Ke-Chen Pong and her son-in-law Chien-Hung Ku for their wholehearted love

and spiritual support of me studying overseas for the past six years. I would also like

to thank my friends Chen Yan, Kai Yan and Yu-Pu Cao for your warmest help for

moving to Rennes. Special recognition and thanks also goes to James Jeng Weei

Lin for providing me with a model that de�nitely had an e�ect that was needed for

accomplishing the thesis ; to Jonathan Chapman, thank you for having me prepared

v

Page 6: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

before beginning my adventure in Europe. To Hannah Levick and Lauren Murphy,

thank you for saving me when receiving my mails titled by cat on a hot brick˝.

To M�elissa, thank you for your persistent support and care during the last period

of time in accomplishing my dissertation.

Finally, I am thankful to my cat GucciOrr, for being with me at every moment,

especially for chasing his toys in front of me when I was working hard.

vi

Page 7: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Table des matieres

1 Introduction 11

1.1 Contexte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

1.2 L'�ere num�erique . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

1.3 Contexte de la mobilit�e et photos num�eriques . . . . . . . . . . . . 16

1.4 Chronologie du projet de recherche . . . . . . . . . . . . . . . . . . 18

1.5 Plan de th�ese . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

2 Definitions 23

2.1 Usages li�es �a la photographie traditionnelle . . . . . . . . . . . . . . 24

2.2 Activit�es individuelles et collectives dans la pratique de la navigation

photo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

2.3 Albums photos personnels et commerciaux . . . . . . . . . . . . . 30

2.4 Casual Infovis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

2.5 S�erendipit�e et gestion des contenus photos num�eriques . . . . . . . 33

2.6 R�e exion premi�ere sur un design d'interaction inspir�e du Rubik's cube 39

3 Etat de l’art 41

3.1 Normes et standards de m�etadonn�ees pour les photos num�eriques

grand public . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

3.2 Algorithmes de calcul pour le regroupement des photos num�eriques 44

3.3 Outils de gestion pour les contenus photos num�eriques . . . . . . . 49

3.4 Techniques de visualisation des photos num�eriques . . . . . . . . . 53

3.5 Casual Infovis et techniques d'interaction sur les appareils mobiles . 58

vii

Page 8: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Table des mati�eres

3.6 M�ethodologie d'�evaluation des navigateurs d'images . . . . . . . . . 63

3.7 R�e exion sur le design et conclusion . . . . . . . . . . . . . . . . . 65

4 Design I 67

4.1 Interaction appareils portables/mains . . . . . . . . . . . . . . . . . 68

4.2 Pr�esentation g�en�erale des gestes et mouvements de manipulation de

la main . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

4.3 Gestes d'interaction sur contenus photos num�eriques . . . . . . . . 75

4.4 R�e exion autour du Rubik's cube . . . . . . . . . . . . . . . . . . . 80

4.5 Proposition de design - Phora . . . . . . . . . . . . . . . . . . . . . 83

4.6 �Evaluation du design . . . . . . . . . . . . . . . . . . . . . . . . . 90

4.7 R�esultat de l'�evaluation . . . . . . . . . . . . . . . . . . . . . . . . 94

4.8 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99

5 Meta-categorisation des photos numeriques 101

5.1 Probl�ematique de la gestion des photos num�eriques . . . . . . . . . 102

5.2 Objectif de l'�etude . . . . . . . . . . . . . . . . . . . . . . . . . . . 103

5.3 �El�ements de m�eta-cat�egorisation . . . . . . . . . . . . . . . . . . . 103

5.4 D�e�nition des six cat�egories . . . . . . . . . . . . . . . . . . . . . . 105

5.5 �Evaluation de la m�eta-cat�egorisation . . . . . . . . . . . . . . . . . 107

5.6 R�esultats de l'�evaluation . . . . . . . . . . . . . . . . . . . . . . . 110

5.7 M�eta-interface bas�ee sur la visualisation origami . . . . . . . . . . . 120

5.8 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127

6 Deuxieme proposition de design 129

6.1 R�e exion sur les r�esultats obtenus chapitre 4 . . . . . . . . . . . . . 130

6.2 Pr�esentation de l'interface circulaire . . . . . . . . . . . . . . . . . 131

6.3 Propositions de design et analyse . . . . . . . . . . . . . . . . . . . 134

6.4 Impl�ementation . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141

6.5 Probl�ematique du prototype . . . . . . . . . . . . . . . . . . . . . . 144

6.6 Proposition de plan de test . . . . . . . . . . . . . . . . . . . . . . 145

6.7 R�e exion sur le design et conclusion . . . . . . . . . . . . . . . . . 150

viii

Page 9: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

7 Conclusions et perspectives 153

7.1 Conclusions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154

7.2 Pr�esentation tangible inspir�ee du Rubik's cube pour interaction fu-

ture avec des photos num�eriques . . . . . . . . . . . . . . . . . . . 156

7.3 Notre vision de l'avenir . . . . . . . . . . . . . . . . . . . . . . . . 161

References 163

1

Page 10: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

2

Page 11: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Table des figures

1.1 Les trois contextes de cette th�ese . . . . . . . . . . . . . . . . . . . 13

1.2 Nombre de photos publi�ees sur Flickr de 2004 �a 2009 . . . . . . . . 14

1.3 Carte m�emoire SD Panasonic . . . . . . . . . . . . . . . . . . . . . 15

1.4 Carte m�emoire SONY . . . . . . . . . . . . . . . . . . . . . . . . . 15

1.5 Mod�ele GEMS de cycle de vie des contenus personnels . . . . . . . 17

1.6 Les quatre �etapes chronologiques du projet de recherche. . . . . . . 20

1.7 Chapitres suivant l'ordre chronologique d'accomplissement du travail

de recherche. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

2.1 Appareil photo l�eger Kodak . . . . . . . . . . . . . . . . . . . . . . 25

2.2 Exemple d'image ronde Kodak . . . . . . . . . . . . . . . . . . . . 25

2.3 �Ecran circulaire LCD Toshiba Matsushita . . . . . . . . . . . . . . . 27

2.4 Motorola Aura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

2.5 Spacewars, le premier jeu vid�eo . . . . . . . . . . . . . . . . . . . . 27

2.6 Approche de Frohlich . . . . . . . . . . . . . . . . . . . . . . . . . 29

2.7 Proposition de d�e�nition du Casual InfoVis . . . . . . . . . . . . . . 32

2.8 Planogramme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

2.9 Remplissage de l'espace . . . . . . . . . . . . . . . . . . . . . . . . 36

2.10 Pr�esentation en zigzag . . . . . . . . . . . . . . . . . . . . . . . . 37

2.11 Pr�esentation en pyramide . . . . . . . . . . . . . . . . . . . . . . . 37

2.12 Relations entre utilisateur, interface et contenus num�eriques. . . . . 39

2.13 Caract�eristiques du Rubik's cube et mappage du contexte de la na-

vigation d'images. . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

3

Page 12: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

3.1 Exemple de cycle de vie des images num�eriques . . . . . . . . . . . 43

3.2 Exemple d'extraction partielle de donn�ees EXIF . . . . . . . . . . . 43

3.3 Pr�esentation de photos num�eriques sur di��erentes �echelles chrono-

logiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

3.4 PhotoMesa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

3.5 FotoFile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

3.6 Mediabrowser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

3.7 PhotoTOC, navigateur d'images avec « vue d'ensemble + d�etail » . 50

3.8 Navigateur d'images EasyAlbum . . . . . . . . . . . . . . . . . . . 50

3.9 Navigateur d'images MyPhotos . . . . . . . . . . . . . . . . . . . . 51

3.10 Navigateur d'images MiAlbum . . . . . . . . . . . . . . . . . . . . 51

3.11 Mylifebit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

3.12 Agrafo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52

3.13 Photohelix . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52

3.14 Miniature Flickr . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54

3.15 PhotoSynth . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

3.16 Six modes de pr�esentation photos, propositions de Cooper et al. [1] 56

3.17 Perspective wall . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

3.18 M�elange . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

3.19 Arbre hyperbolique . . . . . . . . . . . . . . . . . . . . . . . . . . 57

3.20 Vue �sheye . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

3.21 Flutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

3.22 Interface de l'Acer F900(a) et du HTC Touch HD(b) . . . . . . . . 59

3.23 Interface du Nokia N82(a) et du Motorola A3100 Fun Album(b) . . 60

3.24 Interface du LG KM900(a) et du My Photo Egg(b) . . . . . . . . . 61

3.25 Panneau tactile 3D d�evelopp�e par Mitsubishi . . . . . . . . . . . . . 62

3.26 TOSHIBA qosmio . . . . . . . . . . . . . . . . . . . . . . . . . . . 62

3.27 Composants de la plateforme de communication et contenus �emo-

tionnels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

4

Page 13: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

4.1 Le V de la victoire (�a g.) et le V �a valeur d'insulte (�a dr.) . . . . . . 69

4.2 Synergies simples . . . . . . . . . . . . . . . . . . . . . . . . . . . 72

4.3 Synergies r�eciproques 1 . . . . . . . . . . . . . . . . . . . . . . . . 72

4.4 Synergies r�eciproques 2 . . . . . . . . . . . . . . . . . . . . . . . . 72

4.5 Mouvements intrins�eques s�equentiels . . . . . . . . . . . . . . . . . 72

4.6 Processus de mappage conceptuel et perceptuel . . . . . . . . . . . 74

4.7 Mappages et niveaux de limitation de la formeThree mapping . . . . 74

4.8 Cube Browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80

4.9 AudioCubes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

4.10 3D story cube . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

4.11 Cognitive cubes . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

4.12 Wooden brains . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82

4.13 Search Cube . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82

4.14 Communication entre utilisateurs et contenus �emotionnels . . . . . 83

4.15 Description de Phora . . . . . . . . . . . . . . . . . . . . . . . . . 84

4.16 Trois gestes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85

4.17 A�chage des photos . . . . . . . . . . . . . . . . . . . . . . . . . 86

4.18 Phora ash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87

4.19 Probl�ematique de couverture de l'�ecran sur Phora . . . . . . . . . . 87

4.20 Interface visuelle simul�ee sous Processing . . . . . . . . . . . . . . . 89

4.21 M�ecanisme de SpaceNavigator . . . . . . . . . . . . . . . . . . . . 89

4.22 Mise en place de l'environnement d'�evaluation . . . . . . . . . . . . 92

4.23 Temps moyen1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97

4.24 Temps moyen2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97

4.25 Temps moyen3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97

4.26 Comportement utilisateur adapt�e au mode PG . . . . . . . . . . . . 98

4.27 Comportement utilisateur adapt�e au mode RG . . . . . . . . . . . . 98

5.1 Interface du cameraphone K800i . . . . . . . . . . . . . . . . . . . 104

5

Page 14: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

5.2 Contextes de la prise de vue . . . . . . . . . . . . . . . . . . . . . . 104

5.3 Type A : Vue statique simple (�a g.), Type B : vues multiples (�a dr.). 107

5.4 Type C : Capture de mouvement avec appareil �xe (�a g.), Type D :

Capture de mouvement avec appareil en mouvement (�a dr.). . . . . 107

5.5 Type E : Groupes (�a g.), Type F : Groupes en mouvement (�a dr.) . 107

5.6 R�epartition de la taille des albums photos entre les 20 participants. . 108

5.7 Taches de classement manuel sur photos imprim�ees. . . . . . . . . . 108

5.8 R�epartition des types de photos en E1 et E2. . . . . . . . . . . . . 110

5.9 R�epartition d�etaill�ee des r�esultats en E1. . . . . . . . . . . . . . . . 110

5.10 Vue globale des diagrammes de 10 participants �a E2. . . . . . . . . 111

5.11 Vue globale des diagrammes de 10 participants �a E2 . . . . . . . . 111

5.12 Diagrammes originaux : Zones W, X, Y et Z de coh�erence des r�esultats113

5.13 Diagramme r�eorganis�e pour les zones A (haut) et B (bas) dans l'ordre

1 et 2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113

5.14 Diagramme r�eorganis�e a�n de d�egager les zones C (haut) et D (bas)

dans l'ordre 3 et 4. . . . . . . . . . . . . . . . . . . . . . . . . . . 113

5.15 Sujets d'une photo ayant conscience (�a g.) ou non (�a dr.) de l'ap-

pareil photo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

5.16 Diagrammes r�eorganis�es a�n de d�egager les zones E (haut) et F

(bas) dans l'ordre 5 et 6. . . . . . . . . . . . . . . . . . . . . . . . 115

5.17 Poses discontinues. . . . . . . . . . . . . . . . . . . . . . . . . . . 115

5.18 Digrammes r�eorganis�es a�n de d�egager les zones G (haut) et H (bas) 117

5.19 Diagrammes r�eorganis�es a�n de d�egager les zones I (haut) et J (bas) 117

5.20 Diagramme r�eorganis�e a�n de d�egager les zones K (�a g.) et L (�a dr.) 117

5.21 Photos d'une cible en mouvement d'un point de vue macro et micro 119

5.22 R�epartition des photos pr�ef�er�ees. . . . . . . . . . . . . . . . . . . . 119

5.23 Contexte original des quatre photos les plus appr�eci�ees . . . . . . . 119

5.24 Types des brochures di��erentes . . . . . . . . . . . . . . . . . . . . 121

5.25 Scentsory-Nokia, concept de t�el�ephone mobile int�egrant des tech-

niques de pliage. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121

5.26 L'interface du Rovi Liquid media guide lanc�e en 2009. . . . . . . . . 121

6

Page 15: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

5.27 Prototypage rapide sur pliage papier. . . . . . . . . . . . . . . . . . 123

5.28 Etat pli�e et d�epli�e de deux mod�eles de pliage papier . . . . . . . . . 123

5.29 Mod�ele de pliage papier libre . . . . . . . . . . . . . . . . . . . . . 123

5.30 Le Zoopraxiscope de Muybridge expos�e au Kingston Museum. . . . 124

5.31 Pr�esentation en accord�eon (en haut), en pile de jetons (au milieu)

et en Rolodex (en bas) : gestes tactiles d'interaction. . . . . . . . . 125

5.32 Visualisation Phorigami de 561 photos . . . . . . . . . . . . . . . . 126

6.1 (a)Fisheye, (b)Arbre hyperbolique . . . . . . . . . . . . . . . . . . 131

6.2 Foto�le . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132

6.3 Face Bubble . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132

6.4 Interface circulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . 133

6.5 MyPhotoEgg . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133

6.6 Passage d'une vue �a l'autre sur navigateur d'images traditionnel . . 133

6.7 Transition de la vue d�etail �a la vue globale sous Google Picasa . . . 133

6.8 Premier essai avec Phorigami . . . . . . . . . . . . . . . . . . . . . 135

6.9 Analyse par diagramme radar de la s�election d'album . . . . . . . . 136

6.10 Analyse par diagramme radar de la navigation de contenus . . . . . 137

6.11 Scrolling photo sur iPhone . . . . . . . . . . . . . . . . . . . . . . 138

6.12 Mur Cooliris 3D sur Google Nexus supportant le scrolling photo . . 139

6.13 Visualisation de 173 photos rondes sur arbre hyperbolique . . . . . . 139

6.14 Visualisation de photos rondes sur arbre hyperbolique . . . . . . . . 139

6.15 Mode d'a�chage pour la s�election d'album : pr�esentation carrousel . 142

6.16 Mode d'a�chage pour la navigation des contenus et manipulation

simul�ee via une visualisation hyperbolique. . . . . . . . . . . . . . . 142

6.17 M�etaphore du plateau tournant dans la visualization . . . . . . . . . 142

6.18 Flux de taches sur la version retravaill�ee de Phora . . . . . . . . . . 143

6.19 Arbre hyperbolique en Javascript InfoVis Toolkits . . . . . . . . . . 144

6.20 Maintien des �el�ements dans la limite du cercle, lors du calcul de

collision. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144

7

Page 16: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

6.21 Impl�ementation de l'e�et de zoom lorsqu'un �el�ement est gliss�e vers

le centre. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144

6.22 Mise en place de l'environnement. . . . . . . . . . . . . . . . . . . 149

6.23 Description des deux m�ecanismes de changement de vue. . . . . . . 151

6.24 Pr�esentation en vue vignettes (�a g.) et en mode contexte + focus

(�a dr.). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151

6.25 Trois modes de pr�esentation propos�es par Copper et al. . . . . . . . 151

6.26 Vues vignettes adaptable et gestes de navigation . . . . . . . . . . 151

7.1 Cube obtenu via la pr�esentation Tetris 3D. . . . . . . . . . . . . . . 156

7.2 Pr�esentation Tetris 3D . . . . . . . . . . . . . . . . . . . . . . . . 156

7.3 Prototype de pr�esentation cubique irr�eguli�ere . . . . . . . . . . . . 159

7.4 Six vues di��erentes du prototype du premier type de pr�esentation

cubique irr�eguli�ere . . . . . . . . . . . . . . . . . . . . . . . . . . . 160

7.5 Six vues di��erentes du deuxi�eme type de prototype de visualisation

irr�eguli�ere . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160

7.6 Diagramme en entonnoir . . . . . . . . . . . . . . . . . . . . . . . 161

7.7 Siftables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162

7.8 Sixthsenses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162

8

Page 17: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Liste des tableaux

2.1 Taxonomie propos�ee par Kindberg et al. [2] . . . . . . . . . . . . . 30

2.2 Comparaison InfoVis traditionnel / Casual InfoVis . . . . . . . . . . 31

4.1 Analyse des gestes quotidiens identi��es. . . . . . . . . . . . . . . . 76

4.2 Gestes quotidiens selon la fonction des doigts Points de couleur

rouge :doigt travaillant seul Points de couleur bleue :doigts tra-

vaillant en groupe Points de couleur magenta :doigts travaillant de

fa�con s�equentielle . . . . . . . . . . . . . . . . . . . . . . . . . . . 77

4.3 Interface retravaill�ee de Phora : fonctions et gestes de manipulation

associ�es . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88

4.4 Trois types de taches et r�eactions potentielles des participants . . . 91

4.5 Panorama des �etudes de navigateurs d'images . . . . . . . . . . . . 93

5.1 Comparaison des deux approches. . . . . . . . . . . . . . . . . . . . 105

5.2 Mouvement de l'appareil photo et des cibles. . . . . . . . . . . . . . 105

5.3 Cat�egories, contextes et techniques d'interaction associ�es. . . . . . . 106

5.4 R�esum�e des deux exp�eriences. . . . . . . . . . . . . . . . . . . . . . 108

5.5 Pr�ef�erences photos de 10 participants. . . . . . . . . . . . . . . . . 118

6.1 Propositions de design et taches associ�ees . . . . . . . . . . . . . . 140

7.1 Correspondance entre notre cat�egorisation et les formes repr�esenta-

tives bas�ees sur Tetris. . . . . . . . . . . . . . . . . . . . . . . . . 159

9

Page 18: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

10

Page 19: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Chapitre 1

Introduction

Si la pr�esente th�ese s'int�eresse �a la gestion des contenus photos num�eriques, elle

avait initialement pour th�eme la gestion des contenus vid�eo. Les images pouvant

etre consid�er�ees comme les �el�ements �a partir desquels se construit une vid�eo, notre

postulat a �et�e le suivant : adresser la probl�ematique de la gestion des contenus

photos permettra de d�egager des solutions potentiellement adapt�ees aux contenus

vid�eo. Comme dit le proverbe, « l'eau qui porte le navire est celle-l�a meme qui

l'engloutit ». Cette num�erisation qui nous permet de cr�eer librement des conte-

nus audiovisuels pose �egalement le probl�eme de la gestion de ces contenus. Nous

introduirons le sujet de la pr�esente th�ese par une pr�esentation des contextes asso-

ci�es. Nous d�ecrirons ensuite le ph�enom�ene de la num�erisation a�n de souligner les

probl�emes li�es �a la gestion des contenus num�eriques et d'introduire notre point de

vue. Dans un souci de clari�cation des probl�ematiques abord�ees, nous pr�esenterons

la terminologie relative �a la gestion des contenus photos num�eriques. En�n, nous

exposerons notre plan de th�ese ainsi que notre m�ethodologie.

11

Page 20: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

1.1 Contexte

Contexte du projet

La pr�esente th�ese s'inscrit dans le cadre d'un projet industriel men�e sur trois an-

n�ees au sein d'Orange Labs (France Telecom R&D Rennes, �a l'initiative du projet)

et du laboratoire CEDRIC (CNAM, Conservatoire National des Arts et M�etiers).

L'�equipe �a laquelle j'ai �et�e rattach�e s'int�eresse tout particuli�erement au design et �a

la relation client. Ce projet b�en�e�cie du dispositif CIFRE (Conventions Industrielles

de Formation par la Recherche) et est �nanc�e conjointement par l'entreprise et le

gouvernement. L'�equipe que j'ai pu int�egrer comprend un responsable d'�equipe, un

post-doc et deux doctorants pour la partie design, ainsi que 13 personnes sp�ecialis�ees

en ergonomie, conception et IHM (Interaction Homme Machine).

Face �a la probl�ematique de la gestion des contenus photos num�eriques, les syst�emes

classiques de visualisation s'int�eressent �a l'e�cacit�e des r�esultats obtenus sur une

recherche donn�ee. Sur cette meme probl�ematique, un domaine nouveau, le Casual

Infovis, s'appuie sur des techniques de visualisation et d'interaction riches, et porte

sur la navigation de contenus num�eriques personnels comme les photos. L'objectif

de notre projet est de proposer, sur des appareils avec �ecran de dimension r�eduite,

une interface bas�ee sur le Casual Infovis et qui adresse cette probl�ematique d'un

point de vue design. Les questions associ�ees concernent l'approche adopt�ee dans

l'organisation des photos, les techniques d'interaction sur appareils mobiles et les

mod�eles de visualisation des photos num�eriques.

Contexte industriel

Ce projet rel�eve des programmes de recherche Orange Labs sur l'interaction avec

des contenus audiovisuels. Son objectif est d'explorer les mod�eles de pr�esentation et

d'interaction avec des contenus multim�edia cons�equents et de faciliter l'utilisation de

ces derniers. Derri�ere ces �etudes se retrouve un objectif strat�egique majeur pour les

entreprises de t�el�ecommunications. La d�e�nition de nouveaux services multim�edia

et l'enrichissement des services de t�el�ecommunication existants. Astrolabe [3], le

pr�ec�edent projet de l'�equipe, est un navigateur d'images qui permet de visualiser les

photos sous la forme d'une spirale. Astrolabe ins�ere des signaux auditifs qui viennent

enrichir l'exp�erience utilisateur lors de la navigation de contenus photos personnels

ou professionnels d'un certain volume. Les utilisateurs sont invit�es �a d�ecouvrir les

contenus photos d'une fa�con plus �emotionnelle, par le biais de signaux auditifs divers

et d'un mode de pr�esentation original.

Les contenus multim�edia v�ehiculent des informations audiovisuelles riches qui sont

susceptibles d'etre �eveill�ees par di��erents signaux. La navigation de contenus audio-

visuels n�ecessite une interface int�egrant des modes avanc�es de pr�esentation visuelle

et des techniques puissantes d'interaction, en d'autres termes, une interface assez

�eloign�ee de la classique WIMP. La pr�esente th�ese s'int�eresse �a la gestion des photos

num�eriques comme premi�ere �etape vers la r�esolution des probl�ematiques li�ees aux

contenus multim�edia. Son th�eme se situe �a la crois�ee de trois domaines : cat�egori-

sation des photos num�eriques, techniques d'interaction associ�ees �a la visualisation

de ces photos et design d'interfaces ayant vocation �a etre int�egr�ees sur appareils

portables. Les trois contextes de cette th�ese sont illustr�es (cf. �g. 1.1).

12

Page 21: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Figure 1.1 � Les trois contextes de cette these

1.2 L� ere numerique

Poussee par les progres technologiques, notre production est passee d’ analogique

a numerique. Au bureau ou a notre domicile, nous produisons des donnees qui

tendent vers le tout numerique. Les documents ou fichiers texte sur lesquels nous

travaillons sont numerises sous differents formats tels que PDF, TXT, DOC ou RTF.

Nos modes de communication se sont numerises : nous envoyons des courriers

´electroniques, des SMS, nous chattons sur messagerie instantanee et participons

a des visioconferences. Notre consommation ´energetique quotidienne est relevee

et numerisee via des compteurs d’ eau, d’ ´electricite ou de gaz. Nos deplacements

numerises s’ affichent sur notre navigateur GPS. Nous allons jusqu’ a numeriser notre

propre condition physique lorsque nous mesurons notre rythme cardiaque durant

l’ effort. Impossible de le nier, nous menons desormais une existence numerique.

Nos activites physiques, traduites en format numerique, sont quantifiees. L’ ´etape

suivante, pour demain a en croire certains, serait la numerisation de nos ´emotions

quotidiennes !

La croissance rapide des contenus numeriques peut s’ expliquer par le prix relative-

ment faible des appareils ´electroniques (appareils photo numeriques, camescopes,

scanners, telephones portables, PDA, etc..) et dispositifs de stockage (disques ex-

ternes, cles USB, cartes memoire). De ce fait, les utilisateurs sont incites a creer des

contenus et a les conserver, voire les partager avec leurs amis. Prenons l’ exemple de

la photo numerique : la croissance des ventes d’ appareils photo numeriques indique

que celle-ci fait desormais partie de notre quotidien. IDC prevoit qu’ entre 2008 et

2012, les ventes d’ appareils photo numeriques vont augmenter de 3 pourcent en

moyenne, pour passer de 146 a 160 millions [4]. La photographie numerique im-

pacte tres fortement le marche du tirage photo traditionnel. Elle ne necessite pas de

developpement mais davantage d’ espace de stockage, ce qui a permis l’ ´emergence

de services Internet tels que Google Picasa et Flickr qui proposent des espaces de

13

Page 22: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Figure 1.2 – Nombre de photos publi�ees sur Flickr de 2004 �a 2009

stockage en ligne gratuits pour les images. Le 12 octobre 2009, Flickr a annonc�e

avoir pass�e le cap symbolique des 4 milliards de photos publi�ees. Ce jalon atteint,

au vu des statistiques, on d�ecouvre que la croissance de Flickr s'est faite au rythme

de 1 milliard de photos par an entre 2007 et 2009 (cf. �g. 1.2). Cette croissance

massive se retrouve �egalement chez Facebook, qui a annonc�e le 15 octobre 2008

[5] avoir franchi la barre des dix milliards de photos h�eberg�ees.

Compar�e �a l'analogique, le num�erique permet de g�en�erer des donn�ees qu'il est facile

de reproduire, transf�erer et stocker. Si les donn�ees num�eriques sont utilis�ees par

un syst�eme informatique, par exemple pour e�ectuer une op�eration math�ematique,

les contenus sont pour leur part des donn�ees qui sont li�ees aux utilisateurs par

di��erents aspects. Ces contenus se rapportent �a des activit�es humaines diverses et

vari�ees et pr�esentent en g�en�eral des informations �a caract�ere personnel. Ils sont

conserv�es �a deux endroits di��erents : aupr�es d'institutions publiques (ex : pr�efecture

de police) ou sur nos appareils �electroniques personnels (ex : ordinateur, portable,

disque dur externe). Si nous pouvons controler l'acc�es �a nos contenus personnels

lorsque nous les h�ebergeons nous-meme, il en va autrement lorsqu'ils sont h�eberg�es

par des institutions publiques, puisque leur acc�es est alors limit�e, meme pour leur

propri�etaire initial.

Les contenus num�eriques ne sont pas une simple version num�eris�ee de contenus

analogiques. Ils remettent en cause nos modes de gestion traditionnels et notre

exp�erience utilisateur. On peut les manipuler de di��erentes fa�cons selon l'usage et

les pr�esenter sur di��erentes plateformes comme un PC de bureau, un ordinateur

portable, un t�el�ephone mobile ou encore un ordinateur port�e (wearable computer),

o�u l'�ecran est remplac�e par des lunettes sur lesquelles sont projet�ees des informations

visuelles. Servis par la facilit�e de l'Internet et le recours toujours plus fr�equent

14

Page 23: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

aux appareils portables, les usages se sont multipli�es et diversi��es. Les contenus

num�eriques sont devenus une boule de neige g�eante qui n'en �nit pas de rouler et

de grossir. Leur gestion est une exp�erience totalement nouvelle, et le fait qu'il soit

tr�es facile de les transformer et de les �echanger vient compliquer la tache du designer

dans sa d�e�nition d'une interface capable de s'adapter aux di��erents usages. Les

contenus num�eriques �etant en rapport avec la vie de l'utilisateur, ils sont les vecteurs

d'informations riches susceptibles de d�eclencher des �emotions chez ce dernier. Ils

pourraient, de ce fait, constituer une vaste ressource multim�edia o�u chacun pourrait

cr�eer, archiver et revivre les exp�eriences de sa vie.

La gestion des contenus num�eriques, en particulier de ceux qui, �a l'instar des photos,

sont vecteurs d'�emotions, ne saurait se contenter d'interfaces WIMP ou de syst�emes

d'InfoVis classiques. Elle n�ecessite des interfaces novatrices qui vont venir extraire

des signaux �emotionnels �a partir des contenus num�eriques et susciter l'attachement

et l'�emotion vis-�a-vis des contenus.

Figure 1.3 – Carte m�emoire SD Panasonic(images extraites de www.engadget.com)

Figure 1.4 – Carte m�emoire SONY(images extraites de http ://forum.hardware.fr)

15

Page 24: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

1.3 Contexte de la mobilite et photos numeriques

Grace �a la technologie qui nous a ouvert les portes de la mobilit�e, nos activit�es ne

se cantonnent plus �a un environnement �xe. Le premier exemple de succ�es dans

ce domaine est l'invention du t�el�ephone portable qui permet �a tout un chacun de

communiquer lors de ses d�eplacements. Plus tard, le PC a quitt�e le bureau pour

devenir portable, et chacun a pu travailler et manipuler ses donn�ees dans un contexte

de mobilit�e. Avec Internet, la mobilit�e a franchi une nouvelle �etape puisque l'on peut

d�esormais acc�eder �a ses contenus de n'importe o�u, via une connexion r�eseau et un

�equipement �electronique. Cette mobilit�e a transform�e l'usage des appareils et fait

�emerger de nouveaux mod�eles d'usage. Par exemple, dans un contexte de mobilit�e,

les appareils photos num�eriques peuvent revetir di��erents usages. Selon le sc�enario,

l'appareil photo sera un outil de travail, de divertissement, ou encore le moyen

d'enregistrer ses activit�es [6].

En r�egle g�en�erale, la condition de mobilit�e peut etre continue ou nomade [7]. En

mobilit�e continue, l'utilisateur est en mouvement, il peut par exemple etre au t�e-

l�ephone portable pendant la marche. En mobilit�e nomade, il se rend �a un endroit

�xe pour y travailler, comme par exemple dans un caf�e pour surfer sur Internet

en Wi-Fi depuis son ordinateur portable. Selon que l'on est en condition �xe, en

mobilit�e continue ou nomade, les besoins divergent, notamment en ce qui concerne

l'environnement d'ex�ecution des taches. Le mod�ele d'usage varie selon la condition

de travail et les intentions de l'utilisateur. On peut alors se poser la question sui-

vante : quel genre de cocktail obtient-on lorsque condition de mobilit�e et contenus

num�eriques se rencontrent ?

Il est possible de cr�eer des contenus num�eriques �a partir d'un endroit �xe : on

peut prendre une photo et l'envoyer �a ses amis depuis son PC au bureau. Dans

un contexte de mobilit�e, cette meme tache permet de cr�eer des contenus qui sont

davantage li�es �a des �ev�enements en temps r�eel. La technologie de mobilit�e permet

de cr�eer, d'atteindre et de partager des contenus avec une exibilit�e accrue. D�es lors

que l'on a un appareil portable sous la main, nos contenus sont disponibles �a tout

moment, de n'importe o�u. Cette disponibilit�e accrue vient expliquer la rapidit�e de

la croissance des contenus num�eriques. Jusqu'�a pr�esent, si l'on utilise un appareil

portable pour cr�eer des contenus num�eriques, c'est essentiellement pour prendre

des photos et enregistrer des vid�eos. On cr�ee des contenus en temps r�eel, selon les

�ev�enements, contenus que l'on partage avec ses amis et que l'on di�use ensuite �a

l'�echelle plan�etaire via un service Internet. Ces contenus sont bel et bien des contenus

personnels. Salminen et al. [8] proposent quatre phases - Get, Enjoy, Maintain, Share

(litt�eralement : Obtenir, Appr�ecier, Maintenir, Partager) qui permettent de d�e�nir

un mod�ele de cycle de vie des contenus personnels illustr�e en �g. 1.5.

Ce mod�ele GEMS exprime les usages et actions li�es aux contenus personnels, �a dif-

f�erentes �etapes dans le temps (G, E, M, S). Selon le contexte, les utilisateurs suivent

tout ou partie de la proc�edure. Le mod�ele et les usages d�ecrits peuvent varier selon

l'appareil utilis�e. En ce qui concerne certains appareils portables « anciens » tels que

les lecteurs MP3, on peut consid�erer que leur vocation est de distraire l'utilisateur

(G) plus que d'o�rir un service �etendu (G, M, S). Les appareils portables actuels

ont �evolu�e vers une plus grande multifonctionnalit�e, a�n de supporter l'ensemble des

services o�erts par une connexion Internet. De ce point de vue, le design d'interface

est confront�e �a un d�e� �enorme : tout appareil permettant d'e�ectuer une action li�ee

16

Page 25: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

�a l'une des phases du mod�ele GEMS doit proposer une interface sp�eci�que. Face �a

la polyvalence accrue des appareils, les interfaces associ�ees doivent int�egrer davan-

tage de m�ecanismes dont la exibilit�e facilite l'usage sur des taches complexes, �a

chacune des �etapes G, E, M, S.

Conscients que l'avenir du contenu mobile est fortement li�e �a la connexion Inter-

net, Google, Yahoo et AmazonGoogle ont annonc�e le concept de cloud computing

(informatique d�emat�erialis�ee) [9][10] pour les futurs appareils portables tels que les

smartbooks et les netbooks. Comme indiqu�e en �g. 1.5, les fonctions en phases G

et S sont davantage li�ees au service Internet, celles en E et M concernant davantage

les fonctionalit�es de l'appareil. Grace au cloud computing, les futurs appareils vont

int�egrer un �eventail toujours plus vaste de services Internet. L'acc�es �a ces services

sera la dominante, l'appareil en lui-meme se cantonnant �a un role de pont physique

vers les contenus virtuels, l'interface ayant pour role de guider les utilisateurs dans

la navigation de leurs contenus.

Figure 1.5 – Mod�ele GEMS de cycle de vie des contenus personnels(image bas�ee sur l'ouvrage Personal content experience[11])

17

Page 26: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

1.4 Chronologie du projet de recherche

�Etant donn�e que la pr�esente th�ese aborde le prototypage d'un point de vue de-

sign, nous avons choisi de d�e�nir un processus en boucle sur quatre �etapes qui sont

illustr�ees en �g.1.6. Nous commen�cons par la phase d'analyse au cours de laquelle

nous collectons les connaissances fondamentales n�ecessaires �a la d�e�nition de di��e-

rentes th�eories et au d�eveloppement d'id�ees de design. Sur le r�esultat de l'analyse, la

deuxi�eme phase a pour objectif de construire les th�eories qui guideront le d�eveloppe-

ment des propositions de design. La derni�ere phase de ce processus est l'�evaluation

qui permet de tester le prototypage et de collecter les di��erents r�esultats. La prise

en compte des r�esultats de cette �evaluation vient ensuite am�eliorer la proposition

de design.

Au cours de la phase d'analyse, nous avons consult�e de nombreux articles de re-

cherche traitant des techniques de visualisation et de leur int�egration �a des navi-

gateurs d'images. Dans un contexte de mobilit�e, nous nous sommes interrog�es sur

la relation qui existe entre l'objet et les mains. Notre premi�ere th�eorie s'est alors

inspir�ee du Rubik's cube qui associe une technique de visualisation sp�eci�que �a une

technique de manipulation particuli�ere. Les di��erents modes de r�esolution du Ru-

bik's cube ont par ailleurs retenu notre attention et nous ont amen�e �a r�e �echir �a

la probl�ematique de la d�ecouverte de l'inattendu lors de la navigation de contenus

photos num�eriques cons�equents.

Avec pour point de d�epart la th�eorie du Rubik's cube, nous soumettons un concept

de design permettant d'�etudier les techniques de visualisation propres au cube. Notre

proposition avanc�ee de design se pr�esente comme une r�e exion autour des appareils

mobiles, avec une attention particuli�ere aux gestes de manipulation et techniques

de visualisation inspir�ees du Rubik's cube. Nous avons par ailleurs cherch�e �a prendre

en compte la d�ecouverte de l'inattendu dans le design d'interface.

Notre proposition de design met en lumi�ere deux �el�ements fondamentaux concernant

la navigation de contenus photo : d'une part, la d�ecouverte de l'inattendu lors de la

navigation de contenus cons�equents et, d'autre part, l'organisation de ces memes

contenus. Concernant la d�ecouverte de l'inattendu, nous nous sommes int�eress�es

�a la probl�ematique de la s�erendipit�e. L'observation des modes de pr�esentation des

produits nous am�ene �a consid�erer qu'il est possible de « provoquer » la d�ecouverte

de l'inattendu par des m�ecanismes sp�eci�ques qui viennent in uencer la fa�con dont

les utilisateurs parcourent un contenu. Concernant l'organisation des contenus, nous

nous sommes int�eress�es aux albums photos en ligne et avons d�egag�e di��erentes

cat�egories de photos susceptibles d'etre utilis�ees dans l'organisation des contenus

photo.

L'observation de contenus photo personnels permet d'obtenir certains indices. Nous

proposons une approche de m�eta-cat�egorisation qui se pr�esente comme une r�e exion

sur l'organisation conventionnelle des photos. Cette approche nous am�ene �a d�e�nir

les grandes lignes d'une m�eta-interface. Avant d'impl�ementer celle-ci, nous avons

proc�ed�e �a une �evaluation de notre m�eta-cat�egorisation, que nous avons appliqu�ee

aux contenus photo de « Mr. Tout-le-monde ». L'�etape suivante a �et�e l'impl�emen-

tation de notre design. Au vu de la di�cult�e d'impl�ementation sur �ecran tactile

circulaire, nous avons d�ecid�e d'adapter le m�ecanisme de SpaceNavigator a�n de si-

muler les gestes de manipulation propos�es par notre design. Nous avons �egalement

18

Page 27: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

organis�e un plan de test a�n de valider les performances des gestes sur di��erentes

taches de navigation d'images. Les r�esultats de cette �evaluation nous ont ensuite

permis d'a�ner notre design d'interface.

Avant d'a�ner notre design, nous continuons �a travailler sur notre m�eta-interface

et nous int�eressons aux techniques de pliage origami comme modes de pr�esentation

des di��erentes cat�egories de photos. Nous avons choisi d'impl�ementer notre m�eta-

interface sous environnement Processing. Apr�es une derni�ere boucle pour a�ner,

nous soumettons �a nouveau notre design d'interface inspir�ee du Casual InfoVis,

design dont l'impl�ementation et l'�etude utilisateur sont plani��ees pour ex�ecution.

1.5 Plan de these

Sur la base du d�eroulement chronologique de notre travail de recherche, nous avons

d�e�ni sept chapitres (cf. �g.1.7). Le chapitre 3 dresse l'�etat de l'art des techniques

et applications potentielles. Le chapitre 4 adresse pour sa part la probl�ematique du

design d'interaction dans un contexte de mobilit�e. Lors de la phase successive de

d�eveloppement, les r�esultats de l'�evaluation viennent am�eliorer le design propos�e.

Le chapitre 5 d�ecrit notre approche de cat�egorisation des photos. Nous proposons

une approche qui entend faciliter la navigation des photos en liant leur mode de

pr�esentation �a la cat�egorie �a laquelle elles appartiennent. Le chapitre 6 propose

d'a�ner notre design, en int�egrant le Casual InfoVis sur des appareils dot�es d'un

�ecran circulaire.

19

Page 28: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Figure 1.6 – Les quatre �etapes chronologiques du projet de recherche.

20

Page 29: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Figure 1.7 � Chapitres suivant l’ ordre chronologique d’ accomplissement du tra-vail de recherche.

21

Page 30: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

22

Page 31: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Chapitre 2

Definitions

Dans le pr�esent chapitre, nous proposons un panorama des pratiques quotidiennes

de la photographie en ce qui concerne la cr�eation, le stockage, l'organisation, la

recherche et l'a�chage des photos. Bien que la photographie soit pass�ee de « phy-

sique » �a num�erique, elle n'en a pas moins conserv�e certains usages acquis sur pho-

tos papier. Nous aborderons les probl�ematiques li�ees �a la gestion des photos papier

et num�eriques, puis d�e�nirons la terminologie utilis�ee dans la pr�esente dissertation.

En�n, nous pr�esenterons notre proposition de design comme solution potentielle aux

probl�ematiques li�ees aux contenus photos num�eriques.

23

Page 32: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

2.1 Usages lies a la photographie traditionnelle

Les archives visuelles telles que les textes et les dessins sont des mat�eriaux signi-

�catifs qui permettent de consigner les �ev�enements importants. La photographie

a permis �a tout un chacun d'immortaliser les instants pr�ecieux de son existence.

Avant l'arriv�ee du num�erique, les albums photos papier repr�esentaient des archives

tr�es importantes pour les familles en ce qu'elles permettaient aux plus jeunes de

mieux comprendre l'histoire familiale. Puisque d�evelopp�ees sur papier, les photos

traditionnelles pr�esentent les caract�eristiques suivantes :

1. Elles vieillissent mal, avec une qualit�e photo di�cile �a conserver.

2. L'accumulation des collections n�ecessite davantage d'espace physique de sto-

ckage.

Selon les usages, trois modes de rangement sont possibles : la bo�te �a chaussures,

le livre album et le cadre photo.

{ La bo�te �a chaussures : c'est une fa�con tr�es r�epandue de ranger des a�aires

personnelles (documents, photos). Elle peut contenir davantage que les deux

autres solutions abord�ees. Les contenus peuvent etre des documents dont on n'a

plus usage, sans ordre de rangement particulier. Les photos peuvent y etre tri�ees

(on peut s�eparer les photos « rat�ees » du reste), et on la range dans un endroit

o�u il ne sera par forc�ement �evident de la retrouver, comme par exemple un grenier

[12].

{ Le livre album : c'est un mode de rangement typique des photos. Il permet

de les organiser de fa�con simple, comme par th�eme ou par date. Sur chaque

page, les photos peuvent etre dispos�ees d'une fa�con plus ou moins artistique.

Contrairement �a la bo�te �a chaussures, on le range dans un endroit facile d'acc�es

pour les membres de la famille, comme par exemple sur une �etag�ere.

{ Le cadre photo : c'est un mode d'a�chage tr�es repr�esentatif, qui permet de mettre

en valeur des photos illustrant un �ev�enement important ou certaines p�eriodes de

la vie. Chaque cadre contient une photo unique, qui peut etre une miniature ou

un agrandissement. En g�en�eral, les cadres photos, en tant qu'objets-souvenirs,

sont d�ecor�es de fa�con artistique et accroch�es au mur ou pos�es sur une �etag�ere, �a

port�ee du regard des membres de la famille ou des visiteurs.

Les photographies �xes sont principalement disponibles en format rectangulaire de

dimensions vari�ees. Une exception dans l'histoire de la photo : en 1888, Kodak sort

son premier appareil photo instantan�e (cf. �g. 2.1), �equipement l�eger. Le d�evelop-

pement et le tirage, e�ectu�ees par l'usine Kodak, produisent des images rondes. Le

choix de ce format n'�etait pas du au hasard : les lentilles grand angle dont �etait

�equip�e l'appareil, peu couteuses, produisaient une r�esolution m�ediocre dans les par-

ties ext�erieures de l'image. A�n de pallier ce probl�eme, un cache rond avait �et�e

install�e dans l'appareil. Par la suite, les photos ont syst�ematiquement �et�e d�evelop-

p�ees dans un format rectangulaire. L'avantage des albums photos papier est qu'ils

permettent de conserver les photos �a un endroit sp�eci�que bien identi��e. La gestion

des photos papier est par ailleurs pratique : on peut facilement annoter les photos

au verso, les indexer ou les r�eorganiser selon ses pr�ef�erences. Facile �egalement de

comparer des photos, de les disposer sur la table ou de les faire passer de main en

main.

Les photos num�eriques sont tr�es faciles �a reformater, dupliquer et distribuer. Com-

par�e aux photos papier, leur manipulation physique est limit�ee. La pr�esentation de

24

Page 33: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Figure 2.1 – Appareil photo l�eger Kodak(image extraite de www.photomuse.org)

Figure 2.2 – Exemple d'image ronde Kodak(images extraites de www.photomuse.org)

leur contenu d�epend en fait du m�edia, toutes les op�erations potentielles se trouvant

de ce fait limit�ees par l'interface dudit m�edia. Cependant, si le m�edia int�egre une

interface intelligente, la manipulation des photos num�eriques peut s'e�ectuer d'une

fa�con aussi souple qu'avec des photos papier. Puisque les photos num�eriques d�e-

pendent du m�edia, on peut supposer que les caract�eristiques des di��erents m�edias

vont amener tout autant d'usages. Le premier �el�ement di��erentiateur est la taille

de l'�ecran, qui peut aller de l'�ecran miniature d'une montre au mur vid�eo utilis�e

lors d'�ev�enements. La quantit�e de contenu qui est pr�esent�ee sur l'�ecran r�ev�ele la

condition d'usage de l'appareil. Ainsi, les appareils portables, avec leur �ecran r�eduit,

vont permettre d'a�cher une information minimale, tandis que les PC de bureau,

aux capacit�es plus cons�equentes, permettront l'a�chage de contenus riches.

En r�egle g�en�erale, les appareils �electroniques classiques a�chent les photos num�e-

riques sur sur des �ecrans rectangulaires de dimensions vari�ees. En 2007, Toshiba

Matsushita a pr�esent�e son prototype d'�ecran LCD circulaire 3 pouces (cf. �g. 2.3)

dans le but d'orienter l'industrie automobile et celle du portable vers ce type d'�ecran.

En 2008, Motorola a lanc�e « Arua » , le premier t�el�ephone portable �a �ecran circu-

laire du march�e (cf. �g.2.4). D'un point de vue technologique, l'utilisation d'un

�ecran circulaire est loin d'etre une innovation quand on sait que ce type d'�ecran se

25

Page 34: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

retrouve d�es 1950 sur divers syst�emes informatiques, tout particuli�erement dans le

domaine radar. Rappelons que « Spacewars », le premier jeu vid�eo, d�evelopp�e par

Steve Russell au MIT pour le PDP-1 (cf. �g.2.5), �etait lui aussi int�egr�e sur �ecran

circulaire [13]. Par la suite, une fois surmont�ees les di�cult�es li�ees �a la projection

d'images, l'�ecran cathodique est pass�e de circulaire �a rectangulaire. Dans le meme

ordre d'id�ees, comme discut�e plus tot, c'est �a un d�efaut mat�eriel du premier ap-

pareil photo commercialis�e par Kodak que l'on doit le format rond auquel �etaient

initialement d�evelopp�ees les photos [14].

Les nouvelles technologies r�eactualisent ce mode d'a�chage « vintage » et re-

mettent en cause l'exp�erience utilisateur acquise sur �ecrans conventionnels. Ces

nouvelles sp�eci�cations d'�ecran am�enent la possibilit�e d'une exp�erience visuelle re-

nouvel�ee. De fa�con �evidente, les designers vont devoir concevoir une interface no-

vatrice qui soit adapt�ee aux contenus audiovisuels �emergeants que l'on retrouve sur

les appareils portables.

26

Page 35: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Figure 2.3 – �Ecran circulaire LCD Toshiba Matsushita(image extraite de www.gadgettastic.com)

Figure 2.4 – Motorola Aura(image extraite de img.gsmarena.com)

Figure 2.5 – Spacewars, le premier jeu vid�eo(image extraite de sophia.javeriana.edu.co)

27

Page 36: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

2.2 Activites individuelles et collectives dans la pra-

tique de la navigation photo

Avec la technologie, la photographie est pass�ee du format papier au num�erique. Les

photos num�eriques, exibles, s'adaptent �a tout type de pr�esentation. Le num�erique

permet davantage d'e�ets visuels dans l'a�chage des photos et nous convie �a une

exp�erience nouvelle de navigation. L'un des avantages du num�erique est sa capacit�e

« magique » de stocker des milliers voire des millions de photos sur un seul dis-

positif de stockage. Avec un p�eriph�erique de sortie, sur t�el�ephone portable comme

sur PC, les utilisateurs peuvent parcourir de nombreux contenus photos, exp�erience

de navigation totalement nouvelle qui n'�etait pas possible sur photos papier. L'aug-

mentation des capacit�es mat�erielles s'accompagne d'une croissance e�r�en�ee des

contenus num�eriques. De ce fait, les interfaces doivent proposer des techniques de

visualisation sp�eci�ques permettant de restituer les nombreuses photos num�eriques

et de les a�cher avec les e�ets visuels adapt�es. Elles doivent par ailleurs prendre

en compte les probl�ematiques d'usabilit�e et d'esth�etique. Cela dit, meme si l'on

int�egre des caract�eristiques nouvelles aux photos num�eriques, les sc�enarii d'usage

n'en restent pas moins inspir�es de l'usage sur photos papier.

Les photos papier et num�eriques induisent des activit�es qui peuvent etre individuelles

ou collectives. L'activit�e individuelle de navigation parmi les photos implique deux

acteurs qui sont le photographe et le lecteur (qui n'est pas �a l'origine des photos mais

qui les conserve). Lorsque le photographe parcourt des clich�es dont il est l'auteur,

la sc�ene captur�ee lui revient �a l'esprit. Le lecteur, qui n'a pas cette connaissance

vis-�a-vis de la sc�ene en question, se contente de parcourir le contenu visuel des

photos et d'en extraire des signaux �emotionnels.

Avec les activit�es collectives, la photo est int�eressante en ce qu'elle devient un

moyen narratif qui permet �a chaque membre de la famille de raconter une his-

toire et d'�evoquer ses souvenirs. On pourra parcourir un album photo en famille

ou disposer les photos sur le sol a�n que chacun en ait un aper�cu. Ce type d'acti-

vit�e collective permet de rassembler la famille non seulement autour d'un moment

d'�emotion mais �egalement autour d'un moment de plaisir, plaisir de partager des

histoires avec ses proches. Concernant les activit�es associ�ees aux photos, l'approche

de Frohlich and Tallyn [15] permet de d�ecrire le role d'une photo vis-�a-vis du pho-

tographe, du public et du sujet (cf. �g.2.6). Six activit�es sont illustr�ees par des

traits pleins et pointill�es. Les pointill�es repr�esentent les di��erentes r�e exions que

la photo peut provoquer chez les lecteurs. Quant aux traits pleins, ils repr�esentent

les di��erents moyens d'interaction entre lecteurs. D'apr�es cette approche, l'activit�e

collective suscite l'interaction entre les lecteurs et enrichit la valeur de la navigation

parmi les photos non seulement dans un cadre collectif mais �egalement dans un

cadre individuel.

L'approche d�ecrite en �g.2.6 peut s'appliquer �a l'activit�e collective de navigation

d'albums photos. Parcourir des photos num�eriques �a plusieurs requiert une interface

sp�eci�que qui permette l'�evocation de souvenirs �a travers la narration ou le partage

du v�ecu de chacun. Selon l'usage, l'�eventail d'activit�es possibles sur un type donn�e

de plateforme varie. Par exemple, si un appareil portable permet �a un utilisateur

unique de parcourir ses propres contenus, pour des utilisateurs multiples, il permet

l'ex�ecution de taches simples de partage de photos, comme par exemple en envoyant

un MMS ou en faisant passer l'appareil �a ses amis.

28

Page 37: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Certaines applications commerciales conventionnelles telles que Microsoft Surface

MicrosoftSurface [16] proposent un grand �ecran tactile multi-touch dont l'interface

permet l'usage collectif de photos num�eriques en environnement multi-utilisateurs

(comparer plusieurs photos, les �etaler, les passer �a son voisin). Ce type d'applica-

tion int�egre une forme d'interaction tangible en ce que les utilisateurs manipulent

directement les contenus ou plutot la repr�esentation physique de ces contenus.

Les photos num�eriques pr�esentent l'avantage de pouvoir etre a�ch�ees sur des sup-

ports multiples, en utilisant des techniques riches de visualisation. On peut imaginer

qu'int�egrer des usages acquis dans d'autres circonstances permettra d'optimiser la

navigation de contenus photos num�eriques et d'enrichir les activit�es collectives qui

y sont li�ees.

Figure 2.6 – Approche de Frohlich and Tallyn [15]

29

Page 38: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

2.3 Albums photos personnels et commerciaux

Qu'est-ce qu'un contenu personnel ? Il s'agit d'un contenu li�e dans son int�egralit�e �a

son propri�etaire, quel que soit l'endroit �a partir duquel il serait cr�e�e ou r�ecup�er�e. En

ce qui concerne les photos num�eriques, un album photo personnel contient des cli-

ch�es de sujets qui sont li�es au propri�etaire de l'album. Ce type d'album peut contenir

des clich�es dont le propri�etaire est �a l'origine (captur�es avec son propre appareil),

des clich�es qu'on lui aurait transmis (partag�es par ses amis) ou encore des clich�es

�a vocation commerciale (t�el�echarg�es sur Internet). �A l'oppos�e, les albums photos

commerciaux ne contiennent pas de photos ayant trait �a des activit�es personnelles

mais des photos �a vocation publicitaire. Ils sont souvent commercialis�es sous forme

de CD photo tels que Corel PhotoCD [17] ou via des services Internet comme Getty

Image GettyImages [18]. Les utilisateurs payent pour t�el�echarger des photos r�ealis�ees

par des professionnels, qu'ils pourront ensuite utiliser dans un cadre professionnel

ou personnel. Avec la d�emocratisation des appareils permettant la capture d'image

tels que les appareils photos num�eriques ou les camera phones, la pratique de la

photo est devenue un jeu d'enfant. Les possibilit�es de partage instantan�e o�ertes

par les appareils incitent par ailleurs les utilisateurs �a cr�eer leurs propres photos sur

la base d'�ev�enements temps r�eel. Les contenus photos personnels captur�es �a partir

des appareils varient selon l'usage. A�n de comprendre les m�ecanismes de capture

d'image sur camera phones, Kindberg et al. Kindberg et al. [2] proposent une taxo-

nomie �a deux dimensions (a�ective ou fonctionnelle) et deux contextes (individuel

ou social). L'objectif premier des photos dites a�ectives est la r�e exion personnelle

et l'�evocation du souvenir, tandis que les photos dites fonctionnelles sont captur�ees

en vue d'une tache bien pr�ecise (cf. tableau 2.1).

Tableau 2.1 – Taxonomie propos�ee par Kindberg et al. [2]

Individuel Social

Affectif R�e exion personnelle Exp�erience personnelle Famillepartag�ee et amis distants

Fonctionnel Tache personnelle Tache partag�ee Tache distante(avec quelqu'un (avec quelqu'unde proche) d'�eloign�e)

Les albums photos personnels sont conserv�es en local sur un appareil �electronique

ou en ligne sur les espaces de stockage que proposent certains services Internet.

Transf�erer ses photos num�eriques sur son PC est la fa�con la plus r�epandue de

conserver ses contenus personnels. Bien que les capacit�es de stockage des appareils

mobiles aient �evolu�e, tout le monde n'a pas l'habitude d'y conserver l'int�egralit�e de

ses contenus photos. Pour certains, l'appareil portable est un simple outil de capture

d'image. Une fois le clich�e e�ectu�e, ils transf�erent celui-ci sur PC. Une autre raison

�a cela est que certains craignent de voir leur vie priv�ee leur �echapper si l'appareil

et son contenu venaient �a etre �egar�es. Nous avons men�e une �etude aupr�es de 45

personnes et nous sommes int�eress�es au nombre de photos conserv�ees sur camera

phone. Nous avons obtenu une moyenne de 226 photos par personne. Parmi les

participants, si 11 avaient conserv�e un nombre de photos sup�erieur �a la moyenne,

seulement trois en avaient conserv�e plus de 1000. Les albums personnels en ligne

permettent l'entrecroisement de r�eseaux sociaux complexes, avec la possibilit�e de

faire des d�ecouvertes inattendues. Un exemple typique : alors que vous parcourez

un album mis en ligne par un parfait inconnu, vous y reconnaissez un visage ami.

30

Page 39: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

2.4 Casual Infovis

Le Casual Infovis (Casual Information Visualization) Pousman et al. [19] peut etre

consid�er�e comme un domaine compl�ementaire de l'InfoVis classique. Sa pratique

concerne particuli�erement la visualisation, au quotidien, de contenus num�eriques

personnels. D'apr�es la d�e�nition de Pousman, quatre crit�eres (cf. Tableau 2.2) per-

mettent de distinguer InfoVis classique et Casual InfoVis. En r�egle g�en�erale, de par

son mod�ele d'usage di��erent, le Casual InfoVis attire un spectre plus large d'utilisa-

teurs. Les syst�emes classiques d'InfoVis permettent �a leurs utilisateurs (des experts

scienti�ques) de conduire des analyses de donn�ees pour compr�ehension de ces der-

ni�eres dans le cadre de travaux professionnels. Ce type d'usage, souvent motiv�e

professionnellement, comprend des taches qui ne sont pas r�ep�et�ees mais compl�et�ees

sur une p�eriode de temps d�etermin�ee. Le Casual InfoVis n'est quant �a lui pas limit�e

au contexte professionnel puisqu'il s'�etend �egalement �a la vie quotidienne dans le

cadre d'un usage plus personnel et divertissant. De ce fait, les pro�ls des utilisateurs

du Casual InfoVis vont de novice �a expert. Si InfoVis classique et Casual InfoVis

permettent tous deux de visualiser des donn�ees pour analyse avanc�ee, le Casual

InfoVis permet potentiellement d'adresser des donn�ees plus vari�ees et �a vis�ee moins

analytique.

Tableau 2.2 – Comparaison InfoVis traditionnel / Casual InfoVis

Pro�l de syst�eme/ Type InfoVis traditionnel Casual InfoVis

Type d’utilisateur Expert De novice �a expert

Type d’usage Taches compl�et�ees Taches compl�et�eessur une p�eriode �a plusieursd�etermin�ee et reprises.non r�ep�etitives.

Type de donnees Donn�ees Donn�eesprofessionnelles Personnelles

Objectif Visualisation Visualisationanalytique non-analytiquedes donn�ees. des donn�ees.

Categories de Casual InfoVis et principes

Pour mieux introduire les syst�emes de Casual InfoVis, Z. Pousman s'int�eresse �a plu-

sieurs cas « limites » d'InfoVis classique. Il s'agit de l'InfoVis ambiant, de l'InfoVis

social, de l'InfoVis artistique ou encore d'autres InfoVis exp�erimentaux. De par leur

mode de visualisation bas�e sur une repr�esentation abstraite de l'information, ceux-ci

sont consid�er�es comme des syst�emes d'InfoVis au sens large du terme. L'InfoVis

ambiant agit comme un module p�eriph�erique ou un widget qui fournit des informa-

tions ambiantes en lien avec l'environnement de travail : horaires de bus, m�et�eo ou

cours de la Bourse. Ambient Orb Amb [20], InfoCanvas [21] et SideShow [22] (la

Windows Sidebar sous Vista) en sont quelques exemples. L'InfoVis social s'attache

quant �a lui �a transformer certaines donn�ees issues de taches quotidiennes (archives

mails, marque-pages ou r�eseau d'amis) en di��erents mod�eles de visualisation. L'ap-

proche est centr�ee sur l'utilisateur en ce qu'elle permet de d�ecrire et de visualiser

ses relations avec son environnement. Cette vue « �egocentrique » di��ere de la vue

orient�ee donn�ees que l'on retrouve dans les syst�emes d'InfoVis classique [19]. Le

syst�eme Themail de Viega [23], Tag Clouds PopularTagsCloud [24] et PeopleGar-

31

Page 40: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

den [25] en sont quelques exemples. Les InfoVis artistiques sont un autre domaine

�emergent, orient�e donn�ees, qui permet de visualiser l'information d'int�eret d'une

fa�con artistique. Ils remettent en cause le point de vue adopt�e par les syst�emes d'In-

foVis classique dans l'analyse et la pr�esentation des donn�ees. Les donn�ees objets

de l'analyse y sont pr�esent�ees d'une fa�con esth�etique et agr�eable, a�n de susciter

la curiosit�e de l'utilisateur. Sorting Wignell [26], Tableau Machine [27] et Presence

Era [28] en sont quelques exemples.

La pr�esente th�ese introduit un Casual InfoVis permettant une repr�esentation de

contenus photos num�eriques, �a l'instar de PhotoMesa [29]. Apr�es une d�e�nition de

l'InfoVis classique et du Casual InfoVis, nous proposons un Casual InfoVis person-

nalis�e que nous int�egrons au design d'interface d�ecrit �a la pr�esente th�ese. En �g.2.7,

nous mettons en vis-�a-vis InfoVis classique, Casual InfoVis et notre proposition de

Casual Infovis. Notre Casual InfoVis permettant la pr�esentation de contenus per-

sonnels tels que des photos num�eriques, ses utilisateurs potentiels ne se limitent

pas �a une population d'experts. Par ailleurs, notre technique de visualisation a pour

objectif de procurer non seulement des e�ets visuellement plaisants mais �egalement

di��erents indices visuels qui guideront l'utilisateur dans sa d�ecouverte des contenus

photos. De plus, dans la mesure o�u notre Casual InfoVis sera appliqu�e �a un contexte

de mobilit�e, il n�ecessitera des techniques riches de manipulation di��erentes de celles

que proposent les interfaces WIMP conventionnelles, a�n de permettre une interac-

tion plus intuitive. En�n, nous supposons que notre proposition de Casual InfoVis

sera int�egr�ee �a un mode d'a�chage non conventionnel, ce qui devrait amener une

exp�erience visuelle di��erente et des modes d'usage nouveaux.

Figure 2.7 – Proposition de d�e�nition du Casual InfoVis

32

Page 41: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

2.5 Serendipite et gestion des contenus photos nu-

meriques

En fran�cais, le terme s�erendipit�e est un n�eologisme et n'est de ce fait pas inscrit

au dictionnaire. Le Merriam-Webster d�e�nit la s�erendipit�e comme « la facult�e ou le

ph�enom�ene de d�ecouverte de choses de valeur ou agr�eables que l'on ne cherchait

pas » . La d�e�nition du Collins est « la chance qu'ont certaines personnes de d�ecou-

vrir ou de cr�eer des choses int�eressantes ou de valeur par hasard » . L'encyclop�edie

Wikipedia d�ecrit quant �a elle la s�erendipit�e comme « l'e�et par lequel une personne

fait une d�ecouverte heureuse par accident, notamment quand elle recherchait tout

autre chose » . Le mot s�erendipit�e vient d'un ancien conte persan et fut cr�e�e par

Horace Walpole le 28 janvier 1754 dans une lettre �a son ami Horace Mann qui

r�esidait �a Florence [30].

Cette d�ecouverte, je la dois �a un talisman, que Mr Chute appelle sortes

Walpolianae, grace auquel je trouve tout ce que je veux, �a point nomm�e,

o�u que je le cherche. On pourrait quasiment rattacher cette d�ecouverte

�a ce que j'appelle la S�erendipit�e, un mot tr�es riche de sens que je vais

tenter de t'expliquer, n'ayant rien de mieux �a te raconter. L'�etymologie

de ce terme est plus parlante que sa d�e�nition. J'ai eu l'occasion de lire

un conte stupide appel�e « Les trois Princes de Serendip » . Au cours

de leurs p�eriples, leurs Altesses faisaient toujours des d�ecouvertes, par

accident ou grace �a leur sagacit�e, de choses qu'ils ne recherchaient pas.

Par exemple, l'un des princes avait d�ecouvert qu'un chameau borgne

de l'ıil droit avait emprunt�e la meme route qu'eux, �etant donn�e que

l'herbe n'avait �et�e brout�ee que du cot�e gauche, alors qu'elle �etait plus

belle du cot�e droit. Comprenez-vous maintenant le sens du terme s�e-

rendipit�e ? Une des occasions les plus remarquables de cette sagacit�e

accidentelle (car vous devez reconna�tre qu'aucune des d�ecouvertes que

vous recherchez ne correspond �a cette description) fut celle de mon ami

Lord Chancellier Clarendon, qui d�ecouvrit le mariage du Duc d'York et

de Madame Hyde, en observant le respect que manifestait sa m�ere �a

table �a l'encontre de Madame Hyde.

L'�episode du conte en question d�ecrit la rencontre des princes avec un chamelier qui

a �egar�e un de ses chameaux. Le nıud de l'a�aire est que, �a partir d'indices qu'ils

ont relev�es, les princes sont capables de d�ecrire pr�ecis�ement ce chameau qu'ils n'ont

jamais vu. Un quiproquo s'ensuit, le chamelier ne sachant plus dire si les princes

ont juste vu son chameau ou s'ils l'ont vol�e. Il n'y a en fait aucune co•�ncidence,

mais plutot une bonne dose de sagacit�e et un sens certain de l'observation. Si

on la consid�ere comme une science myst�erieuse, au meme titre qu'un lancer de

d�es divins, la s�erendipit�e r�esulte en fait de deux facteurs : la maturit�e mentale

de la personne et la probabilit�e de d�ecouverte d'indices dans un environnement

donn�e. La fameuse pomme de Newton ou le bain d'Archim�ede sont des exemples

de d�ecouvertes accidentelles dans les sciences. G.Gore a tent�e en 1878 de d�e�nir les

conditions de la d�ecouverte accidentelle : Les d�ecouvertes se font �a di��erents degr�es

d'inattendu, mais on fait rarement une grande d�ecouverte sans le savoir.[31]

Comme Joseph Rossman l'explique, « dans presque tous les cas, il s'av�ere que

la d�ecouverte accidentelle arrive au terme d'une recherche assidue et prudente ,

et qu'un certain e�ort est accompli dans le but d'identi�er l'indice qui permettra

33

Page 42: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

cette d�ecouverte. » Dans les domaines scienti�ques, on s'int�eresse davantage au

cheminement permettant d'atteindre l'inattendu (le « comment » et le « quand »)

qu'�a l'inattendu en lui-meme. Plus que la d�ecouverte elle-meme, c'est le processus

de d�ecouverte et son timing qui sont la v�eritable surprise.

Decouverte accidentelle et navigation de contenus numeriques

En ce qui concerne la gestion des contenus num�eriques, la probl�ematique de la d�e-

couverte accidentelle a �et�e abord�ee du point de vue de la recherche de donn�ees.

Leong et al. ont men�e une s�erie d'�etudes empiriques [33][34][35] sur les pratiques

quotidiennes li�ees �a l'�ecoute de musique num�erique. D'apr�es eux, pour davantage

de plaisir musical, les utilisateurs ne devraient pas laisser le mode shu�e (lecture

al�eatoire) choisir les morceaux �a leur place, mais plutot faire eux-memes leurs choix

musicaux. Avec pour objectif d'am�eliorer l'exp�erience utilisateur sur des syst�emes

interactifs, ils observent le comportement des utilisateurs et analysent leurs retours

concernant le mode shu�e. Les avantages et les inconv�enients de ce mode d'�ecoute

sont ensuite abord�es. Il est rapport�e que, dans certaines situations, les utilisateurs

choisissent le mode shu�e parce qu'il permet une certaine d�efamiliarisation vis-�a-vis

du contenu ainsi que la d�ecouverte de la s�erendipit�e. Cette �etude qualitative rapporte

�egalement que certaines approches semi-al�eatoires (limiter le contenu parcouru ou

appliquer des crit�eres dans le shu�ing), permettent d'exercer un choix dans l'ex-

p�erience d'�ecoute musicale. La probabilit�e de faire des d�ecouvertes heureuses est

d'autant plus �elev�ee que les morceaux sont jou�es en mode shu�e. Probabilit�e qui

diminue si le contenu musical est arrang�e manuellement et que sa vari�et�e est r�eduite.

Cette �etude n'a n�eanmoins pas mis en place divers taches ou processus dans le but

d'observer si ceux-ci permettaient ou non de faire des d�ecouvertes accidentelles.

Elle s'est content�ee d'observer le comportement des utilisateurs sur des taches cou-

rantes. En ce qui concerne les photos num�eriques, la notion de navigation bas�ee sur

la s�erendipit�e int�eresse �egalement PhotoMesa [29] et FotoFile [36]. L'id�ee est de

proposer une navigation simple des photos qui soit source de plaisir. N�eanmoins, la

mani�ere dont on aboutit �a des d�ecouvertes accidentelles n'est pas abord�ee dans ces

�etudes.

Les �etudes s'int�eressent rarement �a la d�ecouverte inattendue via l'utilisation d'outils

d'InfoVis. Il y a pour cela deux raisons. La premi�ere est la m�ethode utilis�ee dans

l'�evaluation des outils d'InfoVis. La plupart sont �evalu�es via des �etudes quantitatives

permettant de simuler un sc�enario utilisateur et des cas d'usage sur une p�eriode de

temps tr�es courte. Tellement courte que cela r�eduit fortement, de fait, la proba-

bilit�e de faire des d�ecouvertes inattendues. Par ailleurs, les taches r�ealis�ees durant

l'�evaluation peuvent ne pas re �eter de fa�con r�ealiste l'usage quotidien, s'�eloignant

de ce fait des conditions d'observation de la s�erendipit�e. La deuxi�eme raison est que

les interfaces int�egrent rarement des m�ecanismes sp�eci�ques dont l'objectif serait

une navigation bas�ee sur la s�erendipit�e. En e�et, la plupart des outils syst�eme, qu'il

s'agisse d'InfoVis classique ou de Casual InfoVis, ne mentionnent quasiment jamais

la possibilit�e d'une telle exp�erience.

Les conditions essentielles �a la d�ecouverte accidentelle sont, d'une part, une explo-

ration assidue et, d'autre part, une p�eriode de temps �etendue. La mani�ere la plus

conventionnelle d'encourager une navigation bas�ee sur la s�erendipit�e est d'exposer

les utilisateurs �a un ensemble de contenus qu'ils puissent parcourir �a leur guise.

Certaines �etudes se sont int�eress�ees �a cet aspect, comme par exemple le navigateur

zoomable de PhotoMesa [29] ou le navigateur hyperbolique d'images [37], dont les

m�ecanismes permettent la libre exploration d'un contenu cons�equent. Dans la d�e-

34

Page 43: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

couverte de la s�erendipit�e lors de la navigation, le plaisir et la satisfaction tiennent

�egalement aux performances de l'interface. Le probl�eme est que les interfaces �evo-

qu�ees n'int�egrent souvent qu'une seule technique de visualisation. Un tel m�ecanisme

inchang�e de visualisation risque d'amoindrir le plaisir de naviguer et de masquer cer-

tains indices permettant la d�ecouverte de la s�erendipit�e. Comme Leong et al. [35]

l'ont rapport�e, les utilisateurs font le choix du mode shu�e dans le but de d�ecouvrir

une exp�erience nouvelle d'�ecoute musicale, lib�er�ee d'un ordre pr�e-�etabli de lecture

des morceaux. Cette d�efamiliarisation peut contribuer de fa�con essentielle �a la nou-

veaut�e du contenu et stimuler la curiosit�e des utilisateurs, surtout si ces derniers

ont l'habitude de parcourir toujours le meme contenu musical. L'approche conven-

tionnelle de cette d�efamiliarisation vis-�a-vis du contenu est de proposer di��erents

modes de visualisation, comme le fait Microsoft Windows avec sa barre d'outils. Dif-

f�erentes vues sont propos�ees dans la navigation des dossiers (Miniature, Mosa•�que,

Icone, Liste et D�etails). Les outils d'InfoVis proposent eux aussi di��erents modes

de visualisation dans la navigation des albums photos. N�eanmoins, aucune �etude ne

s'est int�eress�ee �a leurs r�esultats en termes de d�efamiliarisation vis-�a-vis du contenu.

Decouverte accidentelle et presentation produits

Comme l'a d�eclar�e Ivring Langmuir , chimiste et physicien am�ericain, « si on ne peut

pas pr�evoir une d�ecouverte, on peut tout de meme pr�evoir le travail qui, potentielle-

ment, permettra d'y aboutir » [38]. Autrement dit, avec une certaine strat�egie, on

peut augmenter la probabilit�e d'atteindre l'inattendu et donc la d�ecouverte. Dans

notre quotidien, le shopping est une activit�e qui o�re l'occasion de faire des d�ecou-

vertes. Lorsque nous anons en ville ou en rayon, il arrive que certains produits nous

interpellent. La fa�con dont ils nous sont pr�esent�es nous am�ene �a penser qu'ils sont

exactement ce que nous recherchions. Les pr�esentoirs sont des modes de pr�esenta-

tion sp�eci�ques qui permettent de promouvoir des produits ou services aupr�es d'un

public d'acheteurs. Tous les pr�esentoirs respectent des principes de base qui ont

pour objectif de pousser �a l'acte d'achat. En r�egle g�en�erale, les pr�esentoirs suivent

l'une des pr�esentations de base suivantes :

{ Les devantures de magasin : Elles donnent typiquement sur la rue ou les all�ees

des centres commerciaux. Leur objectif : attirer le passant et le faire entrer en

magasin.

{ Les vitrines : Elles pr�esentent typiquement des articles (1) jug�es trop couteux

pour etre expos�es en devanture ou (2) des articles de niche qui int�eressent for-

tement la client�ele premi�ere du magasin. On les retrouve dans les zones de forte

fr�equentation.

{ Les pr�esentoirs « opportunistes » : Ce terme fait r�ef�erence aux pr�esentoirs qui

tirent pro�t d'espaces r�eduits mais n�eanmoins exploitables du magasin, comme

par exemple le haut d'une �etag�ere ou l'espace mural disponible.

Ces trois types de pr�esentoirs proposent une hi�erarchie des produits en magasin. Si

on applique ces memes principes �a la visualisation des photos via une interface de

navigation, la devanture de magasin serait l'image miniature qui est utilis�ee comme

icone d'une cat�egorie donn�ee. Les vitrines seraient les di��erentes techniques de

visualisation photo, comme par exemple l'a�chage 2D ou 3D. Quant aux pr�esentoirs

« opportunistes » , il s'agirait de l'espace situ�e autour de l'interface de navigation,

qui peut etre un raccourci ou un indice e�cace permettant d'induire la s�erendipit�e

(pour acc�eder aux objets d'int�eret).

35

Page 44: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Ces pr�esentoirs sont fortement d�ependants du mat�eriel de pr�esentation utilis�e. Un

mat�eriel typique de pr�esentation visuelle des produits est le planogramme (cf. �g.2.8).

Dans un planogramme, chaque produit est rattach�e �a une cat�egorie selon ses pro-

pri�et�es et ses formes. Il est ensuite dispos�e �a un endroit donn�e de la gondole en

fonction de cette cat�egorie. L'objectif est d'optimiser l'achalandage des rayons tout

en joignant l'utile �a l'agr�eable. Cette id�ee se retrouve chez PhotoMesa, qui applique

une m�ethode de remplissage de l'espace (cf. �g.2.9) dans son mode Quantum Tree-

map de visualisation des photos. L'inconv�enient de cette m�ethode est qu'elle induit

une in�evitable surcharge visuelle dans la navigation du contenu.

Figure 2.8 – Planogramme(image extraite de www.unitedmarketinginc.com)

Figure 2.9 – Remplissage de l'espace(image extraite de www.gettyimages.com)

Un bon mat�eriel de pr�esentation doit etre assez souple pour permettre une certaine

vari�et�e dans la pr�esentation des produits, a�n d'o�rir une « shopping experience »divertissante au client. Sur la meme id�ee, une bonne interface doit proposer un

mod�ele souple de visualisation a�n d'augmenter la vari�et�e des modes de pr�esentation

des photos, tout particuli�erement pour la d�efamiliarisation vis-�a-vis du contenu.

Dans la th�eorie, les add-on et la vari�et�e des modes de visualisation vont dans le sens

d'une navigation bas�ee sur la s�erendipit�e qui induirait la d�ecouverte accidentelle. Un

pr�esentoir r�eussi int�egre certains des sept principes de design suivants :

1. Vari�et�e : cr�eation d'un contraste au sein des produits, a�n d'attirer l'attention

du client.

36

Page 45: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

2. Dominance : identi�cation claire du centre de l'attention, qui v�ehicule le mes-

sage cl�e du pr�esentoir.

3. Groupage : transmission d'un message e�cace et clair dans la communication

client, en regroupant les produits en ensembles aux formes int�eressantes et

stimulantes.

4. Profondeur : d�e�nition d'une profondeur de mobilier qui permet de placer les

produits �a une distance ad�equate.

5. �Eventail : pr�esentation en �eventail, sorte de pyramide invers�ee, qui permet de

r�epartir les produits du bas vers le haut et vers l'ext�erieur, et de diriger le

regard en cons�equence.

6. Zigzag : pr�esentation en zigzag, sorte de pyramide modi��ee, qui permet de

pr�esenter les produits sans avoir deux niveaux de pr�esentation identiques. Ce

type de pr�esentation est moins monotone que la pyramide (cf. �g.2.10)

7. Pyramide : un des modes de pr�esentation les plus r�epandus, les produits sont

empil�es verticalement a�n de former une pyramide, forme physique qui cr�ee

le centre d'attention (cf. �g.2.11)

Figure 2.10 – Pr�esentation en zigzag(image extraite de www.lenehans.ie)

Figure 2.11 – Pr�esentation en pyramide(image extraite de www.gettyimages.com)

37

Page 46: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Ces principes de design proposent di��erents modes de visualisation et exp�eriences

visuelles selon la fa�con dont les produits sont arrang�es. Une interface de naviga-

tion peut appliquer ces principes dans la pr�esentation des contenus photos, meme

si l'e�cacit�e de la visualisation 3D reste �a prouver. En fait, pr�esentation produits

et visualisation photos di��erent de par leurs caract�eristiques de contenu. Si le pr�e-

sentoir permet de grouper des produits de meme apparence, la visualisation des

photos concerne pour sa part des photos ind�ependantes les unes des autres et tr�es

di��erentes. Chaque photo transporte un e�et visuel qui lui est propre, et transmet

des informations visuelles et �emotionnelles autrement plus complexes que ne le font

de simples produits.

Pour r�esumer, si la s�erendipit�e semble arriver par hasard, scienti�ques et sociologues

consid�erent qu'elle ne se pr�esente qu'au terme d'une recherche assidue. L'�etude d'un

tel ph�enom�ene doit donc se faire sur le long terme, dans l'espoir de stimuler une d�e-

couverte accidentelle et d'observer le comportement utilisateur qui lui est associ�e. Si

on ne peut pas provoquer l'inattendu, on peut n�eanmoins cr�eer un contexte qui o�re

aux utilisateurs une probabilit�e plus �elev�ee de faire des d�ecouvertes accidentelles.

« En recherche scienti�que, le hasard et les d�ecouvertes accidentelles se pr�eparent

avec du labeur et de la r�e exion. » [39] Par cons�equent, le syst�eme de naviga-

tion propos�e doit pr�esenter deux caract�eristiques. La premi�ere : o�rir un aper�cu de

l'ensemble du contenu aux utilisateurs, pour davantage de possibilit�es et de vari�et�e

dans les modes de d�ecouverte des r�esultats. La seconde : proposer un m�ecanisme de

d�efamiliarisation vis-�a-vis du contenu, via di��erentes techniques de visualisation. De

cette fa�con, un meme contenu peut etre a�ch�e de di��erentes mani�eres, pour plus

de vari�et�e et de curiosit�e dans l'approche de l'objet recherch�e. A�n de comprendre

l'incidence de la s�erendipit�e dans la navigation de contenus photos, il faudra mener

davantage d'�etudes qualitatives. L'id�ee est d'observer les conditions mentales et le

comportement de l'utilisateur, a�n d'identi�er quelles taches pourraient induire la

d�ecouverte inattendue d'un tr�esor.

38

Page 47: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

2.6 Reflexion premiere sur un design d’interaction

inspire du Rubik’s cube

Apr�es nous etre pench�es sur les caract�eristiques des photos papier et num�eriques,

nous en listons les avantages et les inconv�enients. L'avantage majeur des photos

papier est qu'elles sont associ�ees �a des taches de manipulation physique. Les photos

num�eriques, pour leur part, pr�esentent l'avantage de pouvoir etre transf�er�ees sur

tout type de support. Avec pour objectif de pallier les limitations de la manipulation

physique sur photos num�eriques, nous nous demandons comment transf�erer, sur

photos num�eriques, certaines taches physiques de manipulation ex�ecut�ees sur photos

papier. C'est un fait, nos mains sont l'outil indispensable �a l'ex�ecution de taches

complexes, outil qui nous permet d'interagir avec des dispositifs m�ecaniques ou

num�eriques. La main sait ex�ecuter des mouvements avec di��erents degr�es de libert�e,

mais aussi adapter ses techniques de manipulation dans l'ex�ecution de tout type de

tache complexe au quotidien.

Si l'on suppose que, dans un contexte de mobilit�e, les techniques de manipulation

jouent un role majeur dans l'interaction avec des contenus num�eriques, en quoi cette

exp�erience des techniques de manipulation sur objets physiques pourrait-elle am�e-

liorer la manipulation de contenus num�eriques ? Regardons les contenus num�eriques

de plus pr�es. En d�epit de leur richesse et de leur complexit�e, ils se transforment

et s'adaptent tr�es facilement �a tout type de pr�esentation. Dans leurs modes de

pr�esentation, les contenus num�eriques sont une sorte de kal�eidoscope qu'il est fa-

cile de transformer selon l'usage. Comme illustr�e en �g.2.12, dans la mesure o�u les

techniques de manipulation et les contenus num�eriques sont riches et s'adaptent

facilement �a l'usage, on peut se demander quel role jouera l'interface et quelles

devront etre ses caract�eristiques.

Figure 2.12 – Relations entre utilisateur, interface et contenus num�eriques.

Selon nous, l'�etablissement d'une correspondance entre des gestes et des fonctions

sp�eci�ques doit se faire via la m�etaphore appropri�ee. Lorsque le geste est mapp�e

m�etaphoriquement sur des fonctions nouvelles, on transf�ere non seulement la signi-

�cation mais �egalement l'exp�erience utilisateur acquise.

A�n de d�e�nir les techniques potentielles d'interaction et les mod�eles de pr�esentation

associ�es, nous proposons un design pr�eliminaire inspir�e du Rubik's cube. Ce design

nous permet d'adresser �a la fois les aspects li�es �a la visualisation et ceux li�es au

transfert de l'exp�erience de manipulation physique.Dans la mesure o�u l'exp�erience

intuitive de jeu peut permettre de s'adapter plus rapidement �a une nouvelle interface,

nous avons choisi de placer la m�etaphore du jeu au coeur de la pr�esentation cubique.

Nous ne proposons pas un design concret d'appareil portable mais plutot un mod�ele

adaptatif dans la pr�esentation de contenus audiovisuels sur appareils portables et

39

Page 48: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

l'interaction avec ces memes contenus. Comme c'est le cas avec le Casual InfoVis,

la visualisation a pour but de procurer une exp�erience de navigation agr�eable. Nous

consid�erons que le recours �a des m�ecanismes de jeu peut �egayer un usage qui serait

continu, persistant. Parmi les m�ecanismes de jeu envisag�es, nous avons retenu celui

du Rubik's cube.

Le Rubik's Cube[40] est le fameux puzzle tridimensionnel invent�e en 1974 par le

sculpteur et professeur d'architecture hongrois Ern}o Rubik. Le Rubik's cube a sus-

cit�e un vif int�eret pour les domaines scienti�ques tels que les math�ematiques, la

m�ecanique et l'interaction homme-ordinateur. Le Rubik's cube pr�esente �a la fois

des techniques de manipulation riches et un mod�ele de pr�esentation sp�eci�que. Ce

mod�ele de pr�esentation permet une certaine d�efamiliarisation vis-�a-vis du contenu

et peut de ce fait etre rattach�e �a la s�erendipit�e. Le Rubik's cube est tr�es appr�eci�e

des joueurs pour son m�ecanisme de puzzle 3D. Son mode de r�esolution varie selon

la strat�egie de chaque joueur. Autrement dit, chaque joueur suit son propre che-

min jusqu'�a l'objectif �nal. Avec ce type de jeu, les joueurs ont peu de chances de

tomber deux fois sur la meme sc�ene, ce qui am�eliore la jouabilit�e. Consid�erons la

manipulation du cube comme un cheminement, un processus de navigation parmi

les images. On peut �etablir un mappage entre l'objectif du cube (rassembler les

carr�es d'une meme couleur sur chaque face) et une navigation parmi les contenus

photos dont la �nalit�e serait de « d�ecouvrir » l'image d�esir�ee. Chaque face du Ru-

bik's cube peut ainsi etre pens�ee comme une cat�egorie d'images. Dans ce sens, une

face de couleurs m�elang�ees sur le Rubiks's cube peut etre pens�ee comme di��erentes

cat�egories d'images dans un meme album photo. �g.2.13, nous illustrons les carac-

t�eristiques du Rubik's cube, les techniques de manipulation et de pr�esentation ainsi

que le mappage de la navigation photo.

Figure 2.13 – Caract�eristiques du Rubik's cube et mappage du contexte de lanavigation d'images.

40

Page 49: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Chapitre 3

Etat de l’art

Depuis le 18�eme si�ecle et la r�evolution industrielle, les machines ont permis d'all�eger

les charges de travail, en automatisant l'ex�ecution de taches complexes en produc-

tion. De nos jours, l'Homme s'appuie sur le calcul num�erique dans cet all�egement

des taches, �a un niveau autrement plus complexe. La num�erisation de l'information

quotidienne s'�etant rapidement g�en�eralis�ee, il y a eu cr�eation de ressources riches,

vari�ees et en perp�etuelle augmentation.

Les contenus num�eriques personnels tels que les photos num�eriques ont fait �emer-

ger des probl�ematiques nouvelles de gestion. Chercheurs et industriels s'appliquent

�a d�evelopper des mod�eles nouveaux d'interaction et de visualisation a�n d'optimiser

la gestion des contenus photos num�eriques. Le pr�esent chapitre propose un pano-

rama complet qui va de la construction des photos num�eriques aux techniques de

pr�esentation associ�ees, en passant par les syst�emes mis en place et les approches

d'�evaluation suivies.

41

Page 50: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

3.1 Normes et standards de metadonnees pour les

photos numeriques grand public

D'apr�es le NISO (National Information Standard Organization) [41], les m�etadon-

n�ees sont des informations structur�ees qui d�ecrivent, expliquent, localisent ou faci-

litent la d�ecouverte, l'utilisation ou la gestion d'une ressource informationnelle. Les

m�etadonn�ees assurent les cinq fonctions suivantes :

1. La d�ecouverte de ressources sur crit�eres pertinents,2. L'identi�cation des ressources,3. Le regroupement des ressources semblables,4. La s�eparation des ressources dissemblables,5. La localisation des ressources via des informations et indices.

Pour regrouper les photographies num�eriques, les algorithmes informatiques s'ap-

puient sur les m�etadonn�ees qui leur sont associ�ees. D'une fa�con g�en�erale, au mo-

ment de la prise, la plupart des appareils photos num�eriques n'enregistrent qu'une

quantit�e limit�ee d'informations. D'o�u l'introduction de m�etadonn�ees qui permettent

d'int�egrer des d�e�nitions g�en�erales, couramment exploitables par l'ensemble des ap-

pareils photos num�eriques. En principe, il existe deux sp�eci�cations de m�etadonn�ees

pour les photos num�eriques : le format EXIF et le standard IPTC. L'EXIF ou ex-

changeable image �le format [42] (cf. �g.3.2), a �et�e d�evelopp�e par le JEIDA (Japan

Electronic Industries Development Association) [43]. Le format EXIF repose sur des

formats existants tels que JPEG, TIFF, Rev.6.0 et RIFF WAV, auxquels il int�egre

des balises de m�etadonn�ees. L'objectif est d'assurer l'interop�erabilit�e entre les p�eri-

ph�eriques d'imagerie (appareil photo, imprimante, t�el�ephone portable, PDA) et le

photoware [44], dans l'ex�ecution de travaux photographiques sur ordinateurs grand

public. Les balises EXIF couvrent un large �eventail de donn�ees, que l'on peut r�epartir

en quatre cat�egories :

1. Les informations temporelles (date et heure du clich�e),2. Les informations relatives aux r�eglages de l'appareil,3. Une miniature de l'image pour pr�evisualisation dans un navigateur,4. Des informations de description et de copyright.

Le deuxi�eme standard est l'IIM (Information Interchange Model), propos�e en 1991

par l'IPTC [45] en association avec la NAA (Newspaper Association of America).

Le mod�ele IIM peut s'appliquer �a tout type de donn�ees multim�edia (audio, vid�eo,

texte) et a pour objectif de faciliter le partage ou l'�echange de celles-ci. Pour les pho-

tographies num�eriques, les informations IIM sont organis�ees en ensembles rattach�es

�a di��erents identi�ants. Commun�ement appel�ees headers IPTC, les m�etadonn�ees

IIM di��erent des m�etadonn�ees EXIF. Certaines d'entre elles ont �et�e adapt�ees par

di��erents logiciels commerciaux, comme par exemple Adobe. L'int�egration de m�eta-

donn�ees IPTC �a di��erents formats d'image s�eduit de plus en plus de photographes

professionnels ou amateurs. Les utilisateurs peuvent ainsi sauvegarder des informa-

tions de m�etadonn�ees d�ecrivant le contenu des photos num�eriques directement dans

ces derni�eres. Ce format va vraisemblablement optimiser la recherche d'images par

le contenu.

Il existe d'autres formats potentiels de m�etadonn�ees, tels que le DCMI (Dublin Core

Metadata Initiative) [46], le DIG35 (Digital Imaging Group Initiative) [47], le MPEG-

7 MPEG-7 [48] et le XMP (eXtensible Metadata Platform) XMP [49], toujours

42

Page 51: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

en d�eveloppement. Ces m�etadonn�ees sont en fait des balises qui sont captur�ees

automatiquement lors de la prise de vue. Si leur contenu devait etre jug�e insu�sant,

le balisage manuel est propos�e comme une alternative permettant de customiser les

m�etadonn�ees des photos num�eriques.

Figure 3.1 – Exemple de cycle de vie des images num�eriques

Figure 3.2 – Exemple d'extraction partielle de donn�ees EXIF �a partir d'uneimage num�erique

43

Page 52: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

3.2 Algorithmes de calcul pour le regroupement des

photos numeriques

Les scientifiques recherchent des solutions intelligentes de gestion des photos nume-

riques, et s’ interessent donc aux techniques d’ automatisation qui permettent d’ en

faciliter la navigation et/ou la recherche. Dans ses travaux, Rodden considere qu’ une

interface doit posseder deux fonctionnalites essentielles pour faciliter la navigation

des photos [12]. L’ une d’ elles est la technique de gestion automatique, qui per-

met par exemple de regrouper des photos en fonction de leurs metadonnees. Dans

l’ interface de navigation, une technique automatique de calcul permet de regrou-

per les photos dans des categories personnalisees, en analysant les caracteristiques

attendues. La definition du groupe selon le Larousse de la langue francaise est la

suivante : « un ensemble de choses, d’ animaux ou de personnes formant un tout et

definis par une caracteristique commune » . Dans un contexte de photo numerique,

le regroupement consiste a rassembler les photos ayant, d’ apres leurs metadonnees,

des caracteristiques communes. L’ idee principale du regroupement est de calcu-

ler/mesurer la distance entre deux ´elements, laquelle peut ˆetre maximum, minimum

ou moyenne. Une presentation generale des algorithmes qui s’ appliquent est propo-

see ci-apres :

1. Algorithme base sur l’ information chronologique : le regroupement s’ effectue

sur la date et l’ heure du cliche.

Le regroupement chronologique est considere comme le principe fondamental

de navigation et de recherche des cliches [50]. L’ une de ses principales applica-

tions est l’ organisation de photos sous forme de frise chronologique. Ce type

de regroupement ne donne pas de resultats satisfaisants dans la recherche

d’ ´elements specifiques, mais offre un apercu global des albums et collections

photos pour la navigation. Sur une frise lineaire, avec une seule ´echelle de

temps a disposition, ce type de regroupement peut vite devenir gourmand en

espace. C’ est pourquoi Harada et al. [51] se sont interesses au regroupement

chronologique sur trois ´echelles de temps (annee, mois, jour, cf. fig.3.3). Gem-

mell et al. integrent par ailleurs une fonctionnalite de recherche par mots-cles

[52] afin de repenser la hierarchisation des contenus photos numeriques. L’ al-

gorithme de PhotoMesa [29](cf. fig.3.4) permet par exemple de regrouper les

photos chronologiquement et par nom.

Figure 3.3 � Presentation de photos numeriques sur differentes ´echelles chro-nologiques, par Harada et al. [51]. De gauche a droite : sur uneannee, sur quatre mois, sur quinze jours (image extraite de l’ articlede Harada et al. [51])

44

Page 53: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Figure 3.4 – PhotoMesa(image extraite de www.cs.umd.edu/hcil/)

2. Algorithme bas�e sur l'information g�eographique : la position g�eographique est

l'une des informations cl�es �a etre enregistr�ees dans la photo [53]. Certains

appareils photos num�eriques �a capteur GPS int�egr�e enregistrent les coordon-

n�ees de la prise de vue dans les m�etadonn�ees du clich�e. Pour les appareils

classiques, le g�eobalisage manuel des photos a posteriori est possible, comme

le proposent Flickr et Google Picasa. Au-del�a des donn�ees GPS, di��erentes

valeurs peuvent etre enregistr�ees et utilis�ees dans le regroupement des photos,

comme par exemple la temp�erature ou l'intensit�e lumineuse.

Le regroupement des photos bas�e sur l'information g�eographique tel que pro-

pos�e par Flickr ou Google Picasa (services Web d'h�ebergement de photos) est

le plus r�epandu. �A la di��erence des syst�emes qui exploitent les informations

enregistr�ees via GPS, l'utilisateur peut g�eobaliser manuellement ses photos

ou utiliser un service de g�eolocalisation. Les photos sont ensuite regroup�ees

« g�eographiquement » sur la base de ces informations. Une �etude publi�ee

par Tomiai et al. de HP Tomiai et al. [54] compare di��erentes applications

Web qui exploitent ces balises. Cette �etude propose un nouveau mode de

navigation parmi les photos, navigation qui se base sur les m�etadonn�ees de

g�eolocalisation et de titre (mod�ele RDF, Resource Description Framework).

Une autre �etude Toyama et al. [55] s'int�eresse aux probl�ematiques associ�ees

au g�eobalisage des photos. Cette �etude propose, d'une part, cinq modes de

visualisation des clich�es pris �a di��erents endroits et, d'autre part, six modes

d'acquisition des balises de g�eolocalisation :

{ par saisie manuelle,

{ �a partir du header de l'image (m�etadonn�ees fournies par l'appareil),

{ �a partir d'un �equipement de localisation, comme par exemple un GPS,

{ �a partir des informations de RDV dans un agenda �electronique (lieu du

RDV),

{ �a partir d'un texte de description de l'image,

{ par association avec d'autres documents num�eriques a�n d'obtenir des ba-

lises de g�eolocalisation.

45

Page 54: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

3. Algorithme bas�e sur l'analyse du contenu : l'image est transform�ee en matrice

o�u chaque pixel est indiqu�e par sa valeur math�ematique. On �evalue ensuite les

similitudes entre images �a partir des mod�elisations obtenues[56]. L'algorithme

bas�e sur l'analyse du contenu permet d'extraire les caract�eristiques visuelles

de l'image telles que la couleur, la texture ou les formes. Dans l'approche

bas�ee sur la distribution spatiale des couleurs, l'approche locale (caract�eris-

tiques extraites d'une zone d�etermin�ee de l'image), vient compl�eter l'approche

globale (caract�eristiques extraites de l'image enti�ere), potentiellement trop

stricte pour obtenir une description satisfaisante de l'image. Pour l'extrac-

tion des param�etres de texture, l'algorithme s'int�eresse �a la granularit�e et aux

motifs r�ecurrents �a la surface de l'image. Dans les segments d'image, la d�e-

tection des formes est un param�etre essentiel dans l'identi�cation du contenu.

La forme d'une image est d�ecrite comme un contour simpli��e, repr�esent�e par

une courbe, dans des segments sp�eci�ques de l'image. A�n d'obtenir des r�e-

sultats plus pr�ecis dans l'estimation des contours, di��erents descripteurs ont

�et�e d�evelopp�es, tels que les points d'angle, les points d'int�eret ou les points

saillants.

Typiquement, les applications qui int�egrent le mode de regroupement bas�e sur

l'analyse du contenu travaillent sur les similitudes visuelles entre les photos.

Ces applications permettent, par exemple, d'organiser ses photos par recon-

naissance faciale [57][58][59] ou par similitude [60].La visualisation des photos

par similitude sait traiter les photos quasi identiques [61][62]. Un autre aspect

du regroupement bas�e sur l'analyse du contenu est la gestion des photos si-

milaires d�esordonn�ees [63] [64], puisqu'il est possible de regrouper les clich�es

en fonction de leur point de vue. Par ailleurs, FotoFile [36] (cf. �g.3.5) est un

syst�eme qui facilite l'annotation des photos en ex�ecutant un certain nombre

de techniques d'indexation automatique.

Figure 3.5 – FotoFile(image extraite de l'article of Kuchinsky et al. [36])

4. Algorithme multiple de regroupement : �a un niveau avanc�e et pour un r�esultat

plus pr�ecis, l'algorithme de regroupement peut s'appuyer sur une technique

duelle. Typiquement, l'algorithme se base sur deux crit�eres qui peuvent etre

l'information chronologique et g�eographique, ou encore l'information chro-

nologique et celle mesur�ee par des capteurs. L'algorithme s'int�eresse dans un

premier temps aux informations chronologiques. Le r�esultat obtenu est ensuite

a�n�e via la seconde technique.

Regroupement sur information chronologique et contenu

On peut parler de regroupement sur �ev�enement [65][66], dont l'algorithme

46

Page 55: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

travaille �a la fois sur l'information chronologique (date et heure) et les si-

militudes entre images, ce qui permet d'organiser les photos par �ev�enement

et sous-�ev�enement. Un exemple d'int�egration de cette approche est l'appli-

cation PhotoTOC [67]. Certaines applications avanc�ees qui int�egrent le re-

groupement multiple (identi�cation des �ev�enements et des personnes) savent

�egalement prendre en compte les annotations associ�ees aux images, comme

par exemple l'�etude men�ee par Suh and Bederson [68]. Shoebox [69] facilite

la navigation et la recherche de photos, et propose de regrouper les pho-

tos similaires d'un point de vue s�emantique et visuel. Il s'appuie pour cela

sur le contenu, les donn�ees chronologiques et les annotations vocales incor-

por�ees �a l'image. MediaBrowser [70] (cf. �g.3.6), quant �a lui, regroupe les

images et clips vid�eos via un m�ecanisme sp�eci�que de s�election et de �ltrage.

AutoAlbum [71] propose pour sa part de combiner di��erents mod�eles probabi-

listes, puisque les informations chronologiques des photos viennent am�eliorer

les r�esultats du regroupement bas�e sur l'analyse du contenu. MyPhotos [72]

propose un syst�eme prototype de recherche de photos, avec trois m�ethodes

possibles : par chronologie (date et heure), par similitude (sc�enes similaires)

ou par personne (sur la base des annotations et de la reconnaissance faciale).

Figure 3.6 – Mediabrowser(image extraite de www.hanselman.com)

Regroupement sur information chronologique et geographique

PhotoCompas [73] utilise les informations chronologiques et g�eographiques

pour organiser les photos selon deux hi�erarchies : lieux et �ev�enements.

Regroupement sur information chronologique, geographique et contenu

Le syst�eme prototype du labo HP [74] optimise la recherche des photos en

analysant leur contenu ainsi que les m�etadonn�ees fournies par l'appareil. Un

syst�eme d�evelopp�e par le FXPAL et int�egr�e �a diverses applications permet

de simpli�er la gestion des albums via une d�etection automatique des �ev�ene-

ments. Le �ltrage des m�etadonn�ees permet quant �a lui d'organiser les pho-

tos en cat�egories que l'on peut visualiser sous la forme d'un arbre ou d'un

calendrier [75]. L'interface interactive d'EasyAlbum [76] s'appuie sur la re-

connaissance faciale pour annoter les photos. Par ailleurs, un m�ecanisme de

visualisation sur crit�eres multiples permet �a l'utilisateur d'a�cher ses photos

par lieu, date, �ev�enement, ou encore selon le nombre de personnes pr�esentes

sur le clich�e.

Avec pour objectif une gestion optimis�ee des ressources, les algorithmes de

calcul �evoluent sans cesse, amenant les ordinateurs �a mieux comprendre la

s�emantique des contenus audiovisuels. A�n de pouvoir analyser l'information,

l'algorithme de demain devra etre capable non seulement de prendre en charge

une quantit�e �enorme de donn�ees, mais �egalement de partager les informations

acquises au travers d'une base de connaissance exible. Lew et al. [77] ont

47

Page 56: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

d�ecrit les principaux enjeux de la recherche de contenus audiovisuels :

{ La recherche s�emantique ax�ee sur la d�etection de concepts dans des conte-

nus pr�esentant des arri�ere-plans complexes,

{ Des algorithmes d'analyse multimodale et de recherche, particuli�erement

pour exploiter les synergies inter-contenus,

{ Des syst�emes exp�erimentaux d'exploration multim�edia pour parcourir les

contenus audiovisuels,

{ Des syst�emes de recherche interactive, de s�emantique �emergente ou de

retour de pertinence,

{ Une �evaluation ax�ee sur des jeux de tests repr�esentatifs et des mod�eles

d'usage.

La section suivante s'int�eresse aux d�eveloppements actuels autour des tech-

niques de visualisation des contenus photos num�eriques.

48

Page 57: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

3.3 Outils de gestion pour les contenus photos nu-

meriques

D'un point de vue utilisateur, l'exp�erience quotidienne de la photo num�erique peut

se r�esumer en trois mots : stockage, visualisation et recherche. Les outils de gestion

photo assurent trois fonctions principales qui correspondent aux attentes quoti-

diennes de l'utilisateur : regroupement, navigation et recherche. Ces outils seront

d�ecrits selon la fonction qu'ils assurent.

Le regroupement automatique est consid�er�e comme la fonctionnalit�e essentielle d'un

photoware, les algorithmes associ�es ayant �et�e d�ecrits dans la pr�ec�edente section. Le

regroupement a pour objectif de fournir �a l'utilisateur des techniques automatiques

pour parcourir ses albums photos ou les organiser. Un mode de regroupement clas-

sique se fait par ordre chronologique ou par analyse des contenus visuels sur des cri-

t�eres particuliers, comme par exemple la similitude des couleurs ou des visages [59].

A�n de compenser les faiblesses du regroupement automatique, le balisage (manuel

ou automatique) permet de cat�egoriser les albums. Sur la base d'�etudes labo, de

nombreux outils de gestion des photos ex�ecutent diverses requetes et recherches

au sein des contenus photos. Il s'appuyent pour cela sur di��erents algorithmes de

regroupement On peut citer PhotoTOC [ [67](cf. �g.3.7), Shoebox [69], l'applica-

tion photo EXPAL [75], celle d'HP [74], ou encore AutoAlbum [71], EasyAlbum

[76] (cf. �g.3.8), Myphotos [72] (cf. �g.3.9), SmartAlbum [78] et MiAlbum [79](cf.

�g.3.10). Cependant, ces outils de gestion, orient�es r�esultats, manquent cruellement

de techniques de visualisation qui permettraient d'am�eliorer la pr�esentation des r�e-

sultats et les modes d'interaction possibles. Par ailleurs, les interfaces propos�ees

s'appuient sur un algorithme sp�eci�que de regroupement permettant d'adresser des

cas sp�eci�ques, comme par exemple retrouver les photos d'untel par la reconnais-

sance faciale, ou encore n'a�cher que les photos prises dans un lieu donn�e, par le

regroupement bas�e sur l'information g�eographique. Il s'agit en fait de cas particu-

liers d'usage, et il manque un outil de gestion int�egr�e qui proposerait l'ensemble de

ces fonctionnalit�es.

Certains outils appliquent des mod�eles de visualisation qui facilitent la navigation

non seulement des r�esultats obtenus mais �egalement des contenus photos dans leur

ensemble. PhotoMesa [29] est un exemple typique : son interface simple permet,

d'une part, de visualiser les contenus photos et, d'autre part, de faciliter leur orga-

nisation. FotoFile [36](cf. �g.3.5) est un outil de recherche multim�edia qui applique

di��erentes techniques de visualisation, y compris un navigateur hyperbolique, a�n

de visualiser les r�esultats de la recherche selon di��erents sc�enarii d'usage. Le navi-

gateur de PhotoFinder [80] propose un a�chage multiple des vignettes ainsi qu'une

mise �a jour dynamique des r�esultats. Sur le meme principe de design, MediaBrowser

[70] (cf. �g.3.6), MyLifeBits [52] (cf. �g.3.11) et Agrafo [81](cf. �g.3.12) ont mis en

place des e�ets visuels plus pouss�es dans la pr�esentation des r�esultats. Photohelix

[82](cf. �g.3.13) propose quant �a lui une interface circulaire originale. L'origina-

lit�e de ces outils (mod�eles de visualisation et techniques d'interaction sp�eci�ques)

rend agr�eable la pratique photo au quotidien. N�eanmoins, ces outils pr�esentent tous

le meme inconv�enient : ils ne proposent pas de m�ecanisme simple et exible de

navigation parmi les contenus.

La pratique quotidienne de la photo num�erique varie selon les sc�enarii d'usage (re-

cherche classique d'images, partage photo ou navigation photo pour le plaisir). Les

49

Page 58: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

outils logiciels d�evelopp�es en labo se sont jusqu'�a pr�esent int�eress�es uniquement �a

l'obtention des r�esultats, mais pas �a la visualisation de ces derniers. Dans un souci

d'usabilit�e et de satisfaction des attentes utilisateur, il faudrait prendre en compte

les di��erents scenarii d'usage.

Figure 3.7 – PhotoTOC, navigateur d'images avec « vue d'ensemble + d�etail »(image extraite de l'article de PhotoTOC[67])

Figure 3.8 – Navigateur d'images EasyAlbum (image extraite de l'articled'EasyAlbum[76])

50

Page 59: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Figure 3.9 – Navigateur d'images MyPhotos impl�ement�e avec une interface ca-lendrier photo (image extraite de l'article de MyPhotos[72])

Figure 3.10 – Navigateur d'images MiAlbum impl�ement�e avec une approchesemi-automatique d'annotation des images (image extraite del'article d'MiAlbum[79])

Figure 3.11 – MyLifeBits (�a g. : visualisation des r�esultats regroup�es chrono-logiquement, �a dr. : visualisation sur frise chronologique)(imageextraite de l'article de MyLifeBits[52])

51

Page 60: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Figure 3.12 – Di��erents modes de pr�esentation des photos sous Agrafo (imageextraite de l'article d'Agrafo[81])

Figure 3.13 – PhotoHelix (image extraite de l'article de PhotoHelix[82])

52

Page 61: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

3.4 Techniques de visualisation des photos nume-

riques

Stockage, visualisation et recherche sont les trois incontournables de la photo num�e-

rique au quotidien. Contrairement aux donn�ees physiques, les donn�ees num�eriques

peuvent etre fortement compress�ees : un disque dur 250 Giga permet de restituer

jusqu'�a 50 000 photos num�eriques (taille moyenne d'une photo : 5 M�ega) [83]. La

visualisation des photos num�eriques se fait sur la base d'une analyse avanc�ee. L'ob-

jectif est « d'�eplucher » le contenu en s'appuyant sur m�ethodes souples, les indices

qui permettent d'acc�eder au contenu cibl�e restant clairement identi�ables durant

la navigation. Pour la visualisation de contenus photographiques cons�equents, un

syst�eme de gestion photo doit assurer deux fonctionnalit�es essentielles que nous

tacherons de pr�esenter ci-apr�es :

1. Visualiser un maximum de contenu sur un �ecran de taille r�eduite (vue macro-

scopique de l'ensemble des photos) ;

2. Visualiser les d�etails d'un contenu (vue microscopique d'une photo donn�ee).

Pour la premi�ere fonctionnalit�e, la solution est de redimensionner le contenu a�n

d'optimiser l'espace �ecran, qui permet alors de visualiser l'ensemble des �el�ements

du contenu. Les p�eriph�eriques de sortie traditionnels (�ecrans) et les photos �etant au

format rectangulaire, les chercheurs ont simplement miniaturis�e les photos puis les

ont arrang�ees en colonnes et en lignes. Si l'a�chage par vignettes permet d'utiliser

l'espace �ecran au maximum, il a tout de meme quelques inconv�enients. En e�et,

une trop forte densit�e d'informations peut etre synonyme de surcharge visuelle et

de navigation laborieuse. Par ailleurs, la miniaturisation des photos entra�ne une

perte d'information sur le contenu des images. Di�cile d'identi�er un contenu �a

partir d'une photo minuscule, �a moins de pouvoir zoomer dessus. Les interfaces de

certains services Web, comme par exemple Flickr, proposent une solution alternative.

La miniature qui s'a�che ne repr�esente pas l'image tout enti�ere mais une partie

de celle-ci uniquement (cf. �g.3.14). Le principal probl�eme avec la visualisation

par vignettes reste n�eanmoins que, dans le cas d'une collection photographique

cons�equente, l'utilisateur n'a pas pleinement conscience du contenu, c'est-�a-dire

qu'on ne lui pr�esente pas d'aper�cu qui r�esumerait en une fois l'ensemble de ce

contenu. A�n d'a�ner cet aper�cu, un mode de visualisation possible est la vue

arbre [84] qui permet d'a�cher les vignettes de fa�con informative, les photos �etant

regroup�ees par cat�egorie. Grace �a ce type d'a�chage, l'utilisateur peut parcourir sa

collection en pleine connaissance du contenu, avec un regroupement des photos bas�e

sur les similitudes visuelles. La deuxi�eme fonctionnalit�e essentielle d'un syst�eme de

gestion photo est la technique de zoom. �A la base, celle-ci consiste tout simplement

en l'agrandissement de l'objet s�electionn�e. Pour l'a�chage en arbre, les chercheurs

vont plus loin et appliquent la technique dite de « focus + contexte » dans les

op�erations de zoom. Cette technique duelle o�re davantage de souplesse dans les

op�erations de zoom et permet aux utilisateurs de changer de vue en un instant. Par

ailleurs, cela permet d'�eviter, durant la navigation, les ph�enom�enes de d�esorientation

dans la hi�erarchie du syst�eme. L'interface de PhotoMesa [[84] en est un exemple.

Visualisation 3D

Les m�ethodes de visualisation pr�ec�edemment d�ecrites sont g�en�eralement consid�e-

r�ees comme des m�ethodes de visualisation 2D. La visualisation 2D permet une

53

Page 62: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Figure 3.14 – Miniature Flickr(image extraite de www. ickr.com)

navigation simple et rapide des contenus. N�eanmoins, elle o�re peu de modes de

pr�esentation visuelle compar�e �a la visualisation 3D. Avec les progr�es des technolo-

gies informatiques, les chercheurs commencent �a int�egrer la visualisation 3D aux

syst�emes d'InfoVis (visualisation de l'information). Ils consid�erent que l'e�et de vi-

sualisation 3D peut etre un levier int�eressant dans l'enrichissement des modes de

visualisation des donn�ees. L'objectif de la visualisation 3D peut etre r�esum�e comme

suit :

1. Augmenter la quantit�e de contenu pr�esent�e �a l'utilisateur,

2. Faciliter la navigation de contenus photos cons�equents,

3. Enrichir les techniques d'interaction dans la navigation de contenus cons�e-

quents,

4. Augmenter le niveau de satisfaction utilisateur d'un point de vue esth�etique,

durant la navigation.

Quand la visualisation 3D est apparue, la capacit�e de calcul des syst�emes �etait as-

sez limit�ee, et ses objectifs sont rest�es th�eoriques. Compar�e �a la visualisation 2D,

la pr�esentation 3D utilise davantage d'e�ets d'animation, typiquement la rotation,

la transformation ou les d�eplacements d'objets. Des e�ets visuels avanc�es tels que

le fade-in (apparition en fondu), le fade-out (fondu au noir) ou l'acc�el�eration per-

mettent �egalement d'am�eliorer l'e�et de visualisation 3D. Combs and Bederson [85]

ont compar�e les interfaces 2D et 3D. Dans cette �etude, la puissance de calcul, in-

su�sante, ne permettait pas une restitution correcte de l'environnement graphique

3D et l'interface 3D �etait, du coup, consid�er�ee comme insatisfaisante. Les syst�emes

informatiques actuels, plus puissants, permettent �a de nombreux syst�emes d'Info-

Vis d'int�egrer la visualisation 3D temps r�eel. Les utilisateurs peuvent manipuler

54

Page 63: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

leurs donn�ees et analyser leurs contenus de di��erents points de vue, comme avec

Microsoft PhotoSynth [86](cf. �g.3.15).

Figure 3.15 – PhotoSynth(image extraite de photosynth.net)

RSVP

Une autre technique de visualisation, la RSVP (Rapid Serial Visual Presentation),

propose un mode de pr�esentation rapide et s�equentiel des photos, a�n de faciliter la

navigation de contenus photos cons�equents. Dans l'�etude de Cooper et al. [1] (cf.

�g.3.16), l'auteur compare l'e�cacit�e de la pr�esentation statique �a celle de la pr�esen-

tation dynamique sur di��erentes taches de recherche dans une collection d'images.

Trois modes statiques (diaporama, pele-mele, juxtaposition) et trois modes RSVP

(diagonale, anneau, ux) sont test�es sur trois taches de recherche d'image. Bien que

les conclusions de l'exp�erimentation indiquent une certaine e�cacit�e de la RSVP,

cette technique serait-elle vraiment utile �a l'usage ? Actuellement, la vitesse de pr�e-

sentation des applications RSVP est soit enti�erement automatique, soit r�eglable

manuellement. De par sa vitesse de pr�esentation �xe, la RSVP automatique clas-

sique risquerait de freiner la navigation, voire d'�enerver l'utilisateur, mais un controle

purement manuel de la RSVP pourrait s'av�erer laborieux dans le cas de contenus

trop volumineux. Par cons�equent, en environnement r�eel, la solution ne serait pas

une pr�esentation automatique mais un m�ecanisme de pr�esentation sensible aux in-

tentions de navigation de l'utilisateur. Ce type de m�ecanisme dynamique n'a jamais

�et�e propos�e sur de la RSVP. L'id�ee de cette interface est que, sur d�etection des

intentions de l'utilisateur, on d�e�nit la vitesse de navigation la plus appropri�ee. Par

exemple, sur l'iPhone, la vitesse de d�e�lement et le contenu pr�esent�e sur le cover

ow varient selon la fr�equence �a laquelle on « feuillette » l'iPhone du doigt.

Un autre d�ebat autour de la RSVP classique est le contenu qui est pr�esent�e. Tout

comme la vitesse de pr�esentation, le contenu pr�esent�e en RSVP est �xe, ce qui n'est

pas sans pr�esenter certains inconv�enients. La RSVP a�che une ou plusieurs photos

�a la fois. Le nombre d'objets pr�esent�e est �xe et il n'existe aucun m�ecanisme qui

permette la transition du contenu pr�esent�e, c'est-�a-dire, par exemple, de n'a�cher

non plus une mais trois photos lorsque l'on d�etecte que l'utilisateur feuillette �a une

fr�equence �elev�ee.

Somme toute, la RSVP vise un mode de pr�esentation vari�e et anim�e, �a meme

d'attirer l'attention de l'utilisateur. Cette technique de pr�esentation « active » est

susceptible de convenir �a des applications plus orient�ees divertissement qu'analyse,

55

Page 64: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

comme par exemple des navigateurs d'images. Une application potentielle de la

RSVP est la pr�esentation de photos num�eriques sur interface mobile.

Figure 3.16 – Six modes de pr�esentation de RSVP(image extraite de l'article de Cooper et al. [1])

Visualisation focus + contexte

Dans les grandes lignes, la visualisation focus + contexte permet d'a�cher �a la

fois l'objet d'int�eret et un aper�cu g�en�eral du contenu de l'image. L'utilisateur peut

ainsi observer simultan�ement les informations de premier et d'arri�ere-plan (le focus

et le contexte, respectivement), et ainsi « voir l'arbre sans qu'il cache la foret ».

Le principe de design de ce type de visualisation est d'agrandir le point d'int�eret

jusqu'�a un niveau de d�etail avanc�e, pour mettre en valeur le point de focus par

rapport �a l'espace d'information dans sa globalit�e. Quelques exemples de visualisa-

tion focus + contexte sont le perspective wall [87](cf. �g.3.17), le m�elange [88](cf.

�g.3.18), l'arbre hyperbolique [89](cf. �g.3.19) et la vue �sheye (oeil-de-poisson,

[90],cf. �g.3.20). Les deux premi�eres applications s'appuient sur une technique de

« pliage » des objets, les deux derni�eres sur une technique de distorsion classique.

La visualisation focus + contexte permet la navigation contextuelle de contenus

tr�es vastes. Toutefois, dans le cas d'une telle quantit�e de contenus, quid de la sur-

charge visuelle ? Et pour quelle e�cacit�e sur petit �ecran ? Doit-on mettre au point

une nouvelle technique de visualisation qui permettrait de situer le focus dans son

contexte, a�n de contrer cet inconv�enient ? La solution reste �a trouver.

Figure 3.17 – Perspective wall (image extraite de l'article de Mackinlay et al.[87])

56

Page 65: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Figure 3.18 – M�elange (image extraite de l'article de Elmqvist et al. [88])

Figure 3.19 – Arbre hyperbolique (image extraite de Lamping et al. [89])

Figure 3.20 – Vue �sheye(image extraite de en.wikipedia.org)

57

Page 66: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

3.5 Casual Infovis et techniques d’interaction sur

les appareils mobiles

De nos jours, de par leurs capacit�es de calcul et d'a�chage �elev�ees, les appareils

mobiles jouent un role important : grace �a eux, les utilisateurs peuvent acc�eder �a

leur contenus num�eriques n'importe o�u, n'importe quand. En g�en�eral, les d�evelop-

pements des techniques de visualisation sur appareils mobiles grand public suivent

deux directions : le divertissement ou l'e�cacit�e. La visualisation orient�ee divertisse-

ment propose davantage d'interactivit�e dans ses pr�esentations, et tend �a n'a�cher

qu'une partie limit�ee du contenu photo. A l'inverse, la visualisation orient�ee e�ca-

cit�e optimise l'espace d'a�chage via l'utilisation de vignettes, et pr�esente davantage

de contenu. Dans un souci de clart�e, pr�ecisons que la pr�esente th�ese s'int�eresse aux

appareils mobiles disposant de capacit�es de visualisation et de calcul. Elle ne traite

pas des p�eriph�eriques mobiles.

Dans le cadre d'�etudes labo, di��erents outils syst�eme ont �et�e int�egr�es sur des ap-

pareils mobiles a�n de tester l'interface conceptuelle et les techniques propos�ees.

Pocket PhotoMesa [91], avec son interface zoomable h�erit�ee de PhotoMesa, a �et�e

int�egr�e �a des PDAs. Sur des PDAs, toujours, Flutter [92](cf. �g.3.21) a �et�e int�e-

gr�e avec des techniques d'interaction tangible et des pr�esentations plus artistiques

(approche similaire aux travaux de Van Renesse et al. [93], Demontis et al. [94]

et Porta [95]. Le but est d'encourager l'usage du PDA dans la navigation photo

et de rendre celle-ci plus plaisante. En ce qui concerne les donn�ees chronologiques,

l'�etude d'Harada et al. [51] propose une interface zoomable avec visualisation par

frises multiples, pour une navigation des contenus photos sur di��erentes �echelles de

temps. En ce qui concerne les d�eveloppements industriels sur t�el�ephones mobiles

Figure 3.21 – Flutter(image extraite de Williamson and Brown [92])

grand public, notons que l'Apple iPhone applique un a�chage vignettes classique

et une pr�esentation Cover ow avec feuilletage intuitif, ce qui permet de zoomer

et de naviguer d'une fa�con rapide et personnalis�ee. Le Acer F900 (cf. �g.3.22 et

le HTC touch HD (cf. �g.3.22 proposent quant �a eux une visualisation des photos

sous forme de cartes empil�ees que l'on fait d�e�ler. Pour a�cher en simultan�e photos

et albums musicaux, le LG KM900 (cf. �g.3.24 divise son �ecran en deux carrousels

verticaux. Le Nokia N82 (cf. �g.3.23 propose pour sa part une visualisation via

un carrousel en demi-cercle qui permet d'optimiser l'espace d'a�chage des photos.

Autrement, l'application iPhone MyPhotoEgg [96](cf. �g.3.24 propose une visuali-

sation sph�erique 3D des albums photos. L'utilisateur peut visualiser ses photos dans

58

Page 67: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

(a) Acer F900 (b) HTC Touch HD

Figure 3.22 – Interface de l'Acer F900(a) et du HTC Touch HD(b)(image(a) extraite de www.acer.com)(image(b) extraite de www.htc.com)

un ou plusieurs « oeufs » ottant dans l'espace.

La visualisation des photos sur des appareils mobiles en est �a ses pr�emices. En

g�en�eral, les widgets fournis avec le t�el�ephone portable permettent des modes de

visualisation multiples, orient�es e�cacit�e ou esth�etique. Le souci est qu'un widget

esth�etiquement r�eussi peut etre source de ralentissement, de par les capacit�es de

calcul limit�ees des appareils mobiles. Le probl�eme se pose surtout dans le cas de

contenus photo cons�equents. C'est probablement une des raisons pour lesquelles

les mobiles que l'on retrouve actuellement sur le march�e n'int�egrent toujours pas

certaines interfaces graphiques utilisateur trop gourmandes en ressources syst�emes.

Techniques de manipulation sur appareils mobiles

De dimensions r�eduites, les appareils mobiles s'emportent partout avec soi. De par

leur petite taille, les mouvements n�ecessaires �a leur manipulation sont plus phy-

siques, que l'interaction se fasse �a une ou deux mains. Les appareils mobiles clas-

siques, de par leurs capacit�es r�eduites, ne permettent pas d'int�egrer une grande

vari�et�e de techniques d'interaction et s'appuient majoritairement sur un mode de

saisie avec utilisation de boutons. D�es ses d�ebuts, l'int�egration d'�ecrans tactiles sur

des appareils mobiles a permis de d�ecouvrir des modes d'interaction di��erents. L'in-

t�egration de ce type d'�ecran sur les appareils mobiles n'est pas encore tr�es fr�equente

de par son cout et les limitations autour de son impl�ementation. Avec le lancement

de l'iPhone en 2007, Apple a donn�e corps �a une vision nouvelle de l'appareil mobile.

L'introduction de l'�ecran multi-touch et de divers capteurs (ex : acc�el�erom�etres,

capteurs de proximit�e ou de lumi�ere ambiante) enrichit l'interaction naturelle et les

modes de visualisation associ�es. Suite au succ�es commercial de l'iPhone, l'a�chage

tactile et les gestes de controle qui lui sont associ�es sont devenus des probl�ematiques

59

Page 68: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

(a) NokiaN82 (b) Motorola A3100 Fun Al-bum

Figure 3.23 – Interface du Nokia N82(a) et du Motorola A3100 Fun Album(b)(image(a) extraite de www.nokia.com)(image(b) extraite de www.sogi.com.tw)

de design incontournables, qui repr�esentent d�esormais les sp�eci�cations fondamen-

tales d'un appareil mobile.

En r�egle g�en�erale, on interagit avec une interface gestuelle via des gestes tactiles

ou non-tactiles. Une interface gestuelle est d�e�nie comme « tactile » lorsqu'elle est

�equip�ee d'un �ecran tactile ou d'autres m�ecanismes sp�eci�ques, et qu'elle n�ecessite

des gestes de manipulation physique dans l'activation de fonctions. �A l'inverse, une

interface gestuelle est d�e�nie comme « non-tactile » lorsqu'elle int�egre des capteurs

qui permettent l'activation de fonctions sur d�etection, �a distance, de mouvements

de la main. Un exemple de ce type d'int�egration est le panneau 3D d�evelopp�e par

Mitsubishi Electronic [98](cf. �g.3.25), avec controle gestuel tactile et non-tactile.

Toshiba a �egalement d�evelopp�e le laptop Qosmio G55, dont l'interface gestuelle 3D

permet de commander �a distance le bureau Windows ainsi que certaines applications

[99](cf. �g.3.26). Toshiba a d'ailleurs int�egr�e ce type d'interface �a ses t�el�eviseurs. Si

le controle gestuel 3D permet la commande �a distance d'un syst�eme, on consid�ere

n�eanmoins qu'il manque encore de pr�ecision et de sensibilit�e.

Les techniques de d�etection se retrouvent dans di��erentes applications mobiles.

Leurs usages sont sp�eci�ques et elles s'appuient sur di��erents types de capteurs.

Certaines interfaces int�egrent par exemple des capteurs d'inclinaison. La moindre

inclinaison de la main est capt�ee et traduite en mouvement dans l'application pour

parcourir une carte, un album photo [100] [101] ou s�electionner un menu [102][103].

On parle alors d'application �a capteur unique. En r�egle g�en�erale, les applications in-

t�egrent directement des capteurs d'inclinaison, mais une autre solution est de plug-

ger sur l'appareil mobile un dongle USB qui contient le capteur d'inclinaison [101].

Compaq a d�evelopp�e un prototype de cadre photo num�erique [102] qui int�egre un

capteur d'inclinaison deux axes, l'utilisateur pouvant faire d�e�ler ou orienter ses

photos via un controle gestuel. Un autre exemple est un PDA int�egrant des cap-

teurs multiples [104] : capteur de proximit�e, capteur tactile et capteur d'inclinaison.

60

Page 69: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

(a) LG KM900

(b) My Photo Egg

Figure 3.24 � Interface du LG KM900(a) et du My Photo Egg(b)(image(a) extraite de www.lg.com)(image(b) extraite de www.myphotoegg.com)

61

Page 70: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Figure 3.25 – Panneau tactile 3D d�evelopp�e par Mitsubishi(image extraite de techon.nikkeibp.co.jp)

Figure 3.26 – Ordinateur portable TOSHIBA Qosmio avec interface gestuelle(image extraite de www.cbc.ca)

L'�etude �evalue les performances de chaque capteur sur la base de tests techniques.

SideSight est une application particuli�erement int�eressante [105] des techniques de

d�etection. Il s'agit d'un t�el�ephone portable qui int�egre des capteurs de proximit�e

infra-rouge, permettant ainsi un controle gestuel non-tactile autour du t�el�ephone.

D'un point de vue utilisateur, les mouvements d'inclinaison permettent d'interagir

d'une fa�con naturelle avec les appareils mobiles. Cependant, l'association simulta-

n�ee de certains mouvements (rotation ou inclinaison) avec un a�chage �a l'�ecran

peut entra�ner des probl�emes d'usabilit�e lors de l'ex�ecution de certaines taches. Par

exemple, d�erouler une carte sur inclinaison de l'appareil en meme temps qu'on la

consulte prend un certain temps. Cela risque, �a force, de perturber le point d'int�e-

ret visuel et d'entra�ner certains e�ets physiques genants, comme par exemple une

sensation de vertige. A�n d'�eviter ce genre d'inconv�enient, on pourrait imaginer

n'appliquer ce type de controle qu'�a des taches r�ealis�ees en un instant, c'est-�a-dire

sur une p�eriode assez courte pour n'a�ecter que peu ou pas du tout l'usage pre-

mier, comme par exemple pour passer du mode portrait au mode paysage. Actuel-

lement, les techniques d'inclinaison sont largement r�epandues dans les applications

de gaming sur mobiles. Quoi qu'il en soit, avant int�egration de toute technique de

d�etection, il faudrait commencer par identi�er et lister les usages possibles, a�n

d'aider les designers dans la mise au point de techniques d'interaction cr�eatives et

intuitives.

62

Page 71: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

3.6 Methodologie d’evaluation des navigateurs d’images

Les performances d'un outil syst�eme d�evelopp�e pour la navigation de photos num�e-

riques sont fortement li�ees �a son usage en environnement r�eel. En g�en�eral, les �etudes

labos s'organisent autour de taches intensives permettant de simuler les comporte-

ments utilisateur en environnement r�eel. Les �etudes quantitatives ont pour objectif

de d�egager des donn�ees signi�catives �a partir des r�esultats obtenus sur les taches

en question. Typiquement, on suivra cette approche dans l'�evaluation d'un syst�eme

complexe ou encore dans celle d'un simple m�ecanisme d'interface, l'objectif �etant

d'�evaluer le degr�e d'e�cacit�e du syst�eme. Les �etudes qualitatives, quant �a elles,

sont souvent men�ees dans le but d'observer les comportements sur le long terme et

d'identi�er d'�eventuelles variations de ces comportements.

Les navigateurs d'images d�evelopp�es dans le cadre d'�etudes labos sont pour la plu-

part pr�evus pour un usage de bureau. L'�etude quantitative de ce type d'application

consiste g�en�eralement en une comparaison avec des applications similaires ou en

une auto-observation dont l'objectif est d'�evaluer les performances de chacune des

techniques propos�ees. L'objectif de l'�evaluation �etant d'appr�ecier l'e�cacit�e du sys-

t�eme propos�e, on va, typiquement, demander �a l'utilisateur de retrouver une image

ou une photo donn�ee. Des taches typiques de recherche peuvent etre les suivantes :

1. Recherche d'une cible sur la base d'un exemple visuel.

2. Recherche d'une cible sur la base d'une description textuelle pr�ecise, par

exemple, « un chat blanc sur un vieux bureau jaune ».

3. Recherche d'une cible sur la base de mots-cl�es, sans description d�etaill�ee de

la cible.

4. Recherche des photos pr�ef�er�ees.

Ces taches re �etent probablement un usage en environnement r�eel, que l'on ait ou

non une id�ee pr�ecise de la photo recherch�ee. N�eanmoins, sur la troisi�eme tache,

les r�esultats obtenus peuvent varier, tous les participants n'associant pas les memes

concepts aux mots-cl�es qui leur sont pr�esent�es. Par ailleurs, le crit�ere �etant de voir �a

quelle vitesse les taches peuvent etre accomplies, ces taches, except�e la quatri�eme,

sont souvent ex�ecut�ees avec une limite dans le temps, ce qui fait pression sur les

utilisateurs. Sur certaines taches intensives visant �a simuler la navigation de contenus

photos dans un cadre professionnel, cette limitation temporelle peut agir comme un

stimulant sur les participants et augmenter la fr�equence d'ex�ecution. Consid�eration

qui n'a toutefois pas lieu d'etre dans un contexte de navigation d'albums photos,

dans la mesure o�u cette navigation vise le plaisir, pas l'e�cacit�e.

L'usage des navigateurs d'images ne se limite pas �a la recherche de photos dans le

cadre d'une activit�e individuelle. Il permet �egalement l'ex�ecution de taches de par-

tage de photos en environnement multi-utilisateurs. Les �etudes qualitatives placent

souvent les participants dans un environnement permettant l'ex�ecution de taches

de narration et de partage des photos. A�n d'encourager l'�emergence de compor-

tements utilisateurs au cours de l'exp�erience, il est important que les participants

parcourent leurs propres contenus photos, car cela stimule l'�evocation du souvenir

et la narration. Leur connaissance des contenus a�ecte les r�esultats obtenus et va

probablement, dans un premier temps, faciliter la tache de recherche.

La m�ethodologie �a peine d�ecrite est appliqu�ee dans l'�evaluation de navigateurs

d'images de type InfoVis classique et Casual InfoVis. Si Porta [95] �evaluent les

63

Page 72: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

interfaces Casual InfoVis sur la base d'une m�ethodologie quantitative, ils n'ont

peut-etre pas su �evaluer les avantages que les utilisateurs en retirent. Pousman

et al. [19] ont identi��e plusieurs probl�ematiques dans l'�evaluation du Casual Infovis.

La di�cult�e d'�evaluation du Casual InfoVis tient au fait qu'il est moins orient�e «productivit�e » que les InfoVis classiques. Avec le Casual InfoVis, on ne sait pas

exactement ce que l'on souhaite mesurer. Par ailleurs, si les syst�emes d'InfoVis

classiques proposent une pr�esentation « cadr�ee » des donn�ees dans une perspective

d'analyse, le Casual Infovis propose quant �a lui une pr�esentation souple des contenus

permettant de d�eclencher des indices �emotionnels chez l'utilisateur. En�n, le point le

plus important est que les �etudes labos classiques s'appuient sur un mod�ele d'usage

r�egulier dans l'�evaluation des taches, m�ethodologie qui n'est que peu adapt�ee au

Casual Infovis dans la mesure o�u ce dernier concerne des usages occasionnels. Les

�etudes labos classiques peinent par ailleurs �a mesurer les b�en�e�ces potentiels qui

r�esulteraient d'une accumulation d'usages occasionnels.

On peut n�eanmoins sugg�erer une approche potentielle d'�evaluation du Casual Info-

vis :

1. Mesure du Casual Infovis par une observation sur le long terme englobant

usages r�eguliers et occasionnels. Si le syst�eme est per�cu comme satisfaisant,

les r�esultats obtenus devraient permettre de d�e�nir si cela est du �a l'e�et de

nouveaut�e ou �a l'attraction visuelle.

2. �Evaluation du Casual InfoVis via des entretiens ouverts qui invitent les partici-

pants �a « raconter » les photos apr�es ex�ecution de taches orient�ees e�cacit�e.

Ces entretiens, lorsqu'ils sont accumul�es sur di��erentes p�eriodes, permettent

de r�ev�eler les di��erentes r�e exions des participants vis-�a-vis du Casual InfoVis.

En conclusion, le Casual InfoVis implique des usages sur des intervalles de temps

irr�eguliers. Les utilisateurs sont invit�es �a interagir avec des contenus multim�edia

personnels �a partir de points de vue vari�es, ce qui les am�ene �a se rem�emorer des

histoires, souvenirs et moments particuliers de leur existence. Dans la mesure o�u ces

m�ecanismes d�eclench�es par des signaux �emotionnels sont susceptibles de varier dans

le temps, une observation sur le long terme est n�ecessaire a�n de pouvoir mesurer

les b�en�e�ces potentiels du Casual InfoVis.

64

Page 73: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

3.7 Reflexion sur le design et conclusion

Nous dressons l'�etat de l'art de la visualisation des photos num�eriques, par le biais

d'une pr�esentation des technologies associ�ees, des impl�ementations d'outils logi-

ciels et de divers dispositifs permettant la visualisation de ces contenus. En ce qui

concerne le d�eveloppement des technologies de reconnaissance, la plupart d'entre

elles ont tendance �a ne prendre en compte qu'un usage unique qui ne permet

d'adresser qu'un type sp�eci�que de photo. De ce fait, les �etudes qui s'appuient sur

ces technologies ne peuvent pas adresser un �eventail tr�es large d'usages et/ou de

contenus photos. Par ailleurs, les outils syst�emes actuels manquent d'une interface

sp�eci�que qui permettrait d'interagir avec plusieurs types de photos num�eriques.

A�n d'int�egrer di��erentes technologies de reconnaissance, l'outil syst�eme id�eal de-

vrait proposer des interfaces multiples capables de supporter diverses taches, sur

des sc�enarii sp�eci�ques.

Les outils d'InfoVis classiques permettent de pr�esenter des donn�ees professionnelles

et personnelles. Le Casual InfoVis adresse quant �a lui des usages plus sp�eci�ques,

plus souples, autour de contenus personnels tels que des photos num�eriques. Dans

la gestion des photos num�eriques, les syst�emes potentiels vont devoir satisfaire la

demande utilisateur en environnement r�eel. L'interface associ�ee joue �egalement un

role cl�e : permettre �a l'utilisateur d'appr�ehender la nature premi�ere de contenus

�emotionnellement riches. En ce qui concerne le Casual InfoVis, les appareils mobiles

sont le medium essentiel �a un usage court terme, que la condition de mobilit�e soit

continue ou nomade. Les d�eveloppements en design d'interfaces mobiles mettent

rarement l'accent sur le Casual InfoVis dans la navigation de contenus personnels.

Le plus souvent, c'est lors de moments de ottement que les utilisateurs parcourent

les contenus photos num�eriques stock�es sur leur mobile. Ce type d'usage est suscep-

tible d'amener �a la fois du divertissement et une piste de r�e exion sur les aspects

�emotionnels. L'int�egration du Casual Infovis aux appareils portables permettrait

d'enrichir �a la fois le divertissement et les aspects �emotionnels, puisqu'il s'agit d'un

m�ecanisme permettant un transfert des contenus photos num�eriques sur des usages

vari�es.

Face �a un contenu riche en indices �emotionnels, la premi�ere question que se pose le

designer est la suivante : comment proposer une plateforme qui permette la commu-

nication contenus/utilisateurs ? De par la vari�et�e des contenus et usages concern�es,

le p�erim�etre de cette plateforme est potentiellement vaste. Les contenus �emotionnels

sont complexes, la fa�con dont ils sont appr�ehend�es et reconstruits variant fortement

d'une personne �a l'autre. Pour communiquer avec des contenus visuels, on peut

imaginer une approche s'appuyant sur une pr�esentation visuelle, l'insertion de si-

gnaux auditifs vecteurs d'�emotions et de souvenirs, la manipulation tangible ou

encore un mode d'organisation qui attirerait dans un premier temps l'attention de

l'utilisateur puis d�eclencherait des indices potentiels tout au long de l'exp�erience

d'utilisation. En �g.3.27, nous revenons sur la �g.2.12 et nous int�eressons aux com-

posants de l'interface et contenus �emotionnels. Les approches de communication,

quelles qu'elles soient, devront int�egrer les �eventuels d�eveloppements de l'�etat de

l'art a�n de pouvoir tenir techniquement le cap. Le designer devra explorer toutes

les pistes technologiques possibles a�n de construire une ressource riche en « d�e-

clencheurs d'�emotions ». Pr�esent�es de di��erentes mani�eres, ces �el�ements devraient,

a fortiori, faire ressortir les indices �emotionnels pr�esents dans les contenus et susciter

l'�evocation de souvenirs chez l'utilisateur. Id�ealement, la plateforme de communica-

65

Page 74: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

tion devra int�egrer un m�ecanisme de manipulation de ces �el�ements « d�eclencheurs »des contenus �emotionnels. Cela devrait favoriser la d�ecouverte de l'inattendu lors de

la navigation parmi des contenus personnels.

Figure 3.27 – Composants de la plateforme de communication et contenus�emotionnels

66

Page 75: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Chapitre 4

Design I

Le pr�esent chapitre s'appuie en partie sur l'article « A tangible interface for browsing

digital photo collections » pr�esent�e au TEI 2008. Nous nous int�eressons aux tech-

niques d'interaction sur appareils portables et analysons les gestes de manipulation

associ�es. D'un cot�e, les interfaces WIMP traditionnelles ne satisfont plus l'interac-

tion avec les contenus num�eriques sur appareils portables. De l'autre, les appareils

portables contribuent largement �a la di�usion des contenus personnels, contenus

dont la manipulation n'a plus grand-chose �a voir avec celle de donn�ees �a carac-

t�ere professionnel. Sur ce constat, nous r�e �echissons �a des techniques potentielles

d'interaction pour usage sur les futurs appareils portables. Apr�es une pr�esentation

des gestes de manipulation associ�es, nous nous int�eressons aux principes de mou-

vement de la main et �etudions les gestes tactiles. Nous mettons en relation ces

gestes de manipulation et la probl�ematique d'interaction sur des contenus photos

num�eriques et proposons dans ce sens di��erents mappages permettant la mise en

place des techniques d'interaction. La m�etaphore du jeu inspir�ee du Rubik's cube

nous permet de g�en�erer di��erents mod�eles de pr�esentation. Nous introduisons, pour

�nir, notre concept d'interaction inspir�e du Rubik's cube ainsi que le mod�ele de

pr�esentation qui lui est associ�e.

67

Page 76: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

4.1 Interaction appareils portables/mains

Tout syst�eme interactif doit proposer des techniques d'interaction sp�eci�ques per-

mettant aux utilisateurs d'ex�ecuter certaines taches dans un environnement de tra-

vail donn�e. Les PC de bureau sont en g�en�eral dot�es de fortes capacit�es de calcul et

de nombreux p�eriph�eriques qui leur permettent d'assurer des taches dans un envi-

ronnement statique. Les appareils portables ont quant �a eux �evolu�e et leurs capacit�es

de processing, de stockage, de communication et d'a�chage les am�enent �a concur-

rencer les PC de bureau sur le terrain des fonctionnalit�es traditionnellement assur�ees

par ces derniers. De par ces capacit�es nouvelles, les appareils portables sont d�esor-

mais consid�er�es comme la plateforme par excellence pour acc�eder �a ses contenus

multim�edia �a tout moment et dans di��erentes conditions de mobilit�e : en balade,

en voyage ou en visite, comme le sugg�erent Kristo�ersen and Ljungberg [106]. La

croissance rapide des contenus num�eriques met la pression sur les d�eveloppeurs qui

doivent trouver des solutions e�caces pour interagir avec des contenus cons�equents

et pr�esenter ces memes contenus. Les mains humaines sont le pr�e-requis essentiel

�a l'interaction avec un appareil portable, tout particuli�erement dans l'ex�ecution de

taches au cours de di��erentes activit�es.

Karlson et al. [107] se sont int�eress�es aux usages de l'interaction �a une main sur des

appareils portables. Une de leurs conclusions : les utilisateurs pr�ef�erent l'interaction

�a deux mains pour les activit�es plus statiques. Sur les t�el�ephones mobiles avec

interface tactile, la pr�ef�erence des utilisateurs va �egalement �a ce mode d'interaction.

Selon la tache, on e�ectue di��erents gestes de manipulation. L'ex�ecution de taches

simples telles que r�epondre au t�el�ephone ne n�ecessite qu'une seule main, quand

saisir un texte ou jouer �a un jeu peut en n�ecessiter deux. Cette �etude qui porte sur

18 taches indique que la navigation parmi les contenus photo se fait souvent �a une

seule main. Il faut n�eanmoins rappeler que cette �etude, publi�ee en 2006, s'int�eressait

sp�eci�quement �a des portables �equip�es d'un �ecran tactile traditionnel et d'un clavier

de type QWERTY. Avec le lancement des interfaces multi-touch en 2007, l'usage

des t�el�ephones portables a radicalement �evolu�e, d'o�u l'�eventuelle n�ecessit�e de mettre

�a jour ces r�esultats.

Avec le succ�es commercial de l'iPhone d'Apple, l'a�chage tactile et les gestes de

controle associ�es sont devenus des probl�ematiques de design incontournables dans

la d�e�nition de modes de manipulation plus directs. Ils constituent d�esormais les

sp�eci�cations fondamentales des appareils mobiles. Compar�e aux interfaces tradi-

tionnelles avec boutons, les interfaces tactiles peuvent s'av�erer tr�es intuitives pour

certaines taches. N�eanmoins, y avoir recours dans l'ex�ecution de tout type de tache

peut entra�ner non pas une am�elioration des performances produit mais plutot cer-

tains probl�emes d'usabilit�e. Par exemple, il peut etre r�ebarbatif de saisir des textes

longs sur interface tactile [108]. Par ailleurs, sur �ecran plat, la manipulation par

gestes tactiles peut entra�ner une limitation du sens haptique.

Dans le monde naturel, les mains sont la partie du corps la plus utilis�ee dans les

taches quotidiennes. Elles savent appliquer de la force dans l'ex�ecution de taches

lourdes, mais �egalement faire preuve de pr�ecision sur des taches d�elicates. De nom-

breuses taches �electroniques sur PC sont fortement analogues �a certaines taches

physiques du quotidien. De ce fait, les techniques d'interaction utilis�ees dans cer-

taines taches physiques peuvent am�eliorer l'interaction avec des contenus num�e-

riques. Ainsi, la technique du « feuilleter » des pages d'un livre a �et�e largement

68

Page 77: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

int�egr�ee �a l'interaction sur des documents num�eriques. La gestuelle actuellement

int�egr�ee aux interfaces tactiles classiques ne constitue que l'une des techniques po-

tentielles d'interaction avec des appareils portables. Nous contredisons l'id�ee selon

laquelle l'int�egration de cette gestuelle constituerait la panac�ee aux probl�ematiques

d'interaction sur appareils portables. Comme l'ont d�ecrit Nielsen et al. [109], « L’in-

terface gestuelle n’est pas la solution universelle a tout type d’application, l’objectif

est de developper une interface qui soit plus efficace sur une application donnee. ».

Par cons�equent, il faudrait consid�erer d'autres mouvements de la main qui seraient

impliqu�es dans l'ex�ecution de taches physiques au quotidien. Notre objectif : favo-

riser une manipulation plus intuitive et am�eliorer les modes d'usage sur appareils

portables.

4.2 Presentation generale des gestes et mouvements

de manipulation de la main

La d�e�nition du geste selon le Larousse de la langue fran�caise est la suivante : « un

mouvement du corps, principalement de la main, des bras, de la tete, porteur ou

non de signification. ». Le geste, en tant que forme de communication non-verbale,

joue un role alternatif : remplacer ou am�eliorer le message verbal durant la commu-

nication. En g�en�eral, on distingue deux types de gestes : les gestes embl�ematiques

et les gestes co-verbaux. Un geste embl�ematique peut avoir di��erentes signi�cations

selon le contexte culturel et la fa�con dont il est ex�ecut�e. C'est le cas par exemple du

signe V r�ealis�e en tendant l'index et le majeur. S'il est r�ealis�e paume de la main vers

l'auditoire, il repr�esente la victoire, mais si c'est le dos de la main que l'on pr�esente,

les Anglais l'interpr�eteront comme une insulte (cf. �g.4.1). Un geste co-verbal, pour

sa part, accompagne la parole et appara�t en synchronisation avec certains �el�ements

saillants du discours [110].

Figure 4.1 – Le V de la victoire (�a g.) et le V �a valeur d'insulte (�a dr.)

Nielsen et al. [109] proposent une taxonomie permettant de d�ecrire le vocabulaire

gestuel selon deux �etiquettes : �etiquette descriptive et �etiquette s�emantique. Les

�etiquettes descriptives d�ecrivent le statut du geste, les �etiquettes s�emantiques son

objectif et la cible �a laquelle il sera appliqu�e.

{ �Etiquettes descriptives

Les �etiquettes descriptives indiquent le statut du geste : statique ou dynamique.

Les gestes statiques sont des postures, les gestes dynamiques des mouvements

qui sont r�ealis�es sur une p�eriode de temps donn�ee.

{ �Etiquettes s�emantiques

Les �etiquettes s�emantiques s'appuient sur la d�e�nition de Cassell [111]. Elles

permettent de d�e�nir des gestes conscients ou spontan�es, interactionnels ou pro-

69

Page 78: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

positionnels. Les gestes conscients ont une signi�cation en soi, tandis que les

gestes spontan�es n'ont du sens que dans le contexte du discours.

Dans le domaine de l'interaction homme-ordinateur, la d�e�nition du geste est plus

large et concerne les mouvements pouvant etre d�etect�es par di��erents capteurs.

Pour Sa�er, les gestes sont les di��erents mouvements du corps humain qui peuvent

etre reconnus par des syst�emes de captation dans le but d'ex�ecuter des fonctions

sans recourir aux dispositifs classiques de pointage. Ces gestes peuvent etre un

mouvement des doigts, un d�eplacement de la main ou meme un lever de sourcil en

tant qu'expression du visage.[108]

{ Geste tactile

Les gestes int�egr�es aux appareils portables actuels (lecteurs mp3, PDAs, t�el�e-

phones portables, terminaux Internet mobiles) avec interface tactile sont des mou-

vements monos (cliquer, cliquer-glisser, faire d�e�ler ?) ou multi-doigts (avec deux

doigts : action de pincer et d'�etaler, avec quatre : le fameux « swipe » ou e�eure-

ment sur Apple Macbook Air). En g�en�eral, les interfaces gestuelles command�ees

par des mouvements des doigts sont assez intuitives. N�eanmoins, certaines pro-

bl�ematiques d'ergonomie doivent imp�erativement etre prises en compte, comme

par exemple le manque de pr�ecision du pointage au doigt sur une cible donn�ee

ou le manque de visibilit�e du au positionnement des doigts sur l'�ecran. Si l'ex�ecu-

tion de taches via des mouvements des doigts permet une manipulation directe

des contenus num�eriques, les interfaces tactiles atteignent leurs limites d'e�ca-

cit�e sur des op�erations « lourdes ». Par exemple, d�eplacer un objet sur un �ecran

tactile extra-large peut s'av�erer chronophage et fatigant puisque cela n�ecessite

d'ex�ecuter de nombreuses actions physiques.

Jusqu'�a pr�esent, les mouvements multi-doigts ont �et�e largement int�egr�es aux in-

terfaces des appareils portables. On note par ailleurs une augmentation du nombre

de doigts pouvant etre g�er�es par la reconnaissance multi-touch. Le ClearPad 3000

de Synaptics est par exemple capable de tracer jusqu'�a 10 contacts simultan�es

sur une diagonale d'�ecran de 8 pouces [112]. La manipulation multi-touch sur

appareils portables reste n�eanmoins limit�ee �a quelques fonctionnalit�es pr�ecises.

Par ailleurs, la plupart des mouvements multi-doigts n'utilisent en fait que deux

doigts, comme par exemple le zoom sur des objets qui s'e�ectue �a l'aide du pouce

et de l'index. L'interaction multitouch prend tout son sens avec les applications

de gaming telles que TouchEliss [113] ou certains simulateurs d'instruments de

musique [114] qui n�ecessitent des controles multiples dans les taches de jeu. Par

ailleurs, une des raisons pouvant expliquer pourquoi les interfaces multi-touch

conventionnelles n'int�egrent pas de gestes impliquant plus de deux doigts est la

probl�ematique de la « couverture d'�ecran » : le positionnement des doigts sur

l'�ecran risque en e�et d'a�ecter le rendu visuel.

{ Geste non-tactile�A la di��erence des gestes tactiles, les gestes non-tactiles sont activ�es par des

capteurs qui sont situ�es sur l'appareil portable et qui permettent �a l'utilisateur

d'ex�ecuter des mouvements plus libres de la main. Ces mouvements de la main

toute enti�ere sont souvent int�egr�es �a des taches ex�ecut�ees en mode « yeux libres ».

Par exemple, le walkman phone Sony Ericsson W910 [115], l'Apple iPod Nano 4G

[116] et le Motorola ROKR ZN50 [117] proposent une fonctionnalit�e « shake-to-

shu�e » qui permet de changer le titre en �ecoute de fa�con al�eatoire, par simple

secousse de l'appareil. Lorsqu'un appareil portable int�egre une interface gestuelle,

se pose la question de l'a�ordance, autrement dit de la capacit�e de l'interface �a

fournir les indices qui induiront intuitivement le geste associ�e (capacit�e suggestive

d'action). Un autre aspect �a prendre en consid�eration est la fa�con dont l'interface

70

Page 79: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

gestuelle propose un usage sur la dur�ee et pas une simple fonctionnalit�e gadget.

Dans notre �etude, la tache de navigation photo requiert une forte attention vi-

suelle. Notre objectif : un transfert de l'exp�erience utilisateur acquise sur des

taches physiques existantes. Les gestes non-tactiles ne conviennent pas aux taches

n�ecessitant une certaine attention dans la dur�ee. Nous ne les avons pas retenus.

Nous nous sommes int�eress�es aux gestes tactiles et proposons une interface intui-

tive pour int�egration sur appareils portables. Nous avons cherch�e �a comprendre

le fonctionnement des mains ainsi que les objets et m�ecanismes associ�es �a l'ex�e-

cution de taches physiques au quotidien.

Napier [118] r�epartit les mouvements de la main en deux groupes : les mouvements

pr�ehensiles et non-pr�ehensiles. Les mouvements pr�ehensiles sont des mouvements

de la main qui permettent de tenir tout ou partie d'un objet dans sa paume. Les

mouvements non-pr�ehensiles ne permettent quant �a eux pas d'attraper des objets

mais plutot de pousser ou soulever ces derniers dans le but de les d�eplacer. Nous

adoptons une approche similaire �a celle de Napier et consid�erons que le controle

gestuel fait appel �a deux types de gestes : gestes pr�ehensiles (gestes tactiles) et

non-pr�ehensiles (mouvements de la main toute enti�ere).

L'�etude d'Elliott and Connolly [119] classi�e les mouvements de manipulation de

la main en trois mod�eles de mouvements intrins�eques. Un mouvement intrins�eque

suppose une coordination des doigts dans le but de manipuler un objet �a l'int�e-

rieur de la main, par opposition au mouvement extrins�eque o�u la main qui tient

l'objet se d�eplace librement. Le mouvement intrins�eque de la main peut impliquer

des mouvements simultan�es et des mouvements s�equentiels (d�eplacements ind�epen-

dants des doigts). Les mouvements simultan�es impliquent des synergies simples et

r�eciproques. On les retrouve dans des gestes impliquant le pouce, l'index et le majeur

pour manipuler avec pr�ecision un petit objet �a l'int�erieur de la main. Ces synergies

simples se retrouvent dans des gestes tels que l'action de pincer, de serrer ou encore

la prise tripode dynamique (cf. �g.4.2). Des exemples de synergies r�eciproques avec

abduction du pouce sont les suivants : faire rouler un objet entre le pouce et l'index

ou tourner un bouton, comme on le fait par exemple pour r�egler le volume sur une

cha�ne st�er�eo (cf. �g.4.3). Des exemples de synergies r�eciproques avec extension du

pouce, cette fois : faire rouler le pouce sur l'index, faire rouler l'index sur le pouce

ou faire rouler tous ses doigts sur un objet (cf. �g.4.4). Les mouvements s�equentiels

concernent pour leur part des mouvements successifs, particuli�erement dans la ro-

tation d'objets selon un angle pr�ecis. Les gestes associ�es sont la rotation pas �a pas,

la rotation par actions successives des doigts et la translation lin�eaire (cf. �g.4.5).

La classi�cation ci-dessus des mouvements de la main s'appuie sur l'analyse de la

manipulation �a une main d'objets physiques. Ces mouvements de la main sont tr�es

fortement li�es �a des objets m�ecaniques. De nos jours, on num�erise toujours plus d'ob-

jets physiques, ce qui a�ecte tr�es fortement la capacit�e tangible de ces objets une

fois qu'ils sont pr�esent�es �a l'�ecran. Di�cile par cons�equent d'adopter une approche

cin�ematique pour les gestes d'interaction quand tous les composants m�ecaniques

font place �a un �ecran tactile. L'ex�ecution de taches sur appareils portables fait sou-

vent appel �a des mouvements de la main plus complexes �a la fois dans la prise et

la manipulation (prise de force et de pr�ecision [118]). Les d�eveloppements actuels

visent �a rendre les appareils portables toujours plus petits, toujours plus intelligents.

Le probl�eme est que ces appareils, de par leurs m�ecanismes m�ecaniques limit�es, s'ap-

puient exclusivement sur l'a�chage tactile dans le controle du mod�ele d'interaction.

Par cons�equent, presque aucun des gestes class�es par Elliott and Connolly [119] ne

71

Page 80: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

(a) Pin-cer

(b) Pin-cer

(c) Tri-pode

(d) Ser-rer

Figure 4.2 � Synergies simples de mouvements intrinseques simultanes : pincer(les deux a g.) prise tripode dynamique (les deux a dr.) et action deserrer (a dr.).(images extraites de l’ article d’ Elliott and Connolly[119]

(a) Faire rouler (b) Tourner

Figure 4.3 � Synergies reciproques de mouvements intrinseques simultanes :faire rouler un objet entre le pouce et l’ index (a g.) et tourner unbouton (a dr.). (images extraites de l’ article d’ Elliott and Connolly[119]

(a) Rou-ler

(b) Rouler (c) Rouler

Figure 4.4 � Synergies reciproques de mouvements intrinseques simultanes :faire rouler le pouce sur l’ index (a g.), faire rouler l’ index sur lepouce (au centre) et faire rouler tous ses doigts sur un objet (adr.). (images extraites de l’ article d’ Elliott and Connolly [119]

(a) Ro-ta-tionpasapas

(b) Rota-tionsuc-ces-sive

Figure 4.5 � Mouvements intrinseques sequentiels : rotation pas a pas (a g.),rotation par actions successives des doigts (en haut a dr.) et trans-lation lineaire (en bas a dr.). (images extraites de l’ article d’ Elliottand Connolly [119]

72

Page 81: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

se retrouve sur les interfaces tactiles actuelles. Une premi�ere raison �a cela : les gestes

couramment int�egr�es aux interfaces tactiles sont con�gur�es pour une interaction sur

�ecran plat 2D. Di�cile donc, dans ce cadre, d'int�egrer une approche cin�ematique

dans le design des gestes de manipulation. Les di��erentes recherches et �etudes n'ont

par ailleurs pas encore permis d'identi�er de mappage m�etaphorique appropri�e pour

les mouvements de la main sur des taches physiques. A�n d'am�eliorer l'interaction

sur des taches �electroniques, il faudrait �etudier en profondeur le rapport qui existe

entre mouvement de la main et type de tache physique. De ce point de vue, le point

faible des d�eveloppements actuels sur appareils portables soul�eve la probl�ematique

suivante : quels gestes utiliser, et sur quelles fonctions ?

Gaver [120] a identi��e di��erents types de mappage qui permettent de d�ecrire la

fa�con dont les contenus des syst�emes informatiques sont transform�es en informa-

tion visuelle pr�esent�ee �a l'�ecran. Il existe deux types de mappages principaux, le

plus important �etant le mappage conceptuel. Ce dernier permet de traduire, par

expression m�etaphorique, une tache de calcul abstraite en un mod�ele conceptuel

compr�ehensible par l'utilisateur. Le mappage perceptuel, quant �a lui, traduit visuel-

lement le mod�ele conceptuel en pr�esentation perceptuelle (cf. �g.4.6). L'expression

du mod�ele via la pr�esentation perceptuelle peut etre symbolique, m�etaphorique ou

iconique. Gaver prend comme exemple la fonction « supprimer » pour illustrer ces

trois modes de pr�esentation perceptuelle. Le mappage symbolique de la fonction

« supprimer » utilise la lettre « x » pour indiquer la suppression d'un �chier. Le

mappage m�etaphorique s'appuie quant �a lui sur l'analogie entre la suppression et

la disparition. En�n, le mappage iconique fait intervenir un objet concret, la « cor-

beille », qui indique la suppression. Si on la compare aux mappages symbolique et

m�etaphorique, la pr�esentation visuelle bas�ee sur le mappage iconique est davantage

li�ee �a la fonction, autrement dit, la forme rappelle ais�ement la fonction associ�ee. La

�g.4.7 permet de visualiser chaque mappage avec le niveau correspondant de limita-

tion de la forme. Le mappage iconique est fortement limit�e de par une pr�esentation

totalement li�ee aux �ev�enements physiques. Le mappage symbolique est quant �a lui

tout �a fait libre.

Sur la d�e�nition des mappages selon Gaver, nous consid�erons que les mappages

iconique et m�etaphorique peuvent am�eliorer les gestes d'interaction sur des taches

num�eriques. Pourquoi ? Parce que ces deux types de mappage permettent de tra-

duire des �ev�enements physiques qui sont soit totalement soit partiellement ana-

logues aux taches num�eriques. Pour les taches physiques fortement li�ees aux taches

num�eriques, nous proposons d'appliquer un mappage iconique et de transf�erer la

technique d'interaction �a la manipulation de contenus num�eriques. Pour les taches

physiques partiellement analogues aux taches num�eriques, nous proposons d'appli-

quer un mappage m�etaphorique. C'est ce que propose par exemple Gummi [121],

qui associe le geste d'�etirer un objet �a la fonctionnalit�e de zooming. Dans la section

suivante, nous nous int�eressons au mappage iconique de taches physiques du quoti-

dien ayant �a voir avec la navigation de documents papier. Nous analysons ces taches

a�n d'en d�egager des gestes pertinents pour utilisation sur des taches num�eriques.

73

Page 82: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Figure 4.6 – Processus de mappage conceptuel et perceptuel propos�e par Gaver[120]

Figure 4.7 – Mappages et niveaux de limitation de la forme propos�es par Gaver[120]

74

Page 83: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

4.3 Gestes d’interaction sur contenus photos nume-

riques

Pour interagir avec une cible donn�ee, la manipulation d'objets physiques repose sur

un contact physique, franc et tridimensionnel. Dans le cas de contenus num�eriques

abstraits, ce type de contact physique est fortement diminu�e. Pour une interac-

tion e�cace, le pr�erequis d'une interface gestuelle est d'o�rir des fonctionnalit�es

intuitives. Ces fonctionnalit�es doivent �evoquer une exp�erience utilisateur, un geste

physique que l'utilisateur ma�trise, et l'amener �a accomplir ce geste dans un usage

num�erique. Lorsqu'une m�etaphore de manipulation d'objets est r�eussie, l'utilisateur

sait imm�ediatement et intuitivement quel geste lui permettra d'accomplir une action

donn�ee.

Harrison et al. [122] ont travaill�e sur le transfert des exp�eriences utilisateurs ac-

quises sur des taches physiques. Ces exp�eriences permettent selon eux d'am�eliorer

l'usage des appareils num�eriques. Ils s'int�eressent particuli�erement aux taches num�e-

riques traditionnelles qui sont fortement li�ees �a des taches physiques, et en d�egagent

des techniques pertinentes d'interaction avec des contenus num�eriques. Tourner une

page, balayer une liste du regard ou annoter un document sont tout autant de taches

physiques qui sont appliqu�ees dans l'interaction sur livres num�eriques et PDAs. Par

ailleurs, Marshall and Bly [123] ont observ�e les comportements de lecture. Leur

objectif : d�eterminer la fa�con dont les utilisateurs parcourent des documents phy-

siques. Ils proposent d'utiliser leurs r�esultats dans le design d'interfaces permettant

la lecture de documents num�eriques.

A�n d'explorer les techniques potentielles de manipulation pour la navigation des

albums photos, nous avons suivi le meme type d'approche. Nous avons observ�e

les taches du quotidien et en avons extrait des gestes potentiels. Les photographies

dans leur version physique �etant sur papier, nous nous sommes int�eress�es aux gestes

utilis�es dans l'interaction avec des documents papier. L'objectif est d'identi�er les

mouvements de la main qui pourraient etre utilis�es dans la m�etaphore de la « naviga-

tion » ou de l'« exploration » des albums photos num�eriques. Nous avons identi��e

les gestes quotidiens (cf. tableau 4.1) associ�es aux di��erentes actions : �etaler, rouler,

feuilleter, m�elanger, d�etacher. Ces actions sont rattach�ees �a divers objectifs : prise

de connaissance du contenu (cf. tableau 4.1, n°2, 3), divers types de navigation

(cf. tableau 4.1, n°1, 6, 7, 8), comptage (cf. tableau 4.1, n°4, 5), organisation (cf.

tableau 4.1, n°9) et retrait (cf. tableau 4.1, n°10).

Ces actions sont ex�ecut�ees �a une ou deux mains. Les mouvements �a une main

impliquent une manipulation pr�ecise, ceux �a deux mains impliquent �a la fois mani-

pulation pr�ecise et prise de force. En g�en�eral, les taches plus complexes n�ecessitent

l'usage des deux mains a�n de surmonter les di�cult�es de manipulation, comme

par exemple pour le feuilletage rapide (cf. tableau 4.1, n°5, 8, 9). Par contraste,

une seule main est su�sante pour rabattre des feuilles de papier (Tableau 1, n°4),

d�etacher une page (cf. tableau 4.1, n°10), �etaler des pages (cf. tableau 4.1, n°2,

3) ou simplement les tourner (cf. tableau 4.1, n°6, 7). Par ailleurs, les mouvements

ex�ecut�es �a deux mains sont utilis�es pour « naviguer selon l'envie », c'est-�a-dire

lorsque l'utilisateur adapte librement la vitesse �a laquelle il feuillette les pages (cf.

tableau 4.1, 5, 8, 9).

75

Page 84: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Tableau 4.1 – Analyse des gestes quotidiens identi��es.

No./Pro�l Geste Mains Objet Objectif Procede Vitesse Continuiteimpliques implique

1 Deux Brochure Ouverture/ Etaler Rapide Continuaccord�eon navigation

2 Une Feuilles Conaissance Etaler Rapide Continupapier du contenu

3 Une Cartes �a Conaissance Etaler Rapide Continujouer du contenu

4 Une Feuilles Comptage Rabattre Page par Discretpapier Page

5 Deux Feuilles Comptage Rabattre Page par Discretpapier page

6 Une Carnet Navigation Feuilleter Page par Discretpage

7 Une Livre Navigation Feuilleter Page par Discretpage

8 Deux Feuilles Navigation Feuilleter Rapide Continupaper

9 Deux Papier/ Organisation M�elanger Rapide Continucartes �ajouer

10 Une Post-it Retrait D�etacher Page Discretpar page

76

Page 85: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Tableau 4.2 – Gestes quotidiens selon la fonction des doigtsPoints de couleur rouge : doigt travaillant seulPoints de couleur bleue : doigts travaillant en groupePoints de couleur magenta : doigts travaillant de fa�con s�equen-tielle

No./Pro�l Geste Tache par la main doigts impliques

1 Gauche : pincer pour d�eplacerDroite : prise

2 Rouler pour �etaler

3 Rouler pour �etaler

4 Rouler pour s�eparer

5 Gauchet : priseDroite : pincer pour rouler

6 Pincer pour rouler

7 Pincer pour rouler

8 Gauche : pincer pour roulerDroite : prise

9 Gauche : pincer pour lib�ererDroite : pincer pour lib�erer

10 Pincer

77

Page 86: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Elliott and Connolly [119] utilisent des diagrammes pour visualiser le groupement

des doigts dans chaque geste. Nous adaptons leur approche et d�e�nissons trois

groupes fonctionnels qui permettent de caract�eriser la fonction assur�ee par chacun

des doigts : doigt travaillant seul, doigt travaillant en groupe, doigt travaillant de

fa�con s�equentielle. Les gestes et visuels associ�es sont pr�esent�es tableau 4.2. Les

conclusions du tableau 4.2 sont les suivantes :

1. Pour les mouvements �a deux mains, la fonction de chaque main varie selon

la tache physique. Chaque main peut assurer le geste de prise ou celui de

manipulation. Pour les gestes du tableau 4.2 , n°1, 5, 8 la manipulation de

pr�ecision est assur�ee par une seule main. N�eanmoins, pour ceux du tableau 4.2,

n°9, aucun geste de maintien n'est n�ecessaire puisque les cartes ou les feuilles

de papier sont pos�ees sur la table.

2. Les taches identi��ees (navigation) sont tr�es analogues �a leurs �equivalents

�electroniques, mais la pr�esentation des documents papier du tableau 4.2 est

limit�ee (mode portrait ou paysage). Par cons�equent, les mouvements de la

main associ�es aux taches physiques sont relativement limit�es, et les gestes

que nous avons pu observer s'e�ectuent simplement dans un mouvement soit

vertical, soit horizontal.

3. Pour les mouvements ex�ecut�es �a une comme �a deux mains, les doigts les plus

utilis�es sont le pouce, l'index et le majeur. Ces trois doigts sont dominants

dans la manipulation de pr�ecision comme dans la prise, ce qui laisse supposer

qu'ils pr�esentent une capacit�e de manipulation plus �elev�ee que les autres. Sur

cette conclusion, on pourrait proposer un nombre de trois contacts maximum

pour les interfaces tactiles des appareils portables avec �ecran de taille limit�ee.

Cela pourrait permettre d'adresser la probl�ematique de la couverture d'�ecran

(positionnement des doigts qui gene la visibilit�e).

Les gestes du quotidien pr�esentent des techniques riches d'interaction haptique sur

des taches impliquant des objets physiques, gestuelle qui est tr�es fortement li�ee �a

une pr�esentation physique. De ce fait, si l'on souhaite int�egrer certaines techniques

d'interaction utilis�ees sur des taches physiques dans l'ex�ecution de taches num�e-

riques, un aspect essentiel est la capacit�e �a simuler la transformation de la forme

physique. Par exemple, les prototypes TWEND [124] et Gummy [121], int�egr�es

sur �ecran OLED, permettent d'ex�ecuter des gestes de manipulation sur une forme

exible d'appareil.

Comme nous avons pu en discuter au chapitre pr�ec�edent, di��erents types de pr�e-

sentation permettent d'am�eliorer la navigation des documents num�eriques. Ici, le

probl�eme est que si nous copions les modes d'interaction et de pr�esentation utilis�es

sur des taches physiques et les appliquons tels quels �a la navigation de contenus

photos num�eriques, nous risquons de perdre les caract�eristiques du contenu nu-

m�erique. Par ailleurs, dans la vie r�eelle, feuilleter un album photo correspond �a

un mod�ele d'interaction et de pr�esentation relativement limit�e. Pour cette raison,

nous orientons notre recherche d'un mod�ele potentiel d'interaction vers un mappage

m�etaphorique plus large. Nous cherchons �a identi�er quelles taches physiques pr�e-

sentent des techniques de manipulation et des mod�eles de pr�esentation analogues

non pas aux taches de navigation sur documents papier mais plutot sur d'autres

types d'objets.

78

Page 87: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

(Passer �a la page suivante)

79

Page 88: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

4.4 Reflexion autour du Rubik’s cube

Comme discut�e au chapitre 2, le Casual InfoVis permet une navigation des contenus

personnels pour le plaisir. Parmi di��erentes options, le jeu appara�t comme un levier

de motivation e�cace dans la recherche du divertissement. Avec comme objectif le

plaisir, qui est per�cu comme grati�ant, les m�ecanismes de jeu am�enent l'utilisateur

�a parcourir un contenu par divertissement et �a accomplir des taches sur la dur�ee.

Apr�es notre proposition de design en �n de chapitre 2, nous poursuivons notre

r�e exion autour du Rubik's cube. Notre objectif : comprendre ses m�ecanismes de

jeu ainsi que ses applications et adaptations potentielles �a di��erents usages.

Le Rubik's cube [40] est le fameux puzzle tridimensionnel invent�e en 1974 par

le sculpteur et professeur d'architecture hongrois Ern}o Rubik. Le Rubik's cube a

suscit�e un vif int�eret pour les domaines scienti�ques tels que les math�ematiques, la

m�ecanique et l'interaction homme-ordinateur.

En g�en�eral, le Rubik's cube est �etudi�e selon deux axes : sa r�esolution [125] [126]

et les techniques de manipulation associ�ees au mod�ele de pr�esentation cubique.

Cube Browser [127] permet de naviguer parmi les images (pr�ec�edentes, suivantes)

en tournant un cube. Secouer le cube permet de changer de cat�egorie d'images (cf.

�g.4.8). Les cubes ind�ependants d'AudioCubes [128], application musicale tangible,

sont des param�etres qui permettent �a l'utilisateur de composer de la musique (cf.

�g.4.9). 3D story Cube int�egre pour sa part des capteurs multiples [129], l'utilisateur

�etant invit�e �a d�ecouvrir une histoire par multimodalit�e (cf. �g.4.10). Cognitive Cubes

[130] utilise des cubes comme des outils physiques permettant de s'int�eresser �a la

relation entre �evaluation cognitive et �evaluation de la construction d'un concept

d'objet (cf. �g.4.11). L'�etude « Wooden Brains » (cf. �g.4.12) utilise quant �a elle

une IRM (imagerie par r�esonance magn�etique) du cerveau. Le r�esultat : un ensemble

de 60 cubes de 2,54 cm. 94 faces ext�erieures sont laiss�ees telles quelles tandis que

266 faces internes sont recouvertes d'un d�etail de l'IRM. Ce mod�ele 3D physique

invite les utilisateurs �a explorer la structure du cerveau en touchant et manipulant

les cubes. En�n, le site Web Search Cube [132] int�egre une pr�esentation cubique

4x4x4 dans la pr�esentation des r�esultats de recherche (cf. �g.4.13).

Ces applications sont des exp�eriences int�eressantes d'exploration de contenus via la

manipulation de cubes, d'autant plus qu'elles sont fortement associ�ees �a la pr�esen-

tation de contenus photos. Dans ces applications, le cube invite �a la manipulation et

�a une interaction intuitive. L'application de navigation photo la plus pertinente est

Cube Browser, dont le concept d'interface propose des fonctions simpli��ees dans la

navigation de contenus photos. Malheureusement, la probl�ematique de la navigation

parmi des contenus photos cons�equents n'y est pas �etudi�ee de fa�con aboutie.

Figure 4.8 – Cube Browser(image extraite de www.cubebrowser.de)

80

Page 89: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Figure 4.9 – AudioCubes(image extraite de www.percuss.com)

Figure 4.10 – 3D story cube (image extraite de Zhou et al. [129] )

Figure 4.11 – Cognitive cubes (image extraite de Sharlin et al. [130] )

81

Page 90: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Avec comme point de d�epart la �g.3.27, nous travaillons sur les relations entre

utilisateurs, moyens de communication et contenus �emotionnels (cf.�g.4.14). Nous

proposons les moyens de communication suivants : pr�esentation visuelle, manipula-

tion tangible, signaux auditifs et m�ethode d'organisation. Sur portable, imaginons

que ces moyens de communication permettent de d�eclencher les indices �emotionnels

v�ehicul�es par les photos num�eriques. Quel mod�ele de communication serait alors le

mieux accept�e ? Quelle m�etaphore appliquer �a l'approche de communication et qui

permettrait d'�ecourter le temps d'apprentissage cot�e utilisateur ?

Nous proposons la m�etaphore du Rubik's cube comme moyen de communication

potentiel dans la navigation de photos num�eriques. Nous observons les modes de pr�e-

sentation visuelle et les techniques de manipulation du Rubik's cube pour d�evelopper

un navigateur d'images portable. Le Rubik's cube propose un mode de pr�esentation

simple permettant la mise en valeur du contenu pr�esent�e. La dimension « cubique »facilite par ailleurs la manipulation �a deux mains, avec une possibilit�e de rotation

complexe sur trois dimensions. Un design qui int�egrerait de telles caract�eristiques

se d�emarquerait des classiques interfaces WIMP. La section suivante pr�esente notre

premier mod�ele d'interaction, qui s'appuie sur notre connaissance des domaines as-

soci�es et nous am�ene �a r�e �echir sur les probl�ematiques associ�ees �a la navigation de

contenus photos dans un contexte de mobilit�e.

Figure 4.12 – Wooden brains(image extraite deneil.fraser.name)

Figure 4.13 – Search Cube(images extraites des r�esultats de recherche sur le mot-cl�e deXocial search-cube.com)

82

Page 91: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Figure 4.14 � Communication entre utilisateurs et contenus ´emotionnels

4.5 Proposition de design - Phora

Les appareils portables sont devenus le support universel des contenus numeriques,

tout particulierement des contenus personnels. Les appareils portables commerciaux

integrent differentes specifications selon l’ usage. Par exemple, un simple lecteur mp4

convient a des contenus audio ou photo, quand un appareil multifonctions (ex : te-

lephone) convient a des contenus multimedia. Le volume et la complexite des conte-

nus numeriques stockes sur appareil portable mettent a rude ´epreuve les interfaces

WIMP classiques. Chaque type de contenu personnel presente des caracteristiques

propres qui necessitent un modele d’ interaction specifique. Dans ce sens, afin d’ en-

richir l’ experience utilisateur, l’ interaction avec des contenus numeriques personnels

ne saurait suivre une approche unique.

Notre proposition de design s’ interesse a l’ interaction avec des contenus numeriques

personnels : les photos numeriques. Elle se presente comme une reflexion autour d’ un

modele d’ interaction qui integrerait presentation visuelle et manipulation tangible

et permettrait d’ identifier les problematiques liees a la navigation de contenus sur

portable. Avec le Rubik’ s cube comme point de depart, nous cherchons a definir un

modele d’ interaction sur appareil portable qui soit tres ´eloigne des classiques inter-

faces WIMP et dispositifs d’ entree de type souris/boutons. Ce modele est suppose

integrer l’ experience utilisateur acquise sur d’ autres taches du quotidien. L’ objectif :

proposer une interface plus intuitive afin d’ ´ecourter le temps necessaire a la prise

en main d’ un nouveau dispositif. Voici donc Phora, proposition de design construite

autour du principe de reproduction des modes de manipulation du Rubik’ s cube.

83

Page 92: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Nous proposons trois commandes gestuelles auxquelles nous associons des modes

de pr�esentation visuelle permettant d'interagir avec des photos num�eriques sur ap-

pareils portables. Suite �a notre r�e exion sur l'�ecran circulaire (cf. chapitre 2), Phora

int�egre un �ecran circulaire pour deux raisons. Tout d'abord, cette forme permet

une exp�erience visuelle tout �a fait in�edite sur appareils portables. Ensuite, elle se

retrouve fr�equemment sur des taches de manipulation d'objets physiques.

Phora peut etre consid�er�e comme un navigateur personnel de photos permettant de

parcourir ses albums photos en ligne (service Internet) ou en local (contenus stock�es

sur l'appareil). Phora comprend un �ecran LCD tactile (cf. �g.4.15 A), un anneau

circulaire m�ecanique (cf. �g.4.15 B) et un cylindre r�etractable de type « longue-

vue » (cf. �g.4.15 C). L'objet fait 10 cm de diam�etre, son �ecran LCD 8,5 cm. Une

fois extraites, les photos sont visualis�ees sous forme de miniatures sur un bloc 4x4.

Les ux de photos sont pr�esent�es par couches et en perspective (cf. �g.4.15 E). Les

photos stock�ees sur Phora sont automatiquement pr�e-cat�egoris�ees, cat�egorisation

qui peut s'appuyer sur les balises provenant de services de partage en ligne tels que

Flickr. La premi�ere couche du bloc pr�esente les di��erentes cat�egories de photos.

Les photos de la cat�egorie s�electionn�ee sont pr�esent�ees automatiquement dans le

sens des aiguilles d'une montre �a partir du centre de l'�ecran. Seules les 16 premi�eres

photos sont pr�esent�ees sur la zone d'a�chage principal. Autrement dit, pour une

cat�egorie contenant plus de 16 photos, on doit passer �a la couche suivante pour

a�cher le reste des photos. Le num�ero de couche et la cat�egorie sont a�ch�es en

haut de l'�ecran. Dans notre exemple, nous visualisons la premi�ere couche de photos

(01) de la cat�egorie n°2 (C2) (cf. �g.4.15 D). L'ordre de pr�esentation des couches

prend en compte l'historique de navigation de l'utilisateur. L'appareil est �equip�e

d'une barre de d�e�lement circulaire qui entoure le bloc 4x4 (cf. �g.4.15 F).

Figure 4.15 – Description de Phora

84

Page 93: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Trois gestes de manipulation Le premier geste permet une navigation avant/arri�ere

des contenus. Nous avons mapp�e la m�etaphore de la rotation sur la barre circulaire.

Faire glisser la barre permet de faire d�e�ler les ux de photos vers l'avant ou vers

l'arri�ere (cf. �g.4.16, en haut). Le ux de photos est rafra�chi miniature par minia-

ture le long d'une spirale, ce qui permet de renforcer l'a�ordance entre le geste et

le mode de pr�esentation des photos. Le deuxi�eme geste s'inspire du m�ecanisme de

zoom sur appareil photo m�ecanique. La rotation de l'anneau circulaire permet de

zoomer/d�ezoomer sur l'image s�electionn�ee (cf. �g.4.16, au milieu). Le m�ecanisme

r�etractable de la longue-vue nous a amen�es �a d�evelopper un troisi�eme geste de mani-

pulation : pousser ou tirer le cylindre permet d'explorer rapidement les contenus, par

exemple �a la recherche de photos cibles (cf. �g.4.16 en bas, �g.4.17 A). Les modes

de navigation induits par le premier et le troisi�eme geste sont consid�er�es comme

des formes de RSVP manuelle dont la vitesse de navigation personnalis�ee o�re une

certaine souplesse dans l'exploration. Le premier geste permet la navigation conti-

nue parmi une petite quantit�e de photos issues d'une meme couche, tandis que le

troisi�eme permet la navigation discr�ete parmi un large volume de photos issues de

di��erentes couches. L'interface retravaill�ee (cf. �g.4.16 B) vise �a encourager la d�e-

couverte accidentelle de photos via un espace compl�ementaire situ�e autour du bloc

4x4. S'y a�chent al�eatoirement 16 images extraites de di��erentes cat�egories, images

qui vont jouer un role de raccourci et permettre d'acc�eder �a d'autres cat�egories de

photos sans avoir �a revenir sur la premi�ere couche.

Figure 4.16 – Geste de navigation avant/arri�ere (en haut). Geste permettantde zoomer (au milieu). Geste de navigation inter-couches (enbas).

85

Page 94: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Figure 4.17 – (A) Couches de photos. (B) A�chage a�n�e des photos.

Implementation du prototype

A�n de simuler l'interface visuelle pour discussion pr�eliminaire, nous avons proto-

typ�e Phora sous Adobe Flash (cf. �g.4.18). Phora �etant vou�e �a etre int�egr�e sur

�ecran tactile, le geste de manipulation de la barre circulaire de d�e�lement pose la

probl�ematique de couverture de l'�ecran [108]. Autrement dit, le doigt utilis�e pour

manipuler la barre risque de recouvrir l'�ecran et de gener la pr�esentation visuelle (cf.

�g.4.19). Nous avons donc d�ecid�e de retirer cette barre et de substituer au geste de

« glisser » qui lui �etait associ�e le geste de rotation. Nous retravaillons la structure

g�en�erale de l'interface. Le Tableau 4.3 liste les taches et gestes de manipulation as-

soci�es. Cinq taches op�erationnelles permettent de d�ecrire l'ensemble des fonctions

propos�ees par l'interface.

Les deux premi�eres taches concernent la pr�esentation des photos. Les utilisateurs

peuvent les faire d�e�ler une par une ou couche par couche, avec une certaine libert�e

dans le choix de la vitesse de pr�esentation. Les objectifs de la navigation di��erent

selon le mode de pr�esentation. Par exemple, parcourir les photos une �a une (retour

sur la photo pr�ec�edente, passage �a la suivante) permet aux utilisateurs d'appr�ecier

chaque photo en d�etail et de comparer les di��erentes photos. Parcourir les photos

couche par couche n'apporte pas exactement la meme satisfaction.

Cliquer sur l'�ecran tactile permet de s�electionner une photo, faire tourner l'anneau

circulaire permet ensuite de zoomer sur la photo s�electionn�ee. Cliquer �a nouveau

sur l'�ecran permet de revenir �a l'�ecran pr�ec�edent. La derni�ere fonction de l'interface

exploite l'espace situ�e autour du bloc carr�e (espace de visualisation des 16 photos).

L'id�ee est de proposer des raccourcis suppl�ementaires vers d'autres albums photos

ainsi qu'une navigation �a l'envie parmi les di��erents albums. L'objectif de cet espace

est d'encourager la navigation par s�erendipit�e. Les photos qui y sont pr�esent�ees sont

susceptibles de d�eclencher des indices �emotionnels sp�eci�ques chez l'utilisateur et

d'�evoquer chez lui le souvenir d'�ev�enements sp�eci�ques.

A�n de proc�eder �a l'�etude pr�eliminaire de Phora, nous avons d�evelopp�e un prototype

dont l'interface visuelle est simul�ee sous l'environnement Processing (cf. �g.4.20)

et l'interface physique est support�ee par le m�ecanisme de SpaceNavigator [133](cf.

86

Page 95: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

�g.4.21, �a g.). Nous simulons ainsi deux gestes de manipulation : la rotation et

le tirer/pousser. Pour l'a�chage, aucun �ecran tactile circulaire n'�etant disponible

sur le march�e, nous avons du s�eparer rendu visuel et manipulation haptique. Nous

a�chons l'interface visuelle �a sa taille originale sur l'�ecran d'un PC portable. Un

touch pad (cf. �g.4.21, �a dr.) permet aux utilisateurs de « cliquer » directement

sur l'appareil.

Figure 4.18 – Simulation visuelle via Adobe Flash

Figure 4.19 – Probl�ematique de couverture de l'�ecran sur Phora

87

Page 96: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Tableau 4.3 – Interface retravaill�ee de Phora : fonctions et gestes de manipu-lation associ�es

Fonction Presentation visuelle Geste de manipulation associe

Presentation du contenu(photo par photo)

Passer �a la photo suivante / revenir �ala pr�ec�edente en faisant tourner l'anneaucirculaire (rotation de Spacenavigator)

Presentation du contenu(couche par couche)

Passer �a la couche suivante / revenir �ala couche pr�ec�edente en poussant ou entirant le cylindre (pousser / tirer Space-navigator)

Selection d’une photo Cliquer sur l'�ecran pour s�electionner unephoto

Zoom avant / arriere surla photo selectionnee

Zoomer sur une photo en faisant tournerl'anneau circulaire (rotation de Spacena-vigator) et cliquer �a nouveau sur la photopour revenir �a la pr�esentation des conte-nus.

Espace supplementaired’affichage des photos

Les espaces A, B et C a�chent des imagesincompl�etes qui sont des raccourcis versd'autres cat�egories de photos.

88

Page 97: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Figure 4.20 – Interface visuelle simul�ee sous Processing.

Figure 4.21 – M�ecanisme de SpaceNavigator (�a g.), touch pad (�a dr.)

89

Page 98: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

4.6 Evaluation du design

Introduction du plan de test

Dans notre �etude utilisateur, nous proposons des techniques de visualisation et d'in-

teraction non conventionnelles permettant d'interagir avec des photos num�eriques

sur un appareil portable avec �ecran circulaire (Phora). Notre objectif : sur des taches

simulant di��erents sc�enarii d'usage quotidien, observer les comportements de navi-

gation et de manipulation associ�es �a notre mod�ele de visualisation. La description

du plan de test nous permet de d�e�nir les di��erents points qui seront abord�es et

de d�etailler l'�evaluation et ses di��erentes �etapes (mise en place, enregistrement des

donn�ees, rapport �nal). Ce plan permet de mettre en place un environnement de test

complet et de guider les participants dans l'accomplissement du processus, tache

par tache. L'�evaluation de Phora inclut les points suivants :

1. Appr�ecier l'e�cacit�e des deux gestes sur des albums photos de di��erentes

tailles.

2. Observer un mod�ele de comportement utilisateur via les taches de navigation

photo.

3. Estimer le degr�e de satisfaction des participants vis-�a-vis de l'interface propo-

s�ee.

Approche d’evaluation

L'�evaluation est organis�ee autour de trois taches que les utilisateurs sont invit�es �a

mener sur deux albums de taille di��erente. L'objectif est de comparer et d'analyser

les r�esultats sur di��erents crit�eres et via un questionnaire.

Description des trois taches sans limite de temps (cf. Tableau 4.4)

1. Tache de navigation de recherche (d'une cible pr�ecise)

2. Tache de navigation mixte (recherche d'une cible pr�ecise ou impr�ecise / d'une

cible appr�eci�ee)

3. Tache de navigation fortuite (recherche d'une cible impr�ecise / appr�eci�ee)

Description des deux tailles d’album :

La taille de l'album photo pouvant a�ecter la recherche de photos, nous d�ecidons

d'arranger deux albums de taille di��erente a�n d'appr�ecier l'e�cacit�e des gestes

propos�es. La taille des albums photos personnels utilis�es pour des �evaluations de

navigateurs d'images (cf. Tableau 4.5), varie entre 100 et 3500. N�eanmoins, �a l'ex-

ception d'Harada et al. [51], ces navigateurs sont tous pr�evus pour une utilisation

de bureau, pas pour une utilisation sur des appareils portables.

Notre �evaluation portant sur les appareils portables, nous avons souhait�e d�e�nir deux

tailles d'albums permettant de simuler la navigation photo sur ce type d'appareil.

Nous avons men�e une �etude aupr�es de 45 propri�etaires de camera phones et leur

avons demand�e combien de photos ils y stockaient. Nous avons obtenu un nombre

moyen de 221. Au vu de ce r�esultat et des �etudes d�ecrites au Tableau 4.5, nous avons

d�e�ni la taille du premier album : 300 photos minimum, qui seront fournies par le

participant. Le deuxi�eme album en contiendra 1000 : les 300 photos du participant

seront m�elang�ees avec 700 photos qu'il ne conna�t pas et appartenant �a l'un de ses

amis. On suppose que cet album « m�elang�e » contiendra certains indices qui lui

donneront envie de parcourir ces photos inconnues, le facteur « r�eseau social » en

quelque sorte.

90

Page 99: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Tableau 4.4 – Trois types de taches et r�eactions potentielles des participants

Tache Reaction des participants

Navigation de re-cherche

Les participants sont invit�es�a retrouver une photo sur labase d'un exemple qui leurest pr�esent�e.

Les participants scannent visuelle-ment les contenus �a la recherchede la cible.

Navigation fortuite Les participants sont invi-t�es �a choisir plusieurs pho-tos de fa�con al�eatoire et �a« raconter » celles-ci. (nar-ration des photos)

Les participants parcourent lescontenus sans id�ee pr�ecise de cequ'ils recherchent.

Navigation mixte Dans un premier temps,les participants sont invit�es�a retrouver une photo surla base d'un exemple quileur est pr�esent�e.Dans undeuxi�eme temps, les partici-pants sont invit�es �a choisirdes photos en particulier et�a les raconter.

Cette tache a pour objectif de si-muler une situation de d�ecouverteaccidentelle.

1. Taille d'album 1 : abum personnel du participant (300 photos distribu�ees

al�eatoirement)

2. Taille d'album 2 : album personnel du participant + album personnel d'un

ami (1000 photos distribu�ees al�eatoirement)

Nous d�e�nissons par ailleurs trois modes de manipulation qui nous permettent d'ob-

server comment la manipulation s'e�ectue. Ces modes sont les suivants :

1. Seul le geste de rotation est activ�e (mode RG, Rotation Gesture)

2. Seul le geste de tirer/pousser est activ�e (mode PG, Pulling/Pressing Gesture)

3. Les deux gestes sont activ�es (mode RPG)

Pour l'album de 300 photos, notre hypoth�ese concernant l'e�cacit�e de ces di��erents

modes est la suivante : mode RG > mode RPG > mode PG. Pour l'album de 1000

photos, notre hypoth�ese est : mode RPG > mode PG > mode RG. La proc�edure

g�en�erale d'�evaluation comprend cinq �etapes. Lors de la premi�ere �etape, le participant

est accueilli et une introduction �a l'�evaluation lui est propos�ee. Lors de la deuxi�eme

�etape, avant de passer aux taches formelles, l'utilisateur « s'�echau�e » sur l'appareil

et fait part de ses premi�eres impressions. Lors de la troisi�eme �etape, le participant

ex�ecute une s�erie de taches sur l'album de 300 photos en utilisant di��erents modes

de manipulation. Ce meme proc�ed�e est r�ep�et�e en quatri�eme �etape, cette fois-ci sur

l'album de 1000 photos. Les participants sont interview�es entre chaque album et

font part de leurs suggestions. Cette �evaluation s'ach�eve sur un entretien global.

Entre chaque �etape, nous marquons une pause de cinq minutes. La mise en place

de l'environnement est illustr�ee en �g.4.22.

91

Page 100: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Figure 4.22 – Mise en place de l'environnement d'�evaluation

92

Page 101: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Tableau 4.5 – Panorama des �etudes de navigateurs d'images

Etude Sujets Taches impliquees Usage/photos Taille ducorpus

Platt et al. [67] 8 Rechercher un �echantillon photo via trois interfaces Bureau Imagespersonnelles

850 images enmoyenne

Graham et al.[50]

12 �Evaluation de deux interfaces via cinq taches. T1 : Retrou-ver une image donn�ee parmi 1000 images en cinq minutes.T2 : Retrouver une image donn�ee parmi 3500 images en2 minutes 30 secondes. T3 : Retrouver des images sur labase de 10 descriptions textuelles en trois minutes. T4 :Retrouver une image similaire �a celle montr�ee en exemple,parmi des images issues d'une meme p�eriode (un mois), encinq minutes. T5 : Retrouver des images sur la base de 10descriptions textuelles en cinq minutes.

Bureau Imagespersonnelles

850 images onaverage

Chang et al.[134]

15 Rechercher une image sur la base d'une description verbale Bureau pein-tures

Non pr�ecis�e

Demontiset al. [94]

15 Rechercher une image via les di��erentes interfaces propos�ees Bureau Imagesprofession-nelles

Deux corpusde 300 photoschacun

Harada et al.[51]

17 Tache 1 : Retrouver un �echantillon photo dans l'al-bum.Tache 2 : Choisir la photo que l'on pr�ef�ere.

Mobile Imagesprofession-nelles

Album photopr�epar�e par leparticipant :1200 imagesen moyenne

Christmannand Carbonell[135]

17 ex-perts

Tache 1 : Retrouver une image sur un ensemble de crit�eres.Tache 2 : Retrouver une photo famili�ere.

Bureau Imagesprofession-nelles

869 photos

Hilliges et al.[82]

20 Taches dans un cadre de narration et de partage de photosT1 : Cat�egoriser les photos. T2 : Parcourir les photos etchoisir une photo repr�esentative d'une cat�egorie. T3 : Choi-sir une photo �a partager avec un ami. T4 : Choisir quatrephotos �a utiliser en fond d'�ecran

Bureau Imagespersonnelles

Album photopr�epar�e par leparticipant 80-100 photos

Combs andBederson [85]

30 Comparer quatre navigateurs sur trois groupes d'images.Choisir un premier navigateur. T1 : Trouver une image �aenvoyer �a un ami (pas de limite de temps). T2 : Retrouverquatre images parmi les trois groupes d'images. Choisir unautre navigateur et l'utiliser sur un seul groupe d'images.Tache 1 : Retrouver quatre images parmi les trois groupesd'images.

Bureau Imagesprofession-nelles

Trois corpus de25, 75 et 225images

Yee et al. [136] 32 T1 : Retrouver des images int�eressantes en trois minutes.T2 : Regrouper des images sur le th�eme des beaux arts (en11-14 minutes). T3 : Comparer les images obtenues en T2et r�ediger un texte �a ce sujet en dix minutes. T4 : Retrouverdes images int�eressantes en cinq minutes.

Bureau ImagesBeaux Arts

35000 photos

Cooper et al.[1]

40 T1 : Retrouver une image cible apr�es l'avoir regard�ee pen-dant deux secondes. T2 : Retrouver une image cible sur labase d'une description verbale d�etaill�ee. T3 : Retrouver uneimage cible sur la base d'une description par mots-cl�es.

Bureau (po-tentiellementapplicationmobile)Images �avocationprofessionnelle

200 photos

Porta [95] Inconnu Tache 1 : Retrouver un maximum de photos sur di��erentsth�emes en trois minutes. Tache 2 : Retrouver quatre imagescorrespondant �a un th�eme en particulier (sur trois th�emesau total).

Bureau Images�a vocation pro-fessionnelle

400 photos

Rodden et al.[60]

Inconnu Deux groupes de participants r�ep�etent la meme tache enutilisant trois techniques de visualisation di��erentes. Tache :Lire une description de 200 mots puis choisir trois photosparmi 100.

Bureau Images�a vocation pro-fessionnelle

Quatre th�emesphoto, chacuncomprenant100 images

93

Page 102: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

4.7 Resultat de l’evaluation

Avant de mener l'�evaluation o�cielle, nous avons men�e deux �etudes pilotes a�n

d'�eprouver la proc�edure d'�evaluation. Lors de l'�evaluation formelle, nous avons in-

vit�e six participants ag�es de 20 �a 30 ans �a �evaluer Phora. La dur�ee moyenne de

l'�evaluation a �et�e d'une heure et demie. Les participants poss�edent au moins un ap-

pareil permettant de prendre, visualiser ou parcourir des photos num�eriques (camera

phone, appareil photo ou cadre num�erique). La plupart prennent des photos num�e-

riques au moins une fois par mois, et le PC de bureau est le moyen qu'il privil�egient

pour stocker leurs albums photos. De ce fait, la plupart des participants conserve

moins de 500 photos sur appareil portable, �a l'exception d'une participante qui avait

conserv�e plus de 1000 photos sur son t�el�ephone. Les participants indiquent que, le

plus souvent, ils parcourent les photos num�eriques stock�ees sur leur portable dans

le but de montrer un clich�e �a une tierce personne.

Les participants consid�erent les services Internet pour photos num�eriques comme

une option suppl�ementaire dans le stockage de leurs contenus photos personnels, ou

comme une plate-forme permettant de partager leurs photos avec leur r�eseau social.

La plupart d'entre eux poss�edent au moins un compte sur un service conventionnel

tel que Flickr, Picasa ou Facebook.

Leur premi�ere impression sur Phora est g�en�eralement neutre. S'ils trouvent les in-

dices visuels fournis par l'interface faciles �a comprendre, ils sont l�eg�erement contra-

ri�es par la trop forte sensibilit�e de l'appareil. La manipulation �a deux mains fatigue

certains, qui intervertissent alors leurs mains entre prise de l'appareil et manipulation

de l'interface. Les participants trouvent Phora de taille trop grande, ce qui pourrait

entra�ner une fatigue musculaire sur un usage long terme. Un participant trouve

la manipulation haptique int�eressante et tr�es di��erente de la manipulation tactile

classique, notamment de par le contact physique fort dans le controle du dispositif.

Resultats obtenus sur differentes tailles d’albums

Au total, chaque participant ex�ecute trois taches (recherche, navigation, navigation

mixte) dans chacun des trois modes de manipulation (RG, PG, RPG) sur deux

albums de taille di��erente. Aucune limite de temps n'�etant impos�ee, les participants

sont libres mais n�eanmoins inform�es qu'ils peuvent abandonner la tache s'ils la jugent

trop di�cile ou frustrante. Sur les 108 taches men�ees par les six participants, huit ont

�et�e abandonn�ees en cours de route. Un des participants a abandonn�e quatre taches.

Les taches abandonn�ees en cours de route sont toutes des taches de recherche

d'une photo cible via di��erents modes de manipulation et sur di��erentes tailles

d'album. Nous avons remarqu�e que les taches associ�ees �a une meme cible sont

susceptibles d'�echouer quand le participant ne parvient pas �a accomplir la toute

premi�ere tache impliquant ladite cible. Une situation int�eressante s'est pr�esent�ee

avec une participante : apr�es avoir abandonn�e, elle a retrouv�e par hasard la photo

cible lors de l'ex�ecution d'une autre tache.

Le temps moyen consacr�e aux trois taches est illustr�e en �g.4.23, �g.4.24 and

�g.4.25. Le temps consacr�e aux di��erentes taches est indiqu�e pour les trois modes

de manipulation. Sa dur�ee augmente sensiblement avec la taille de l'album qui est

parcouru. Selon notre hypoth�ese (RG>RPG>PG>), sur l'album de 300 photos,

nous supposons que le geste de rotation sera le plus e�cace de par sa pr�ecision

dans la pr�esentation des photos, et que le geste de manipulation « libre » (RPG)

94

Page 103: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

sera juste un peu plus e�cace que celui de tirer/pousser (PG). Par ailleurs, nous

supposons que le mode RPG sera de loin le plus performant sur l'album de 1000

photos (hypoth�ese RPG>RG>PG)

Les r�esultats illustr�es �g.4.23 viennent n�eanmoins r�efuter ces deux hypoth�eses. Les

modes RPG et PG sont tous deux plus e�caces que le mode RG. Le mode RPG

est plus souple puisqu'il permet aux participants de passer librement d'un mode

de manipulation �a l'autre en cours de tache. Bien que le mode RG permette une

manipulation plus stable que le mode PG, son mode de pr�esentation (photo par

photo) fait que la recherche de photos prend tout de meme un certain temps. Un

�el�ement int�eressant est obtenu lors de la discussion avec les participants. Bien que

ceux-ci disent pr�ef�erer le mode RG sur les taches de recherche a�n de ne manquer

aucune photo, ce mode n�ecessite de scanner les d�etails, ce qui allonge sensiblement

la dur�ee d'accomplissement de la tache.

Le temps consacr�e aux taches de navigation parmi les photos est li�e d'une part

au niveau de narration des participants et, d'autre part, �a la profondeur �a laquelle

ils explorent les contenus. Certains participants vont passer �a la couche suivante

de photos pour choisir un clich�e quand d'autres choisiront des photos issues d'une

seule et meme couche. Bien que le r�esultat (cf. �g.4.24) n'indique qu'une di��erence

mineure entre les trois modes de manipulation, la pr�ef�erence des participants va au

mode PG, qui o�re selon eux davantage de souplesse dans la navigation. Passer

d'une page �a l'autre avec ce mode de navigation faciliterait l'exploration de conte-

nus cons�equents, particuli�erement lorsque l'on ne recherche pas de photo pr�ecise.

Les participants indiquent �egalement trouver ce mode de navigation visuellement

int�eressant car v�ehiculant une id�ee de jeu qui leur permet d'appr�ecier leurs albums.

Comme illustr�e la �g.4.25, le temps pass�e sur les taches de navigation mixte est plus

cons�equent que sur d'autres taches. Fait surprenant : lorsque les participants doivent

ex�ecuter �a la fois des taches de navigation et des taches de recherche, l'allongement

du temps d'ex�ecution n'est pas imputable �a une tache en particulier mais est du

indi��eremment aux deux taches impliqu�ees.

Discussion autour de chaque mode de manipulation

Le questionnaire qui suit la discussion indique un ressenti positif quant �a la navi-

gation, que notre interface faciliterait. Mais le ressenti est n�egatif sur les taches de

recherche de photos. De par la forte sensibilit�e de Phora, les participants trouvent

di�cile de controler la pr�esentation des photos et se sentent d�esorient�es durant la

navigation.

D'entr�ee de jeu, le mode RG recueille la pr�ef�erence des participants. Nous nous

sommes donc int�eress�es �a la fa�con dont les participants changent de mode de ma-

nipulation en cours de tache. Le �chier journal enregistr�e sous l'environnement

Processing indique que, pour toute tache ex�ecut�ee en mode RPG, la strat�egie des

participants est de choisir d'abord le mode RG puis, si celui-ci ne leur permet pas

d'accomplir la tache, de se replier sur le mode PG. Parmi les 36 taches ex�ecut�ees

en mode RPG, seulement trois ont �et�e ex�ecut�ees en mode PG seul, contre 11 pour

le mode RG seul.

De plus, concernant la probl�ematique de la sensibilit�e de manipulation, nous avons

identi��e certains comportements utilisateurs int�eressants adapt�es au dispositif. De

par la sensibilit�e du mat�eriel, les participants trouvent la manipulation par tirer/pousser

95

Page 104: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

plus d�elicate que celle par rotation. L'usage formel de Phora est illustr�e en �g.4.16 :

une main tient l'appareil, l'autre le manipule �a plusieurs doigts. Dans les faits, a�n

de ne pas appuyer trop fort, les participants n'utilisent qu'un seul doigt qui vient

taper l�eg�erement sur le cylindre (cf. �g.4.26, en haut). Ils vont �egalement tenir l'ap-

pareil et venir taper sur la table avec le cylindre, ou encore taper le cylindre avec la

paume de leur main. Cela leur permet de n'appuyer qu'une seule fois sur le cylindre

et pas en continu (cf. �g.4.26, en bas).

Un usage similaire se retrouve sur le mode RG. Certains participants placent l'ap-

pareil �a la verticale de fa�con �a pouvoir le faire tourner plus facilement (cf. �g.4.27,

�a g.). Une participante va jusqu'�a retourner l'appareil, ce qui correspond en fait au

mode de fonctionnement de SpaceNavigator, qu'elle n'a pourtant jamais vu aupa-

ravant (cf. �g.4.27, �a dr.). En g�en�eral, ces comportements utilisateurs peuvent etre

dus au fait que l'a�chage est d�ecorr�ell�e de l'appareil, les participants consid�erant

probablement Phora comme un simple p�eriph�erique d'entr�ee plutot qu'un dispositif

int�egr�e.

Presentation visuelle et manipulation

La plupart des participants trouvent le couple pr�esentation visuelle + geste de ma-

nipulation assez logique et facile �a comprendre. Toutefois, ils regrettent que la

pr�esentation circulaire associ�ee au mode RG ne leur permette pas de savoir « o�u

ils se trouvent ». Autrement dit, leur impression g�en�erale est que s'ils voient bien

que les photos sont en mouvement, ils ne savent pas dire avec exactitude quelle

photo est apparue en dernier. Une solution serait d'appliquer des e�ets visuels �a la

photo la plus r�ecemment apparue (cadre color�e ou sur�el�evation). Les participants

font �egalement remarquer que Phora ne permet pas de parcourir l'album photo par

photo en mode plein �ecran. Ils sugg�erent de personnaliser le nombre de vignettes

pr�esent�ees �a l'�ecran selon le contexte d'utilisation (4x4, 3x3 ou 2x2).

96

Page 105: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Figure 4.23 – Temps moyen consacr�e aux taches de recherche, selon le modede manipulation

Figure 4.24 – Temps moyen consacr�e aux taches de navigation, selon le modede manipulation

Figure 4.25 – Temps moyen consacr�e aux taches de navigation mixte, selon lemode de manipulation

97

Page 106: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

(a) Taper du doigt

(b) Taper de la paume

Figure 4.26 � Comportement utilisateur adapte au mode PG

(a) Tourner (b) Rouler

Figure 4.27 � Comportement utilisateur adapte au mode RG

98

Page 107: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

4.8 Conclusion

Le pr�esent chapitre adresse la probl�ematique de la manipulation gestuelle sur ap-

pareil portable lors de la navigation de photos. Nous cherchons �a comprendre le

fonctionnement des mains sur des taches quotidiennes ainsi que la manipulation

de photos papier sur di��erents usages. Avec pour point de d�epart la m�etaphore du

Rubik's cube, nous proposons un mod�ele d'interaction avec manipulation haptique

sur appareil portable.

Si leurs capacit�es de calcul ont augment�e, les appareils portables n'en restent pas

moins physiquement limit�es. Ex�ecuter des taches d'ordre professionnel sur un por-

table demeure une exp�erience d�elicate. Sur portable, une activit�e �a l'origine diver-

tissante peut devenir d�esagr�eable si pratiqu�ee trop longtemps. Ainsi, si regarder un

clip vid�eo sur son portable est somme toute assez agr�eable, le divertissement fait

place �a l'agacement si le �lm dure deux heures. Les appareils portables proposent

un mod�ele d'usage fr�equent et d'une dur�ee limit�ee. Sur son portable, on va regar-

der quelques photos ou �ecouter sa playlist mp3. Autrement dit, le portable est une

plateforme qui permet d'appr�ecier ses contenus personnels dans le cadre d'un usage

occasionnel.

Les appareils portables sont la plateforme par excellence pour appr�ecier ses contenus

personnels. Lorsque l'on visualise quelque chose que l'on tient entre ses mains, ce

quelque chose devient pr�ecieux. Lorsqu'elle est pr�esent�ee dans son �ecrin (le petit

�ecran du portable), la photo devient une sorte de bijou qui capte l'attention de

l'utilisateur. Certains collectionneurs de joyaux gardent toujours sur eux leurs plus

belles pi�eces, qu'ils exhibent autour d'eux. Ils vont les faire briller a�n d'observer

leurs belles couleurs sous di��erentes lumi�eres et r�ep�eter ce rituel jour apr�es jour,

ce qui leur apporte une satisfaction �emotionnelle et ach�eve de les convaincre qu'ils

poss�edent bel et bien un tr�esor exceptionnel. Pour appr�ecier au mieux ses photos

num�eriques personnelles sur portable, pourquoi ne pas suivre une approche analogue

�a celle du collectionneur ? En induisant davantage de divertissement, on devrait

pouvoir d�eclencher les signaux �emotionnels v�ehicul�es par les photos. L'int�egration de

m�ecanismes de jeu aux modes de navigation photos classiques permettrait d'obtenir

une visualisation agr�eable ainsi qu'un mode d'interaction riche. Avec le Rubik's cube,

nous introduisons la m�etaphore du jeu qui nous permet d'int�egrer le Casual InfoVis

�a notre proposition de mod�ele d'interaction. Bien que les performances du mod�ele

d'interaction propos�e sur Phora n'aient pas forc�ement convaincu les participants,

les r�esultats de l'�evaluation sont positifs en ce qu'ils nous permettent de poursuivre

notre r�e exion sur un mod�ele d'interaction plus pertinent.

99

Page 108: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

100

Page 109: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Chapitre 5

Meta-categorisation des

photos numeriques

Le pr�esent chapitre s'appuie sur l'article « Phorigami : A photo browser based on

meta-categorization and origami visualization » publi�e lors de la conf�erence HCI

International 2009.

TLe pr�esent chapitre propose une interface centr�ee sur l'utilisateur dont l'objectif

est de faciliter l'organisation des contenus photos personnels. Notre approche s'ins-

pire de l'exp�erience quotidienne des utilisateurs dans la prise de photos. En fonction

de la situation, le photographe va prendre di��erents types de prises de vue. Sur ce

constat, notre m�eta cat�egorisation s'int�eresse �a la relation qu'il existe entre mouve-

ment de l'appareil et mouvement de la cible. Cette approche de cat�egorisation peut

etre adopt�ee dans le cadre de di��erentes technologies de reconnaissance, existantes

ou futures. Nous avons men�e deux exp�eriences qui nous ont permis d'�evaluer la

pertinence de notre approche. Sur la base de cette m�eta-cat�egorisation, notre m�eta

interface applique di��erentes techniques d'interaction en cons�equence. Nous d�ecri-

vons le mappage m�etaphorique que nous avons �etabli entre les six m�eta-cat�egories

propos�ees et l'art de l'origami. Nous nous sommes pour cela appuy�es sur des mo-

d�eles papier, avec di��erents niveaux de pliage. Nous pr�esentons les premiers retours

utilisateur en �n de chapitre.

101

Page 110: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

5.1 Problematique de la gestion des photos nume-

riques

Nous sommes en pleine explosion num�erique. Entre les appareils de capture d'image,

les �equipements de stockage et les di��erents services Web, organiser nos contenus

photos est devenu indispensable. La tr�es forte augmentation des contenus photos

num�eriques en ligne (Flickr, Google Picasa) ou sur PC a donn�e naissance �a un « trou

noir » du point de vue de leur gestion. Cette croissance des contenus num�eriques

a mis �a rude �epreuve les traditionnelles interfaces WIMP de gestion. Organiser les

contenus num�eriques par cat�egories ou par th�emes est une fa�con �evidente de r�e-

duire ou de �ltrer le ux d'information pr�esent�e aux utilisateurs. La cat�egorisation

a posteriori via des techniques d'analyse du contenu appara�t quant �a elle comme

une approche tr�es prometteuse, dans la mesure o�u la production des m�etadonn�ees

s'est av�er�ee chronophage et ine�cace sur des applications grand public. Comme l'a

d�ecrit Rodden [60] , pour faciliter la navigation parmi les photos, une interface doit

int�egrer des techniques de gestion automatique. Dans ce sens, certaines techniques

comme par exemple le regroupement automatique ont �et�e largement int�egr�ees aux

outils syst�eme. Ces techniques utilisent les m�etadonn�ees fournies par l'appareil pour

appliquer di��erentes strat�egies de regroupement photo. Rodden and Wood [12] ap-

pliquent une analyse bas niveau du contenu dans le regroupement des images par

similitude. Pour une meilleure e�cacit�e de navigation, l'utilisateur doit n�eanmoins

savoir avec pr�ecision ce qu'il recherche. PhotoTOC [67] int�egre un regroupement

bas�e sur l'information chronologique et sur le contenu, qui lui permet d'organiser

automatiquement les photos num�eriques en fonction des �ev�enements qui leur sont

associ�es. Cette �etude indique des r�esultats positifs concernant l'utilisation de tech-

niques d'organisation automatique dans la gestion de contenus photos num�eriques.

Foto�le [36] et EasyAlbum [76] utilisent quant �a eux une technique d'analyse du

contenu et des annotations pour g�erer les photos par reconnaissance faciale. Pour

les photos num�eriques d�esordonn�ees, Scha�alitzky and Zisserman [63] analysent le

contenu des images et �etablissent un point de vue relatif qui sera utilis�e dans le

regroupement. Jaimes et al. [61] adressent quant �a eux la probl�ematique de la d�e-

tection des photos quasiment identiques dans les contenus photos personnels. Ils

proposent une analyse bas�ee sur le contenu et, a�n d'�evaluer les performances de

leur algorithme, conduisent une exp�erience de classement manuel. Ils ne proposent

n�eanmoins aucune interface concr�ete. �A ce jour, si les outils classiques de gestion

propos�es �a l'utilisateur �nal int�egrent des techniques de regroupement automa-

tique, ils ne permettent n�eanmoins d'adresser la demande que dans une situation

bien sp�eci�que. La pertinence de ces situations sp�eci�ques dans le cas des contenus

photos de « Mr Tout-le-monde » est un th�eme rarement �etudi�e de fa�con aboutie.

Les photoware bas�es sur des techniques d'analyse du contenu sont surtout orient�es

r�esultats : leurs modes de visualisation et leurs techniques d'interaction s'appuient

toujours sur une interface WIMP classique [44]. Pour ces outils d'InfoVis, les inter-

faces WIMP pr�esentent certaines faiblesses : leurs techniques de visualisation sont

limit�ees, �xes, et donc potentiellement insu�santes dans la navigation de contenus

photographiques cons�equents. Certaines interfaces exp�erimentales telles que Pho-

toMesa [29], Photo tourism [64], Face Bubble [59] et le travail de Porta [95] ont

tent�e de pallier cet inconv�enient en int�egrant des techniques non conventionnelles de

visualisation et d'interaction �a un navigateur photo. Les techniques de visualisation

et d'interaction d�edi�ees �a un usage sp�eci�que sont quant �a elles toujours en cours

d'�etude.

102

Page 111: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

5.2 Objectif de l’etude

L'inconv�enient des �etudes actuelles sur les techniques automatiques de cat�egorisa-

tion est qu'elles ne proposent pas d'interface int�egr�ee qui permettrait d'adresser la

diversit�e des photos au quotidien. En r�eponse, le pr�esent chapitre introduit Phori-

gami, navigateur photo bas�e sur la m�eta cat�egorisation et la visualisation origami.

Cette approche de cat�egorisation peut etre adopt�ee dans le cadre de di��erentes

technologies de reconnaissance, existantes ou futures. Phorigami a pour objectif

non pas une simple approche de cat�egorisation dans la gestion des photos, mais

plutot la caract�erisation des di��erents contextes photos �a partir de cette meme

cat�egorisation. L'art de l'origami permet un mappage s�emantique entre technique

de visualisation et technique d'interaction. A�n d'�evaluer la pertinence de notre

m�ethode, nous avons men�e deux exp�eriences bas�ees sur des taches de classement

manuel. Nous pr�esenterons dans ses grandes lignes notre m�eta interface qui permet

d'appliquer di��erentes techniques d'interaction et de visualisation origami selon le

contexte de chaque groupe photo.

5.3 Elements de meta-categorisation

Modes de prise de vue des appareils photos numeriques

Avec un appareil photo m�ecanique, pour controler la qualit�e photo sur di��erentes

sc�enes, le photographe doit ma�triser certains param�etres essentiels tels que l'ouver-

ture de l'objectif, la longueur focale ou le temps d'exposition. Les progr�es des appa-

reils num�eriques ont grandement simpli��e le r�eglage de ces param�etres. Amateurs et

novices peuvent d�esormais prendre des photos le plus simplement du monde. Cette

facilit�e d'utilisation passe tout d'abord par l'automatisation de certaines fonctions

de capture d'image. En e�et, les appareils photos num�eriques actuels proposent

davantage de fonctions adapt�ees �a chaque sc�ene et qui permettent de satisfaire dif-

f�erents sc�enarii. Les modes automatiques de prise de vue dans les appareils photos

actuels varient selon le fabricant et les sp�eci�cations des di��erentes s�eries. L'Olym-

pus SP-590UZ [137] propose par exemple 19 modes de prise de vue di��erents, quand

le Kodak Easyshare Z980 [138] en int�egre 10. Un autre exemple est le cameraphone

K800i de Sony Ericsson [139], dont l'interface permet de s�electionner �a la fois un

mode de prise de vue et un type de sc�ene en particulier (cf. �g.5.1). L'utilisateur

a le choix entre quatre modes de capture : Normal, BestPic, Panorama et Frame

(Cadre) et six types de sc�enes : Auto, Twilight Landscape (paysage de nuit), Twi-

light portrait (portrait de nuit), Beach/Snow (plage/neige), Sport et Document.

L'int�egration de fonctions de prise de vue automatique entra�ne une « cat�egorisa-

tion » automatique des photos num�eriques dans di��erents contextes et scenarii de

prise de vue. Il est int�eressant de noter que, si les recherches vont vers une utilisa-

tion accrue des m�etadonn�ees fournies par l'appareil dans la recherche des photos,

aucune interface ne s'int�eresse �a l'utilisation de ces m�etadonn�ees dans la gestion des

photos. D'apr�es nous, les m�etadonn�ees relatives aux modes de prise de vue peuvent

etre d'une grande utilit�e dans la gestion des photos num�eriques, puisqu'elles peuvent

contribuer �a la cat�egorisation automatique des di��erents scenarii de prise de vue.

103

Page 112: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Le point de vue du photographe

Le mode de prise de vue qui est choisi repr�esente l'intention du photographe, ce qui

peut ouvrir certaines pistes dans la gestion des photos num�eriques. Selon la situation,

le photographe va prendre di��erents types de photos qui seront tout autant de m�eta-

cat�egories. Comme l'ont montr�e les m�ethodes de recherche adopt�ees par Rodden and

Wood [12], Malone [140], Marshall and Bly [141], observer les modes quotidiens de

manipulation des donn�ees num�eriques permet de dessiner des approches potentielles

dans la gestion de ces donn�ees.

Dans la pratique quotidienne de la photo, que l'aspect num�erique de celle-ci a�ecte

ou non notre comportement, on a tendance �a photographier un batiment de di��e-

rents points de vue, a�n d'en capturer une vue d'ensemble. On prend par ailleurs

plusieurs clich�es successifs d'un objet en mouvement, a�n de capturer chaque mo-

ment de l'action. �A l'occasion d'une r�eunion de famille, les photos de groupe ont

valeur d'objet souvenir, puisqu'elles permettent de se rem�emorer les personnes et les

histoires. En fonction de ces di��erents usages, la fa�con dont le photographe prend

un clich�e indique �a quel type de photo on a a�aire.

Les trois cercles en �g.5.2 illustrent le contexte de la prise de vue. Le cercle int�e-

rieur repr�esente la motivation du photographe (cercle 1) d�eclench�ee par des cibles

sp�eci�ques dans son environnement (cercle 2), cibles qui peuvent etre �xes ou en

mouvement, selon la situation. A�n de di�user plus largement le contexte de la

prise de vue, les photos sont d�ecrites soit par le photographe lui-meme, soit par des

personnes invit�ees �a participer (cercle 3). Le but est de restituer le contexte original

du clich�e. Une meme photo peut etre « racont�ee » de di��erents points de vue, �a

di��erents moments.

Figure 5.1 – Interface du cameraphone K800i : s�election du mode de prise devue (Shooting Mode, SM) et du type de sc�ene (Scene Selection,SS).

Figure 5.2 – Contextes de la prise de vue : contexte du point de vue (1),contexte environnemental (2) et contexte narratif (3).

104

Page 113: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

5.4 Definition des six categories

Nous supposons que l'approche propos�ee pourra etre int�egr�ee par l'�etat de l'art, dans

les algorithmes bas�es sur l'analyse du contenu de l'image ainsi que les m�etadonn�ees

fournies par l'appareil. Sur la base des �el�ements fournis par les modes de prise de vue

automatiques, nous analysons la prise de vue selon deux param�etres : d�eplacement

de l'appareil et statut des cibles (statiques et en mouvement).

Une id�ee similaire a �et�e propos�ee dans la d�etection de photos quasiment identiques.

L'approche de Jaimes et al. [61] v�eri�e les di��erences entre les images selon trois

�el�ements : la sc�ene (�eclairage et arri�ere-plan), l'appareil (statut de l'exposition et

du point de vue) et l'image (contenu visuel). Compar�e �a l'approche propos�ee par

Jaimes, notre point de vue est centr�e sur l'utilisateur. Le but est d'�etudier la s�e-

mantique des photos (sc�ene et objets) via une analyse de la relation entre ce qui

est photographi�e (la sc�ene) et qui photographie (l'appareil/le photographe), a�n

de restituer le contexte de la prise de vue. Nous �evitons ainsi une approche syn-

taxique des photos qui s'int�eresserait �a l'analyse de leur contenu visuel (couleur,

luminosit�e, etc.). Par ailleurs, si les m�etadonn�ees fournies par l'appareil sont juste

suppos�ees enregistrer des mesures relatives aux di��erents modes de prise de vue,

l'analyse syntaxique, elle, doit �egalement permettre le regroupement des photos.

Une comparaison des deux approches est propos�ee dans le tableau 5.1.

Nous avons ajout�e une troisi�eme dimension, le « groupe » , qui permet de caract�eri-

ser les cibles dans une situation sp�eci�que et de prendre en consid�eration l'exp�erience

utilisateur dans la prise de photos de groupe. Le tableau 5.2 pr�esente la r�epartition

des param�etres et dimensions associ�ees.

Tableau 5.1 – Comparaison des deux approches.

�El�ement/Type d'approche Approche deJaimes et al.

Notre approche

Scene �Eclairage, d�eplace-ment des cibles etarri�ere-plan

D�eplacement descibles et arri�ere-plan

Appareil photo Exposition, point devue

Point de vue.

Image (description visuelle) Bruit, luminosit�e,couleur

-

Tableau 5.2 – Mouvement de l'appareil photo et des cibles.

Cible du photographe/Appareil Fixe En mouvement

Fixe

En mouvement

Groupes (remplacement du su-jet)

105

Page 114: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Tableau 3.4.2, nous cr�eons six cat�egories de photos A, B, C, D, E et F qui sont

d�ecrites avec les scenarii associ�es au tableau 5.3. Le sc�enario de la cat�egorie A cor-

respond �a un point de vue statique simple : chaque photo pr�esente un objet statique

di��erent, tous les objets provenant d'un seul et meme environnement. Par exemple,

l'utilisateur photographie di��erentes ıuvres d'art au cours d'une exposition. Le sc�e-

nario « multivues » de la cat�egorie B d�ecrit comment le photographe change de

position a�n de photographier chaque face d'un objet statique, typiquement un ba-

timent. Des exemples de cat�egorie A et B sont pr�esent�es en �g.5.3. Les cat�egories

C et D ont quant �a elles pour sc�enario la capture de mouvement : le photographe

prend plusieurs clich�es d'un objet en mouvement. La di��erence entre ces deux cat�e-

gories tient au statut de l'appareil photo. Un exemple de cat�egorie C est propos�e en

�g.5.4 : le photographe reste immobile et photographie des pi�etons, en vue a�erienne.

En cat�egorie D, le photographe d�eplace son appareil a�n de suivre un objet en mou-

vement. Dans le meme ordre d'id�ees, les cat�egories E et F concernent les photos

de groupe lors de r�eunions. Si la cat�egorie E se rapporte aux photos de groupes

statiques, la cat�egorie F concerne les remplacements de sujet[61] ou les l�eg�eres dif-

f�erences de mouvement. Par ailleurs, les clich�es doubles ou multiples d'une meme

cible posent probl�eme dans la gestion des contenus photographiques[61]. Dans notre

cat�egorisation, ces clich�es doubles d'un meme contexte pourront etre rang�es sous la

cat�egorie B, C, D ou F, l'intention du photographe �etant tout simplement de r�eussir

le « meilleur » clich�e.

Tableau 5.3 – Cat�egories, contextes et techniques d'interaction associ�es.

Categorie Intention du photo-graphe

Contexte Technique d’in-teraction

Vue statique simple Panorama Pr�esentation Pa-noramique

Vues multiples

Capture de mouvement Action Pr�esentationPhoto Anim�ee

Capture de mouvement

Groupes Lien social Pr�esentationpli�ee

Groupes en mouvement etremplacement du sujet

106

Page 115: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Figure 5.3 – Type A : Vue statique simple (�a g.), Type B : vues multiples (�adr.).

Figure 5.4 – Type C : Capture de mouvement avec appareil �xe (�a g.), TypeD : Capture de mouvement avec appareil en mouvement (�a dr.).

Figure 5.5 – TType E : Groupes (�a g.), Type F : Groupes en mouvement (�adr.)

5.5 Evaluation de la meta-categorisation

Objectif et procedure

A�n d'�etudier la pertinence de notre m�eta-cat�egorisation sur des contenus photos

personnels, nous avons men�e deux exp�eriences incluant des taches de classement

manuel. Ces r�esultats pr�eliminaires seront utilis�es comme r�ef�erence dans l'impl�e-

mentation de notre m�eta-interface. L'objectif de la premi�ere exp�erience (E1) est de

d�ecouvrir combien de photos peuvent etre class�ees en utilisant notre m�ethode. Les

photos proviennent de di��erentes collections personnelles. Notre hypoth�ese sur E1

�etait que notre m�ethode de cat�egorisation permettait d'obtenir un taux de clas-

sement de 50 % pour chaque collection photo. Nous avons men�e une deuxi�eme

exp�erience (E2) a�n d'�etudier l'impact des variations de jugement personnel sur le

classement des photos. En E2, 10 participants sont invit�es �a utiliser notre m�ethode

pour classer le contenu d'un meme album photo. L'objectif de cette exp�erience

est non seulement d'obtenir le taux d'erreur moyen (taux de variation) du classe-

ment manuel, mais �egalement d'observer comment les sujets ex�ecutent les taches

en termes de jugement personnel �a l'�egard de contenus photos qui leur sont incon-

nus (cf. tableau 5.4). Les �echantillons de contenus photographiques sont fournis

sur la base du volontariat, le crit�ere �etant de collecter les albums photos de « Mr.

Tout-le-monde » aupr�es de photographes novices et amateurs. Notre collection ras-

semble vingt albums photos personnels appartenant �a 10 photographes hommes et

femmes, d'un age compris entre 24 et 34 ans. Les pro�ls des participants : �etudiants

�a l'universit�e, jeunes enseignants en lyc�ee, personnel administratif en universit�e, in-

g�enieurs, assistants marketing, hotesses de l'air et stewarts. Les collections photos

vont de 1149 �a 14297 photos num�eriques (cf. �g.5.6). Pour r�eduire la taille des

�echantillons photos, nous avons choisi les photos selon l'ordre chronologique des

albums, pour aboutir �a un �echantillon d'environ 1000 photos. La collection �nale

ainsi obtenue �a partir des contributions des 20 volontaires contient entre 973 et

1333 photos.

107

Page 116: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Tableau 5.4 – R�esum�e des deux exp�eriences.

Exp�erience Objectif Nombre departicipants

Nombre d'al-bums photosobserv�es

E1 Taux de classementsuperieur a 50%

1 20

E2 Verification du tauxde variation

10 1

Figure 5.6 – R�epartition de la taille des albums photos entre les 20 participants.

Figure 5.7 – Taches de classement manuel sur photos imprim�ees.

108

Page 117: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Nos exp�eriences s'appuient sur des taches de classement manuel. Les participants

sont invit�es �a grouper les photos selon notre m�ethode, en les cerclant de di��erentes

couleurs (cf. �g.5.7). En E1, les participants ont class�e manuellement 20 collections

photos personnelles, �a raison de deux collections par jour, et de deux heures de

temps par collection. En E2, nous avons choisi un �echantillon de 973 photos et

invit�e 10 volontaires �a le classer manuellement. Avant chaque tache de classement,

nous expliquons notre m�ethode de cat�egorisation aux participants. Une copie papier

du tableau 5.2 leur est fournie pour chaque tache. Les volontaires sont des �etu-

diants rennais en Master, dont aucun n'est li�e aux propri�etaires de notre collection

d'�echantillons. La dur�ee de la tache de classement en E2 est �egalement de deux

heures environ.

Les participants n'�etant pas les auteurs des photos qu'ils classent manuellement,

nous avons �egalement men�e une tache que nous avons appel�ee « choix des photos

pr�ef�er�ees » . L'objectif est de d�eterminer quels sont les indices visuels qui retiennent

l'attention des participants lorsqu'ils parcourent rapidement un album photo qui ne

leur est pas familier . �A l'issue de cette tache, chaque participant s�electionne ses 10

photos pr�ef�er�ees.

109

Page 118: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

5.6 Resultats de l� ´evaluation

T�ache de classement Les resultats de chaque experience sont presentes sur des

diagrammes circulaires et sequentiels. Fig.5.8, les diagrammes circulaires montrent

la repartition des differents types de photos. La categorie G, en noir, correspond aux

photos non classees. Le taux de classement en E1 est de 57% (dev std= 7,9%). En

E2, le taux de classement est de 83% (dev std = 1,3%). Ces resultats confirment

notre hypothese : notre meta-categorisation permet bien de classer plus de 50%

des photos de « Mr Tout-le-monde » . La fig.5.9 presente les resultats de E1 sur

20 albums photos. Le jugement personnel affecte les taches de classement, ce qui

explique que le taux de classement soit plus ´eleve en E2 qu’ en E1. Une autre raison

a ce taux plus ´eleve est que deux des participants ont consciencieusement classe

l’ ensemble des photos.

Figure 5.8 � Repartition des types de photos en E1 et E2.

Figure 5.9 � Repartition detaillee des resultats en E1.(Axe vertical : taux de classement pour chaque participant ; axehorizontal : participants).

110

Page 119: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

En g�en�eral, quand il n'est pas possible d'associer leurs di��erents contextes, les par-

ticipants ne r�eussissent pas �a classer les photos, particuli�erement si elles ne suivent

pas d'ordre chronologique. Par ailleurs, quand une seule photo se rapporte �a une

sc�ene donn�ee, le classement ne peut etre e�ectu�e.

A�n d'�etudier les di��erences de classement entre les participants, nous avons appli-

qu�e une m�ethode de permutation matricielle [142]. L'objectif : analyser le classement

�etabli par les di��erents participants via des diagrammes s�equentiels (voir �g.5.10).

L'axe horizontal du diagramme en �g.5.10 correspond au nombre de photos (de 1

�a 973), l'axe vertical aux participants. La permutation matricielle permet de r�eor-

ganiser les participants sur l'axe vertical a�n de faire �emerger certaines coh�erences

dans les r�esultats �etablis par les participants. Nous n'avons pas r�eorganis�e l'axe ho-

rizontal, a�n de pouvoir conserver les contextes photos par cat�egorie au sein de

l'album. Le diagramme original est illustr�e �g.5.10, quatre zones de coh�erence des

r�esultats �etant s�electionn�ees et illustr�ees �g.5.12. Le diagramme r�eorganis�e, dont

nous discuterons les conclusions, est quant �a lui illustr�e �g.5.13.

Diagrammes originaux : conclusions�A la lecture des diagrammes originaux pr�esentant les classements �etablis par 10 par-

ticipants, on distingue trois cat�egories de r�esultats : r�esultats coh�erents, r�esultats

relatifs et r�esultats constrast�es. Tout d'abord, il appara�t que le nombre de cat�e-

gories est li�e �a la vari�et�e des contenus photos, c'est-�a-dire que plus la collection

pr�esente de th�emes, plus on a de cat�egories. Pour les zones de coh�erence des r�e-

sultats W, X, Y et Z en �g.5.12, les contextes photos laissent deviner des th�emes

plus concrets que d'autres, ce qui explique qu'il y ait une plus grande coh�erence

dans les classements �etablis. Les zones W, X et Y pr�esentent des r�esultats relatifs.

Prenons par exemple la zone W : la plupart des photos ont �et�e class�ees en cat�egorie

F (Groupe en mouvement), une petite partie en cat�egorie E (Groupe). De fa�con

�evidente, le contexte photo de la zone W est per�cu comme des « personnes au

sein d'un groupe », mais la condition des objets dans la photo (en mouvement

Figure 5.10 – Vue globale des diagrammes de 10 participants �a E2.

Figure 5.11 – Vue globale des diagrammes de 10 participants �a E2, sur la basedes trois contextes principaux (panorama, capture de mouve-ment, groupe).

ou statique) ne fait pas l'unanimit�e. En ce qui concerne les r�esultats contrast�es de

111

Page 120: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

la zone X, certains participants classent les photos en cat�egorie B (vues multiples)

quand la majorit�e d'entre eux choisit la Z (capture de mouvement). Un tel contraste

peut etre du �a une erreur de leur part ou �a une variation de leur jugement subjectif.

Fig.5.11, nous pr�esentons �egalement des diagrammes bas�es sur les trois contextes

principaux : panorama (en bleu), capture de mouvement (en rouge) et groupe (en

violet).

Diagrammes reorganises : conclusions

Nous avons r�eorganis�e les 10 diagrammes a�n de faire �emerger une certaine co-

h�erence dans les r�esultats ainsi que des mod�eles de classement. Notre premi�ere

conclusion est que la fr�equence des photos non class�ees est plus �elev�ee sur les 120

premi�eres photos (cf. �g.5.13, zone A). Les participants sont encore au stade de

l'�echau�ement dans leur approche de classement ou consid�erent, en l'absence d'un

lien �evident entre les di��erents th�emes des photos, qu'ils ne peuvent pas classer

celles-ci. Par ailleurs, les 120 premi�eres photos pr�esentent une grande vari�et�e de

th�emes, ce qui peut surcharger les participants et a�ecter leur prise de d�ecision.

Les participants n'�etant pas les auteurs des photos, ils tentent d'en reconstruire le

contexte en s'inspirant de leurs propres exp�eriences visuelles. Ceux qui n'�eprouvent

pas d'�emotion vis-�a-vis du contexte des photos les classent sur simple analyse vi-

suelle de leur contenu. C'est typiquement l'approche que suivent les algorithmes

informatiques d'analyse des images. Un des participants a d�eclar�e qu'il lui �etait bien

plus facile de classer les photos s'il s'�etait lui-meme d�ej�a trouv�e dans une situation

semblable �a celle du photographe. En g�en�eral, la subjectivit�e a�ecte les d�ecisions

des participants, selon que les contextes photos d�eclenchent ou non chez eux des

signaux �emotionnels. Par ailleurs, les r�esultats indiquent que certains participants

ont des di�cult�es �a d�etecter un mouvement simultan�e de l'appareil et de la cible, et

ne prennent en compte qu'un seul �el�ement au cours de leurs taches de classement.

Nous pr�esentons 11 diagrammes, chacun r�eorganis�e d'une fa�con di��erente (�g.5.13

�a �g.5.20), a�n de d�egager 11 sections parmi les r�esultats. Fig.5.13, de par la grande

diversit�e des th�emes photos en zone A, il est di�cile d'obtenir une zone bien d�e�nie

et �etendue de r�esultats coh�erents. On obtient par contre plusieurs petites zones de

cat�egorie D (en jaune, capture de mouvement). Globalement, le r�esultat pour la

zone B en Fig.5.13 est un contexte de capture de mouvement, avec des di��erences

selon le statut de l'appareil photo. Lorsque la photo est prise avec un appareil en

mouvement, elle est class�ee en cat�egorie D (en jaune), mais lorsque l'appareil est

�xe et qu'il capture une cible en mouvement, la photo est class�ee en C (en rouge).

La �g.5.14 pr�esente les r�esultats partiels de classement de la 200�eme �a la 400�eme

photo environ. Compar�e �a d'autres sections, les zones C et D pr�esentent une coh�e-

rence moindre dans leurs r�esultats. La plupart des photos de la zone C sont dans

un contexte « Photo de groupe »(cat�egories E et F), tandis qu'un autre r�esultat

contrast�e concerne la partie de la cat�egorie D o�u l'appareil et la cible sont consid�er�es

comme �etant tous deux en mouvement. Nous revenons aux �echantillons photos a�n

de comprendre pourquoi ils ont �et�e class�es en D ou F. Il s'av�ere que les participants

retiennent di��erents crit�eres pour les photos qui pr�esentent des sujets multiples, no-

tamment la prise de conscience vis-�a-vis de l'appareil photo au moment de la prise.

Les photos class�ees en cat�egorie F pr�esentent des sujets en mouvement qui regardent

le photographe. Celles class�ees en D pr�esentent des sujets qui ignorent qu'on est en

train de les photographier. L'exemple �g.5.15 montre plusieurs enfants en train de

danser, sans un regard pour le photographe. Ce clich�e serait probablement class�e

en F, l'attention des sujets n'�etant pas �eveill�ee.

112

Page 121: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Figure 5.12 – Diagrammes originaux : Zones W, X, Y et Z de coh�erence desr�esultats

Figure 5.13 – Diagramme r�eorganis�e pour les zones A (haut) et B (bas) dansl'ordre 1 et 2.

Figure 5.14 – Diagramme r�eorganis�e a�n de d�egager les zones C (haut) et D(bas) dans l'ordre 3 et 4.

113

Page 122: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

La zone D en �g.5.14 pr�esente encore moins de r�esultats coh�erents, les participants

�etant juste tomb�es d'accord sur une petite partie des photos qu'ils ont class�ee en

cat�egorie F. Un �el�ement int�eressant : les participants 1 et 2 sur la zone D. S'ils ont

tous deux choisi des cat�egories compl�etement di��erentes, leur taux de classement est

�a peu pr�es identique. S'ils sont tous deux capables de distinguer di��erents contextes

photos, ils n'en ont clairement pas la meme d�e�nition.

Nous avons r�eorganis�e les r�esultats des zones A et B de la �g.5.13 a�n d'obtenir

un r�esultat plus parlant (cf. �g.5.16). �A la lecture du diagramme, la plupart des

photos de la zone E ont clairement �et�e class�ees en cat�egorie F (Photo de groupe, en

mouvement), et une petite partie l'a �et�e en cat�egorie E (Photo de groupe, statique).

De fa�con �evidente, les participants ne tombent pas d'accord sur le statut des sujets

pr�esents sur les photos. Les photos 400 �a 520 environ pr�esentent di��erentes sc�enes

impliquant un groupe de jeunes danseurs. Ces di��erentes poses, discontinues (cf.

�g.5.17), permettent de tester les participants sur leur capacit�e �a d�eterminer si les

danseurs sont ou non en mouvement. Par ailleurs, la zone F pr�esente davantage de

r�esultats coh�erents en cat�egorie B (panoramique, en mouvement) et D (capture de

mouvement, en mouvement). Si les deux cat�egories indiquent un contexte d'appareil

en mouvement, le statut des cibles di��ere. Les photos de la zone D montrent une

touriste femme posant devant di��erents monuments en Italie. La di�cult�e avec

ces photos est que les participants doivent v�eri�er non seulement la pose mais

�egalement l'arri�ere-plan a�n de d�eterminer un �eventuel changement. Les participants

qui classent ces clich�es en cat�egorie B consid�erent que l'ensemble des monuments

visit�es constitue en fait une seule et meme sc�ene et que seul l'appareil photo se

d�eplace. Quant �a ceux qui les classent en D, ils consid�erent que l'appareil et la cible

se d�eplacent tous deux.

En zone G (cf. �g.5.18), une moiti�e des participants a retenu que les sujets �etaient

en mouvement. Mais, pour une autre moiti�e, c'est le contexte de groupe qui a �et�e

retenu. Nous revenons aux �echantillons photos et d�ecouvrons que les participants

3 et 9 ont class�e l'ensemble des photos de la zone en cat�egorie E et F. Le parti-

cipant 5 cr�ee quant �a lui la surprise, puisqu'il les a class�ees en cat�egorie A, « Vue

simple statique ». En zone H, le contexte exprim�e est surtout celui d'une « photo de

groupe »(mariage, c�er�emonie de remise des diplomes), ce qui explique que les parti-

cipants aient class�e la plupart des photos en cat�egorie E ou F. La zone I en �g.5.19

r�ev�ele quant �a elle un r�esultat contrast�e, avec une pr�epond�erance de la cat�egorie A

et des photos non class�ees. Les photos de cette zone repr�esentent di��erentes sc�enes

au sein d'un hall d'exposition. Si la moiti�e des photos n'a pas �et�e class�ee, c'est

parce que certains participants n'arrivent pas �a penser les di��erents arri�ere-plans

comme �etant la repr�esentation partielle d'un seul et meme environnement : le hall

d'exposition. Autrement dit, ils ne comprennent pas su�samment le contexte de

la photo, surtout quand ils n'en sont pas les auteurs. La zone J, assez r�eduite, est

quant �a elle r�epartie moiti�e-moiti�e entre la cat�egorie E et la F. Cela indique une

di��erence de jugement parmi les participants vis-�a-vis du statut « en mouvement »d'un groupe.

En �g.5.20, pour les zones K et L (les deux derni�eres), les classements �etablis sont

�a peu de choses pr�es identiques : la plupart des photos y ont �et�e class�ees soit

en cat�egorie D, soit en B. Si le contexte est clairement celui d'un « appareil en

mouvement », les r�esultats semblent tout de meme indiquer que les participants

ont une certaine di�cult�e �a di��erencier cible en mouvement et cible statique.

114

Page 123: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Figure 5.15 – Sujets d'une photo ayant conscience (�a g.) ou non (�a dr.) del'appareil photo.

Figure 5.16 – Diagrammes r�eorganis�es a�n de d�egager les zones E (haut) et F(bas) dans l'ordre 5 et 6.

Figure 5.17 – Poses discontinues.

115

Page 124: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Pour r�esumer, notre approche de cat�egorisation s'int�eresse au statut de l'appareil

par rapport �a la cible et vice versa. Cela nous permet de d�egager certains contextes

photos et d'adopter un point de vue di��erent de celui des syst�emes de gestion photo.

Nous invitons les participants �a mener des taches de classement sur des contenus

photos qui leur sont inconnus. Puisque qu'ils ne sont pas les auteurs des clich�es, les

participants s'appuient sur des indices et �el�ements de comparaison dans l'analyse des

contenus visuels. Cette approche est typiquement celle qu'adoptent les algorithmes

d'analyse du contenu des images. La premi�ere exp�erience (E1) vient con�rmer notre

approche, l'application d'une permutation matricielle permettant ensuite de r�eor-

ganiser les diagrammes et d'�etudier les variations entre les participants. Dans ce

type de classement manuel, si certaines erreurs et une certaine part de subjectivit�e

dans le jugement sont in�evitables, notre id�ee est surtout de soumettre une vision

susceptible d'inspirer les syst�emes futurs.

D�e�nir le contexte d'une photo est encore plus di�cile quand on n'en est pas l'au-

teur. Une photo donn�ee peut meme traduire di��erents messages au �l du temps

qui passe. Le contexte est une information complexe qui embarrasse les participants

lors du classement manuel des photos. Comme le pr�evoit notre approche de cat�ego-

risation, les photos sont class�ees selon le statut de l'appareil et de la cible. En r�egle

g�en�erale, les participants distinguent le statut de l'appareil ou de la cible de deux

fa�cons : l'analyse d'un point de vue micro ou macro. Par exemple, pour conna�tre

le statut d'une cible, les participants vont observer des photos pr�esentant un chan-

gement continu et en d�eduire des indices �evidents. Ils obtiennent dans ce cas le

contexte photo correspondant d'un point de vue micro. Cependant, dans certaines

situations, une cible en mouvement n'est captur�ee qu'�a des intervalles de temps

assez �eloign�es les uns des autres. Dans ce cas, si les participants �etablissent une

transition visuelle �a partir de ces clich�es, ils obtiennent le contexte photo correspon-

dant d'un point de vue macro (cf. �g.5.21).

Pour conna�tre le statut de l'appareil photo, les participants adoptent une approche

similaire. Ces deux fa�cons de faire sont mises �a mal s'il faut analyser simultan�ement

statut de la cible et statut de l'appareil. Il manque aux participants certaines infor-

mations qui leur permettraient de d�e�nir qui de la cible ou de l'appareil se d�eplace.

Cela explique pourquoi, dans de nombreuses occasions, les photos ont �et�e class�ees

dans un contexte identique mais dans des cat�egories di��erentes. La solution pourrait

r�esider dans les m�etadonn�ees. Les techniques actuelles exploitent tr�es largement les

m�etadonn�ees fournies par les appareils photos, et les utilisateurs peuvent �egalement

baliser manuellement ou automatiquement leurs clich�es. �A l'avenir, avec un peu de

chance, un syst�eme s'appuyant �a la fois sur ces m�etadonn�ees et sur des algorithmes

d'analyse s�emantique permettra de r�esoudre les di�cult�es mentionn�ees dans nos

conclusions.

116

Page 125: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Figure 5.18 – Digrammes r�eorganis�es a�n de d�egager les zones G (haut) et H(bas) dans l'ordre 7 et 8.

Figure 5.19 – Diagrammes r�eorganis�es a�n de d�egager les zones I (haut) et J(bas) dans l'ordre 9 et 10.

Figure 5.20 – Diagramme r�eorganis�e a�n de d�egager les zones K (�a g.) et L (�adr.) dans l'ordre 11.

117

Page 126: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Conclusions sur l’attraction visuelle des photos preferees

En plus des deux exp�eriences pr�ec�edentes, chaque participant est invit�e �a s�election-

ner ses 10 photos pr�ef�er�ees dans notre collection. Nous avons recueilli les r�esultats

et �etabli un tableau de pr�ef�erence (cf. tableau 5.5) pour 10 participants. Les parti-

cipants sont list�es dans la colonne de gauche et la premi�ere ligne, num�erot�ee de 1 �a

10, correspond au nombre de photos pr�ef�er�ees. Aucun ordre de pr�ef�erence n'est �eta-

bli entre les photos s�electionn�ees. Dans la colonne de droite, on indique �egalement

combien de photos chaque participant a en commun avec d'autres. Nous invitons

ensuite les participants �a expliquer leur choix. Bien qu'ils indiquent avoir choisi les

photos pour des raisons esth�etiques ou parce qu'elles �evoquaient chez eux des sou-

venirs de voyages ou des moments agr�eables, il appara�t que certaines photos ont

�et�e choisies pour leur originalit�e compar�e aux clich�es voisins. Par exemple, la photo

d'une paire de chaussures se d�etache des autres photos de par son contexte tr�es

di��erent. Meme chose pour une photo de eurs : elle attirera l'attention si entour�ee

de photos de voyages. Les quatre photos les plus appr�eci�ees des participants sont

pr�esent�ees �g.5.22 dans leur contexte original.

Que les photos de la �g.5.22 soient ou non dans le d�esordre, l'id�ee est que, durant

la navigation de contenus photos inconnus, les caract�eristiques visuelles de certaines

photos peuvent attirer notre attention. Lorsque l'on parcourt de fa�con r�ep�et�ee ses

propres contenus photos, la probabilit�e d'y faire des d�ecouvertes int�eressantes s'en

trouve r�eduite. Dans le chapitre pr�ec�edent, nous avons abord�e la notion de d�efami-

liarisation vis-�a-vis de contenus familiers. Nous avons montr�e qu'il �etait possible de

reconstruire l'exp�erience visuelle vis-�a-vis de ces contenus en �etablissant par exemple

un ordre al�eatoire dans leur visualisation ou en changeant leur mode de pr�esenta-

tion. Cette d�efamiliarisation pourrait amener les utilisateurs �a appr�ecier davantage

leurs propres photos, en leur faisant adopter un point de vue radicalement nouveau.

Tableau 5.5 – Pr�ef�erences photos de 10 participants.

118

Page 127: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Figure 5.21 – Photos d'une cible en mouvement d'un point de vue macro (haut)et micro (bas). La transition visuelle est n�ecessaire pour com-prendre le contexte des photos pr�esent�ees.

Figure 5.22 – R�epartition des photos pr�ef�er�ees.

Figure 5.23 – Contexte original des quatre photos les plus appr�eci�ees : chaus-sures (�a g.), eurs (milieu, haut), hall (milieu, bas) et enfant (�adr.).

119

Page 128: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

5.7 Meta-interface basee sur la visualisation origami

Dans notre exploration des mappages m�etaphoriques pertinents pour nos techniques

d'interaction, nous avons suivi deux directions : l'exp�erience d'interaction humaine

avec des documents papier et l'art de l'origami. Dans la navigation de contenus

photos cons�equents, l'utilisateur doit avoir non seulement une vue g�en�erale de l'en-

semble du contenu, mais �egalement pleinement conscience des informations relatives

�a chaque cat�egorie. Si l'a�chage vignettes classique o�re une vue g�en�erale durant la

navigation de contenus cons�equents, il est n�eanmoins gourmand en espace et peut

entra�ner une surcharge visuelle. Notre approche a pour objectif de caract�eriser le

contexte photo via l'application de notre mod�ele de cat�egorisation. On suppose que

chaque contexte photo est pr�esent�e via une technique de visualisation sp�eci�que.

Cette technique doit pr�esenter, d'une part, les capacit�es visuelles permettant de re-

pr�esenter le contexte photo via le mappage m�etaphorique adapt�e, et, d'autre part,

les capacit�es d'interaction indispensables �a une interface intuitive.

Le principe de la technique de pliage dans l'art de l'origami est la reconstruction d'un

objet par le biais d'une pr�esentation minimaliste. La technique de pliage se retrouve

aussi bien dans de simples objets du quotidien que dans des pr�esentations artistiques

pouss�ees. La brochure est l'un de ses usages pratiques au quotidien (cf. �g.5.24).

Les r�egles de pliage origami ont �et�e appliqu�ees dans la r�esolution de probl�ematiques

d'ing�enierie, de design industriel ou encore dans certains travaux scienti�ques [143].

Certains produits int�egrent ces techniques de pliage, comme par exemple le Rovi

Liquid media guide lanc�e en 2009 [144](cf. �g.5.26) ou encore le Nokia Scentsory,

concept de t�el�ephone mobile d�evoil�e en 2008 [145](cf. �g.5.25). La technique de

pliage int�egr�ee �a l'interface du Rovi Liquid media guide permet une pr�esentation

continue des programmes TV et contenus multim�edia. Quant au concept Nokia

Scentsory, son objectif est d'optimiser la mobilit�e de l'appareil par un m�ecanisme

de pliage int�egr�e �a une interface utilisateur novatrice. Les �etudes labo ont tout

d'abord appliqu�e la technique de pliage �a la visualisation focus + contexte dans le

cadre d'un Perspective Wall [87]. Une technique de pliage simple a ainsi permis de

mieux caract�eriser l'information d'int�eret. Dans le meme ordre d'id�ees, la technique

de pliage a �et�e propos�ee en « m�elange »[88] pour l'interaction multi-focus dans un

syst�eme d'InfoVis complexe.

Pour un usage dans un navigateur d'images, le m�ecanisme de pliage pourrait per-

mettre de minimiser l'espace n�ecessaire �a la visualisation d'un contenu photo cons�e-

quent. Sur cette id�ee, nous sommes partis de mod�eles papier avec photos imprim�ees.

L'objectif de ce mod�ele de pliage est d'�etudier le rendu de la pr�esentation « en pli »pour des photos. Notre objectif : un prototypage rapide sur mod�eles papier qui

permette d'identi�er le mappage m�etaphorique appropri�e entre technique de pliage

et mode de visualisation, selon le contexte photo. La �g.5.27 pr�esente certaines

id�ees de pliage que nous avons explor�ees. Nous imprimons recto/verso un carr�e de

4x4 photos sur deux th�emes (chat + voyages). Cette technique de pliage permet

de d�ecouvrir les photos �a partir du centre de l'objet, pr�esentation m�etaphorique de

l'�eclosion d'un bourgeon.

Nous avons �elabor�e un autre mod�ele qui minimise l'objet par des techniques de

pliage permettant de d�eployer verticalement les photos. Mod�ele vierge et mod�ele

imprim�e sont pr�esent�es en �g.5.28. Deux �el�ements permettent d'expliquer pourquoi

les photos« pli�ees » sont distordues et moins visibles.

120

Page 129: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Figure 5.24 – Types des brochures di��erentes

Figure 5.25 – Scentsory-Nokia, concept de t�el�ephone mobile int�egrant des tech-niques de pliage.(image extraite dewww.tuvie.com)

Figure 5.26 – L'interface du Rovi Liquid media guide lanc�e en 2009.(image extraite denews.cnet.com)

121

Page 130: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Primo, il peut y avoir un con it entre le nombre de vignettes photos et la complexit�e

du mod�ele de pliage. Secondo, la technique de pliage peut ne pas convenir aux

caract�eristiques du contenu. Bien que les photos pr�esent�ees soient rattach�ees au

meme th�eme, leur contenu visuel ne permet pas vraiment de les associer les unes

aux autres. Notre m�eta-interface int�egrera une version simpli��ee de ce mod�ele de

pliage dans la pr�esentation d'une s�erie de photos.

Un autre essai de mod�ele de pliage papier est pr�esent�e �g.5.29. La technique de

pliage est libre, et la surface du papier a �et�e enti�erement pli�ee. C'est pr�ecis�ement �a

cette grande libert�e de pliage que l'on doit l'�echec de ce mod�ele, qui n'�etait adapt�e

�a aucune cat�egorie de photos.

La cat�egorie « capture de mouvement » indique le contexte de l'action. Dans le

cadre d'une interaction qui serait centr�ee sur l'utilisateur, la meilleure solution pour

parcourir des photos de cette cat�egorie est de les faire d�e�ler sous la forme d'une

pellicule cin�ematographique. La vue « pellicule » est int�egr�ee �a de nombreux lo-

giciels, notamment audiovisuels. Une premi�ere fenetre de navigation permet de

parcourir les photos, l'int�egralit�e du contenu �etant pr�esent�ee d'une fa�con lin�eaire

dans une deuxi�eme fenetre, sous forme de pellicule. Cette technique pr�esente n�ean-

moins quelques inconv�enients, puisqu'elle n�ecessite d'avoir su�samment d'espace

pour a�cher deux fenetres. Nous sommes remont�es aux origines de la projection de

s�equences anim�ees. Un des premiers appareils est le Zoopraxiscope, cr�e�e en 1879

par Eadweard Muybridge [146] (cf. �g.5.30). Les images sont imprim�ees sur un

disque de verre qui assure la fonction d'une bande vid�eo. Pour notre m�eta-interface,

cette pr�esentation en rond pourrait s'av�erer trop gourmande en espace. Nous retien-

drons donc un autre mode de pr�esentation pour les images anim�ees. Dans l'esprit

des id�ees d�evelopp�ees plus haut, notre interface, Phorigami, int�egre trois modes de

visualisation origami qui sont : pli accord�eon, Rolodex et pli simple (cf. �g.5.31).

Pour les photos de cat�egorie A et B, nous utilisons une technique de pliage en accor-

d�eon. On compresse l'espace occup�e par les photos panoramiques, celles-ci pouvant

etre a�ch�ees dans leur int�egralit�e si �etir�ees �a l'horizontale. Pour les images en mou-

vement de cat�egorie C et D, le m�ecanisme consid�er�e doit permettre de les manipuler

comme une animation GIF. Certaines techniques pourraient convenir, comme par

exemple la RSVP, qui permet de pr�esenter les images �a une vitesse sp�eci�que. Tou-

tefois, comme discut�e au chapitre pr�ec�edent, cette vitesse de pr�esentation est �xe

et pas adapt�ee �a certains contextes, o�u elle risque de freiner la navigation. C'est

pourquoi nous proposons une technique Rolodex « manuelle » qui permet �a l'uti-

lisateur de d�e�nir sa vitesse de navigation de fa�con �a restituer le sc�enario original

par le biais de photos en mouvement. Par ailleurs, nous simpli�ons et am�eliorons le

carr�e de 4x4 pr�ec�edemment abord�e. Les photos de cat�egorie E et F sont quant �a

elles visualis�ees sous la forme d'une pile de jetons.

Il est bon de noter que, lorsqu'ils sont pli�es, tous les mod�eles de pr�esentation (except�e

le pliage accord�eon) tiennent dans un petit carr�e de la taille d'une vignette. La

pr�esentation en pile de jetons et le Rolodex o�rent un aper�cu compr�ehensible pour

l'utilisateur, grace �a la vignette et �a la forme de pr�esentation choisie. La pr�esentation

en accord�eon n'o�re quant �a elle pas d'aper�cu compr�ehensible, puisque le contenu

est pli�e. Pour pallier ce probl�eme, lorsqu'elle est pli�ee, sa taille est deux fois sup�erieure

�a celle des autres modes de pr�esentation. On r�ev�ele ainsi davantage de messages,

pour une meilleure compr�ehension du contenu photo.

Nous avons d�evelopp�e notre prototype d'interface avec l'environnement Processing,

122

Page 131: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Figure 5.27 – Prototypage rapide sur pliage papier. Non-pli�e (�a g.), �a moiti�epli�e (au milieu) et pli�e (�a dr.).

Figure 5.28 – Etat pli�e et d�epli�e de deux mod�eles de pliage papier : mod�elevierge (en haut) et mod�ele imprim�e (en bas).

Figure 5.29 – Mod�ele de pliage papier libre

123

Page 132: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Figure 5.30 – Le Zoopraxiscope de Muybridge expos�e au Kingston Museum.

a�n de stimuler la visualisation et les techniques d'interaction associ�ees. On suppose

que les trois mod�eles de visualisation int�egrent une technologie tactile qui permet

d'am�eliorer la manipulation d'objets virtuels. Comme illustr�e 5.31, les utilisateurs

peuvent interagir avec les trois mod�eles de pr�esentation Phorigami par di��erentes

gestes tactiles. Ils peuvent par exemple, du bout du doigt, faire cliquer-glisser l'objet

virtuel ou faire d�e�ler les photos sur le Rolodex. La �g.5.32 est un exemple de

visualisation Phorigami sur 561 photos (provenant d'une moiti�e des �echantillons

utilis�es en E2). L'espace �ecran utilis�e par Phorigami est plus de trois fois inf�erieur �a

celui qu'aurait n�ecessit�e une interface vignettes classique. Le mode de pr�esentation

Phorigami pour des albums photos o�re en g�en�eral une visualisation plus riche, ce qui

permet �a la fois d'avoir une certaine conscience vis-�a-vis du contenu et d'�economiser

de l'espace.

Ce prototype a �et�e pr�esent�e de fa�con informelle dans le but d'obtenir un premier

retour utilisateur. En g�en�eral, les utilisateurs con�rment qu'il existe une certaine

coh�erence entre la cat�egorie photo et la technique de visualisation qui est pr�esent�ee.

La pr�esentation en accord�eon et le Rolodex les impressionnent davantage que la

pr�esentation en pile de jetons. Le souci est que, lorsque le contenu de toutes les

photos est pli�e, toutes les photos, qu'elles soient class�ees ou non, se retrouvent

au meme niveau. L'id�ee de d�esordre qui en d�ecoule est telle que les trois modes

de visualisation propos�es sont compl�etement �eclips�es. Davantage d'e�ets visuels

pourraient permettre de recti�er cet inconv�enient. Le protocole pr�evoit que notre

prototype d'interface soit �evalu�e par le biais d'un plan de test int�egral avec ex�ecution

de taches sp�eci�ques. L'objectif sera d'�evaluer l'usabilit�e des di��erentes techniques

d'interaction ainsi que les mappages m�etaphoriques choisis.

124

Page 133: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Figure 5.31 – Pr�esentation en accord�eon (en haut), en pile de jetons (au milieu)et en Rolodex (en bas) : gestes tactiles d'interaction.

125

Page 134: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Figure 5.32 – Visualisation Phorigami de 561 photos. Vue du contenu pli�e (enhaut) et d�epli�e (en bas).

126

Page 135: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

5.8 Conclusion

Depuis de nombreuses ann�ees, les outils syst�eme de gestion photo ont progress�e

via l'int�egration d'algorithmes puissants qui permettent de traiter plus e�cacement

les contenus visuels des images num�eriques. L'approche conventionnelle, orient�ee

technique, va dans le sens d'une am�elioration continue des technologies et d'une

augmentation de leurs capacit�es. Face �a une probl�ematique similaire, notre approche

propose un point de vue centr�e sur l'utilisateur. L'interface que nous proposons jette

les bases d'un syst�eme futur.

En 2005, Nokia introduit la notion de « technologie humaine », principe fondamen-

tal de sa vision de la mobilit�e. Au cıur de cette notion, l'id�ee que c'est l'exp�erience

utilisateur qui suscite la technologie innovante, et non l'inverse. La notion de de-

sign centr�e sur l'utilisateur a d�ej�a �et�e pr�econis�ee dans le domaine de l'interaction

homme machine (IHM). Des �etudes se sont pench�ees sur ces aspects dans le but

d'optimiser l'usabilit�e du syst�eme et d'orienter les d�eveloppements technologiques

a�n d'approcher toujours au plus pr�es les demandes utilisateurs. Pour la gestion des

photos num�eriques, notre id�ee originale s'inspire de l'exp�erience utilisateur dans la

prise de photo au quotidien. Nous avons travaill�e cette id�ee et en avons d�eduit une

approche de cat�egorisation bas�ee sur l'�etat de l'art. Loin d'une simple solution de

cat�egorisation, notre vision s'appuie sur un design d'interface centr�e sur l'utilisateur

et qui facilite l'organisation des photos num�eriques. Pour classer les photos num�e-

riques, les approches traditionnelles s'appuient sur certaines techniques permettant

d'ajouter des informations aux clich�es existants, comme par exemple le balisage

automatique des photos. Les outils syst�emes actuels proposent une cat�egorisation

bas�ee sur di��erentes techniques (balisage de texte, regroupement sur l'information

chronologique et l'analyse du contenu). Nous nous sommes lib�er�es de ces principes

et avons adopt�e un point de vue davantage centr�e sur l'utilisateur, ce qui nous

permet de d�egager di��erents contextes photos qui seront utilis�es dans la cat�ego-

risation des photos. Pourquoi ce choix ? Tout d'abord, si l'ajout d'informations �a

un clich�e s'e�ectue a posteriori exclusivement, le contexte photo peut quant �a lui

etre identi��e en un coup d'ıil, sans qu'aucun ajout ne soit n�ecessaire. Par ailleurs,

le contexte pr�esente une vari�et�e d'�el�ements invisibles qui peuvent �evoquer des sou-

venirs �a l'utilisateur et restituer de ce fait sc�enarii et histoires. Dans l'ensemble,

nous marquons notre attachement au d�eveloppement fondamental dans le domaine

technologique. Notre proposition d'interface centr�ee sur l'utilisateur jette les bases

des futurs syst�emes de gestion des photos num�eriques.

127

Page 136: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

128

Page 137: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Chapitre 6

Deuxieme proposition de

design

Le pr�esent chapitre introduit notre design d'interface retravaill�e sur la base des

r�esultats obtenus Chapitre 4. Nous proposons �a nouveau une interface circulaire qui

adresse les probl�ematiques de navigation sur des �ecrans de dimension r�eduite int�egr�es

�a des appareils portables. Dans un contexte de Casual InfoVis, la navigation photo

sur interface mobile pourrait simplement consister en un m�ecanisme de visualisation

sp�eci�que adapt�e �a divers usages, qui permettrait une navigation libre des contenus

sur �ecran de taille r�eduite. Nous �etablissons un panorama des �etudes impliquant

une interface circulaire dans la visualisation de photos, puis proposons notre design

d'interface et ses di��erents types de visualisation.

129

Page 138: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

6.1 Reflexion sur les resultats obtenus chapitre 4

Les r�esultats de l'�evaluation de Phora ont permis de recueillir les remarques utilisa-

teurs sur divers aspects. Premier point : les modes de manipulation. Avec Phora, la

recherche et la navigation sont des taches simples de manipulation, par comparaison

avec la saisie de texte sur appareils portables classiques. L'ex�ecution �a deux mains

de taches n�ecessitant une faible manipulation physique ne participe probablement

pas �a l'e�cacit�e de l'interface mais risque d'accentuer le sentiment de p�enibilit�e.

Deuxi�eme point : parcourir ses contenus photos est surtout un comportement de

« scanning » visuel. Lors de l'exploration de contenus de grande dimension, l'�ecran

de portable, avec sa capacit�e d'a�chage r�eduite, est susceptible de fournir davan-

tage d'indices essentiels compar�e �a un �ecran de grande taille, et de susciter une

r�eaction instantan�ee. Notre design cherchait �a faciliter la navigation de photos sur

�ecran circulaire via une pr�esentation en spirale ou par couches. Nous ne sommes

n�eanmoins pas parvenus �a mettre au point un m�ecanisme vraiment adapt�e �a la

visualisation des contenus. Troisi�eme point : notre mappage de la m�etaphore du

Rubik's cube et de ses modes de pr�esentation n'a pas �et�e concluant, sans doute de

par une trop faible correspondance entre pr�esentation cubique et circulaire.

Pour l'essentiel, le Casual InfoVis sur portable permet l'�evocation du souvenir �a

partir de photos que l'on parcourt bri�evement et fr�equemment. Par cons�equent, les

taches induites sont plutot br�eves, simples, et men�ees dans un cadre de divertisse-

ment. Potentiellement, ce type d'usage court terme am�ene les utilisateurs �a mener

deux types de taches. Le premier : choisir des photos �a partager avec ses amis. Les

utilisateurs ne conservent sur leur portable que les photos qu'ils jugent repr�esenta-

tives. Ces photos sont en ce sens di��erentes de celles qui sont conserv�ees sur PC de

bureau ou sur dispositif de stockage externe. La relation de l'utilisateur vis-�a-vis de

chaque photo �etant assez forte, le choix des photos �a partager est facilit�e, surtout

sur des albums de taille r�eduite.

Le deuxi�eme type de tache : parcourir les contenus photos dans un but unique

d'�evocation du souvenir, sans cible de recherche pr�ecise �a l'esprit. Ce type de tache

sort du cadre de l'InfoVis classique. D'apr�es Rodden et al. [60], la visualisation

d'images par similitude pourrait ne pas faciliter la s�election d'images. Cependant,

dans un cadre de Casual Infovis, ce type de pr�esentation visuelle pourrait susciter

l'int�eret de l'utilisateur et l'amener �a percevoir des indices �emotionnels.

Les entretiens r�ealis�es chapitre 4 indiquent qu'une des participantes parcourt 300

photos tout au plus sur les 1000 qu'elle conserve sur son iPhone, navigation qu'elle

e�ectue dans le but d'�evoquer ses souvenirs. Autrement dit, les utilisateurs ne sont

pas assez patients pour parcourir l'int�egralit�e de leurs contenus photos sur petit

�ecran. Dans ce sens, il ne serait pas pertinent de proposer une interface Casual Infovis

mobile qui permettrait d'examiner les contenus photos en d�etail et sur la dur�ee.

Notre interface Casual InfoVis proposera un m�ecanisme qui permettra d'extraire les

�el�ements essentiels des contenus selon l'int�eret de l'utilisateur, que celui-ci ait ou

non une cible pr�ecise �a l'esprit.

Les navigateurs photos classiques proposent g�en�eralement une visualisation lin�eaire

des photos num�eriques. Cette visualisation suit un ordre pr�ed�e�ni de pr�esentation

qui s'appuie sur les balises de m�etadonn�ees associ�ees aux photos. Ce type de pr�e-

sentation est susceptible de contraindre les utilisateurs qui souhaiteraient visualiser

130

Page 139: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

librement leurs contenus. A�cher les photos par page �etablit un niveau de priorit�e

dans la navigation. Autrement dit, les utilisateurs sont contraints dans leur naviga-

tion puisqu'ils doivent parcourir les photos page par page, meme s'ils restent libres

de « passer » �a une autre page. Une autre probl�ematique autour de ce type de

pr�esentation est la familiarisation vis-�a-vis des contenus, puique l'appr�ehension d'un

contenu photo passe non seulement par ce qu'il pr�esente mais �egalement par la

fa�con dont il est pr�esent�e.

Potentiellement, un navigateur Casual InfoVis d'images pourrait proposer une pr�e-

sentation lin�eaire (avec r�egle �xe ou adaptable) ou non lin�eaire des photos (sans

r�egle sp�eci�que). De fa�con �evidente, ce navigateur devra remettre en cause les

modes de pr�esentation conventionnels a�n de favoriser la vari�et�e des modes d'usage

dans la navigation de contenus.

6.2 Presentation de l’interface circulaire

Presentation circulaire : usages

D'apr�es la d�e�nition du Larousse, un cercle est « une courbe plane ferm�ee dont

tous les points sont �a �egale distance d'un point int�erieur appel�e centre », qui at-

tire l'attention visuelle. Dans le d�eveloppement de techniques de visualisation, des

techniques de contexte + focus telles que le �sheye [90](cf. �g.6.1 (a)) et l'arbre

hyperbolique [89] (cf. �g.6.1 (b)) sont int�egr�ees �a des modes de pr�esentation circu-

laires a�n, d'une part, de faire ressortir le point de focus et, d'autre part, de donner

un aper�cu de l'environnement situ�e autour de ce point. Lorsqu'il est appliqu�e �a un

contenu de grande dimension, le �sheye d�eforme l'ensemble de la pr�esentation vi-

suelle. L'arbre hyperbolique redimensionne quant �a lui chaque �el�ement en fonction

de sa distance vis-�a-vis du centre.

(a) Vue fisheye (b) Hyperbolic tree

Figure 6.1 – (a)Fisheye, (b)Arbre hyperbolique(image(a) extraite de en.wikipedia.org)(image(b) extraite de [89] )

Le navigateur d'images FotoFile [36] (cf. �g.6.2) int�egre des arbres hyperboliques qui

permettent de visualiser les di��erentes cat�egories de photos sous forme de cercles.

N�eanmoins, son interface est occup�ee en grande partie par la structure de l'arbre et

les photos, de format rectangulaire, se superposent les unes aux autres. FaceBubble

[59] (cf. �g. 6.3) propose une pr�esentation circulaire des r�esultats de recherche.

131

Page 140: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Chaque photo est pr�esent�ee de fa�con �a former un cercle de photos et �a optimiser

l'utilisation de l'espace disponible sur l'interface, exemple int�eressant d'adaptation

des sp�eci�cations d'a�chage de chaque photo. L'interface circulaire de Shen et al.

[147] (cf. �g.6.4) est int�egr�ee �a un environnement de type table qui encourage la

narration des photos. Cette distribution circulaire des photos a pour but de faciliter

la manipulation, o�u que l'on se situe autour de la table, dans un contexte multi-

utilisateurs. Une pr�esentation horizontale est �egalement propos�ee pour la navigation

mono utilisateur (cf. �g.6.5)

Une autre interface pour la pr�esentation circulaire de contenus photos, di��erente

de l'arbre hyperbolique : MyPhotoEgg [96], application mobile avec pr�esentation

sph�erique 3D des photos et visualisation contexte + focus. La pr�esentation d'un

contenu photo de grande dimension peut se faire en mode « d�etail » sur un �el�e-

ment sp�eci�que ou via un aper�cu du contenu dans son ensemble. Deux modes de

pr�esentation des contenus sont illustr�es �g.6.6. L'interface « id�eale » propose une

transition dans la visualisation des contenus, selon l'usage. Une autre interface, sans

transition, propose un passage rapide du mode d�etail �a la vue globale. Si certains

navigateurs de bureau (Apple iPhoto) ou services en ligne (Google Picasa) int�egrent

une fonctionnalit�e de zoom avec visualisation contexte + focus (cf. �g6.7), les na-

vigateurs d'images portables ne prennent pas encore en compte cette probl�ematique

de design.

Figure 6.2 – Foto�le(image extraite de l'article de [36])

Figure 6.3 – Face Bubble(image extraite de l'article de [59])

132

Page 141: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Figure 6.4 � Interface circulaire(image extraite de l’ article de Shen et al. [147]

Figure 6.5 � MyPhotoEgg(image extraite de www.myphotoegg.com)

Figure 6.6 � Passage d’ une vue a l’ autre sur navigateur d’ images traditionnel(en haut), transition pas a pas de la vue detail a la vue globale,sur un navigateur ideal (en bas).

Figure 6.7 � Transition de la vue detail a la vue globale sous Google Picasa

133

Page 142: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

6.3 Propositions de design et analyse

Notre r�e exion nous am�ene �a d�e�nir les directives suivantes dans la mise au point

d'une interface circulaire sur appareil portable.

1. La proposition de design vise la mise au point d'une interface avec visualisation

contexte + focus, pour int�egration sur appareil portable.

2. L'interface propos�ee est suppos�ee s'appuyer sur le Casual InfoVis et a pour

objectif de favoriser le sentiment divertissement dans la navigation de contenus

photos.

3. L'interface propos�ee est suppos�ee proposer un mode d'interaction �a une main.

4. L'interface propos�ee est suppos�ee etre adapt�ee �a une pr�esentation circulaire.

5. Chaque photo est visualis�ee dans un cadre circulaire a�n d'optimiser l'utilisa-

tion de l'espace circulaire disponible.

6. La pr�esentation visuelle bas�ee sur la m�etaphore du cercle est suppos�ee rendre

l'interface plus intuitive et faire correspondre visuel et �ecran.

Notre concept g�en�eral s'appuie sur une pr�esentation sph�erique 3D qui permet, d'une

part, d'attirer l'attention vers le centre de l'�ecran et, d'autre part, de manipuler li-

brement les contenus. Par ailleurs, nous appliquons la m�etaphore des poles terrestres

(Nord et Sud) �a notre pr�esentation sph�erique a�n de guider les utilisateurs �a tra-

vers les di��erentes zones d'a�chage. La visualisation g�en�erale est structur�ee sur

trois vues qui sont : menu, contenu et d�etail (cf. �g.6.8). Lors de notre premi�ere

tentative, nous int�egrons les photos cat�egoris�ees du Phorigami (cf. chapitre 5) �a

la pr�esentation sph�erique. Nous proposons une interface dont nous d�ecrivons les

di��erentes vues et usages :

1. Le menu : il pr�esente tous les albums sous forme de cercles dont la taille varie

selon le nombre de photos qu'ils contiennent (cf. �g.6.8, les deux du haut)

2. La vue contenu : une fois qu'un album est s�electionn�e, ses contenus s'a�chent

dans cette vue et les utilisateurs peuvent les parcourir en manipulant librement

la pr�esentation sph�erique (cf. �g.6.8 en bas �a g.).

3. La vue d�etail : elle permet de pr�esenter la photo s�electionn�ee dans un espace

ind�ependant dont l'arri�ere-plan est d�elimit�e par les photos voisines (cf. �g.6.8

en bas �a dr.).

L'int�egration du Phorigami sur pr�esentation sph�erique pose n�eanmoins un probl�eme :

la taille d'�ecran, limit�ee, pourrait ne pas supporter le d�eploiement complet des trois

modes de visualisation Origami. Par cons�equent, notre deuxi�eme proposition de

design int�egre des photos « classiques » (rectangulaires) �a des cadres circulaires. Sur

la meme structure d'interface, nous enrichissons la visualisation par davantage de

vues « d�etail » . Notre diagramme radar pr�esente les avantages et inconv�enients de

notre proposition selon six crit�eres. Le Tableau 6.1 pr�esente les propositions de design

selon la tache op�erationnelle concern�ee. A�n de proposer une discussion g�en�erale sur

le design d'interface, Phora y est �egalement pr�esent�e. Pour la s�election d'album, nous

proposons deux id�ees de design. La premi�ere s'appuie sur Face Buble[59], la seconde

sur une pr�esentation en spirale. Pour la navigation des contenus, nos propositions

de design exploitent le principe de contexte + focus et proposent di��erents parcours

de manipulation autour de la cible objet du focus. Nous avons �egalement adapt�e la

visualisation hyperbolique �a la pr�esentation de photos circulaires.

134

Page 143: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Figure 6.8 – Premier essai avec Phorigami.Menu sur deux vues (deux du haut), vue contenu (en bas �a g.)et vue d�etail (en bas �a dr.).

Nous pr�eparons un diagramme radar (cf. �g.6.9 et �g.6.10) avec six crit�eres : « Vi-

sibilit�e et caract�ere informatif », « Quantit�e de photos a�ch�ees », « Variation des

e�ets visuels », « Potentiel de d�eclenchement de d�ecouvertes inattendues », « Faci-

lit�e de manipulation », et « Facilit�e de navigation ». La fonction de s�election d'album

(cf. 6.9) permet de visualiser tous les albums disponibles avec deux modes de pr�e-

sentation possibles qui sont « S�election simple d'album » et « S�election d'album

avec contexte des contenus ». La probl�ematique centrale de design est la suivante :

comment adapter le contenu visuel �a un �ecran de taille r�eduite lorsque le nombre

d'albums augmente ? Dans le cas d'un contenu de grande dimension, di�cile de

garantir, d'une part, sa visibilit�e (reconnaissance de son contenu) et, d'autre part,

son caract�ere informatif (lecture de son message). La quantit�e visualis�ee en mode

s�election d'album est largement inf�erieure �a ce qui est r�eellement disponible sur

l'appareil : 30 albums photos sur un t�el�ephone portable peuvent correspondre �a un

total de 300 photos. En tant que menu, il ne sera probablement pas n�ecessaire

d'a�cher la vue s�election d'album en plein �ecran ou en mode contexte + focus.

Nous proposons de ne pr�esenter que les informations essentielles (date & heure,

�ev�enement, taille) a�n de faciliter, d�es le d�ebut, la navigation cot�e utilisateur.

Pour la pr�esentation des contenus, le diagramme radar synth�etique (cf. �g.6.10)

indique que nos propositions �equilibrent les crit�eres « Caract�ere informatif » et

« Quantit�e de photos a�ch�ees ». Comme mentionn�e au pr�ec�edent paragraphe, dif-

�cile de satisfaire les deux crit�eres. La plupart de nos propositions proposent une

visualisation contexte + focus via di��erents mod�eles de visualisation. N�eanmoins,

la plupart de nos mod�eles de pr�esentation �etant sur structure �xe, nos propositions

135

Page 144: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

ne recueillent qu'un faible score sur le crit�ere « Variation des e�ets visuels », ce

qui restreint davantage les modes de navigation possibles parmi les contenus. Glo-

balement, l'analyse r�ev�ele que notre design bas�e sur l'arbre hyperbolique satisfait

chacun des six crit�eres.

Lorsqu'il est visualis�e par le biais d'une interface, un contenu de grande dimen-

sion perd de son caract�ere informatif, situation certainement aggrav�ee sur �ecran

de taille r�eduite. La technique de visualisation contexte + focus, avec sa transi-

tion dans l'animation, participe �a la caract�erisation de la partie de la photo objet

du focus. Dans la navigation de contenus de taille cons�equente, elle n'entra�ne ni

perte d'information contextuelle ni sentiment de d�esorientation. L'un des avantages

�a proposer ce mode de visualisation en plein �ecran serait de favoriser la navigation

par s�erendipit�e ou encore les possibilit�es de d�ecouvertes inattendues. Toutefois, sur

le petit �ecran d'un appareil portable, seule la partie objet du focus sera r�eellement

reconnaissable. Le contexte, qu'il s'agisse des images voisines ou du reste de la

photo, sera probablement indiscernable. Autrement dit, l'information contextuelle

dans la pr�esentation de vignettes n'apportera pas forc�ement grand'chose et ne sera

par ailleurs pas forc�ement plaisante visuellement.

Figure 6.9 – Analyse par diagramme radar de la s�election d'album (AS1, AS2,AS3, AS4)

136

Page 145: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Figure 6.10 – Analyse par diagramme radar de la navigation de contenus ( neufpropositions de g. �a dr. et de haut en bas : AC1, AC2, AC3, AC4,AC5, AC6,AC7,AC8,AC9 )

137

Page 146: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Si les navigateurs d'images classiques int�egrent de plus en plus d'impressionnants

e�ets 3D, leurs interfaces restent n�eanmoins bas�ees sur un a�chage classique des

photos sous forme de vignettes. L'a�chage par vignettes o�re un niveau �el�ementaire

de visibilit�e et de prise d'information vis-�a-vis du contenu pr�esent�e. Le fait que les

utilisateurs n'aient pas une vue globale de l'ensemble des contenus est compens�e par

des e�ets visuels plus travaill�es ainsi qu'une interface de navigation plus intuitive,

comme c'est le cas avec le scrolling de l'iPhone ou le « glisser » de Cooliris 3D [148]

(cf. �g.6.11) sur Google Nexus One[149] (cf. �g.6.12). La raison pour laquelle on

int�egre davantage d'e�ets visuels sur les navigateurs d'images portables se r�esume

selon nous comme suit :1. La navigation d'images sur appareil portable implique un usage uctant et

bref. Ce type d'usage correspondant �a des attentes assez faibles, les utilisa-

teurs peuvent se contenter de fonctionnalit�es �el�ementaires pour parcourir leurs

contenus photos.

2. Les attentes concernant les fonctionnalit�es �etant faibles, le visuel joue un role

important dans la satisfaction vis-�a-vis de l'interface.Impossible de le nier, l'aspect visuel est un �el�ement important du design d'interface.

Nous lui avons n�eanmoins pr�ef�er�e une r�e exion sur l'usabilit�e dans la navigation de

contenus photos de grande dimension sur portable. Dans le choix du design �nal,

notre proposition bas�ee sur l'arbre hyperbolique (cf. �g.6.10 AC9) satisfait certaines

attentes quant �a la navigation de contenus de grande dimension.

1. L'arbre hyperbolique permet une visualisation contexte + focus des photos

rondes (cf. �g.6.13). On peut zoomer sur la photo dans son ensemble (en plein

�ecran), visibilit�e globale n�eanmoins alt�er�ee dans le cas de photos de grande

dimension.

2. La manipulation du contenu se fait par un « glisser » du doigt, ce qui permet

une interaction �a une main sur appareils portables.

3. Le centre de la structure hyperbolique fait logiquement ressortir le point de

focus et permet d'attirer l'attention de l'utilisateur.

4. La visualisation radiale sur �ecran circulaire o�re un e�et visuel qui n'est pas

sans rappeler les rosaces de vitraux (cf. �g.6.14) et induire un certain niveau

d'esth�etique.

Sur la base de ces caract�eristiques de design d'interface, nous compl�etons et retra-

vaillons Phora. La section suivante pr�esente ce design d'interface retravaill�e.

Figure 6.11 – Scrolling photo sur iPhone(image extraite de www.phonescorporation.com)

138

Page 147: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Figure 6.12 – Mur Cooliris 3D sur Google Nexus supportant le scrolling photo(image extraite de www.cooliris.com)

Figure 6.13 – Visualisation de 173 photos rondes sur arbre hyperbolique

Figure 6.14 – Visualisation de photos rondes sur arbre hyperbolique (�a g.) etrosace de vitraux (�a dr.).(image extraite de www.cooliris.com)

139

Page 148: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Tableau 6.1 – Propositions de design et taches associ�ees

Taches Proposition de design Cheminement de mani-pulation

Selection d’album

Navigation decontenus

140

Page 149: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

6.4 Implementation

Nous retravaillons Phora sur la base de l'analyse de notre proposition de design.

Ce « nouveau » Phora est pr�evu pour int�egration sur �ecran circulaire en tant que

navigateur d'images portable. Comme mentionn�e auparavant, plus qu'un design de

produit, nous proposons un mod�ele d'interaction.

L'interface retravaill�ee de Phora propose pour l'essentiel deux modes d'a�chage :

s�election d'album et navigation des contenus. Le mode s�election d'album permet de

visualiser tous les albums sur l'�ecran et est suppos�e fournir des informations suppl�e-

mentaires venant faciliter la pr�evisualisation du contenu. L'information temporelle

�etant selon nous utile dans la s�election d'album, nous proposons deux interfaces

de type carrousel permettant une visualisation des albums par ann�ee et par mois

(cf. �g.6.15). Tous les albums sont pr�esent�es le long de l'anneau sur la vue men-

suelle. Une image repr�esentative est extraite de chaque album pour lui servir de

« couverture » et donner une indication de sa taille.

Le second mode d'a�chage (navigation des contenus) permet de visualiser les conte-

nus de l'album sur un arbre hyperbolique. L'ensemble des photos est organis�e autour

du centre de l'�ecran. Toute photo que l'on fait glisser vers le centre de l'�ecran est

automatiquement agrandie, les photos qui l'entourent �etant modi��ees en cons�e-

quence (cf. �g.6.16). On peut penser cette visualisation sur �ecran circulaire comme

une sorte de plateau tournant, l'utilisateur faisant tourner le bord de l'�ecran pour

faciliter le partage des photos (cf. �g.6.17).

Cette version am�elior�ee de Phora permet une interaction �a une main. La mani-

pulation des contenus se fait via un « glisser » du doigt permettant d'ex�ecuter

l'ensemble des taches. Le ux de taches est illustr�e �g.6.18. Nous avons d�evelopp�e

une animation Adobe Flash qui permet de d�emontrer les fonctions et op�erations

possibles sur chaque mode d'a�chage.

141

Page 150: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Figure 6.15 – Mode d'a�chage pour la s�election d'album : pr�esentation car-rousel avec vue par ann�ee (�a g.) et par mois (�a dr.).

Figure 6.16 – Mode d'a�chage pour la navigation des contenus et manipula-tion simul�ee via une visualisation hyperbolique.

Figure 6.17 – M�etaphore du plateau tournant dans la visualization (�a g.), pla-teau tournant sur une table de restaurant (�a dr.)

142

Page 151: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Figure 6.18 – Flux de taches sur la version retravaill�ee de Phora. Work ow pourla navigation des contenus (�a g.) et la s�election d'album (�a dr.).

143

Page 152: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

6.5 Problematique du prototype

Sur la base de notre animation Flash et du work ow de l'interface utilisateur, nous

int�egrons notre interface sous l'environnement Processing. L'objectif est de pouvoir

utiliser les algorithmes de calcul de collision dans le d�eveloppement d'une visualisa-

tion contexte + focus, plutot que l'algorithme existant de l'arbre hyperbolique en

Java InfoVis Toolkits [150](cf. �g.6.19). A�n que notre proposition de design at-

teigne son objectif, trois imp�eratifs doivent etre respect�es dans son impl�ementation :

1. Toutes les images doivent tenir �a l'int�erieur de l'�ecran circulaire, comme illustr�e

�g.6.20.

2. La taille de chaque image doit etre calcul�ee en fonction de sa distance relative

avec le centre de l'�ecran. Chaque image atteint sa taille maximale lorsque

plac�ee au centre de l'�ecran (cf. �g.6.21), ce qui permet de simuler l'e�et de

zoom lorsque l'on fait glisser une photo vers le centre.

3. Il doit y avoir synchronisation entre la position et la taille de chaque image :

d�es qu'une image est d�eplac�ee, les autres sont redimensionn�ees et d�eplac�ees

en cons�equence. De par la limite de temps impos�ee au projet, nous n'avons

pu impl�ementer que les deux premiers imp�eratifs et ne sommes pas parvenus

�a r�esoudre la probl�ematique de synchronisation des images.

Figure 6.19 – Arbre hyperbolique en Javascript InfoVis Toolkits

Figure 6.20 – Maintien des �el�ements dans la limite du cercle, lors du calcul decollision.

Figure 6.21 – Impl�ementation de l'e�et de zoom lorsqu'un �el�ement est gliss�evers le centre.

144

Page 153: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

6.6 Proposition de plan de test

Bien que notre prototype n'ait pas encore �et�e impl�ement�e, nous avons pr�epar�e un

plan de test pour �evaluation ult�erieure.

Objectif de l’evaluation

1. �Evaluer l'usabilit�e de notre visualisation contexte + focus dans la navigation

de contenus photos num�eriques. L'analyse des r�esultats obtenus sur les taches

ainsi que des entretiens oraux permettent de recueillir l'opinion des utilisateurs.

2. Observer les comportements utilisateurs sur di��erents sc�enarii de navigation

photo.

3. Observer les comportements de navigation de l'utilisateur sur ses contenus

personnels ou sur des contenus appartenant �a un tiers, auxquels il peut etre

li�e.

Approche d’evaluation

Notre approche d'�evaluation repose essentiellement sur la r�ep�etition d'une s�erie

de taches sur trois sc�enarii. Les types de taches et hypoth�eses associ�ees sont les

suivantes : Trois types de taches :1. Tache de navigation de recherche (d'une cible pr�ecise)

2. Tache de navigation fortuite (recherche d'une cible pr�ef�er�ee et narration des

photos)

3. Tache de navigation mixte (recherche d'une cible pr�ecise puis d'une cible

pr�ef�er�ee pour la narration)Deux sc�enarii :

1. S1 : Navigation des contenus personnels du participant (300 photos au total)

2. S2 : Navigation des contenus personnels du participant (1000 photos au total)

3. S3 : Navigation de contenus tiers auxquels le participant peut etre li�e (1000

photos au total, dont 500 appartiennent �a un de ses amis).

Hypothese d’evaluation

Notre hypoth�ese est que les participants vont suivre di��erentes strat�egies a�n de

retrouver la cible le plus rapidement possible. Ils pourront suivre pour cela un chemin

en croix (d�eplacement de haut en bas et de gauche �a droite) ou circulaire (rotation

de l'�ecran et recherche sur les bords de l'�ecran). La taille de l'album et le niveau de

familiarisation vis-�a-vis des contenus vont tous deux a�ecter l'e�cacit�e des taches

de recherche. La visualisation hyperbolique pourrait poser probl�eme dans l'a�chage

de 1000 photos sur �ecran rond de taille r�eduite.

145

Page 154: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Mise en place

1. Hardware setup : Notre proposition d'interface sera int�egr�ee sous Processing

�a un ordinateur portable �equip�e d'un touch panel transparent ou d'un �ecran

tactile.

2. Mise en place des donn�ees : Chaque participant doit amener 1000 photos

issues de sa collection personnelle, qui seront utilis�ees lors de l'�evaluation.

3. Mise en place de l'environnement : L'environnement de test sera mis en place

dans un salon avec sofa ou un simple bureau permettant d'ex�ecuter les taches.

La cam�era vid�eo sera plac�ee de fa�con �a enregistrer l'int�egralit�e de la proc�edure

(cf. �g.6.22).

4. Participants : Environ 8 �a 10 participants seront convi�es �a ce test.

Taches en detail

Description des trois types de taches

Tache Reaction des participants

Navigation de

recherche

Les participants sont invit�es

�a retrouver une photo sur la

base d'un exemple qui leur

est pr�esent�e.

Les participants scannent

visuellement les contenus �a

la recherche de la cible.

Navigation for-

tuite

Les participants sont invi-

t�es �a choisir plusieurs pho-

tos de fa�con al�eatoire et �a

« raconter » celles-ci. (nar-

ration des photos).

Les participants par-

courent les contenus sans

id�ee pr�ecise de ce qu'ils

recherchent.

Navigation

mixte

Dans un premier temps,

les participants sont invit�es

�a retrouver une photo sur

la base d'un exemple qui

leur est pr�esent�e. Dans un

deuxi�eme temps, les partici-

pants sont invit�es �a choisir

leur photo pr�ef�er�ee et �a la

raconter.

Cette tache a pour objectif

de simuler une situation de

d�ecouverte accidentelle.

Trois types de scenario

Contenu de l’album

Scenario 1 Album photo personnel (300 photos)

Scenario 2 Album photo personnel (1000 photos)

Scenario 3) Album mixte (1000 photos)

146

Page 155: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Procedure d’evaluation

(Lancement de l'enregistrement vid�eo)

Etape I Accueil du participant

1. Accueil du participant et renseignement du pro�l sur le questionnaire.

2. Rapide introduction �a l'�evaluation : objectif, proc�edure, dur�ee estim�ee et environnement de

test.

Etape II �Echau�ement

1. Pr�esentation du navigateur d'images, �a l'exclusion de son mode de fonctionnement. Le partici-

pant s'essaie au navigateur pendant 10 minutes (l'album photo qui est charg�e dans le navigateur

est un exemple contenant des photos de chats).

2. Entretien avec le participant.

3. �Evaluation via le questionnaire.

Pause de 3 minutes

Etape III Navigation des contenus personnels (300 photos provenant de l'album personnel du participant)

1. Nouvelle pr�esentation du navigateur d'images et de son fonctionnement.

2. (L'album photo charg�e dans le navigateur est celui du participant)

Tache 1 (Navigation de recherche)

Tache 2 (Navigation fortuite). Pause de 2 minutes et r�einitialisation du navigateur

Tache 3 (Navigation mixte) :

3. Entretien avec le participant

4. �Evaluation via le questionnaire

Pause de 3 minutes

Etape IV Navigation des contenus personnels (1000 photos provenant de l'album personnel du participant)

1. Nouvelle pr�esentation du navigateur d'images et de son fonctionnement.

2. (L'album photo charg�e dans le navigateur est celui du participant)

Tache 1 (Navigation de recherche)

Tache 2 (Navigation fortuite).Pause de 2 minutes et r�einitialisation du navigateur.

Tache 3 (Navigation mixte) :

3. Entretien avec le participant

4. �Evaluation via le questionnaire

Pause de 3 minutes

Etape V Navigation parmi les contenus personnels d'un ami, certaines photos �etant li�ees au participant

(1000 photos d'un album m�elang�e)

Tache 1 (Navigation de recherche)

Tache 2 (Navigation fortuite)

Tache 3 (Navigation mixte)

3. Entretien avec le participant

4. �Evaluation via le questionnaire

Pause de 3 minutes

Etape VI Discussion g�en�erale

1. Entretien general avec le participant : ressenti / satisfaction vis-�a-vis des usages propos�es par

le navigateur d'images, taches, exp�erience de navigation d'images au quotidien.

2. �Evaluation via le questionnaire

Etape

VII

Fin du test et remerciements.

147

Page 156: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Enregistrement des donnees

Les donn�ees portant sur l'int�egralit�e de l'�evaluation seront enregistr�ees selon quatre

approches :

1. Fichier de temps

2. Rapport d'activit�e

3. Niveau d'accomplissement des taches

4. Transcription des entretiens

Analyse des donnees

1. Niveau d'accomplissement de la tache : Il permet de comprendre si l'interface

est intuitive ou si elle induit de la di�cult�e dans l'ex�ecution des taches. Les

taches de navigation sont les seules �a etre examin�ees sous l'angle du temps

qui leur est consacr�e et de leur niveau d'accomplissement.

Trois crit�eres permettent de v�eri�er le niveau d'accomplissement de la tache

Niveau 1 : r�eussite, sans l'aide de la personne en charge du test. Niveau 2 :

r�eussite, avec l'aide de la personne en charge du test. Niveau 3 : �echec.

2. Rapport d'activit�e : Ce �chier consigne les actions ex�ecut�ees (mouseClick,

mouseOver), l'intention du participant ainsi que la position du curseur dans

le diagramme de ux au moment o�u l'utilisateur clique sur l'�ecran (au centre,

en haut, en bas, �a gauche, �a droite). Les r�esultats permettent d'identi�er

di��erents comportements de navigation.

3. Niveau de satisfaction vis-�a-vis du navigateur hyperbolique d'images : Le ques-

tionnaire et les entretiens permettent d'�evaluer le niveau de satisfaction des

utilisateurs vis-�a-vis de notre navigateur hyperbolique d'images. Ses avantages

comme ses points faibles sont rapport�es.

4. Transcription de l'opinion des participants sur la base de l'entretien.

Structure du rapport

1. Introduction g�en�erale et objectif de l'�evaluation.

2. Pro�l des participants et temps total pass�e sur l'�evaluation.

3. V�eri�cation de l'hypoth�ese.

4. Rapport entre caract�ere intuitif et fonction de l'interface, sur la base des r�esultats

obtenus et des entretiens.

5. Comportement utilisateur de navigation photo sur di��erents sc�enarii.

a) Navigation de ses propres contenus avec ex�ecution de trois taches de navigation.

b) Navigation des contenus photos d'un ami, contenus qui lui sont li�es, avec ex�e-

cution de trois taches de navigation.

6. Mod�ele de comportement de navigation sur �ecran circulaire.

7. R�e exion / suggestion autour d'un design d'interface bas�e sur ce mod�ele de com-

portement.

8. Opinion g�en�erale des participants �a partir des questionnaires et de l'entretien.

148

Page 157: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Figure 6.22 – Mise en place de l'environnement.

149

Page 158: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

6.7 Reflexion sur le design et conclusion

Notre design d'interface retravaill�e int�egre un m�ecanisme de transition dans la pr�e-

sentation de photos num�eriques et propose une visualisation contexte + focus sur

l'�ecran circulaire d'un appareil portable. Notre proposition pourrait se substituer

aux navigateurs d'images traditionnels sur portables. Nous n'avons n�eanmoins pas

encore men�e de test d'usabilit�e qui viendrait con�rmer la valeur de notre design. �A

ce jour, les navigateurs d'images sur portables, �a l'exception de Fun Album browser

sur Motorola A3100[97], a�chent majoritairement les contenus photos via une vue

vignettes. Les capacit�es de calcul graphique des appareils portables repr�esentent

encore une entrave �a l'int�egration de modes complexes de visualisation. Depuis l'in-

t�egration r�eussie d'applications telles que MyPhotoEgg[96] avec visualisation 3D de

contenus photos num�eriques, le foss�e qui restait �a franchir a �et�e combl�e.

D'apr�es nous, la raison pour laquelle on continue �a d�evelopper des navigateurs

d'images avec vue vignettes est probablement que ce type de navigateur o�re une

certaine visibilit�e lors de la navigation de contenus de grande dimension. Comme

illustr�e �g.6.23, la vue vignettes ne permet de pr�esenter qu'une petite partie du

contenu via des miniatures photos de taille acceptable. L'indisponibilit�e d'une vue

compl�ete du contenu est compens�ee par un m�ecanisme de manipulation sp�eci�que

permettant une navigation rapide. �A l'inverse, si une interface contexte + focus o�re

une vue compl�ete du contenu de grande dimension a�n de faciliter sa pr�esentation,

elle ne propose pas un niveau de visibilit�e qui permet sa reconnaissance.

On peut alors se demander si, sur les appareils petit �ecran, la vue compl�ete avec

information contextuelle importe davantage que la visibilit�e du contenu pr�esent�e

(cf. �g.6.24) : inconv�enients de chaque vue). Dans un contexte de Casual InfoVis,

que la navigation fortuite des photos sur portables s'e�ectue ou non pour le plaisir,

elle n'en requiert pas moins un minimum de controle ou d'usabilit�e vis-�a-vis de

la pr�esentation des contenus de l'album, a�n d'appr�ecier pleinement ces derniers.

Bien que visualiser en mode vignettes un contenu de grande dimension via une

pr�esentation limit�ee (quelques photos par page) soit assez d�eplaisant, cela garantit

n�eanmoins une certaine visibilit�e du contenu et permet d'�eviter la surcharge visuelle.

Dans cet ordre d'id�ees, Cooliris[148] est pass�e d'une pr�esentation page �a un mur 3D

continu dont les utilisateurs peuvent faire d�e�ler les contenus en les faisant glisser

dans l'une ou l'autre direction.

Pour r�esumer, a�n d'enrichir le Casual Infovis sur appareils portables, la priorit�e

serait d'am�eliorer la visibilit�e dans la pr�esentation des contenus a�n de garantir

une usabilit�e acceptable. Par la suite, nous pourrions int�egrer des e�ets visuels qui

viendraient am�eliorer l'usabilit�e g�en�erale.

Dans le cadre de notre discussion autour des applications mobiles conventionnelles

avec vue miniatures, l'�etude sur la RSVP de Cooper et al. [1] (cf. �g.6.25) m�erite

d'etre cit�ee. Cette �etude propose des modes de pr�esentation permettant de mettre

en �evidence certains usages dans di��erents contextes. Copper et al. s'int�eressent �a

d�e�nir une vitesse de pr�esentation ad�equate sur observation du scanning visuel ef-

fectu�e par notre ıil. D'apr�es nous, seul l'usage permet de d�eterminer quelle vitesse

150

Page 159: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Figure 6.23 – Description des deux m�ecanismes de changement de vue.

Figure 6.24 – Pr�esentation en vue vignettes (�a g.) et en mode contexte + focus(�a dr.).

Figure 6.25 – Trois modes de pr�esentation propos�es par Cooper et al. [1] (imageextraite de l'article de Cooper et al. [1])

Figure 6.26 – Vues vignettes adaptable et gestes de navigation

151

Page 160: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

de pr�esentation est la plus ad�equate, et les utilisateurs devraient pouvoir personna-

liser la vitesse de pr�esentation a�n de synchroniser celle-ci sur leur comportement

de navigation. La RSVP pose �egalement la probl�ematique de la quantit�e de contenu

pr�esent�ee. Selon nous, les utilisateurs devraient �egalement pouvoir d�eterminer la

taille du contenu pr�esent�e. Nous proposons �g.6.26 une vue vignettes qui s'adapte

�a la vitesse de pr�esentation et �a la quantit�e de contenu. Les gestes r�ealis�es �a l'aide

de di��erents doigts permettent de d�eterminer la transition dans la vitesse de pr�e-

sentation et la taille du contenu.

Les appareils portables conventionnels avec entr�ees et sorties physiques sont d'une

capacit�e mat�erielle limit�ee et n�ecessitent de ce fait une interface plus adapt�ee et

souple permettant de satisfaire les di��erents usages. Il faut adapter le mod�ele d'in-

teraction, dans les modes de manipulation comme de visualisation. Bientot, la limite

du petit �ecran sur portable n'aura plus raison d'etre puisque les portables devraient

int�egrer des minis projecteurs issus d'une technologie mature. N�eanmoins, peu im-

porte la taille de l'�ecran que l'on utilise pour pr�esenter des contenus photos, ce qui

compte dans le design d'interface, c'est avant tout la prise en compte de l'usage,

autrement dit : �a quoi les contenus vont-ils servir, et quand les utilisera-t-on ?

152

Page 161: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Chapitre 7

Conclusions et perspectives

Le pr�esent chapitre vient clore notre dissertation. Nous y rappelons les probl�ema-

tiques li�ees �a l'interaction avec des contenus photos num�eriques et r�esumons les

propositions soumises dans ce sens. Dans le cadre d'une r�e exion autour de l'inter-

action avec des contenus multim�edia num�eriques, nous introduisons notre design

d'interface, navigateur tangible d'images inspir�e du Rubik's cube.

153

Page 162: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

7.1 Conclusions

Les nouvelles technologies ouvrent des perspectives vari�ees quant �a la cr�eation et la

di�usion de contenus num�eriques toujours plus nombreux, tout particuli�erement en

ce qui concerne les contenus multim�edia complexes. Les contenus num�eriques sont

analogues �a des liquides : leur pr�esentation varie selon le contenant. Sur cet ordre

d'id�ees, la traditionnelle interface clavier est un contenant unique qui a, d'une part,

perdu sa capacit�e d'interaction et, d'autre part, limit�e les usages li�es �a l'interaction

avec les contenus num�eriques. Ce ph�enom�ene contribue �a la transition des GUI

(Interfaces Graphiques Utilisateur) vers les NUI (Interfaces Naturelles), ce qui non

seulement lib�ere l'utilisateur de l'interaction conventionnelle via clavier, mais fait

�egalement �emerger davantage d'usages nouveaux.

Exploration des solutions potentielles a travers le prisme de l’etat de l’art

A�n d'adresser les probl�ematiques li�ees �a la gestion des photos num�eriques, nous ob-

servons les d�eveloppements technologiques, leurs circonstances ainsi que les usages

quotidiens de la pratique photo. Nous dressons l'�etat de l'art (technologies, algo-

rithmes, techniques de visualisation) a�n d'o�rir un niveau de compr�ehension g�en�eral

vis-�a-vis des d�eveloppements technologiques actuels et de faciliter l'exploration des

techniques potentielles. �A partir d'un panorama des algorithmes de regroupement

photo, nous pr�esentons notre approche de cat�egorisation qui s'appuie sur di��erents

usages de la pratique photo.

Interaction avec des photos numeriques d’un point de vue design

La pr�esente dissertation vise �a proposer des solutions potentielles dans la gestion

des contenus photos num�eriques, et ce d'un point de vue design. Le design est le

�l conducteur de notre recherche. Nous suivons des proc�edures scienti�ques dans la

v�eri�cation des techniques d'interaction, l'int�egration d'interface sur appareil por-

table et l'organisation des contenus photos. Ce point de vue orient�e design nous

am�ene �a formuler des solutions concr�etes qui sont issues d'une r�e exion centr�ee sur

l'utilisateur. Nos propositions de design s'appuient sur une interaction intuitive et

se d�emarquent en cela tr�es clairement des interfaces avec clavier.

De nos jours, les navigateurs d'images int�egrent des techniques d'interaction plus

naturelles et des techniques de visualisation plus riches. Notre interface gestuelle

intuitive permet de parcourir des contenus photos num�eriques. Elle s'appuie sur une

�etude des gestes de manipulation physique que nous ex�ecutons sur des taches du

quotidien. Le type de pr�esentation (2D, 3D) importe peu : l'interaction avec des

contenus num�eriques ne s'appuie pas sur une distinction bas�ee sur la « dimension »des contenus, mais plutot sur l'aspect fonctionnel de ce qui est pr�esent�e �a l'utilisateur

et sur ce qu'il va pouvoir faire de ces contenus.

Proposition preliminaire de design visant a faire correspondre visualisation

et manipulation

Actuellement, les interfaces mobiles avec �ecran tactile qui permettent de manipuler

des contenus num�eriques s'attachent surtout �a d�e�nir une grammaire de gestes.

Elles �echouent n�eanmoins �a d�e�nir une pr�esentation visuelle qui correspondrait �a

ces gestes. Nos propositions d'interfaces gestuelles visent �a d�emontrer comment la

pr�esentation visuelle de l'interface peut d�eclencher l'usage du geste. A�n d'enrichir le

sens haptique, nos propositions s'appuient aussi bien sur des mouvements ex�ecut�es �a

main enti�ere que sur des mouvements ex�ecut�es �a un ou plusieurs doigts. Nous avons

154

Page 163: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

�egalement int�egr�e di��erentes m�etaphores de visualisation a�n de mapper geste et

visualisation.

Les appareils portables disponibles sur le march�e sont en g�en�eral petits et �ns,

en forme de « tablette ». Loin d'enrichir la manipulation haptique, cette forme la

limite. D'apr�es nous, a�n de compenser l'insu�sance de manipulation physique li�ee

�a leur �ecran tactile, ces appareils devraient davantage s'appuyer sur une pr�esentation

virtuelle riche des contenus num�eriques. Loin des appareils portables classiques avec

�ecran rectangulaire, nous proposons Phora, design d'interface avec �ecran circulaire

et manipulation haptique riche permettant de visualiser des albums photos de taille

cons�equente. A�n de pouvoir s'adapter �a l'usage dans di��erentes conditions de

mobilit�e, l'interaction avec des photos num�eriques sur appareil portable n�ecessite

des techniques de manipulation plus intuitives et des modes de visualisation plus

adapt�es. Ceci est particuli�erement vrai lorsque les photos v�ehiculent des signaux

�emotionnels. Il faut alors induire des techniques d'interaction originales qui am�enent

l'utilisateur �a revivre ses exp�eriences pass�ees.

155

Page 164: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

7.2 Presentation tangible inspiree du Rubik’s cube

pour interaction future avec des photos nume-

riques

Le Rubik's cube propose �a la fois des techniques riches de manipulation et un mod�ele

de pr�esentation original. Nous nous int�eressons �a sa capacit�e d'interaction tangible

et d�eveloppons un navigateur d'images permettant de parcourir des albums photos

de taille cons�equente.

Sur la base du Rubik's cube, nous d�e�nissons deux cat�egories de pr�esentation cu-

bique : pr�esentation cubique r�eguli�ere et irr�eguli�ere. La pr�esentation cubique r�e-

guli�ere permet d'arranger les cubes en une matrice 3D (Rubik's cube de 3x3x3,

4x4x4 ou 5x5x5). Cette matrice comporte six faces carr�ees, souvent de di��erentes

couleurs, et qui pr�esentent des visuels vari�es. La manipulation d'une pr�esentation

cubique r�eguli�ere s'e�ectue en tournant verticalement ou horizontalement le rang

ou la colonne de cubes miniatures. Par ailleurs, il existe deux types de pr�esentation

cubique irr�eguli�ere : celle bas�ee sur des petits cubes et celle bas�ee sur des « briques »3D irr�eguli�eres (sorte de Tetris 3D). Un exemple de pr�esentation sur petits cubes

est l'�etude Wooden Brains [131] o�u chaque cube peut etre librement retir�e a�n de

construire di��erentes faces. La pr�esentation Tetris 3D permet quant �a elle d'assem-

bler di��erentes briques 3D irr�eguli�eres pour construire soit une matrice cubique (cf.

�g.7.1), soit une pr�esentation ouverte par di��erentes combinaisons de briques sur

une base matricielle carr�ee (cf. �g.7.2).

Figure 7.1 – Cube obtenu via la pr�esentation Tetris 3D.

Figure 7.2 – Pr�esentation Tetris 3D

156

Page 165: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

La pr�esentation cubique r�eguli�ere pr�esente un contenu riche aux joueurs sur des

faces planes et compl�etes. Meme richesse de contenu pour la pr�esentation cubique

irr�eguli�ere, avec toutefois quelques di��erences. Si nous projetons des images 2D

sur une pr�esentation cubique r�eguli�ere et sur une pr�esentation irr�eguli�ere, la vue

du dessus est la meme pour les deux pr�esentations : il s'agit d'une matrice carr�ee.

Mais, si on la regarde de cot�e, la pr�esentation irr�eguli�ere permet une mise en relation

visuelle des contenus pr�esent�es sur deux vues di��erentes. A�n d'�etuder les possibilit�es

visuelles de la pr�esentation cubique, nous avons d�evelopp�e un prototype qui illustre

les deux types de pr�esentation irr�eguli�ere. Nous avons achet�e un jeu de cubes en

bois (huit blocs) et avons coll�e des photos sur chaque face. Les blocs sont assembl�es

pour construire une matrice cubique 3x3x3 (cf �g.7.3). Notre prototype permet de

visualiser deux types de pr�esentation cubique irr�eguli�ere. La premi�ere pr�esentation

est directement inspir�ee de l'�etude « Wooden Brains », dans un espace de 4x4x4 (cf.

�g.7.4). La deuxi�eme n'est pour sa part pas limit�ee dans l'espace (cf. �g.7.5). Pour

chaque pr�esentation, nous avons photographi�e cinq vues qui permettent d'appr�ecier

les di��erents rendus pour des memes images.

Potentiel de la presentation cubique dans la visualisation de photos nume-

riques

Sur la base de la pr�esentation cubique, nous avons mis au point un prototype per-

mettant de simuler la visualisation de contenus photos num�eriques. Notre objectif :

identi�er les possibilit�es o�ertes par la pr�esentation cubique dans la gestion des

photos num�eriques.

1. Pr�esentation cubique et organisation des contenus photos

Dans notre prototype, chaque pr�esentation cubique est constitu�ee de groupes

de blocs (trois ou quatre blocs par groupe) de formes di��erentes. On peut

consid�erer chaque groupe comme un regroupement d'images qui serait ob-

tenu par di��erents algorithmes de regroupement, comme discut�e au chapitre

2. Nous avons appliqu�e notre cat�egorisation d�ecrite au chapitre 3 �a la pr�esen-

tation cubique. Sur cette id�ee, nous avons associ�e chaque forme particuli�ere

de bloc Tetris [151] �a l'une de nos six cat�egories (cf. tableau 7.1). Pour d�e-

�nir la position relative de chaque bloc photo dans la pr�esentation cubique,

on peut utiliser les balises extraites des m�etadonn�ees, comme par exemple

l'information chronologique ou g�eographique.

2. Caract�eristiques de la pr�esentation cubique irr�eguli�ere

La caract�eristique principale de ce type de pr�esentation est le caract�ere irr�egu-

lier de ses faces, construites par assemblage de di��erents blocs. Comme pour

le prototype en �g.7.4, chaque face de la pr�esentation cubique est arrang�ee

de fa�con �a pouvoir caract�eriser le contenu de l'album photo. Chaque face pro-

pose un rafra�chissement du mode d'a�chage et de pr�esentation d'un meme

contenu. Une autre caract�eristique de ce type de pr�esentation est l'exp�erience

visuelle singuli�ere que permet son arrangement irr�egulier. Par exemple, �g.7.4,

si on observe la pr�esentation du dessus, le rendu visuel est une matrice car-

r�ee de 4x4 constitu�ee de miniatures photos, alors qu'il s'agit en r�ealit�e d'une

accumulation de photos sur di��erentes couches. Ce genre d'illusion pourrait

encourager les utilisateurs �a explorer le contenu d'une collection photo, avec

une surprise �a la cl�e sur chaque face. Par ailleurs, on sait que l'interaction

avec un objet 3D n�ecessite des techniques complexes de manipulation. On

peut donc imaginer que l'interaction avec une pr�esentation cubique irr�eguli�ere

int�egr�ee �a un espace 3D n�ecessitera des techniques encore plus complexes de

manipulation pour tourner ou d�eplacer librement chacun des blocs.

157

Page 166: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

3. Mise en relation avec la d�ecouverte inattendue

Pour un contenu familier tel qu'un album photo personnel, on peut rattacher

le contexte de la d�ecouverte de l'inattendu �a la d�efamiliarisation vis-�a-vis du

contenu. Comme discut�e au chapitre 2, la d�efamiliarisation att�enue la compr�e-

hension �etablie vis-�a-vis de choses famili�eres. Il y a d�efamiliarisation lorsque

l'on arrange ou dispose le contenu d'un album photo d'une fa�con inhabi-

tuelle. Le mode d'arrangement utilis�e dans la pr�esentation cubique irr�eguli�ere

peut etre consid�er�e comme un m�ecanisme de d�efamiliarisation vis-�a-vis du

contenu. Son caract�ere irr�egulier peut induire la d�ecouverte de l'indice qui

guidera l'utilisateur vers l'inattendu, augmentant de ce fait la probabilit�e de

faire une d�ecouverte heureuse. �g.7.4, par exemple, chaque face de la pr�esen-

tation cubique permet une d�efamiliarisation vis-�a-vis du contenu, lequel revet

un caract�ere inconnu et nouveau au fur et �a mesure qu'on le parcourt.

De par cet arrangement irr�egulier, les utilisateurs peuvent explorer et appr�ecier

leurs contenus photos avec davantage de curiosit�e. On peut rapprocher ce mo-

d�ele de visualisation du Casual InfoVis, avec son approche non-conventionnelle

dans l'exploration et la pr�esentation de contenus num�eriques (e�ets visuels

prononc�es). Et surtout, la pr�esentation cubique irr�eguli�ere, divertissante, in-

cite l'utilisateur �a poursuivre son exploration des contenus photos.

4. Cube transform�e, un nouveau type d'Origami

Le cube de la �g.7.3 �etant un assemblage de di��erents modules permettant

de pr�esenter 124 photos, on peut consid�erer qu'il existe deux modes possibles

de pr�esentation pour ce cube : mode pli�e et d�epli�e. Lorsqu'il est compact�e en

matrice 3x3x3, chacune de ses faces pr�esente 9 images. Si on le met �a plat,

on peut a�cher 27 images. Les utilisateurs ont par ailleurs la possibilit�e de

manipuler les di��erents blocs a�n d'explorer le contenu cach�e. La pr�esentation

cubique pr�esente selon nous une capacit�e de transformation libre qui permet

d'a�cher les contenus photos d'une fa�con plus dynamique. De meme, si on

les rapproche, la visualisation Origami (discut�ee chapitre 3) et la transforma-

tion du cube suivent le meme principe : plier un contenu riche de di��erentes

mani�eres qui sont tout autant de modes de pr�esentation.

Pour r�esumer, les r�esultats obtenus avec notre prototype nous am�enent �a penser

que la pr�esentation cubique est un concept riche dans son mod�ele de pr�esentation

comme dans ses techniques intuitives d'interaction. La pr�esentation cubique peut

s'int�egrer de deux fa�cons. La premi�ere : int�egrer les techniques de visualisation et

d'interaction de la pr�esentation cubique �a un syst�eme 3D, a�n d'interagir avec les

contenus photos personnels. Ou encore, les int�egrer �a une installation physique qui

permette de manipuler les cubes par interaction tangible. La deuxi�eme : simpli�er la

technique de visualisation de la pr�esentation cubique et l'int�egrer �a un syst�eme 2,5D,

c'est-�a-dire une pr�esentation 2D avec des e�ets visuels sp�eci�ques permettant de

simuler une visualisation 3D. Le mod�ele de visualisation de la pr�esentation cubique

peut par ailleurs etre d�ecorrell�e de sa technique d'interaction. On peut ainsi �etablir

un mappage m�etaphorique qui s'inspirerait des techniques d'interaction utilis�ees

sur d'autres taches physiques, et adapter ce mod�ele de visualisation �a un �eventail

plus vaste d'applications. Ce mod�ele pourrait tout particuli�erement concerner les

appareils sur lesquels on ne pourrait pas ex�ecuter des gestes de manipulation aussi

complexes que sur un Rubik's cube (par exemple tourner dans un sens, puis dans

l'autre). Le Rubik's cube �etant un puzzle 3D que l'on manipule �a deux mains, il

faudrait id�ealement int�egrer ses techniques de manipulation �a des appareils portables

qui seraient eux aussi manipul�es �a deux mains.

158

Page 167: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Tableau 7.1 – Correspondance entre notre cat�egorisation et les formes repr�e-sentatives bas�ees sur Tetris.

Categories Forme Teris Representationvisuelle

Cat�egorie A Lettre I(vue statique simple)

Cat�egorie B) Lettre J(vues multples)

Cat�egorie C Lettre L(capture de mouvement)

Cat�egorie D Lettre O(capture de mouvement)

Cat�egorie E Lettre S(groupes)

Cat�egorie F Lettre T(groupes en mouvement)

Figure 7.3 – Prototype de pr�esentation cubique irr�eguli�ere

159

Page 168: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Figure 7.4 – Six vues di��erentes du prototype du premier type de pr�esentationcubique irr�eguli�ere : vue 3D (A), vue du dessus (B au centre), vuede face (B en bas), vue arri�ere (B en haut), vue gauche (B �a g.)et droite (B �a dr.)

Figure 7.5 – Six vues di��erentes du deuxi�eme type de prototype de visualisationirr�eguli�ere : vue 3D (A), vue du dessus (B au centre), vue de face(B en bas), vue arri�ere (B en haut), vue gauche (B �a g.) et droite(B �a dr.)

160

Page 169: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

7.3 Notre vision de l’avenir

Les progr�es technologiques sont synonyme d'une perp�etuelle �evolution en ce qui

concerne l'interaction avec des contenus num�eriques sur appareils portables. Par

cons�equent, on peut imaginer qu'un nouveau medium viendra pallier certaines limi-

tations physiques des appareils portables classiques, comme par exemple leur taille

d'�ecran et les techniques d'interaction qu'ils int�egrent. �g.7.6, nous illustrons en

trois �etapes les caract�eristiques de ce medium du futur �a travers sa relation avec les

contenus num�eriques.

Les nouveaux m�edia sont semblables �a un entonnoir. Les contenus num�eriques em-

pruntent cet entonnoir et sont interpr�et�es de deux fa�cons : selon une pr�esentation

tangible ou une pr�esentation virtuelle. La premi�ere propose une repr�esentation phy-

sique des contenus qui permet leur manipulation physique. La seconde correspond

�a un mode de visualisation intangible s'appuyant sur des modes de repr�esentation

visuelle de ces memes contenus.

Les d�eveloppements et travaux autour des modes de pr�esentation tangible suivent

assez �d�element les sp�eci�cations des appareils traditionnels avec �ecran. La pr�esen-

tation tangible permet d'interagir �a l'�ecran avec les contenus num�eriques via une

interface physique ou tangible, comme par exemple un �ecran tactile ou un m�eca-

nisme tangible. C'est la direction que suit l'�etude Siftables [152](cf. �g.7.7).

Dans le cas de la pr�esentation intangible, le recours �a des techniques de projection

susceptibles de pallier les limitations de l'�ecran des portables vient accentuer le

caract�ere intangible de l'interaction qu'o�re la pr�esentation virtuelle.

(a) nouveau medium (b) contenus numeriquespar nouveau medium

(c) interactions relativesselon presentations

Figure 7.6 – Diagramme en entonnoir : les trois �etapes de la relation media /contenus num�eriques (�a gauche, au milieu, �a droite)

161

Page 170: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Figure 7.7 � Siftables (image extraite de chatterboxer.wordpress.com)

Figure 7.8 � Sixthsenses (image extraite de www.pranavmistry.com)

La projection virtuelle peut en ce sens ˆetre presentee dans tout environnement et

sur des usages varies. Cette presentation introduit un autre modele d’ interaction

avec des contenus numeriques via une manipulation hors ´ecran, comme le propose

l’ ´etude SixSense [153] (cf. fig.7.8).

En tant que contenus audiovisuels, les photos numeriques sont souvent riches en

informations ´emotionnelles, particulierement dans le cas de contenus personnels.

Afin d’ enrichir l’ experience de navigation photo, l’ interface du futur devra integrer un

mecanisme base sur la multi modalite (vue, toucher, ouıe, etc . . .) qui permettra de

declencher chez l’ utilisateur davantage d’ indices ´emotionnels a partir des contenus

numeriques.

162

Page 171: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

Bibliographie

[1] K. Cooper, O. De Bruijn, R. Spence, and M. Witkowski. A comparison of

static and moving presentation modes for image collections. In AVI ’06 :

Proceedings of the working conference on Advanced visual interfaces, pages

381{388, New York, NY, USA, 2006. ACM. ISBN 1-59593-353-0. doi : http://doi.acm.org/10.1145/1133265.1133345. (pages 4, 55, 56, 93, 150, and 151)

[2] T. Kindberg, M. Spasojevic, R. Fleck, and A. Sellen. How and why people

use camera phones. Technical report, HP Labs, 2004. (pages 9 and 30)

[3] N. Portolan, S. Jumpertz, and O. Koechlin. Astrolabe ou la nagigation tout

en images et en sons. In IHM ’02 : Proceedings of the 14th French-speaking

conference on Human-computer interaction (Conference Francophone sur l’In-

teraction Homme-Machine), pages 199{200, New York, NY, USA, 2002.

ACM. ISBN 1-58113-615-3. doi : http://doi.acm.org/10.1145/777005.777032. (page 12)

[4] T. Palta. Idc forcasts growth for the digital camera market, 2007. URL

http://www.digitalcamerainfo.com. (page 13)

[5] Media Culpa. Flickr reaches 3 billion photos, 2009. URL http://www.

kullin.net/2009/05/flickr-reaches-35-billion-photos.html.

(page 14)

[6] G. Kim and W. Chan. Understanding camera phone imaging : Motivations,

behaviors and meanings. In HCI (2), pages 374{383, 2007. (page 16)

[7] R. Rosenberg. Computing without Mice and Keyboards : Text and Graphic

Input Devices for Mobile Computing. PhD thesis, University of London, 1998.

(page 16)

[8] I. Salminen, J. Lehikoinen, and J. Huuskonen. Developing an extensible mo-

bile metadata ontology. In Proceedings of the ninth IASTED International

conference on Software Engineering and applications, pages 266{272. ACTA

Press, 2005. (page 16)

[9] Cloud computing : an overview and future direction, 2009. URL http://

blog.taragana.com. (page 17)

[10] J. Vilches. Weekend open forum : Google chrome os and the future of cloud

computing"

2009. URL http://www.techspot.com. (page 17)

163

Page 172: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

[11] J. Lehikoinen, A. Aaltonen, P. Huuskonen, and I. Salminen. Personal content

experience : managing digital life in the mobile age. Chichester, England ;

Hoboken, NJ : John Wiley, 2007. (page 17)

[12] K. Rodden and K.R. Wood. How do people manage their digital photographs ?

In Proceedings of the SIGCHI conference on Human factors in computing

systems, pages 409{416. ACM New York, NY, USA, 2003. (pages 24, 44, 102,

and 104)

[13] O. Chavarro. An historical timeline of computer graphics and animation,

2006. URL http://sophia.javeriana.edu.co/~ochavarr/computer_

graphics_history/historia. (page 26)

[14] C. Ford and K. Steinorth, editors. You Press the Button, We Do the Rest :

the Birth of snapshot Photography. Dirk Nishen, 1988. (page 26)

[15] D. Frohlich and E. Tallyn. Audiophotography : practice and prospects. In CHI

’99 : CHI ’99 extended abstracts on Human factors in computing systems,

pages 296{297, New York, NY, USA, 1999. ACM. ISBN 1-58113-158-5. doi :

http://doi.acm.org/10.1145/632716.632897. (pages 28 and 29)

[16] MicrosoftSurface. Microsoft surface, 2008. URL http://www.microsoft.

com/surface/NoSilverlight.aspx. (page 29)

[17] Corel PhotoCD. Corel photocd, 1985. URL http://www.corel.com.

(page 30)

[18] GettyImages. Gettyimages, 2003. URL http://www.gettyimages.com.

(page 30)

[19] Z. Pousman, J. Stasko, and J. Mateas. Casual information visualization :

Depictions of data in everyday life. IEEE Transactions on Visualization and

Computer Graphics, 13 :1145{1152, 2007. ISSN 1077-2626. doi : http://doi.ieeecomputersociety.org/10.1109/TVCG.2007.70541. (pages 31 and 64)

[20] Ambient orb, 2004. URL http://www.ambientdevices.com. (page 31)

[21] J. Stasko, D. McColgin, T. Miller, C. Plaue, and Z. Pousman. Evaluating the

infocanvas peripheral awareness system : A longitudinal, in situ study, 2005.

(page 31)

[22] J. J. Cadiz, G. Venolia, G. Jancke, and A. Gupta. Designing and deploying

an information awareness interface. In CSCW ’02 : Proceedings of the 2002

ACM conference on Computer supported cooperative work, pages 314{323,

New York, NY, USA, 2002. ACM. ISBN 1-58113-560-2. doi : http://doi.acm.org/10.1145/587078.587122. (page 31)

[23] F. B. Viegas, S. Golder, and J. Donath. Visualizing email content : portraying

relationships from conversational histories. In CHI ’06 : Proceedings of the

SIGCHI conference on Human Factors in computing systems, pages 979{

988, New York, NY, USA, 2006. ACM. ISBN 1-59593-372-7. doi : http://doi.acm.org/10.1145/1124772.1124919. (page 31)

164

Page 173: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

[24] PopularTagsCloud. Popular tags cloud, 2004. URL http://del.icio.us/

tags. (page 31)

[25] R. Xiong and J. Donath. Peoplegarden : creating data portraits for users. In

UIST ’99 : Proceedings of the 12th annual ACM symposium on User interface

software and technology, pages 37{44, New York, NY, USA, 1999. ACM.

ISBN 1-58113-075-9. doi : http://doi.acm.org/10.1145/320719.322581.

(page 32)

[26] Wignell. Sorting, 2007. URL http://www.annawignell.com. (page 32)

[27] M. Romero and M. Mateas. A preliminary investigation of alien presence. In

HCI, Lecture Notes in Computer Science. Springer, 2005. (page 32)

[28] F. B. Viegas, E. Perry, E. Howe, and J. Donath. Artifacts of the presence era :

Using information visualization to create an evocative souvenir. In INFOVIS

’04 : Proceedings of the IEEE Symposium on Information Visualization, pages

105{111, Washington, DC, USA, 2004. IEEE Computer Society. ISBN 0-7803-

8779-3. doi : http://dx.doi.org/10.1109/INFOVIS.2004.8. (page 32)

[29] B. Bederson. Photomesa : a zoomable image browser using quantum

treemaps and bubblemaps. In UIST’01 : Proceedings of the 14th an-

nual ACM symposium on User interface software and technology, pages

71{80, New York, NY, USA, 2001. ACM. ISBN 1-58113-438-X. doi :

http://doi.acm.org/10.1145/502348.502359. (pages 32, 34, 44, 49, and 102)

[30] R. Merton and E. Barber. The travels and adventures of serendipity, page 1.

Princeton University, 2004. (page 33)

[31] R. Merton and E. Barber. The travels and adventures of serendipity, page 46.

Princeton University, 2004. (page 33)

[32] R. Merton and E. Barber. The travels and adventures of serendipity, page

167. Princeton University, 2004. (pages )

[33] T. W. Leong, F. Vetere, and S. Howard. The serendipity shu�e. In OZCHI

’05 : Proceedings of the 17th Australia conference on Computer-Human Inter-

action, pages 1{4, Narrabundah, Australia, Australia, 2005. Computer-Human

Interaction Special Interest Group (CHISIG) of Australia. ISBN 1-59593-222-

4. (page 34)

[34] T. W. Leong, F. Vetere, and S. Howard. Randomness as a resource for

design. In DIS ’06 : Proceedings of the 6th conference on Designing Interactive

systems, pages 132{139, New York, NY, USA, 2006. ACM. ISBN 1-59593-

367-0. doi : http://doi.acm.org/10.1145/1142405.1142428. (page 34)

[35] T. W. Leong, S. Howard, and F. Vetere. Choice : abidcating or exercising ?

In CHI ’08 : Proceeding of the twenty-sixth annual SIGCHI conference on

Human factors in computing systems, pages 715{724, New York, NY, USA,

2008. ACM. ISBN 978-1-60558-011-1. doi : http://doi.acm.org/10.1145/1357054.1357168. (pages 34 and 35)

165

Page 174: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

[36] A. Kuchinsky, C. Pering, M. L. Creech, D. Freeze, B. Serra, and J. Gwizdka.

Foto�le : a consumer multimedia organization and retrieval system. In CHI

’99 : Proceedings of the SIGCHI conference on Human factors in computing

systems, pages 496{503, New York, NY, USA, 1999. ACM. ISBN 0-201-

48559-1. doi : http://doi.acm.org/10.1145/302979.303143. (pages 34, 46,

49, 102, 131, and 132)

[37] A. Walter, D. Webling, K. Essig, and H. Ritter. Interactive hyperbolic image

browsing { towards an integrated multimedia navigator. In KDD ’06 : Pro-

ceedings of the 12th ACM SIGKDD international conference on Knowledge

discovery and data mining, pages 111{118. ACM, 2006. (page 34)

[38] R. Merton and E. Barber. The travels and adventures of serendipity, page

192. Princeton University, 2004. (page 35)

[39] R. Merton and E. Barber. The travels and adventures of serendipity, page

178. Princeton University, 2004. (page 38)

[40] RubiksCube. Rubikscube, 1974. URL http://www.rubiks.com/. (pages 40

and 80)

[41] NISO. Understanding metadata, national information standards organiza-

tion. NISO, 2001. URL http://www.niso.org/standards/resources/

UnderstandingMetadata.pdf. (page 42)

[42] Exchangeable image �le format, 1998. URL http://en.wikipedia.org/.

(page 42)

[43] JEITA. Jeita, 2009. URL www.jeita.or.jp/english/. (page 42)

[44] D. Kirk, A. Sellen, C. Rother, and K. Wood. Understanding photowork.

In Proceedings of the SIGCHI conference on Human Factors in computing

systems, page 770. ACM, 2006. (pages 42 and 102)

[45] Iptcheader, 1990. URL http://www.iptc.org/IIM/. (page 42)

[46] dublincore. dublincore, 1995. URL http://dublincore.org/. (page 42)

[47] DIG35. Dig35, 2000. URL http://www.i3a.org. (page 42)

[48] MPEG-7. Mpeg-7, 2009. URL http://en.wikipedia.org/wiki/MPEG-7.

(page 42)

[49] XMP. Xmp, 2009. URL http://www.adobe.com/products/xmp/. (page 42)

[50] A. Graham, H. Garcia-Molina, A. Paepcke, and T. Winograd. Time as es-

sence for photo browsing through personal digital libraries. In JCDL ’02 :

Proceedings of the 2nd ACM/IEEE-CS joint conference on Digital libraries,

pages 326{335, New York, NY, USA, 2002. ACM. ISBN 1-58113-513-0. doi :

http://doi.acm.org/10.1145/544220.544301. (pages 44 and 93)

166

Page 175: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

[51] S. Harada, M. Naaman, Y.J. Song, Q.Y. Wang, and A. Paepcke. Lost in

memories : interacting with photo collections on pdas. In JCDL ’04 : Procee-

dings of the 4th ACM/IEEE-CS joint conference on Digital libraries, pages

325{333, New York, NY, USA, 2004. ACM. ISBN 1-58113-832-6. doi :

http://doi.acm.org/10.1145/996350.996425. (pages 44, 58, 90, and 93)

[52] J. Gemmell, G. Bell, R. Lueder, S. Drucker, and C. Wong. Mylifebits : ful-

�lling the memex vision. In MULTIMEDIA ’02 : Proceedings of the tenth

ACM international conference on Multimedia, pages 235{238, New York,

NY, USA, 2002. ACM. ISBN 1-58113-620-X. doi : http://doi.acm.org/10.1145/641007.641053. (pages 44, 49, and 51)

[53] M. Naaman, S. Harada, Q.Y. Wang, H. Garcia-Molina, and A. Paepcke.

Context data in geo-referenced digital photo collections. In MULTIMEDIA

’04 : Proceedings of the 12th annual ACM international conference on Mul-

timedia, pages 196{203, New York, NY, USA, 2004. ACM. ISBN 1-58113-

893-8. doi : http://doi.acm.org/10.1145/1027527.1027573. (page 45)

[54] C. Tomiai, S. Battle, and S. Cayzer. Sharing, discovering and browsing geo-

tagged pictures on the web. Technical report, HP Labs, 2007. (page 45)

[55] K. Toyama, R. Logan, and A. Roseway. Geographic location tags on digital

images. In Proceedings of the eleventh ACM international conference on

Multimedia, pages 156{166, New York, NY, USA, 2003. ACM. ISBN 1-

58113-722-2. doi : http://doi.acm.org/10.1145/957013.957046. (page 45)

[56] R. Datta, D. Joshi, J. Li, and J. Z. Wang. Image retrieval : Ideas, in uences,

and trends of the new age. ACM Comput. Surv., 40(2) :1{60, 2008. ISSN

0360-0300. doi : http://doi.acm.org/10.1145/1348246.1348248. (page 46)

[57] A. Girgensohn, J. Adcock, and L. Wilcox. Organizing photos of people. In

ACM, editor, UIST ’04 - Adjunct Proceedings of the 17th annual ACM Sym-

posium on User Interface Software and Technology, 2004. (page 46)

[58] A. Girgensohn, J. Adcock, and L. Wilcox. Leveraging face recognition tech-

nology to �nd and organize photos. In MIR ’04 : Proceedings of the 6th

ACM SIGMM international workshop on Multimedia information retrieval,

pages 99{106, New York, NY, USA, 2004. ACM. ISBN 1-58113-940-3. doi :

http://doi.acm.org/10.1145/1026711.1026728. (page 46)

[59] J. Xiao and T. Zhang. Face bubble : photo browsing by faces. In AVI ’08 :

Proceedings of the working conference on Advanced visual interfaces, pages

343{346, New York, NY, USA, 2008. ACM. ISBN 1-978-60558-141-5. doi :

http://doi.acm.org/10.1145/1385569.1385628. (pages 46, 49, 102, 131, 132,

and 134)

[60] K. Rodden, W. Basalaj, D. Sinclair, and K. Wood. Does organisation by

similarity assist image browsing ? In CHI ’01 : Proceedings of the SIGCHI

conference on Human factors in computing systems, pages 190{197, New

York, NY, USA, 2001. ACM. ISBN 1-58113-327-8. doi : http://doi.acm.org/10.1145/365024.365097. (pages 46, 93, 102, and 130)

167

Page 176: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

[61] R. Jaimes, S.F. Chang, and E. C. Loui. Detection of non-identical duplicate

consumer photographs. In Proc. ICICS – PCM 2003, pages 16{20, 2003.

(pages 46, 102, 105, and 106)

[62] A. Jaimes, S.F. Chang, and A.C. Loui. Duplicate detection in consumer

photography and news video. In In Proc. MM Int. Conf. on Multimedia,

pages 423{424, 2002. (page 46)

[63] F. Scha�alitzky and A. Zisserman. Multi-view matching for unordered image

sets, or "how do i organize my holiday snaps ?". In ECCV ’02 : Proceedings

of the 7th European Conference on Computer Vision-Part I, pages 414{431,

London, UK, 2002. Springer-Verlag. ISBN 3-540-43745-2. (pages 46 and 102)

[64] N. Snavely, S. M. Seitz, and R. Szeliski. Photo tourism : exploring photo

collections in 3d. In SIGGRAPH ’06 : ACM SIGGRAPH 2006 Papers, pages

835{846, New York, NY, USA, 2006. ACM. ISBN 1-59593-364-6. doi :

http://doi.acm.org/10.1145/1179352.1141964. (pages 46 and 102)

[65] Alexander Loui. Automatic image event segmentation and quality screening

for albuming applications. In ICME 2000, pages 1125{1128, 2000. (page 46)

[66] M. Cooper, J. Foote, A. Girgensohn, and L. Wilcox. Temporal event

clustering for digital photo collections. In MULTIMEDIA ’03 : Procee-

dings of the eleventh ACM international conference on Multimedia, pages

364{373, New York, NY, USA, 2003. ACM. ISBN 1-58113-722-2. doi :

http://doi.acm.org/10.1145/957013.957093. (page 46)

[67] J.C. Platt, M. Czerwinski, and B.A. Field. Phototoc : Automatic clustering for

browsing personal photographs. In Proceedings of the 2003 Joint Conference

of the Fourth International Conference on Information, Communications and

Signal Processing,, volume 1, pages 6{10. IEEE, 15-18 Dec. 2003. (pages 47,

49, 50, 93, and 102)

[68] B. Suh and B.B Bederson. Semi-automatic image annotation using event

and torso identi�cation. Technical report, Computer Science Department,

University of Maryland, College Park, MD, 2004. (page 47)

[69] T. J. Mills, D. Pye, D. Sinclair, and K.R. Wood. Shoebox : A digital photo

management system. Technical report, ATT Research, 2000. (pages 47 and 49)

[70] S. M. Drucker, C. Wong, A. Roseway, S. Glenner, and S. De Mar. Media-

browser : reclaiming the shoebox. In AVI ’04 : Proceedings of the working

conference on Advanced visual interfaces, pages 433{436, New York, NY,

USA, 2004. ACM. ISBN 1-58113-867-9. doi : http://doi.acm.org/10.1145/989863.989944. (pages 47 and 49)

[71] J.C. Platt. Autoalbum : Clustering digital photographs using probabilistic

model merging. In IEEE Workshop on Content-Based Access of Image and

Video Libraries 2000, pages 96{100. Press, 2000. (pages 47 and 49)

[72] Y. Sun, H. Zhang, L. Zhang, and M. Li. Myphotos : a system for home

photo management and processing. In MULTIMEDIA ’02 : Proceedings of

168

Page 177: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

the tenth ACM international conference on Multimedia, pages 81{82, New

York, NY, USA, 2002. ACM. ISBN 1-58113-620-X. doi : http://doi.acm.org/10.1145/641007.641022. (pages 47, 49, and 51)

[73] M. Naaman, Y. J. Song, A. Paepcke, and H. Garcia-Molina. Automatic orga-

nization for digital photographs with geographic coordinates. In JCDL ’04 :

Proceedings of the 4th ACM/IEEE-CS joint conference on Digital libraries,

pages 53{62, New York, NY, USA, 2004. ACM. ISBN 1-58113-832-6. doi :

http://doi.acm.org/10.1145/996350.996366. (page 47)

[74] U. Gargi, Y. Deng, and D. R. Tretter. Managing and searching personal photo

collections. Technical report, HP Labs, 2002. (pages 47 and 49)

[75] A. Girgensohn, J. Adcock, M. Cooper, J. Foote, and L. Wilcox. Simplifying

the management of large photo collections. In In Proc. of INTERACT’03,

IOS, pages 196{203. Press, 2003. (pages 47 and 49)

[76] J. Cui, F. Wen, R. Xiao, Y. Tian, and X. Tang. Easyalbum : an interac-

tive photo annotation system based on face clustering and re-ranking. In

CHI ’07 : Proceedings of the SIGCHI conference on Human factors in com-

puting systems, pages 367{376, New York, NY, USA, 2007. ACM. ISBN

978-1-59593-593-9. doi : http://doi.acm.org/10.1145/1240624.1240684.

(pages 47, 49, 50, and 102)

[77] M.S. Lew, N. Sebe, C. Djeraba, and R. Jain. Content-based multimedia

information retrieval : State of the art and challenges. ACM Trans. Multimedia

Comput. Commun. Appl., 2(1) :1{19, 2006. ISSN 1551-6857. doi : http://doi.acm.org/10.1145/1126004.1126005. (page 47)

[78] T. Tan, J. Chen, P. Mulhem, and M. Kankanhalli. Smartalbum : a multi-

modal photo annotation system. In MULTIMEDIA ’02 : Proceedings of the

tenth ACM international conference on Multimedia, pages 87{88, New York,

NY, USA, 2002. ACM. ISBN 1-58113-620-X. doi : http://doi.acm.org/10.1145/641007.641025. (page 49)

[79] W. Liu, Y. Sun, and H. Zhang. Mialbum - a system for home photo manage-

met using the semi-automatic image annotation approach. In MULTIMEDIA

’00 : Proceedings of the eighth ACM international conference on Multimedia,

pages 479{480, New York, NY, USA, 2000. ACM. ISBN 1-58113-198-4. doi :

http://doi.acm.org/10.1145/354384.379011. (pages 49 and 51)

[80] H.K. Ben and B. Shneiderman. Visualization methods for personal photo

collections : Browsing and searching in the photo�nder. In Proc. IEEE Inter-

national Conference on Multimedia and Expo (ICME2000), pages 1539{1542.

IEEE, 2000. (page 49)

[81] J. Mota, M. J. Fonseca, D. Gonccalves, and J. A. Jorge. Agrafo : a visual

interface for grouping and browsing digital photos. In AVI ’08 : Proceedings

of the working conference on Advanced visual interfaces, pages 494{495,

New York, NY, USA, 2008. ACM. ISBN 1-978-60558-141-5. doi : http://doi.acm.org/10.1145/1385569.1385673. (pages 49 and 52)

169

Page 178: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

[82] O. Hilliges, D. Baur, and A. Butz. Photohelix : Browsing, sorting and sharing

digital photo collections. In Second Annual IEEE International Workshop

on In Horizontal Interactive Human-Computer Systems, pages 87{94. IEEE,

2007. (pages 49, 52, and 93)

[83] WD. Wd, 2009. URL http://www.wdc.com/. (page 53)

[84] B. Bederson, B. Shneiderman, and M. Wattenberg. Ordered and quantum

treemaps : Making e�ective use of 2d space to display hierarchies. ACM

Trans. Graph., 21(4) :833{854, 2002. ISSN 0730-0301. doi : http://doi.acm.org/10.1145/571647.571649. (pages 53)

[85] T. T. A. Combs and B. B. Bederson. Does zooming improve image browsing ?

In DL ’99 : Proceedings of the fourth ACM conference on Digital libraries,

pages 130{137, New York, NY, USA, 1999. ACM. ISBN 1-58113-145-3. doi :

http://doi.acm.org/10.1145/313238.313286. (pages 54 and 93)

[86] Microsoft. Photosynth, 2008. URL http://photosynth.net/Default.

aspx. (page 55)

[87] J. D. Mackinlay, G. G. Robertson, and S. K. Card. The perspective wall :

detail and context smoothly integrated. In CHI ’91 : Proceedings of the

SIGCHI conference on Human factors in computing systems, pages 173{176,

New York, NY, USA, 1991. ACM. ISBN 0-89791-383-3. doi : http://doi.acm.org/10.1145/108844.108870. (pages 56 and 120)

[88] N. Elmqvist, N. Henry, Y. Riche, and J.D. Fekete. Melange : space folding for

multi-focus interaction. In CHI ’08 : Proceeding of the twenty-sixth annual

SIGCHI conference on Human factors in computing systems, pages 1333{

1342, New York, NY, USA, 2008. ACM. ISBN 978-1-60558-011-1. doi :

http://doi.acm.org/10.1145/1357054.1357263. (pages 56, 57, and 120)

[89] J. Lamping, R. Rao, and P. Pirolli. A focus+context technique based on

hyperbolic geometry for visualizing large hierarchies. In CHI ’95 : Proceedings

of the SIGCHI conference on Human factors in computing systems, pages 401{

408, New York, NY, USA, 1995. ACM Press/Addison-Wesley Publishing Co.

ISBN 0-201-84705-1. doi : http://doi.acm.org/10.1145/223904.223956.

(pages 56, 57, and 131)

[90] G. W. Furnas. Generalized �sheye views. In CHI ’86 : Proceedings of the

SIGCHI conference on Human factors in computing systems, pages 16{23,

New York, NY, USA, 1986. ACM. ISBN 0-89791-180-6. doi : http://doi.acm.org/10.1145/22627.22342. (pages 56 and 131)

[91] A. Khella and B. B. Bederson. Pocket photomesa : a zoomable image browser

for pdas. In MUM ’04 : Proceedings of the 3rd international conference on

Mobile and ubiquitous multimedia, pages 19{24, New York, NY, USA, 2004.

ACM. ISBN 1-58113-981-0. doi : http://doi.acm.org/10.1145/1052380.1052384. (page 58)

170

Page 179: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

[92] J. Williamson and L. M. Brown. Flutter : directed random browsing of photo

collections with a tangible interface. In DIS ’08 : Proceedings of the 7th ACM

conference on Designing interactive systems, pages 147{155, New York, NY,

USA, 2008. ACM. ISBN 978-1-60558-002-9. doi : http://doi.acm.org/10.1145/1394445.1394461. (pages 58)

[93] R. Van Renesse, K. P. Birman, and W. Vogels. Astrolabe : A robust and

scalable technology for distributed system monitoring, management, and data

mining. ACM Trans. Comput. Syst., 21(2) :164{206, 2003. ISSN 0734-2071.

doi : http://doi.acm.org/10.1145/762483.762485. (page 58)

[94] G. Demontis, M. Mosconi, and M. Porta. Experimental interfaces for visual

browsing of large collections of images. In In Proc. of HCI International 2003.

Springer, 2003. (pages 58 and 93)

[95] M. Porta. Browsing large collections of images through unconventional vi-

sualization techniques. In AVI ’06 : Proceedings of the working conference on

Advanced visual interfaces, pages 440{444, New York, NY, USA, 2006. ACM.

ISBN 1-59593-353-0. doi : http://doi.acm.org/10.1145/1133265.1133354.

(pages 58, 63, 93, and 102)

[96] MyPhotoEgg. Myphotoegg, 2008. URL http://www.myphotoegg.com/.

(pages 58, 132, and 150)

[97] Motorola. Fun album, 2009. URL http://www.motorola.com. (page 150)

[98] Mitzubishi. 3dpanel, 2009. URL http://techon.nikkeibp.co.jp/

english/NEWS_EN/20090310/166952/?P=1. (page 60)

[99] TOSHIBA. Qosmiog55, 2009. URL http://www.youtube.com/watch?v=

qpRxF7ZQ2wk. (page 60)

[100] J. Rekimoto. Tilting operations for small screen interfaces. In UIST ’96 :

Proceedings of the 9th annual ACM symposium on User interface software

and technology, pages 167{168, New York, NY, USA, 1996. ACM. ISBN 0-

89791-798-7. doi : http://doi.acm.org/10.1145/237091.237115. (page 60)

[101] D. J. Chatting. Action and reaction for physical map interfaces. In TEI

’08 : Proceedings of the 2nd international conference on Tangible and em-

bedded interaction, pages 187{190, New York, NY, USA, 2008. ACM. ISBN

978-1-60558-004-3. doi : http://doi.acm.org/10.1145/1347390.1347432.

(pages 60)

[102] Joel Bartlett. Rock 'n' scroll is here to stay. IEEE Comput. Graph. Appl.,

20(3) :40{45, 2000. ISSN 0272-1716. doi : http://dx.doi.org/10.1109/38.844371. (pages 60)

[103] S.J. Cho, C. Choi, Y. Sung, K. Lee, Y.B. Kim, and R. Murray-Smith. Dy-

namics of tilt-based browsing on mobile devices. In CHI ’07 : CHI ’07

extended abstracts on Human factors in computing systems, pages 1947{

1952, New York, NY, USA, 2007. ACM. ISBN 978-1-59593-642-4. doi :

http://doi.acm.org/10.1145/1240866.1240930. (page 60)

171

Page 180: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

[104] K. Hinckley, J. Pierce, M. Sinclair, and E. Horvitz. Sensing techniques for

mobile interaction. In UIST ’00 : Proceedings of the 13th annual ACM sym-

posium on User interface software and technology, pages 91{100, New York,

NY, USA, 2000. ACM. ISBN 1-58113-212-3. doi : http://doi.acm.org/10.1145/354401.354417. (page 60)

[105] A. Butler, S. Izadi, and S. Hodges. Sidesight : multi-"touch"interaction around

small devices. In UIST ’08 : Proceedings of the 21st annual ACM symposium

on User interface software and technology, pages 201{204, New York, NY,

USA, 2008. ACM. ISBN 978-1-59593-975-3. doi : http://doi.acm.org/10.1145/1449715.1449746. (page 62)

[106] S. Kristo�ersen and F. Ljungberg. Mobile use of it. In In Proceedings of the

22nd Information Systems Research Seminar in Scandinavia Conference (IRIS

22), 1999. (page 68)

[107] A. K. Karlson, B. B. Bederson, and J. L. Contreras-Vidal. Understanding

single-handed mobile device interaction. Technical report, University of Ma-

ryland, 2006. (page 68)

[108] D. Sa�er. Designing Gestural Interfaces : Touchscreens and Interactive De-

vices. O'Reilly, 2008. ISBN 978-0-596-51839-4. (pages 68, 70, and 86)

[109] M. Nielsen, M. Storring, T.B. Moeslund, and E. Granum. A procedure for

developing intuitive and ergonomic gesture interfaces for man-machine inter-

action. In In Gesture-Based Communication in Human-Computer Interaction,

volume 2915, pages 409{420. Springer Berlin / Heidelberg, 2004. (pages 69)

[110] Type of gesture, 2008. URL http://www.gesture.com/. (page 69)

[111] J. Cassell. A framework for gesture generation and interpretation. In Com-

puter Vision in Human-Machine Interaction, pages 191{215. Cambridge Uni-

versity Press, 2000. (page 69)

[112] Synaptics. Synaptics clearpad3000, 2009. URL http://theclevermonkey.

blogspot.com/2009/07/synaptics-clearpad-3000-up-to-10.html.

(page 70)

[113] Thirion S. Eliss, 2009. URL http://www.toucheliss.com/. (page 70)

[114] B. McDowell. Harmonica"

2008. URL http://www.pocketglow.com/

harmonica/. (page 70)

[115] SonyEricsson. Sony ericsson shows shake-to-shu�e walkman phone,

2007. URL http://www.reghardware.co.uk/2007/06/15/sonye_

updates_walkman_line/. (page 70)

[116] Apple. Apple ipod nano 4g, 2008. URL http://www.apple.com/ipodnano/

features.html. (page 70)

[117] Motorola. Motorola rokr zn50, 2008. URL http://www.mobilestopic.

com/reviews/motorola/rokr-zn50.html. (page 70)

172

Page 181: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

[118] J.R. Napier. The prehensile movements of the human hand. Journal of Bone

and Joint Surgery, 38(B) :902{913, 1956. (pages 71)

[119] J. M. Elliott and K. J. Connolly. A classi�cation of manipulative hand mo-

vements. In Developmental Medicine and Child Neurology, 26(3) :283{296,

1984. (pages 71, 72, and 78)

[120] W. W. Gaver. The sonic�nder : an interface that uses auditory icons. Hum.-

Comput. Interact., 4(1) :67{94, 1989. ISSN 0737-0024. doi : http://dx.doi.org/10.1207/s15327051hci0401_3. (pages 73 and 74)

[121] C. Schwesig, I. Poupyrev, and E. Mori. Gummi : user interface for deformable

computers. In CHI ’03 : CHI ’03 extended abstracts on Human factors in

computing systems, pages 954{955, New York, NY, USA, 2003. ACM. ISBN

1-58113-637-4. doi : http://doi.acm.org/10.1145/765891.766091. (pages 73

and 78)

[122] B. L. Harrison, K. P. Fishkin, A. Gujar, C. Mochon, and R. Want. Squeeze me,

hold me, tilt me ! an exploration of manipulative user interfaces. In CHI ’98 :

Proceedings of the SIGCHI conference on Human factors in computing sys-

tems, pages 17{24, New York, NY, USA, 1998. ACM Press/Addison-Wesley

Publishing Co. ISBN 0-201-30987-4. doi : http://doi.acm.org/10.1145/274644.274647. (page 75)

[123] C. C. Marshall and S. Bly. Turning the page on navigation. In JCDL ’05 :

Proceedings of the 5th ACM/IEEE-CS joint conference on Digital libraries,

pages 225{234, New York, NY, USA, 2005. ACM. ISBN 1-58113-876-8. doi :

http://doi.acm.org/10.1145/1065385.1065438. (page 75)

[124] G. Herkenrath, T. Karrer, and J. Borchers. Twend : twisting and bending

as new interaction gesture in mobile devices. In CHI ’08 : CHI ’08 extended

abstracts on Human factors in computing systems, pages 3819{3824, New

York, NY, USA, 2008. ACM. ISBN 978-1-60558-012-X. doi : http://doi.acm.org/10.1145/1358628.1358936. (page 78)

[125] D. Kunkle and G. Cooperman. Solving rubik's cube : disk is the new ram.

Commun. ACM, 51(4) :31{33, 2008. ISSN 0001-0782. doi : http://doi.acm.org/10.1145/1330311.1330319. (page 80)

[126] D. Kunkle and G. Cooperman. Twenty-six moves su�ce for rubik's cube.

In ISSAC ’07 : Proceedings of the 2007 international symposium on Sym-

bolic and algebraic computation, pages 235{242, New York, NY, USA,

2007. ACM. ISBN 978-1-59593-743-8. doi : http://doi.acm.org/10.1145/1277548.1277581. (page 80)

[127] L. Zeller. Cubebrowser, 2007. URL http://www.cubebrowser.de/.

(page 80)

[128] B. Schiettecatte and J. Vanderdonckt. Audiocubes : a distributed cube tan-

gible interface based on interaction range for sound design. In TEI ’08 :

Proceedings of the 2nd international conference on Tangible and embedded

173

Page 182: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

interaction, pages 3{10, New York, NY, USA, 2008. ACM. ISBN 978-1-60558-

004-3. doi : http://doi.acm.org/10.1145/1347390.1347394. (page 80)

[129] Z. Zhou, A. D. Cheok, and J. Pan. 3d story cube : an interactive tangible

user interface for storytelling with 3d graphics and audio. Personal Ubiquitous

Comput., 8(5) :374{376, 2004. ISSN 1617-4909. doi : http://dx.doi.org/10.1007/s00779-004-0300-0. (pages 80 and 81)

[130] E. Sharlin, Y. Itoh, B. Watson, Y. Kitamura, S. Sutphen, and L. Liu. Cognitive

cubes : a tangible user interface for cognitive assessment. In CHI ’02 : Pro-

ceedings of the SIGCHI conference on Human factors in computing systems,

pages 347{354, New York, NY, USA, 2002. ACM. ISBN 1-58113-453-3. doi :

http://doi.acm.org/10.1145/503376.503438. (pages 80 and 81)

[131] N. Fraser. Wooden brain, 2008. URL http://neil.fraser.name/news/

2008/01/04/. (page 156)

[132] Symmetri. Search cube, 2008. URL http://search-cube.com/. (page 80)

[133] 3dconnexion. Spacenavigator, 2007. URL http://www.3dconnexion.com/.

(page 86)

[134] M. Chang, J. J. Leggett, R. Furuta, A. Kerne, J. P. Williams, S. A. Burns,

and R. G. Bias. Collection understanding. In JCDL ’04 : Proceedings of the

4th ACM/IEEE-CS joint conference on Digital libraries, pages 334{342, New

York, NY, USA, 2004. ACM. ISBN 1-58113-832-6. doi : http://doi.acm.org/10.1145/996350.996426. (page 93)

[135] O. Christmann and N. Carbonell. Browsing through 3d representations of

unstructured picture collections : an empirical study. In AVI ’06 : Proceedings

of the working conference on Advanced visual interfaces, pages 445{448, New

York, NY, USA, 2006. ACM. ISBN 1-59593-353-0. doi : http://doi.acm.org/10.1145/1133265.1133355. (page 93)

[136] K.P. Yee, K. Swearingen, K. Li, and M. Hearst. Faceted metadata for image

search and browsing. In CHI ’03 : Proceedings of the SIGCHI conference

on Human factors in computing systems, pages 401{408, New York, NY,

USA, 2003. ACM. ISBN 1-58113-630-7. doi : http://doi.acm.org/10.1145/642611.642681. (page 93)

[137] Olympus. Olympus sp-590uz, 2008. URL http://www.olympus.co.uk/

consumer/29_digital_camera_sp-590_uz_specifications_20572.

htm. (page 103)

[138] Kodak. Kodak easyshare z980, 2009. URL http://www.kodak.com/.

(page 103)

[139] SonyEricsson. Sony ericsson k800i, 2007. URL http://www.sonyericsson.

com/cws/products/mobilephones/overview/k800i. (page 103)

[140] T. W. Malone. How do people organize their desks ? : Implications for the

design of o�ce information systems. ACM Trans. Inf. Syst., 1(1) :99{112,

174

Page 183: DESIGN D’INTERFACES DE MOBILES POUR L ...MOBILE INTERFACE DESIGN FOR BROWSING LARGE COLLECTIONS OF IMAGES Soutenue le 17 mai 2010 Directeur de th ese : M. CUBAUD Pierre Professeur

1983. ISSN 1046-8188. doi : http://doi.acm.org/10.1145/357423.357430.

(page 104)

[141] C. C. Marshall and S. Bly. Saving and using encountered information :

implications for electronic periodicals. In CHI ’05 : Proceedings of the

SIGCHI conference on Human factors in computing systems, pages 111{

120, New York, NY, USA, 2005. ACM. ISBN 1-58113-998-5. doi : http://doi.acm.org/10.1145/1054972.1054989. (page 104)

[142] Grono� J.-D. Bertin, J. Bonin S. and Laclau A. La graphique et le traitement

graphique de l’information. Flammarion, Paris, 1977. ISBN 2 08 211112 1.

(page 111)

[143] R. Lang. Idea plus square is equal to orgami, 2008. URL http://www.ted.

com/index.php/talks/robert_lang_folds_way_new_origami.html.

(page 120)

[144] Rovi. Rovi liquid media guide interface, 2009. URL http://news.cnet.

com/8301-17938_105-10288475-1.html. (page 120)

[145] Nokia. Nokia scentsory, 2008. URL http://www.tuvie.com/

scentsory-nokia-future-of-mobile-phone-concept/. (page 120)

[146] Zoopraxiscope. Zoopraxiscope, 1879. URL http://en.wikipedia.org/

wiki/Zoopraxiscope. (page 122)

[147] C. Shen, N. Lesh, and F. Vernier. Personal digital historian : story sharing

around the table. interactions, 10(2) :15{22, 2003. ISSN 1072-5520. doi :

http://doi.acm.org/10.1145/637848.637856. (pages 132 and 133)

[148] Cooliris. Cooliris navigator, 2008. URL http://www.cooliris.com/.

(pages 138 and 150)

[149] Google. Google nexus one, 2009. URL http://www.google.com/phone.

(page 138)

[150] N. Belmonte. Javascript infovis toolkits, 2008. URL http://thejit.org/.

(page 144)

[151] A. Pajitnov. Tetris, 1984. URL http://en.wikipedia.org/wiki/Tetris.

(page 157)

[152] D. Merrill, J. Kalanithi, and P. Maes. Siftables : towards sensor network

user interfaces. In TEI ’07 : Proceedings of the 1st international conference

on Tangible and embedded interaction, pages 75{78, New York, NY, USA,

2007. ACM. ISBN 978-1-59593-619-6. doi : http://doi.acm.org/10.1145/1226969.1226984. (page 161)

[153] L. Ravindranath, V. N. Padmanabhan, and P. Agrawal. Sixthsense : R�d-

based enterprise intelligence. In MobiSys ’08 : Proceeding of the 6th in-

ternational conference on Mobile systems, applications, and services, pages

253{266, New York, NY, USA, 2008. ACM. ISBN 978-1-60558-139-2. doi :

http://doi.acm.org/10.1145/1378600.1378629. (page 162)

175