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

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



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


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


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]


Introduction

• Quelles sont les formes du prototypage des interfaces graphiques?– Support physique: réalisation

• Sur tableau blanc: feutres et effaceurs


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


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


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

© [email protected]


Introduction

• Quelles sont les formes du prototypage des interfaces graphiques?– Support informatique: réalisation dans un éditeur, un outil de

prototypage


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]


Editeurs d’interface: exemple

• Interface souhaitée: planification de projet

[Szekely96]


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]


Editeurs d’interface: solution partielle

• Les éditeurs d’interface sont incapables de décrire leur propre interface (Propriété dubootstrapping)

[Szekely96]


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


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]



• 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


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]



• Types de prototypage

Interface homme-machine

Couche d’abstraction

Noyau fonctionnel

Applicationinteractivecomplète

Prototype horizontalPrototype vertical



Noyau fonctionnel


Prototype diagonal

[Nielsen93]






Noyau fonctionnel


PrésentationNavigation

globaleNavigation

locale





Noyau fonctionnel


globaleNavigation

locale

Prototype présentationnel d’abord


Noyau fonctionnel


globaleNavigation

locale

Prototype navigationnel global d’abord


Noyau fonctionnel


globaleNavigation

locale

Prototype navigationnel local d’abord


Quelques outils de support au prototypage

• GUILayout: fidélité très basse, présentationnel seulement



• SILK: fidélité basse, présentationnel

[Landay95]



• DEMAIS: multi-fidélité mixte, présentationnel

[Bailey03]



• FreeForm: basse fidélité, présentationnel d’abord

[Plimmer04]



• DENIM: présentationnel et navigationnel

[Lin01]


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]



• 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]

http://www.usixml.org/


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



• Interfaces complexes (multi-fidélité)



• Prototypage pour des plate-formes multiples: rendu dans GrafiXML


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


Onglet de composition

Fenêtre de conceptionFenêtre de conception

Barre d’outilsdes

composants

Barre d’outilsdes

composants

Options des composants


Réutilisation de gabarit

Gabarit réutiliséGabarit réutilisé


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


Prévisualisation de l’interface

A tout moment, on peut prévisualiser le rendu de l’interface dans la langue voulue


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


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


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]


Edition de l’exemple en haute fidélité

• Prototypage présentationnel



• Prototypage navigationnel global (vs. local)



• Rendu de l’interface exportée en XHTML



• 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



• 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.


0

50

100

150

200

Lisbox 3 Lisbox 1 Lisbox 2 Lisbox 4 Lisbox 5

0

50

100

150

200


150

200

250

300



• Deuxième phase: test des représentations (préférence)


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


• Deuxième phase: test des représentations (performance)



• Catalogue des widgets





SketchiXML: A Sketching Tool for Designing User Interfaces for Information SystemsSketchiXML: A Sketching Tool for Designing User Interfaces for Information Systems









• 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


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


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]


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


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


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.


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


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!





http://www.similar.cc/

http://www.similar.cc/

Documents

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