1 ERGO-IA2006, 13 octobre 2006 Vers un prototypage des interfaces graphiques incluant vraiment...
-
Upload
auberon-duriez -
Category
Documents
-
view
104 -
download
0
Transcript of 1 ERGO-IA2006, 13 octobre 2006 Vers un prototypage des interfaces graphiques incluant vraiment...
1 ERGO-IA’2006, 13 octobre 2006
Vers un prototypage des interfaces graphiquesincluant 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
2 ERGO-IA’2006, 13 octobre 2006
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
3 ERGO-IA’2006, 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 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
4 ERGO-IA’2006, 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 ERGO-IA’2006, 13 octobre 2006
Introduction
• Quelles sont les formes du prototypage des interfaces graphiques?– Support physique: réalisation
• Sur tableau blanc: feutres et effaceurs
6 ERGO-IA’2006, 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 ERGO-IA’2006, 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 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
8 ERGO-IA’2006, 13 octobre 2006
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
9 ERGO-IA’2006, 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 ERGO-IA’2006, 13 octobre 2006
Editeurs d’interface: comment font-ils?
Fenêtre de l’éditeur
d’interface
Fenêtre de l’éditeur
d’interface Exemple d’interfaceExemple
d’interface
Arborescence des objets de l’interface
Arborescence des objets de l’interfacePalette des objets
interactifsPalette des objets
interactifs
[Szekely96]
11 ERGO-IA’2006, 13 octobre 2006
Editeurs d’interface: exemple
• Interface souhaitée: planification de projet
[Szekely96]
12 ERGO-IA’2006, 13 octobre 2006
Editeurs d’interface: solution partielle
• Tables avec données dynamiques• Diagramme de Gantt• Manipulation directe des activités
Interface souhaitée Interface obtenue
• Fenêtre avec barre de menus• Barre d’outils• Objets interactifs statiques• Pas de navigation
[Szekely96]
13 ERGO-IA’2006, 13 octobre 2006
Editeurs d’interface: solution partielle
• Les éditeurs d’interface sont incapables de décrire leur propre interface (Propriété dubootstrapping)
[Szekely96]
14 ERGO-IA’2006, 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 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
15 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]
16 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 niveaude fidélité élevée
Prototype à un niveaude fidélité modérée
Prototype à un niveaude fidélité basse
17 ERGO-IA’2006, 13 octobre 2006
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 Elevée Modérée Très faible
Coût Faible Modéré Elevé
Temps requis Faible Modéré Elevé
Naturalité de la représentation Très elevée Modérée Faible
Niveau de détail Faible Modéré Elevé
Fréquence d’itération Très élevée Elevée Faible
Niveau d’interactivité Faible Modéré Elevé
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
[Coyette05, Engleberg02]
18 ERGO-IA’2006, 13 octobre 2006
Un référentiel pour le prototypage des interfaces graphiques
• Types de prototypage
Interface homme-machine
Couche d’abstraction
Noyau fonctionnel
Applicationinteractivecomplète
Prototype horizontalPrototype vertical
Interface homme-machine
Couche d’abstraction
Noyau fonctionnel
Applicationinteractivecomplète
Prototype diagonal
[Nielsen93]
19 ERGO-IA’2006, 13 octobre 2006
Un référentiel pour le prototypage des interfaces graphiques
• Types de prototypage
Interface homme-machine
Couche d’abstraction
Noyau fonctionnel
Applicationinteractivecomplète
PrésentationNavigation
globaleNavigation
locale
20 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ésentationNavigation
globaleNavigation
locale
Prototype présentationnel d’abord
Couche d’abstraction
Noyau fonctionnel
PrésentationNavigation
globaleNavigation
locale
Prototype navigationnel global d’abord
Couche d’abstraction
Noyau fonctionnel
PrésentationNavigation
globaleNavigation
locale
Prototype navigationnel local d’abord
21 ERGO-IA’2006, 13 octobre 2006
Quelques outils de support au prototypage
• GUILayout: fidélité très basse, présentationnel seulement
22 ERGO-IA’2006, 13 octobre 2006
Quelques outils de support au prototypage
• SILK: fidélité basse, présentationnel
[Landay95]
23 ERGO-IA’2006, 13 octobre 2006
Quelques outils de support au prototypage
• DEMAIS: multi-fidélité mixte, présentationnel
[Bailey03]
24 ERGO-IA’2006, 13 octobre 2006
Quelques outils de support au prototypage
• FreeForm: basse fidélité, présentationnel d’abord
[Plimmer04]
25 ERGO-IA’2006, 13 octobre 2006
Quelques outils de support au prototypage
• DENIM: présentationnel et navigationnel
[Lin01]
26 ERGO-IA’2006, 13 octobre 2006
Notre proposition de support au prototypage
Task & Concepts
Abstract UI
Concrete UI
Final UI
Task & Concepts
Abstract UI
Concrete UI
Final UI
Source platform Target platform
Task & Concepts
Abstract UI
Concrete UI
Final UI
Task & Concepts
Abstract UI
Concrete UI
Final UI
Source platform Target platform
textInput button button
Window
AICfacet=control
AICfacet=control
AICfacet=control
AbstractIndividualContainer
textInput button button
Window
AICfacet=control
AICfacet=control
AICfacet=control
AbstractIndividualContainer
• 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 ERGO-IA’2006, 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 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)
[Limbourg04]
28 ERGO-IA’2006, 13 octobre 2006
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
30 ERGO-IA’2006, 13 octobre 2006
Notre proposition de support au prototypage
• Interfaces complexes (multi-fidélité)
31 ERGO-IA’2006, 13 octobre 2006
Notre proposition de support au prototypage
• Prototypage pour des plate-formes multiples: rendu dans GrafiXML
32 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
33 ERGO-IA’2006, 13 octobre 2006
Onglet de composition
Fenêtre de conceptionFenêtre de conception
Barre d’outilsdes
composants
Barre d’outilsdes
composants
Options des composants
34 ERGO-IA’2006, 13 octobre 2006
Réutilisation de gabarit
Gabarit réutiliséGabarit réutilisé
35 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
Support pour les
mnémoniques et les raccourcis
36 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
37 ERGO-IA’2006, 13 octobre 2006
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
Editer le code UsiXML
Editer le code UsiXML
Voir les attributsVoir les attributs
Un click sur l’arbre dévoile la portion correspondante en
UsiXML
Un click sur l’arbre dévoile la portion correspondante en
UsiXML
38 ERGO-IA’2006, 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 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
IntersectionUnion unique
Union normale
FusionDifférence (droite)
Différence (gauche)
Equivalence
Spécification
Sélection Troncature Projection
XML
Composi
[Lepreux06]
40 ERGO-IA’2006, 13 octobre 2006
Edition de l’exemple en haute fidélité
• Prototypage présentationnel
41 ERGO-IA’2006, 13 octobre 2006
Edition de l’exemple en haute fidélité
• Prototypage navigationnel global (vs. local)
42 ERGO-IA’2006, 13 octobre 2006
Edition de l’exemple en haute fidélité
• Rendu de l’interface exportée en XHTML
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– 2 groupes (concepteurs, utilisateurs) de 30 sujets aléatoirement
sélectionnés
– catalogue de 32 widgets courants (multi-plate-forme, exemple, desc.,…)
Computer scientists
44 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.
45 ERGO-IA’2006, 13 octobre 2006
0
50
100
150
200
Lisbox 3 Lisbox 1 Lisbox 2 Lisbox 4 Lisbox 5
0
50
100
150
200
Lisbox 1 Lisbox 3 Lisbox 2 Lisbox 4 Lisbox 5100
150
200
250
300
Lisbox 3 Lisbox 1 Lisbox 2 Lisbox 4 Lisbox 5
Notre proposition de support au prototypage
• Deuxième phase: test des représentations (préférence)
46 ERGO-IA’2006, 13 octobre 2006
0
20
40
60
80
100
Button Rectangle1 Rectangle2
Elem ents
succ
essf
ul
reco
gn
itio
n r
ate
0
20
40
60
80
100
Check box Square Line
Elem ents
succ
essf
ul
reco
gn
itio
n r
ate
0
20
40
60
80
100
Radio button Circle Line
Elem entssu
cces
sfu
l re
cog
nit
ion
rat
e
0
20
40
60
80
100
Combo box Rectangle Triangle
Elem ents
succ
essf
ul
reco
gn
itio
n r
ate
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 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 SystemsSketchiXML: 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
Notre proposition de support au prototypage
• Catalogue des widgets
51 ERGO-IA’2006, 13 octobre 2006
52 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
53 ERGO-IA’2006, 13 octobre 2006
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
54 ERGO-IA’2006, 13 octobre 2006
Développé par Manuel Van Sluys
Fenêtre en cours de conceptio
n
Feuille des
propriétés
auxiliaires
Barre d’outilsVisiXM
L
Barre des composants graphiques individuels de UsiXML
[Van Sluys04]
55 ERGO-IA’2006, 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é
Faible Modérée Elevée Finale
56 ERGO-IA’2006, 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 ERGO-IA’2006, 13 octobre 2006
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.
58 ERGO-IA’2006, 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 d’ERGO-IA’2006– E. Brangier– Ch. Kolski– J.-R. Ruault
• Jean-Roch Guiresse, Sophie Paolacci, Michèle Rouet, ESTIA
59 ERGO-IA’2006, 13 octobre 2006
Merci beaucoup pour votre attention
Pour plus d’information et téléchargement,http://www.isys.ucl.ac.be/bchi
http://www.usixml.orgUser Interface eXtensible Markup LanguageUsiXML CD-ROM Release 1 est disponible
http://www.similar.ccRéseau d’excellence européenconsacré aux interfaces multimodales
Un merci tout particulier à l’ensemble de l’équipe!