Vers un prototypage des interfaces graphiques incluant vraiment l’utilisateur final Jean Vanderdonckt, Adrien Coyette Belgian Lab. of Computer-Human Interaction (BCHI) Unité de Systèmes d’Information (ISYS) Louvain School of Management (IAG) Université catholique de Louvain (UCL) http://www.isys.ucl.ac.be/bchi My name is Sophie Lepreux. The work, which is presented here, has been realized with Jean Vanderdonckt and Benjamin Michotte at the BCHI team. This research is realized in a post-doc context. The presentation is entitled « Visual Design of user interfaces by (de)composition ». 1 ERGO-IA’2006, 13 octobre 2006

Introduction et motivations pour le prototypage Plan de l’exposé Introduction et motivations pour le prototypage Un référentiel pour le prototypage des interfaces graphiques Quelques outils de support au prototypage à un niveau de fidélité Élevée Modérée Basse Notre proposition de support au prototypage : SketchiXML & GrafiXML Fonctionnalités Problème des représentations Problème de la personnalisation Problème de la progression Conclusion I will begin with an introduction including the visual GUI design ad the reusability in the design process. Then a state of the Art brings us to define our goal. Then the framework based on the Cameleon reference framework and UsiXML is presented. The proposition is presented, dealing with the choice of a tree algebra formalism and the definitions of operators. A case study based on these operator is proposed. The design supported tools : GrafiXML and the new plug-in ComposiXML are presented At last, we will conclude about this work and present the prospect. 2 ERGO-IA’2006, 13 octobre 2006

Pourquoi prototyper une interface graphique? Introduction Pourquoi prototyper une interface graphique? Pour obtenir le plus rapidement possible une interface conforme aux besoins des utilisateurs: rester compatible avec l’approche centrée sur l’utilisateur éviter une validation tardive Pour découvrir le plus tôt possible les problèmes ergonomiques: “Vous pouvez résoudre le problème maintenant avec une gomme sur la planche à dessin ou plus tard avec un marteau-pilon” (Frank Lloyd Wright) Pour des raisons de coût: minimiser le temps de production minimiser les ressources impliquées (ergonomes, utilisateurs finaux, concepteur, responsable marketing, graphiste,…) Pour des raisons de faisabilité: Faisabilité ergonomique vs informatique souhaitable ergonomiquement, mais pas informatiquement Souhaitable informatiquement, mais pas ergonomique Faisabilité économique 3 ERGO-IA’2006, 13 octobre 2006

Quelles sont les formes du prototypage des interfaces graphiques? Introduction Quelles sont les formes du prototypage des interfaces graphiques? Support physique: réalisation Sur papier: feuilles, post-it de couleurs, crayon, surligneurs, gomme, typex, transparents, colle, etc. 4 ERGO-IA’2006, 13 octobre 2006 [Landay03]

Quelles sont les formes du prototypage des interfaces graphiques? Introduction Quelles sont les formes du prototypage des interfaces graphiques? Support physique: réalisation Sur tableau blanc: feutres et effaceurs 5 ERGO-IA’2006, 13 octobre 2006

Quelles sont les formes du prototypage des interfaces graphiques? Introduction Quelles sont les formes du prototypage des interfaces graphiques? Support physique: avantages Facilité de réalisation: on peut démarrer tout de suite Mise en œuvre simple et naturelle des ressources Modifiabilité aisée, coût très bas Reste largement informel Encourage la conception participative et itérative Couvre tout type de dessin (architecture, layout, etc.) Evaluer Concevoir Prototyper 6 ERGO-IA’2006, 13 octobre 2006 [Landay03]

Quelles sont les formes du prototypage des interfaces graphiques? Introduction Quelles sont les formes du prototypage des interfaces graphiques? Support physique: inconvénients Difficulté de prototyper les aspects dynamiques, avancés A l’intérieur d’une fenêtre/page Entre des fenêtres/pages Difficulté de conserver l’historique du prototypage Difficulté de la capture et de la reproduction de la version finale 7 ERGO-IA’2006, 13 octobre 2006

Quelles sont les formes du prototypage des interfaces graphiques? Introduction Quelles sont les formes du prototypage des interfaces graphiques? Support physique: inconvénients Difficulté de progresser vers l’interface finale Faisabilité Interprétations multiples 8 ERGO-IA’2006, 13 octobre 2006 © scottadams@aol.com

Quelles sont les formes du prototypage des interfaces graphiques? Introduction Quelles sont les formes du prototypage des interfaces graphiques? Support informatique: réalisation dans un éditeur, un outil de prototypage 9 ERGO-IA’2006, 13 octobre 2006

Editeurs d’interface: comment font-ils? Fenêtre de l’éditeur d’interface Exemple d’interface Arborescence des objets de l’interface Palette des objets interactifs 10 ERGO-IA’2006, 13 octobre 2006 [Szekely96]

Editeurs d’interface: exemple Interface souhaitée: planification de projet 11 ERGO-IA’2006, 13 octobre 2006 [Szekely96]

Editeurs d’interface: solution partielle Interface souhaitée Interface obtenue Tables avec données dynamiques Diagramme de Gantt Manipulation directe des activités Fenêtre avec barre de menus Barre d’outils Objets interactifs statiques Pas de navigation 12 ERGO-IA’2006, 13 octobre 2006 [Szekely96]

Editeurs d’interface: solution partielle Les éditeurs d’interface sont incapables de décrire leur propre interface (Propriété du bootstrapping) 13 ERGO-IA’2006, 13 octobre 2006 [Szekely96]

Quelles sont les formes du prototypage des interfaces graphiques? Introduction Quelles sont les formes du prototypage des interfaces graphiques? Support informatique Avantages: Plus facile de conserver un historique du prototypage Possible de réaliser, tester un prototype à distance Possible d’obtenir un prototype proche de l’interface finale Limites: La couverture du prototype dépend des fonctions prévues dans l’outil La modifiabilité reste tout de même coûteuse Les utilisateurs finaux peuvent croire que c’est déjà l’interface finale (trop formel) La multiplicité des outils rend le choix difficile 14 ERGO-IA’2006, 13 octobre 2006

Un référentiel pour le prototypage des interfaces graphiques Fidélité d’un prototype Exprime la similarité entre la représentation de l’interface prototypée et celle de l’interface finale Elevée (high-fidelity, hi-fi): si la représentation du prototype est la plus proche possible de celle de l’interface finale Basse (low-fidelity, lo-fi): si la représentation du prototype évoque celle de l’interface finale sans la représenter en détails Modérée (mid-fidelity, mi-fi): si la représentation du prototype constitue une simplification de celle de l’interface finale Prototype Mono-fidélité: un seul niveau de fidélité à la fois Multi-fidélité: plusieurs niveaux de fidélité sont impliqués Mixte: toutes en même temps Distribuée: une à la fois [Meyer05] 15 ERGO-IA’2006, 13 octobre 2006

Un référentiel pour le prototypage des interfaces graphiques Trajectoires de fidélité Beaucoup de trajectoires (path) possibles en principe, mais rarement combinées Prototype à un niveau de fidélité élevée de fidélité modérée de fidélité basse 16 ERGO-IA’2006, 13 octobre 2006

17 ERGO-IA’2006, 13 octobre 2006 [Coyette05, Engleberg02] Fidélité\Critère Basse Moyenne Elevée Phase de développement Elicitation des besoins, conception préliminaire, conceptualisation, début de l’application Conception continue, validation de l’ergonomie du prototype, application en cours de route Conception détaillée, application en fin de spécification Contenu Présentation surtout Présentation, contenu, layout, début de la navigation Présentation et navigation, contenu, layout, fonctionnalités Usage Exploration, découverte, évocation, communication Simulation, raffinement, itération, amélioration, validation de l’utilisabilité, test utilisateur Propagation générale à l’application, spécification finale, documentation, marketing Type de prototypage Horizontal Diagonal Vertical Type d’approche Ascendante (bottom up) Expansive (middle-out) Descendante (top down) Facilité de changement Modérée Très faible Coût Faible Modéré Elevé Temps requis Naturalité de la représentation Très elevée Niveau de détail Fréquence d’itération Très élevée Niveau d’interactivité Représentation Esquisse Dessin, dessin vectoriel Présentation et navigation réelles Convient pour… Des applications de grande taille Des applications moyennes Des applications de taille réduite ou des fragments d’autres types d’application Niveau des spécifications Abstrait Mixte Concret Outils en général Denim [14], FreeForms [24], GUILayout [5], Paper [27], JavaSketchIt [8], Silk [17], SketchRead [1] EtchaPad [22], ExcelProto [3], MidFi [12], ProtoMixer [23] Editeurs d’interface fournis avec les environnements intégrés de développement Outils UsiXML SketchiXML [9,10,11] VisiXML [30] GrafiXML [19,20], FormiXML [30] URL http://www.usixml.org/index. php?view=page&idpage=29 http://www.usixml.org/index. php?view=page&idpage=11 http://www.usixml.org/index. php?view=page&idpage=10 17 ERGO-IA’2006, 13 octobre 2006 [Coyette05, Engleberg02]

Un référentiel pour le prototypage des interfaces graphiques Types de prototypage Prototype vertical Prototype horizontal Interface homme-machine Application interactive complète Couche d’abstraction Noyau fonctionnel Prototype diagonal Interface homme-machine Couche d’abstraction Noyau fonctionnel Application interactive complète 18 ERGO-IA’2006, 13 octobre 2006 [Nielsen93]

Un référentiel pour le prototypage des interfaces graphiques Types de prototypage Présentation Navigation globale locale Interface homme-machine Application interactive complète Couche d’abstraction Noyau fonctionnel 19 ERGO-IA’2006, 13 octobre 2006

Un référentiel pour le prototypage des interfaces graphiques Types de prototypage Couche d’abstraction Noyau fonctionnel Présentation Navigation globale locale Prototype navigationnel global d’abord Couche d’abstraction Noyau fonctionnel Présentation Navigation globale locale Prototype présentationnel d’abord Couche d’abstraction Noyau fonctionnel Présentation Navigation globale locale Prototype navigationnel local d’abord 20 ERGO-IA’2006, 13 octobre 2006

Quelques outils de support au prototypage GUILayout: fidélité très basse, présentationnel seulement 21 ERGO-IA’2006, 13 octobre 2006

Quelques outils de support au prototypage SILK: fidélité basse, présentationnel 22 ERGO-IA’2006, 13 octobre 2006 [Landay95]

Quelques outils de support au prototypage DEMAIS: multi-fidélité mixte, présentationnel 23 ERGO-IA’2006, 13 octobre 2006 [Bailey03]

Quelques outils de support au prototypage FreeForm: basse fidélité, présentationnel d’abord 24 ERGO-IA’2006, 13 octobre 2006 [Plimmer04]

Quelques outils de support au prototypage DENIM: présentationnel et navigationnel 25 ERGO-IA’2006, 13 octobre 2006 [Lin01]

Notre proposition de support au prototypage Trilogie: Fidélité basse: SketchiXML Fidélité moyenne: VisiXML Fidélité elevée: GrafiXML Cadre de référence Cameleon Partage de fichier UsiXML 26 ERGO-IA’2006, 13 octobre 2006 [Calvary03]

Notre proposition de support au prototypage Interopérabilité des outils: import/export en UsiXML UsiXML = USer Interface exTensible Markup Language Language de description d’interface utilisateur compatible XML (UIDL) pour Web Java Des interfaces en environnements multi-fenêtrés Des interfaces multimodales (graphiques, vocales, tactiles) Des interfaces en réalité virtuelle Accessible à http://www.usixml.org Envoyez-nous un e-mail pour obtenir le CD-ROM Rejoignez le UsiXML Consortium en s’affiliant en ligne sur le site (register) 27 ERGO-IA’2006, 13 octobre 2006 [Limbourg04]

Développé par Adrien Coyette SketchiXML est un éditeur d’interface à niveau de fidélité basse permettant de concevoir une interface graphique indépendante de toute plate-forme cible et de l’enregistrer dans le format UsiXML. Export de l’interface en UsiXML, UIML (www.uiml.org) Fonctionne sous Windows, Linux et MacOs X Disponible en anglais Besoins à satisfaire Eviter de perdre l’effort (Principe de récupération) Assurer une couverture de conception large Garantir un haut taux de reconnaissance (Principe de non-obstrusion) Maintenir la neutralité par rapport au langage cible Assurer la naturalité des opérations (Principe de naturalité) Disposer d’un traitement flexible (Principe de non-obstrusion) Maintenir l’indépendance par rapport au contexte d’utilisation Fournir des fonctions d’édition bien définies Assurer la transition avec les autres niveaux de fidélité (principe de récupération) Permettre des vues à différents niveaux de détails (zoom) Supporter tant le prototypage présentationnel que navigationnel 28 ERGO-IA’2006, 13 octobre 2006

Notre proposition de support au prototypage Architecture multi-agent: adaptable flexible modulaire 29 ERGO-IA’2006, 13 octobre 2006

Notre proposition de support au prototypage Interfaces complexes (multi-fidélité) 30 ERGO-IA’2006, 13 octobre 2006

Notre proposition de support au prototypage Prototypage pour des plate-formes multiples: rendu dans GrafiXML 31 ERGO-IA’2006, 13 octobre 2006

Developpé par Benjamin Michotte GrafiXML est un éditeur d’interface à niveau de fidélité élevée permettant de concevoir une interface graphique indépendamment de la plate-forme cible et de l’enregistrer dans le format UsiXML. Caractéristiques Export de l’interface dans les formats Java source (basé sur Swing) XHTML 1.0 Strict XUL Fonctionne sous Windows, Linux and MacOs X Disponible en français, anglais, espagnol et portugais Basé sur un système de plug-ins pour Exporter une interface (ingénierie progressive) Importer une interface (ingénierie régressive) Gérer un projet de développement Transformer une interface pour une plate-forme e type PDA Permet de spécifier un contexte d’utilisation associé utilisateur, plate-forme, environnement The CUI model of UsiXML can be manipulated with the GrafiXML editor. This editor allows to design the structure of the interfaces and to adapt them to the user. For example, It allows to adapt the text to the mother tongue of the user (langue maternelle or native language). 32 ERGO-IA’2006, 13 octobre 2006

Options des composants Onglet de composition Options des composants Barre d’outils des composants Fenêtre de conception A grafiXMl project is in a design window, which can be modified with the support of the toolbar and the components options are presented in the left part. 33 ERGO-IA’2006, 13 octobre 2006

Réutilisation de gabarit Gabarit réutilisé A grafiXMl project is in a design window, which can be modified with the support of the toolbar and the components options are presented in the left part. 34 ERGO-IA’2006, 13 octobre 2006

Localisation des interfaces GrafiXML permet de créer une interface pour différentes langues simultanément Support pour les mnémoniques et les raccourcis 35 ERGO-IA’2006, 13 octobre 2006

Prévisualisation de l’interface A tout moment, on peut prévisualiser le rendu de l’interface dans la langue voulue 36 ERGO-IA’2006, 13 octobre 2006

Un click sur l’arbre dévoile la portion correspondante en UsiXML Editeur XML GrafiXML comporte un éditeur permettant de visualiser l’interface en cours de conception dans le langage UsiXML On peut éditer certaines portions des spécifications Un click sur l’arbre dévoile la portion correspondante en UsiXML Editer le code UsiXML Voir les attributs 37 ERGO-IA’2006, 13 octobre 2006

GrafiXML fonctionne avec un système de plug-ins Installation/désintallation via le gestionnaire de plug-ins Mise à jour directe en un clic Voir les informations du plug-in Choisir les plug-ins à installer Double-cliquer sur un plug-in Et les installer Cliquer sur « add » pour ouvrir le téléchargeur 38 ERGO-IA’2006, 13 octobre 2006

Exemple de Plug-in: ComposiXML Fonctionne avec la version 1.6.4 de UsiXML Est basé sur des opérateurs issus de l’algèbre des arbres Spécification Sélection Troncature Projection Union normale Intersection Union unique Différence (droite) Fusion Equivalence Différence (gauche) 39 ERGO-IA’2006, 13 octobre 2006 [Lepreux06]

Edition de l’exemple en haute fidélité Prototypage présentationnel 40 ERGO-IA’2006, 13 octobre 2006

Edition de l’exemple en haute fidélité Prototypage navigationnel global (vs. local) 41 ERGO-IA’2006, 13 octobre 2006

Edition de l’exemple en haute fidélité Rendu de l’interface exportée en XHTML 42 ERGO-IA’2006, 13 octobre 2006

Notre proposition de support au prototypage Problème de la représentation la fidélité basse: quelle représentation choisir et pour qui? Etude expérimentale 2 groupes (concepteurs, utilisateurs) de 30 sujets aléatoirement sélectionnés catalogue de 32 widgets courants (multi-plate-forme, exemple, desc.,…) 43 ERGO-IA’2006, 13 octobre 2006

Notre proposition de support au prototypage Problème de la représentation la fidélité basse: quelle représentation choisir et pour qui? Etude expérimentale Première phase: dessin libre sur base du catalogue, puis classé par naturalité, nombre et type de forme, confusion. 44 ERGO-IA’2006, 13 octobre 2006

Notre proposition de support au prototypage Deuxième phase: test des représentations (préférence) 45 ERGO-IA’2006, 13 octobre 2006

Notre proposition de support au prototypage Deuxième phase: test des représentations (performance) Taux de reconnaissance global : 94% Pas de différence notable entre les concepteurs et les utilisateurs 46 ERGO-IA’2006, 13 octobre 2006

Notre proposition de support au prototypage Catalogue des widgets 47 ERGO-IA’2006, 13 octobre 2006

Notre proposition de support au prototypage Catalogue des widgets 48 ERGO-IA’2006, 13 octobre 2006

Notre proposition de support au prototypage Catalogue des widgets 49 ERGO-IA’2006, 13 octobre 2006 SketchiXML: A Sketching Tool for Designing User Interfaces for Information Systems

Notre proposition de support au prototypage Catalogue des widgets 50 ERGO-IA’2006, 13 octobre 2006

51 ERGO-IA’2006, 13 octobre 2006

Notre proposition de support au prototypage Deuxième problème : la personnalisation Le besoin et le souhait de personnalisation demeurent Le besoin d’extension du catalogue demeurera perpétuel Solution: système de reconnaissance de geste personnalisable 52 ERGO-IA’2006, 13 octobre 2006

Développé par Manuel Van Sluys VisiXML Développé par Manuel Van Sluys VisiXML est un éditeur d’interface à niveau de fidélité modérée permettant de concevoir une interface graphique pour la plate-forme cible Microsoft Windows et de l’enregistrer dans le format UsiXML. Caractéristiques Export de l’interface en UsiXML Développé comme un plug-in de Microsoft Visio Fonctionne sous Windows et MacOs X Disponible en anglais 53 ERGO-IA’2006, 13 octobre 2006

Développé par Manuel Van Sluys VisiXML Développé par Manuel Van Sluys Barre des composants graphiques individuels de UsiXML Fenêtre en cours de conception Barre d’outils VisiXML Feuille des propriétés auxiliaires 54 ERGO-IA’2006, 13 octobre 2006 [Van Sluys04]

Trajectoires de prototypage (révision) Prototype à fidélité élevée : GrafiXML modérée : VisiXML basse : SketchiXML Check box Identification label Niveau de fidélité Faible Modérée Elevée Finale 55 ERGO-IA’2006, 13 octobre 2006

Pour la fidélité basse: SketchiXML Conclusion (1/2) Pour la fidélité basse: SketchiXML Système de reconnaissance de forme basée sur grammaire de forme Système de reconnaissance de geste Système de reconnaissance de l’écriture Mono ou Multi-fidélité Prototypage présentationnel vs. navigationnel Récupération dans GrafiXML Pour la fidélité modérée: VisiXML Dessin orienté sur une plate-forme Prototypage présentationnel seulement Pour la fidélité élevée: GrafiXML Edition de la fidélité précédente Mono-fidélité 56 ERGO-IA’2006, 13 octobre 2006

Ce qui plaide pour un prototypage incluant vraiment l’utilisateur Conclusion (2/2) Ce qui plaide pour un prototypage incluant vraiment l’utilisateur L’utilisateur ne dessine pas moins bien que le concepteur L’utilisateur, autant que le concepteur, apprend vite à dessiner L’utilisateur se sent plus impliqué en fidélité basse, qu’il dessine ou non, de manière individuelle ou collaborative Le prototypage est naturel, sans contrainte La validation est quasiment instantanée Ce qui reste à faire Améliorer l’expressivité des représentations nouvelles Couvrir davantage le prototypage navigationnel local Valider l’utilisation globale de l’approche en vraie grandeur Supporter la simulation directe (sans transition) Notre souhait: inclure vraiment l’utilisateur final en lui donnant une représentation qu’il peut comprendre (pas UML!), qu’il peut modifier et valider. 57 ERGO-IA’2006, 13 octobre 2006

Labo. BCHI: par ordre alphabétique Remerciements Labo. BCHI: par ordre alphabétique Adrien Coyette : SketchiXML (fidélité basse) Sophie Lepreux: ComposiXML (composition en fidélité élevée) Quentin Limbourg: UsiXML Benjamin Michotte : GrafiXML (fidélité élevée) Manuel Van Sluys : VisiXML (fidélité modérée) Co-présidents scientifiques d’ERGO-IA’2006 E. Brangier Ch. Kolski J.-R. Ruault Jean-Roch Guiresse, Sophie Paolacci, Michèle Rouet, ESTIA 58 ERGO-IA’2006, 13 octobre 2006

Merci beaucoup pour votre attention http://www.usixml.org User Interface eXtensible Markup Language UsiXML CD-ROM Release 1 est disponible http://www.similar.cc Réseau d’excellence européen consacré aux interfaces multimodales Pour plus d’information et téléchargement, http://www.isys.ucl.ac.be/bchi Un merci tout particulier à l’ensemble de l’équipe! 59 ERGO-IA’2006, 13 octobre 2006