La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

1 ERGO-IA2006, 13 octobre 2006 Vers un prototypage des interfaces graphiques incluant vraiment lutilisateur final Jean Vanderdonckt, Adrien Coyette Belgian.

Présentations similaires


Présentation au sujet: "1 ERGO-IA2006, 13 octobre 2006 Vers un prototypage des interfaces graphiques incluant vraiment lutilisateur final Jean Vanderdonckt, Adrien Coyette Belgian."— Transcription de la présentation:

1 1 ERGO-IA2006, 13 octobre 2006 Vers un prototypage des interfaces graphiques incluant vraiment lutilisateur final Jean Vanderdonckt, Adrien Coyette Belgian Lab. of Computer-Human Interaction (BCHI) Unité de Systèmes dInformation (ISYS) Louvain School of Management (IAG) Université catholique de Louvain (UCL)

2 2 ERGO-IA2006, 13 octobre 2006 Plan de lexposé 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

3 3 ERGO-IA2006, 13 octobre 2006 Introduction Pourquoi prototyper une interface graphique? –Pour obtenir le plus rapidement possible une interface conforme aux besoins des utilisateurs: rester compatible avec lapproche centrée sur lutilisateur é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

4 4 ERGO-IA2006, 13 octobre 2006 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. [Landay03]

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

6 6 ERGO-IA2006, 13 octobre 2006 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.) [Landay03] Prototyper Concevoir Evaluer

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

8 8 ERGO-IA2006, 13 octobre 2006 Introduction Quelles sont les formes du prototypage des interfaces graphiques? –Support physique: inconvénients Difficulté de progresser vers linterface finale –Faisabilité –Interprétations multiples ©

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

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

11 11 ERGO-IA2006, 13 octobre 2006 Editeurs dinterface: exemple Interface souhaitée: planification de projet [Szekely96]

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

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

14 14 ERGO-IA2006, 13 octobre 2006 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 dobtenir un prototype proche de linterface finale –Limites: La couverture du prototype dépend des fonctions prévues dans loutil La modifiabilité reste tout de même coûteuse Les utilisateurs finaux peuvent croire que cest déjà linterface finale (trop formel) La multiplicité des outils rend le choix difficile

15 15 ERGO-IA2006, 13 octobre 2006 Un référentiel pour le prototypage des interfaces graphiques Fidélité dun prototype –Exprime la similarité entre la représentation de linterface prototypée et celle de linterface finale –Elevée (high-fidelity, hi-fi): si la représentation du prototype est la plus proche possible de celle de linterface finale –Basse (low-fidelity, lo-fi): si la représentation du prototype évoque celle de linterface 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 linterface 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]

16 16 ERGO-IA2006, 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 Prototype à un niveau de fidélité modérée Prototype à un niveau de fidélité basse

17 17 ERGO-IA2006, 13 octobre 2006 Fidélité\CritèreBasseMoyenneElevée Phase de développementElicitation des besoins, conception préliminaire, conceptualisation, début de lapplication Conception continue, validation de lergonomie du prototype, application en cours de route Conception détaillée, application en fin de spécification ContenuPrésentation surtoutPrésentation, contenu, layout, début de la navigation Présentation et navigation, contenu, layout, fonctionnalités UsageExploration, découverte, évocation, communication Simulation, raffinement, itération, amélioration, validation de lutilisabilité, test utilisateur Propagation générale à lapplication, spécification finale, documentation, marketing Type de prototypageHorizontalDiagonalVertical Type dapprocheAscendante (bottom up)Expansive (middle-out)Descendante (top down) Facilité de changementElevéeModéréeTrès faible CoûtFaibleModéréElevé Temps requisFaibleModéréElevé Naturalité de la représentationTrès elevéeModéréeFaible Niveau de détailFaibleModéréElevé Fréquence ditérationTrès élevéeElevéeFaible Niveau dinteractivitéFaibleModéréElevé ReprésentationEsquisseDessin, dessin vectorielPrésentation et navigation réelles Convient pour…Des applications de grande tailleDes applications moyennesDes applications de taille réduite ou des fragments dautres types dapplication Niveau des spécificationsAbstraitMixteConcret Outils en généralDenim [14], FreeForms [24], GUILayout [5], Paper [27], JavaSketchIt [8], Silk [17], SketchRead [1] EtchaPad [22], ExcelProto [3], MidFi [12], ProtoMixer [23] Editeurs dinterface fournis avec les environnements intégrés de développement Outils UsiXMLSketchiXML [9,10,11]VisiXML [30]GrafiXML [19,20], FormiXML [30] URLhttp://www.usixml.org/index. php?view=page&idpage=29 php?view=page&idpage=11 php?view=page&idpage=10 [Coyette05, Engleberg02]

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

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

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

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

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

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

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

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

26 26 ERGO-IA2006, 13 octobre 2006 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 [Calvary03]

27 27 ERGO-IA2006, 13 octobre 2006 Notre proposition de support au prototypage Interopérabilité des outils: import/export en UsiXML UsiXML = –USer Interface exTensible Markup Language –Language de description dinterface 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 à Envoyez-nous un pour obtenir le CD-ROM Rejoignez le UsiXML Consortium en saffiliant en ligne sur le site (register) [Limbourg04]

28 28 ERGO-IA2006, 13 octobre 2006 Développé par Adrien Coyette SketchiXML est un éditeur dinterface à niveau de fidélité basse permettant de concevoir une interface graphique indépendante de toute plate-forme cible et de lenregistrer dans le format UsiXML. Export de linterface en UsiXML, UIML (www.uiml.org) Fonctionne sous Windows, Linux et MacOs X Disponible en anglais Besoins à satisfaire –Eviter de perdre leffort (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 dun traitement flexible (Principe de non-obstrusion) –Maintenir lindépendance par rapport au contexte dutilisation –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

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

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

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

32 32 ERGO-IA2006, 13 octobre 2006 Developpé par Benjamin Michotte GrafiXML est un éditeur dinterface à niveau de fidélité élevée permettant de concevoir une interface graphique indépendamment de la plate- forme cible et de lenregistrer dans le format UsiXML. Caractéristiques Export de linterface 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 dutilisation associé –utilisateur, plate-forme, environnement

33 33 ERGO-IA2006, 13 octobre 2006 Onglet de composition Fenêtre de conception Barre doutils des composants Barre doutils des composants Options des composants

34 34 ERGO-IA2006, 13 octobre 2006 Réutilisation de gabarit Gabarit réutilisé

35 35 ERGO-IA2006, 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

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

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

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

39 39 ERGO-IA2006, 13 octobre 2006 Exemple de Plug-in: ComposiXML Fonctionne avec la version de UsiXML Est basé sur des opérateurs issus de lalgèbre des arbres Intersection Union unique Union normale Fusion Différence (droite) Différence (gauche) Equivalence SpécificationSélectionTroncatureProjection XML Composi [Lepreux06]

40 40 ERGO-IA2006, 13 octobre 2006 Edition de lexemple en haute fidélité Prototypage présentationnel

41 41 ERGO-IA2006, 13 octobre 2006 Edition de lexemple en haute fidélité Prototypage navigationnel global (vs. local)

42 42 ERGO-IA2006, 13 octobre 2006 Edition de lexemple en haute fidélité Rendu de linterface exportée en XHTML

43 43 ERGO-IA2006, 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.,…)

44 44 ERGO-IA2006, 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.

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

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

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

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

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

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

51 51 ERGO-IA2006, 13 octobre 2006

52 52 ERGO-IA2006, 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 dextension du catalogue demeurera perpétuel –Solution: système de reconnaissance de geste personnalisable

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

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

55 55 ERGO-IA2006, 13 octobre 2006 Trajectoires de prototypage (révision) Prototype à fidélité élevée : GrafiXML Prototype à fidélité modérée : VisiXML Prototype à fidélité basse : SketchiXML Check box Identification label Niveau de fidélité FaibleModéréeElevéeFinale

56 56 ERGO-IA2006, 13 octobre 2006 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 –Récupération dans GrafiXML –Prototypage présentationnel seulement Pour la fidélité élevée: GrafiXML –Edition de la fidélité précédente –Mono-fidélité –Prototypage présentationnel vs. navigationnel

57 57 ERGO-IA2006, 13 octobre 2006 Conclusion (2/2) Ce qui plaide pour un prototypage incluant vraiment lutilisateur –Lutilisateur ne dessine pas moins bien que le concepteur –Lutilisateur, autant que le concepteur, apprend vite à dessiner –Lutilisateur se sent plus impliqué en fidélité basse, quil 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 lexpressivité des représentations nouvelles –Couvrir davantage le prototypage navigationnel local –Valider lutilisation globale de lapproche en vraie grandeur –Supporter la simulation directe (sans transition) Notre souhait: inclure vraiment lutilisateur final en lui donnant une représentation quil peut comprendre (pas UML!), quil peut modifier et valider.

58 58 ERGO-IA2006, 13 octobre 2006 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 dERGO-IA2006 –E. Brangier –Ch. Kolski –J.-R. Ruault Jean-Roch Guiresse, Sophie Paolacci, Michèle Rouet, ESTIA

59 59 ERGO-IA2006, 13 octobre 2006 Merci beaucoup pour votre attention Pour plus dinformation et téléchargement, User Interface eXtensible Markup Language UsiXML CD-ROM Release 1 est disponible Réseau dexcellence européen consacré aux interfaces multimodales Un merci tout particulier à lensemble de léquipe!


Télécharger ppt "1 ERGO-IA2006, 13 octobre 2006 Vers un prototypage des interfaces graphiques incluant vraiment lutilisateur final Jean Vanderdonckt, Adrien Coyette Belgian."

Présentations similaires


Annonces Google