Stéphane Huot - tel.archives-ouvertes.fr · 111/50/50 Équipe Conception et Modélisation...

Une nouvelle approche pourla conception créative:

De l’interprétation du dessin à main levée au prototypage d’interactions non-standard

Stéphane HuotÉcole des Mines de Nantes

12 Juillet 2005

1/50111/50/50/50

Équipe Conception et Modélisation Interactives (CMI) – Dpt. Informatique de l’École des Mines de Nantes - Stéphane Huot – Juillet 2005

Le projet GINA

! Géométrie Interactive et NAturelle (P. Macé et G. Hégron)! Construire facilement des modèles 3D

Croquis Interprétation & contraintesgéométriques Modèle 3D

Noyau mathématique[Kuzo,1999;Sosnov,2003]Interactions et environnement

2/50222/50/50/50


Problématique

! Introduire la modélisation 3D dans les premières phases de la conception architecturale

1. La tâche ?

2. Les paradigmes d’interaction ?

3. Outils et architectures logicielles ?

Conception créativeInterprétation du

dessin à main levée&

Interactionsnon-standard


Plan

I. Conception, outils et IHM

II. SvalabardSvalabard, une table à dessin virtuelle

III. Les Graphes Combinés

IV. La boîte à outils MaggLiteMaggLite

4/50444/50/50/50


Conception, outils et IHM

Conception créative

! Résoudre un problème peu ou mal défini par une solution acceptable: la conception créative

! [Edmonds&Candy,2002]:Exploration

Solutions

Évaluation

5/50555/50/50/50



Un outil privilégié: le dessin (croquis)

! « The most important Thinking Tool » [Goël&Pirolli,1989;Seitama-Hakkaainen et al.,2000]

! Extension cognitive (pose et mémorise les idées)! Support figuratif libre (n’impose pas et permet la

modification)! Mode de dialogue (communique et suggère)

[Schön,1983;Goël,1995]

6/50666/50/50/50



L’exemple de la CAO en conception architecturale

! Suivi et intégration• Archivage, recherche

! Transformation des données• Simulations (matériaux, structures, coûts, etc.)• Plans de construction

! Présentation et communication• Collaborateurs• Clients

! Phases amont de la conception ?

7/50777/50/50/50



La modélisation 3D

! Primitives géométriques• Assemblage• Opérations• Fonctionnalités ‘mathématiques’

! Interfaces complexes, interactions limitées• Multiples menus, options,

commandes• Manipulation directe souvent

‘détournée’

8/50888/50/50/50



Dans un contexte ‘créatif’:conception ou saisie ?

! Modélisation 3D et feuille blanche: analogie avec le dessin ?! Inadéquation cognitive:

• Spéculation Vs précision• Liberté Vs démarche imposée

! Inadéquation contextuelle:• Simplicité Vs complexité• Espace Vs confinement

Décalage avec le terme “Conception AO”

9/50999/50/50/50



Situation actuelle et intérêts

! Modélisation après la solution: un but• Acteurs spécialisés

! Apports envisagés: un moyen• Intégration complète au projet• Prise en compte au plus tôt de contraintes

spécifiques (simulations, normes, etc.)• Ouvrir et faciliter la création (vues, modèles,

analogies)

10/50101010/50/50/50



Améliorations par le savoir

! Bases d’objets et de contraintes spécifiques:• modeleurs architecturaux: ARCHICAD, Allplan, etc.

! Approches bases de connaissances• Raisonnement par classification [Guéna,1997]• Contraintes et bases de connaissances [Boucard,2004]

Problèmes de présentation et de manipulation des données

11/50111111/50/50/50



Améliorations par le savoir-faire:des approches interactives

expérimentales

! Des techniques en rupture avec les conventions• Reconnaissance de gestes: Sketch

[Zeleznik,1996]• Dessin libre et gestes: Teddy [Igarashi,1999]• Dessin vectoriel 3D et suggestions: Château

[Igarashi,2001]

Public et/ou problème particulier

12/50121212/50/50/50



Améliorations par le savoir-faire:des approches interactives

scientifiques

! Interprétation de dessins plans: EsQUIsE[Leclercq et al.,2002-2004], E.C. NAPKIN[Gross&Do,1996;Do,1998-2000]

! Interprétation de dessins en vue axonométrique: vectoriel Viking[Pugh,1992], à main levée [Eggli,1997] ou Digital Clay [Schweikardt&Gross,2000]

! Dessin en perspective: Projective Drawing[Tolba et al.,2001]

13/50131313/50/50/50



Les enjeux

! Dessin à main levée: vues et traits particuliers! Nouvelles interactions: généralisation et

appropriation! En général: problèmes de réalisation

Limites des outils actuels pour la conception d’interactions et d’interfaces

14/50141414/50/50/50



Limites des outils actuels pour la conception d’interactions

! Boîtes à outils WIMP standards (de XToolkit à Java Swing)• Monolithiques• Peu flexibles et extensibles

! Boîtes à outils WIMP avancées (Subarctic [Hudson&Smith,1996], Garnet/Amulet [Myers et al.,1990-1997])• Améliorent les architectures à événements• Décrivent mieux et facilitent le développement d’interactions standards• Relativement fermées aux techniques d’interaction avancées

! Boîtes à outils Post-WIMP spécialisées (Satin [Hong&Landay,2000], MID[Hourcade&Bederson,1999], WidgetTap [Greenberg&Boyle,2002], etc.)

• Focalisées sur un problème (gestes, pointeurs multiples, interfaces tangibles,etc.)

• Manque de mécanismes pour l’intégration de techniques avancées

15/50151515/50/50/50



Directions pour la conception d’IHM

! Remise en cause des outils pour la conception d’IHM:• Supporter des besoins liés à la modélisation 3D

• Rendus graphiques• Interactions avancées• Adaptabilité

• Favoriser l’utilisation de nouvelles techniques

16/50161616/50/50/50



Directions pour la modélisation 3D

Un environnement de modélisation construit autour de:

Un environnement de modélisation basé sur:

L’utilisateur

La médiatisation de la tâche

Des profils d’utilisateurs variés

Le dessin àmain levée

La compréhension

Un système adaptable, évolutif et malléable


Plan





18/50181818/50/50/50


SvalabardSvalabard, une table à dessin virtuelle

Étude du trait: protocole

! Étude sur un groupe de 21 étudiants en architecture et 4 architectes [Huotet al., 2002, 2003]• consigne : «Dessiner une vue extérieure,

unique et en perspective d’un bâtiment. Vous ne devez pas utiliser de modèle (images, photographies)[…] concevoir un nouveau bâtiment […] ne pas dessiner l’environnement extérieur (arbres, ciel, etc...)»

• Disposition expérimentale: feuille de papier et stylet à encre

19/50191919/50/50/50



Taxinomie des traits du dessin d’architecture en perspective

! Construction : lignes de fuite, repères,…! Principaux

• Primaires : premiers traits de l’enveloppe

•• SecondairesSecondaires : repassages! Détail : caractéristiques (portes, fenêtres, …)! Décoration : apparence (matériaux,

ombres,…)! Style/Amélioration : environnement (arbres,

nuages, etc.)

20/50202020/50/50/50



Analyses et résultats

! 3 phases :1. constructive (construction, primaires et secondaires)2. complétion et amélioration (secondaires, détail et

décor)3. Style

! Phase constructive en début de dessin! Temps de pause plus longs lors des changements de

phase

! Importance du style et de l’environnement

Contextes de dessin

21/50212121/50/50/50



Lignes directrices

! Interactions, environnement et retours graphiques• Utilisation, compréhension et configuration

! Réduire les contraintes de projection• Liberté de représentation

! Réduire les contraintes de sémantique du trait• Liberté d’organisation

! Réduire les contraintes de qualité du trait• Liberté de style et de retouches

22/50222222/50/50/50



Une métaphore inscrite dans les habitudes

! La table à dessin [Huot et al.,2004a]:• Feuilles de papier virtuelles• Dessin non contraint, libre• Association directe de périphériques

d’entrée aux outils de l’application (composition d’instruments[Beaudouin-Lafon,2000]) + interaction bimanuelle [Guiard, 1987]

! Reprend les principes de ‘T3’ (Tablets, Two-hands and Transparency) [Kurtenbach et al.,1997] mais adaptable selon les habitudes et les buts

23/50232323/50/50/50



Un paradigme qui exploite les aptitudes: les feuilles d’interaction

! Le dessinateur pilote l’activité• Analyse sous-jacente du dessin• Comportements du système guidés par les actions

(modes implicites)

! Organisation verticale (modèle multi-couches[Fekete,1996]) rejoignant les fonctions du dessin d’architecte [Estevez,2001]:• Spéculatif• Prescriptif• Descriptif

24/50242424/50/50/50



La feuille de dessin (1)

! Outil de dessin libre (brosses, couleurs, épaisseur)

! Tablette écran! Glissières

25/50252525/50/50/50



La feuille de dessin (2)Les calques

! Technique maîtrisée [Goldsmith,2002]

! Fixer des solutions ou les décomposer

! Ajout, ordre, ‘pliage’! Shuttle

26/50262626/50/50/50



La feuille augmentée

! Affichage des résultats des traitements

! Annotation du dessin! Saisie de propriétés! Tablette

27/50272727/50/50/50



La feuille 3D

! Manipulation du modèle 3D

! Rendu non photo-réaliste

! Magellan

28/50282828/50/50/50



Interactions globales

! Zone de gestes• Mobile et transparente

(‘See-Through tools’ [Bieret al.,1994])

ou! ‘Marking Menus’

[Kurtenbach,1993]• Gestes & items

Cohérence et intégration


Video

30/50303030/50/50/50



Traitement des entrées: une cascade de filtres

! Des traitements modulaires et configurables! Structurer les entrées reçues

• A. Des données brutes aux traits• B. Des traits aux segments ([Sezgin et al.,2001])

! Épurer et nettoyer le dessin• C. Écarter les traits inutiles pour le noyau• D & E. Prendre en compte les modifications et corriger les « imprécisions »les

(adaptation de [Shpitalni et al.,1997])

31/50313131/50/50/50



Conclusion

! Le dessin plus qu’une technique! Conjugaison de deux approches: scientifique et

expérimentale! Système modulaire et configurable:

• Au niveau des interactions et comportements• Au niveau des fonctionnalités (feuilles, filtres, etc.)

! Une architecture logicielle plus flexibleFaçonner l’outil


Plan



III. Les Graphes combinés


33/50333333/50/50/50


Les Graphes Combinés

Vue générale

! Graphe de scène:• affichage

! Graphe d’interaction:• Interactions/comportements

! ‘Graphe Combiné’ [Huot et al.,2004b]:• connexion dynamique

34/50343434/50/50/50



Graphes de scène

! Représentation de scènes 3D (OpenInventor[Wernecke,1993])

! Organisation hiérarchique• Compréhension• Optimisation

! Encapsulation de l’interaction

35/50353535/50/50/50



Graphes d’interaction

! Flot de données: modèle des configurations d’entrée ICom [Dragicevic,2004]

! Flexible, adaptable et configurable à l’exécution

! Points d’Accès à l’Interaction (IAPs) pour communiquer avec le graphe de scène

36/50363636/50/50/50



! Nœuds du graphe d’interaction qui agissent sur des classes de nœuds d’un graphe de scène

! Interactions génériqueset ‘enfichables’

IAPs: Dispositifs d’interaction

37/50373737/50/50/50



! Nœuds du graphe d’interaction qui agissent sur des instances de nœudsd’un graphe de scène

! Externalisation des capacités des objets graphiques pour:• Un contrôle direct • Des interconnexions

IAPs: Manipulateurs

38/50383838/50/50/50



! Nœuds du graphe d’interaction qui appliquent des comportements ou états sur des instances de nœudsd’un graphe de scène

! Comportements• Réutilisables• Contrôlables

IAPs: Dispositifs de comportement

39/50393939/50/50/50



! Noeuds du graphe d’interaction qui réalisent des actions à l’intérieur des limites graphiques de nœuds spécifiques d’un graphe de scène

! Externalisation d’outils (réutilisables dans d’autre applications)

! 2 modes de gestion des entrées:• Mode local (projection complète du

dispositif sur le composant)• Mode global (projection écran)

IAPs: Outils internes


Plan





41/50414141/50/50/50


La boîte à outils MaggLiteMaggLite

Implémentation du modèle d’architecture logicielle

! Réalisation des graphes de scènes:• Implémentation en Java, basée sur Java 2D

! Réalisation des graphes d’interaction et des IAPs:• Utilisation et extension de la boîte à outils ICon

[Dragicevic,2004]• Configurateur graphique dynamique• Nouvelles abstractions• Nouveaux périphériques• Nouvelles interactions

! Mécanismes de base, objets graphiques et dispositifs par défaut.

42/50424242/50/50/50



Un exemple de prototypage d’interface avec MaggLite: le puzzle

! Un constructeur d’interface basé sur le dessin: MaggLite Interface Builder (MIB)

Dessiner les objets! Connecter les interactions avec le langage

visuel de Input Configurator (ICon)Connecter les interactions

! Connexion dynamique des graphes à l’exécution

Utiliser l’interface

43/50434343/50/50/50



Le puzzle: dessin des pièces

! Outil de dessin• Sélection des objets graphiques avec une

‘toolglass’• Composants de forme libre

! Outil de gestes• Composants de forme standard• Commandes (effacement, sauvegarde,

etc.)• Annotations

! Couleurs des objets• ‘Toolglass’

44/50444444/50/50/50



Le puzzle: interactions

! Description graphique• Choix des périphériques• Choix des interactions

! Changer d’interaction! Comportements! Changer de périphérique

45/50454545/50/50/50



La librairie

! Objets graphiques:• Effets graphiques: ombres, transparence, déformations,…• Composants prédéfinis: ‘fenêtres’, calques, conteneur multicalques, conteneur

d’image, 3D OpenGl,…• Widgets: Glissière, bouton, zone de texte

! Périphériques d’entrée:• Souris, claviers, tablettes, joysticks, contrôleurs MIDI, web cams,

reconnaissance vocale,…! Dispositifs d’interaction et outils:

• Drag, ‘Paper Sheet’, poignées, pliage, gestes, dessin, fisheyes,…! Dispositifs de comportement:

• Pulsation, surlignage, ‘collage’! Abstractions pour faciliter l’extension (composants graphiques, interactions

génériques, outils)

46/50464646/50/50/50



Réalisation de SvalabardSvalabard

! Feuilles d’interactions (graphe de scène)• Feuille de dessin: composant multi-calque• Feuille augmentée: création d’un calque d’affichage vectoriel• Feuille 3D: composant 3D OpenGL

! Interactions, outils et comportements• Dispositif de sélection des objets (feuille augmentée)• Filtres de dessin• Graphe d’interaction reconfigurable

47/50474747/50/50/50


Conclusion

! Contributions• Étude du dessin en perspective et

identification de particularités• Un système de dessin numérique plus ‘libre’

se rapprochant des usages• Un nouveau modèle d’architecture logicielle

et ses preuves de faisabilité (MaggLiteMaggLite et SvalabardSvalabard)

48/50484848/50/50/50


Apports

! Une approche instrumentée du dessin numérique:• Plus de liberté dans la démarche• Interactions cohérentes et associations de périphériques• Système adaptable et configurable

! Un modèle d’architecture logicielle pour les applications interactives:• Développeurs: flexible et modulaire• Concepteurs d’IHMs: dynamique et favorise l’exploration• Utilisateurs: adaptable et configurable

49/50494949/50/50/50


Applications

!! SvalabardSvalabard• Autres domaines (dessin

technique, dessin artistique, etc.)• Autres plateformes (TabletPC,

réalité augmentée, travail collaboratif, etc)

!! MaggLiteMaggLite• Nouvelles interactions• Prototypage• Enseignement

50/50505050/50/50/50


Perspectives

!! SvalabardSvalabard• Traitements du dessin (profils utilisateurs, reconnaissance de

formes, reconstruction 3D)• Évaluation (choix de conception, filtres de traitement,

utilisabilité et adaptabilité)• Évolution vers un système de suggestions• Plateforme pour la composition d’outils informatiques

‘créatifs’ ?! Les graphes combinés

• Extension du modèle• Compléter et utiliser MaggLite MaggLite • Du prototype à un AGL pour la conception d’IHM ?

51/50515151/50/50/50


Applications « créatives » et ingénierie des IHMs

! Concevoir de nouveaux outils est une tâche de conception créative

! Les limites des applications ‘créatives’ ne doivent pas être dictées par les limites de leurs concepteurs mais par celles de leurs utilisateurs… [Huot&Dumas]


Merci

Stéphane Huot - tel.archives-ouvertes.fr · 111/50/50 Équipe Conception et Modélisation...

Documents

Transcript of Stéphane Huot - tel.archives-ouvertes.fr · 111/50/50 Équipe Conception et Modélisation...