enrichir les menus linéaires par des gestes gilles bailly anne roudaut eric lecolinet laurence...
TRANSCRIPT
![Page 1: Enrichir les menus linéaires par des gestes Gilles Bailly Anne Roudaut Eric Lecolinet Laurence Nigay Leaf Menus](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7295/html5/thumbnails/1.jpg)
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](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7295/html5/thumbnails/2.jpg)
Motivations
![Page 3: Enrichir les menus linéaires par des gestes Gilles Bailly Anne Roudaut Eric Lecolinet Laurence Nigay Leaf Menus](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7295/html5/thumbnails/3.jpg)
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](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7295/html5/thumbnails/4.jpg)
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](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7295/html5/thumbnails/5.jpg)
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](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7295/html5/thumbnails/6.jpg)
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](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7295/html5/thumbnails/7.jpg)
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](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7295/html5/thumbnails/8.jpg)
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](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7295/html5/thumbnails/9.jpg)
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](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7295/html5/thumbnails/10.jpg)
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](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7295/html5/thumbnails/11.jpg)
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](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7295/html5/thumbnails/12.jpg)
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](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7295/html5/thumbnails/13.jpg)
Design
![Page 14: Enrichir les menus linéaires par des gestes Gilles Bailly Anne Roudaut Eric Lecolinet Laurence Nigay Leaf Menus](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7295/html5/thumbnails/14.jpg)
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](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7295/html5/thumbnails/15.jpg)
Design
16
![Page 16: Enrichir les menus linéaires par des gestes Gilles Bailly Anne Roudaut Eric Lecolinet Laurence Nigay Leaf Menus](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7295/html5/thumbnails/16.jpg)
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](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7295/html5/thumbnails/17.jpg)
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](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7295/html5/thumbnails/18.jpg)
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](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7295/html5/thumbnails/19.jpg)
Evaluation
![Page 20: Enrichir les menus linéaires par des gestes Gilles Bailly Anne Roudaut Eric Lecolinet Laurence Nigay Leaf Menus](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7295/html5/thumbnails/20.jpg)
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](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7295/html5/thumbnails/21.jpg)
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](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7295/html5/thumbnails/22.jpg)
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](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7295/html5/thumbnails/23.jpg)
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](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7295/html5/thumbnails/24.jpg)
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](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7295/html5/thumbnails/25.jpg)
Conclusion
![Page 26: Enrichir les menus linéaires par des gestes Gilles Bailly Anne Roudaut Eric Lecolinet Laurence Nigay Leaf Menus](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7295/html5/thumbnails/26.jpg)
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](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7295/html5/thumbnails/27.jpg)
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](https://reader035.vdocuments.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7295/html5/thumbnails/28.jpg)
Merci !