28
Enrichir les menus linéaires par des gestes Gilles Bailly Anne Roudaut Eric Lecolinet Laurence Nigay Leaf Menus

Enrichir les menus linéaires par des gestes Gilles Bailly Anne Roudaut Eric Lecolinet Laurence Nigay Leaf Menus

Embed Size (px)

Citation preview

Page 1: Enrichir les menus linéaires par des gestes Gilles Bailly Anne Roudaut Eric Lecolinet Laurence Nigay Leaf Menus

Enrichir les menus linéaires par des gestes

Gilles BaillyAnne RoudautEric LecolinetLaurence Nigay

Leaf Menus

Page 2: Enrichir les menus linéaires par des gestes Gilles Bailly Anne Roudaut Eric Lecolinet Laurence Nigay Leaf Menus

Motivations

Page 3: Enrichir les menus linéaires par des gestes Gilles Bailly Anne Roudaut Eric Lecolinet Laurence Nigay Leaf Menus

Motivations

2

Contexte : Interaction sur dispositifs mobiles

• Petits écrans• Entrées limitées (Pas de clavier)• Mobilité (Utilisation au pouce)• Fonctionnalités grandissantes

Techniques de menu efficaces

Page 4: Enrichir les menus linéaires par des gestes Gilles Bailly Anne Roudaut Eric Lecolinet Laurence Nigay Leaf Menus

Motivations

3

Techniques de menus :

Menus linéairesMenus circulaires

(Marking Menu [Kurtenbach 91])

Mode NoviceMode Expert

Page 5: Enrichir les menus linéaires par des gestes Gilles Bailly Anne Roudaut Eric Lecolinet Laurence Nigay Leaf Menus

Motivations

4

Techniques de menus

Transition novice/expertUtilisation des 2 mainsSélection aveugleNombre de commandesOccupation spatialeOccultation

Linéaire CirculaireVS

Page 6: Enrichir les menus linéaires par des gestes Gilles Bailly Anne Roudaut Eric Lecolinet Laurence Nigay Leaf Menus

Motivations

4

Techniques de menus

• Transition novice/expertUtilisation des 2 mainsSélection aveugleNombre de commandesOccupation spatialeOccultation

Linéaire VS

-+

Raccourcis claviers compliqués

Même geste (angulaire) en mode novice et expert

Circulaire

Page 7: Enrichir les menus linéaires par des gestes Gilles Bailly Anne Roudaut Eric Lecolinet Laurence Nigay Leaf Menus

Motivations

5

Techniques de menus

• Transition novice/expert• Utilisation des 2 mains

Sélection aveugleNombre de commandesOccupation spatialeOccultation

Linéaire VS

-+-+

Clavier + Ecran tactile Ecran tactile seul

Circulaire

Page 8: Enrichir les menus linéaires par des gestes Gilles Bailly Anne Roudaut Eric Lecolinet Laurence Nigay Leaf Menus

Motivations

6

Techniques de menus

• Transition novice/expert• Utilisation des 2 mains• Sélection aveugle

Nombre de commandesOccupation spatialeOccultation

Linéaire VS

-+-+-+

Distance Angle

Circulaire

Page 9: Enrichir les menus linéaires par des gestes Gilles Bailly Anne Roudaut Eric Lecolinet Laurence Nigay Leaf Menus

Motivations

7

Techniques de menus

• Transition novice/expert• Utilisation des 2 mains• Sélection aveugle• Nombre de commandes

Occupation spatialeOccultation

Linéaire VS

-+-+-++-

Jusqu’à 15 commandes

Limité par le secteur angulaire8 commandes maximum

Circulaire

Page 10: Enrichir les menus linéaires par des gestes Gilles Bailly Anne Roudaut Eric Lecolinet Laurence Nigay Leaf Menus

Motivations

8

Techniques de menus

• Transition novice/expert• Utilisation des 2 mains• Sélection aveugle• Nombre de commandes• Occupation spatiale

Occultation

Linéaire VS

-+-+-++-+-

Placement différent selon la position de la cible

Dépassement des bords de l’écran

Circulaire

Page 11: Enrichir les menus linéaires par des gestes Gilles Bailly Anne Roudaut Eric Lecolinet Laurence Nigay Leaf Menus

Motivations

9

Techniques de menus

• Transition novice/expert• Utilisation des 2 mains• Sélection aveugle• Nombre de commandes• Occupation spatiale• Occultation

Linéaire VS

-+-+-++-+-+-

¼ de la cible La cible entière …… et une partie du menu

Circulaire

Page 12: Enrichir les menus linéaires par des gestes Gilles Bailly Anne Roudaut Eric Lecolinet Laurence Nigay Leaf Menus

Motivations

9

Techniques de menus

• Transition novice/expert• Utilisation des 2 mains• Sélection aveugle• Nombre de commandes• Occupation spatiale• Occultation

Linéaire VS

-+-+-++-+-+-

Menu linéaire avec raccourcis gestuels : Leaf Menus

Circulaire

Page 13: Enrichir les menus linéaires par des gestes Gilles Bailly Anne Roudaut Eric Lecolinet Laurence Nigay Leaf Menus

Design

Page 14: Enrichir les menus linéaires par des gestes Gilles Bailly Anne Roudaut Eric Lecolinet Laurence Nigay Leaf Menus

Design

11

Menu linéaire enrichi des gestes du Flower Menu [Bailly 08]

Mode Novice Mode Expert

Page 15: Enrichir les menus linéaires par des gestes Gilles Bailly Anne Roudaut Eric Lecolinet Laurence Nigay Leaf Menus

Design

16

Page 16: Enrichir les menus linéaires par des gestes Gilles Bailly Anne Roudaut Eric Lecolinet Laurence Nigay Leaf Menus

Design

16

Menu linéaire enrichi des gestes du Flower Menu [Bailly 08]

Mode Novice Mode Expert

Page 17: Enrichir les menus linéaires par des gestes Gilles Bailly Anne Roudaut Eric Lecolinet Laurence Nigay Leaf Menus

Design

14

• Hierarchique (Multi-Strokes [Zao 04])

• 15 items (sur mobile), 7 raccourcis

Page 18: Enrichir les menus linéaires par des gestes Gilles Bailly Anne Roudaut Eric Lecolinet Laurence Nigay Leaf Menus

Design

15

• Hierarchique (Multi-Strokes [Zao 04])

- Même distance relative entre point activation et item

- Plusieurs gestes par commande

• Organisation symétrique

• 15 items (sur mobile), 7 raccourcis

Page 19: Enrichir les menus linéaires par des gestes Gilles Bailly Anne Roudaut Eric Lecolinet Laurence Nigay Leaf Menus

Evaluation

Page 20: Enrichir les menus linéaires par des gestes Gilles Bailly Anne Roudaut Eric Lecolinet Laurence Nigay Leaf Menus

Evaluation

17

Item à sélectionner Lieu d’activation

du menu

Page 21: Enrichir les menus linéaires par des gestes Gilles Bailly Anne Roudaut Eric Lecolinet Laurence Nigay Leaf Menus

Evaluation

17

7 items4 positions

Soit 28 sélections répétées 10 fois (10 blocs)

Consigne: sélectionner l’item le plus rapidement et précisément que possible

Item à sélectionner Lieu d’activation

du menu

Page 22: Enrichir les menus linéaires par des gestes Gilles Bailly Anne Roudaut Eric Lecolinet Laurence Nigay Leaf Menus

Evaluation

18

Résultats

Mode novice correct Mode expert correct

91,1%81,8%

Page 23: Enrichir les menus linéaires par des gestes Gilles Bailly Anne Roudaut Eric Lecolinet Laurence Nigay Leaf Menus

Evaluation

19

Résultats

• Gestes diagonaux-courbés ( ) plus difficiles à retenir

• Résultats sous estimés (ex : 12 % geste ( ) mal reconnus)• Apprentissage de la symétrie

Nombre de sélections correctes en mode expert

Page 24: Enrichir les menus linéaires par des gestes Gilles Bailly Anne Roudaut Eric Lecolinet Laurence Nigay Leaf Menus

Evaluation

20

Apprentissage de la symétrie au premier bloc

- Chaque configuration est effectuée 1 fois

- Mais 15 % à 34 % en mode expert réussi

-> Capable d’utiliser le mode expert sans avoir répété le geste

Page 25: Enrichir les menus linéaires par des gestes Gilles Bailly Anne Roudaut Eric Lecolinet Laurence Nigay Leaf Menus

Conclusion

Page 26: Enrichir les menus linéaires par des gestes Gilles Bailly Anne Roudaut Eric Lecolinet Laurence Nigay Leaf Menus

Conclusion

22

Leaf menu : Enrichir les menus linéaires par des raccourcis gestuels

Evaluation : Apprentissage rapide des gestes et de la symétrie

Page 27: Enrichir les menus linéaires par des gestes Gilles Bailly Anne Roudaut Eric Lecolinet Laurence Nigay Leaf Menus

Conclusion

22

Perspectives : Améliorer le module de reconnaissanceComparaison à des menus circulairesFacteurs de mémorisation

Leaf menu : Enrichir les menus linéaires par des raccourcis gestuels

Evaluation : Apprentissage rapide des gestes et de la symétrie

Page 28: Enrichir les menus linéaires par des gestes Gilles Bailly Anne Roudaut Eric Lecolinet Laurence Nigay Leaf Menus

Merci !