dégradation élégante dinterfaces- utilisateur. description du problème construction...
TRANSCRIPT
Dégradation élégante d’interfaces-utilisateur
Description du problème
Construction d’interfaces-utilisateur pour:
• des systèmes d’information multiplate-formes = systèmes disponibles sur différentes plate-formes (matériel + logiciel) à la fois
• lorsque les plate-formes supportées possèdent des capacités très différentes
Description du problème (2)
Diversité des plate-formes en terme de capacités:
• taille de l’écran
• “qualité” de l’écran (résolution, nombre de couleurs, …)
• dispositifs d’entrée (clavier, écran tactile, stylet, …)
• boîte(s) à outils graphique(s) disponible(s)
• langage(s) de programmation / de scripting disponible(s)
• …
Description du problème (3)
240 pixels
320 pixels 257 pixels
229 pixels
240 pixels
320 pixels 257 pixels
229 pixels
?
Plan de l’exposé
1. Description des approches existantes pour les interfaces-utilisateur multiplate-formes
2. Description de l’approche par dégradation élégante
3. Etude exploratoire des règles de transformation pour la dégradation élégante
3.1 niveau tâches et concepts
3.2 niveau interface abstraite
3.3 niveau interface concrète
3.4 niveau interface finale
4. Conclusion / travaux futurs
Approches existantes
1) Développement d’une interface spécifique pour chaque plate-forme
2) Développement d’une IU portable unique au moyen d’une boîte à outils graphiques virtuelle
3) Utilisation de clients génériques (navigateurs)
4) Développement d’une description unique pour la partie commune et de descriptions supplémentaires pour les parties de l’IU spécifiques à la plate-forme (approches basées sur XML)
5) Les approches basées modèle
1ère approche:Développement spécifique
Avantages:
• Contrôle maximal pour le concepteur / programmeur
• IU parfaitement adaptée à la plate-forme
Limitations:
• Requiert des capacités de programmation dans plusieurs langages / une connaissance de plusieurs boîtes à outils graphiques
• Temps de conception /développement / maintenance de plusieurs versions
• Cohérence entre versions (temps d’apprentissage)
1ère approche:Développement spécifique exemple
2ème approche:Boîtes à outils graphiques virtuelles
Description:• Utilisation d’objets virtuels liés aux objets natifs de chaque
boîte à outils (ou émulation de ces objets) le même code tourne sur différentes plate-formes. Ex: Java AWT, Java Swing, Tk
Avantages:• Une seule interface à concevoir et à programmer• Contrôle maximal pour le concepteur / le programmeurLimitations:• Adaptation minimale à la plate-forme (portabilité, parfois
« look-and-feel »)• Convient surtout pour systèmes sur ordinateur traditionnel
2ème approche: Boîtes à outils graphiques virtuelles: exemple
Windows UI code
Platform 1:Personal Computer
Platform 2:Macintosh Mac OS
Macintosh UI code
Platform 3:Workstation OSF/Motif
OSF/Motif UI code
3ème approche: Utilisation de clients génériques
Description:
• Spécification de l’IU au moyen d’un langage à balises (HTML, WML, etc.). Ce code est interprété par un programme client, le navigateur, disponible sur de nombreuses plate-formes.
Avantages:
• Une seule interface à concevoir et à programmer
• Contrôle important pour le concepteur / le programmeur
Limitation:
• Adaptation limitée, malgré quelques outils de transcodage (HTML WML) et quelques outils adaptatifs
3ème approche: Utilisation de clients génériques (exemple)
4ème approche: Approches basées sur XML
Description:• Spécification de la structure / du contenu du document de
base dans un document XML + description de la partie présentation dans une feuille de style CSS ou XSL ou transformations XSLT vers XHTML ou WML.
Avantages:• Cohérence au niveau du contenu (mais pas au niveau de
l’apparence)• Contrôle important pour le concepteur / le programmeur• IU adaptée à la plate-formeLimitation:• Requiert le développement d’une feuille de style / d’un
document XSLT par plate-forme
5ème approche: Approches basées modèles
Description:• Spécification de l’IU à un niveau d’abstraction plus ou moins
élevé, indépendant de l’implémentation• Spécification souvent partagée entre plusieurs composants,
appelés modèles, chaque modèle représentant une facette particulière de l’IU.
• Différents types d’approches basées modèles répondent au problème du multiplate-forme:1. génération multiplate-forme2. langages de spécification multiplate-forme3. approches par rétro-ingénierie
Approches basées modèles (suite)
Génération multiplate-forme (description): • Génération d’IUs spécifiques aux différentes plate-formes à
partir de spécifications exprimées à un niveau d’abstraction élevé (typiquement: tâches et domaine)
• Ex: TERESA, ArtStudioAvantages:• Spécification unique de l’IU génération de multiples
versions• Pas de programmation• IU adaptées à leur plate-forme (dépend des heuristiques de
l’outil)Limitations:• Très peu de contrôle humain sur le processus• Produit seulement des IUs très simples
Approches basées modèles (suite)
Langages de spécification multiplate-forme (description): • Spécification de l’IU au moyen d’un langage générique et de
vocabulaires spécifiques pour chaque “famille de plate-formes”. La spécification est alors compilée ou interprétée pour être rendue dans différents langages.
• Ex: UIMLAvantages:• Bon niveau de contrôle pour le concepteur (interface
spécifiée à un niveau plus concret que dans l’approche précédente)
• Pas de programmationLimitation:• N spécifications pour N familles de plate-formes
Approches basées modèles (suite)
Approches basées modèles (suite)
Approches par rétro-ingénierie (description): • Rétro-ingénierie d’IUs existantes, non conçues dans une
approche basée modèles, afin d’en extraire une spécification. Cette spécification peut alors servir de base à la génération de versions de l’IU pour d’autres plate-formes
• Ex: VaquitaAvantages:• Tire parti des interfaces pré-existantes• Permet certaines adaptations (dépend des heuristiques de
l’outil)Limitations:• Contrôle du concepteur limité (choix de certaines options)
Plan de l’exposé
1. Description des approches existantes pour les interfaces-utilisateur multiplate-formes
2. Description de l’approche par dégradation élégante
3. Etude exploratoire des règles de transformation pour la dégradation élégante
3.1 niveau tâches et concepts
3.2 niveau interface abstraite
3.3 niveau interface concrète
3.4 niveau interface finale
4. Conclusion / travaux futurs
Approche par dégradation élégante
• Approche basée modèle
• Spécificité par rapport aux autres approches:
Générationmultiplate-forme
Spécificationmultiplate-forme
Rétro-ingénierie Dégradation élégante
1 spec. abstraite
N codes
N spec. plus concrètes
N codes 1 code
1 spec.
N codes
1 spec. N spec. adaptées
Approche par dégradation élégante = approche transformationnelle
Interface source
Cible
?
design pré-existant
plate-forme plus contrainte
Règles de transformation
Approche par dégradation élégante
• transformation d’interfaces-utilisateur conçues pour une plate-forme moins contrainte vers des interfaces plus contraintes
dégradation
• souci de minimiser l’écart entre les versions du système + souci d’utilisabilité des IU cibles
dégradation élégante
Approche par dégradation élégante
Intérêt:• Compromis entre exigences d’adaptation à la plate-
forme / de contrôle humain / de cohérence entre versions / de limitation des efforts en termes de conception et programmation
• Peut être couplée avec une approche par rétro-ingénierie (récupération des spécifications d’une IU existante et application des règles de transformation) et/ou une approche générative (interprétation des spécifications produites par l’application des transformations)
Plan de l’exposé
1. Description des approches existantes pour les interfaces-utilisateur multiplate-formes
2. Description de l’approche par dégradation élégante
3. Etude exploratoire des règles de transformation pour la dégradation élégante
3.1 niveau tâches et concepts
3.2 niveau interface abstraite
3.3 niveau interface concrète
3.4 niveau interface finale
4. Conclusion / travaux futurs
Règles de dégradation élégante: étude exploratoire
Les règles de dégradation élégante ont été
• identifiées à partir de l’examen d’un grand nombre de petites applications disponibles sur plusieurs plate-formes
• testées « à la main » sur le système ARTHUR (système d’information pour les services d’urgences d’hôpitaux belges avec version PC, PDA et écran mural)
Typologie des règles de dégradation élégante
Les règles de dégradation élégante ont été classifiées un cadre de référence en 4 niveaux
Règles de dégradation élégante Niveau tâches et concepts
Modèle de la tâche
Modèle du domaine
Modèle de la tâche: définition
• description des tâches que l’utilisateur pourra effectuer en interaction avec le système
• hiérarchie
• contraintes temporelles entre tâches
Modèle de la tâche: exemple
Exemple de règle de transformation (1)
Exemple de règle de transformation (2)
>>>> >>
Modèle du domaine: définition
• Description des objets du domaine et de leurs relations (diagramme de classes UML, diagramme entité-association, etc.)
• Limitation aux objets ayant un impact sur l’IU (objets dont l’information sera affichée ou modifiée par l’utilisateur, ou objets dont les méthodes seront appelées
de l’IU, ou qui peuvent modifier l’IU)
Modèle du domaine: exemple
Exemple de règle de transformation (1)
Exemple de règle de transformation (2)
Règles de dégradation élégante Niveau abstrait
Description de l’IU en termes d’ Unités de présentation (UPs)
= liste de tâches même conteneur (fenêtre, panneau, carte,…)
Unités de présentation: exemple
Exemple de règle de transformation (scission)
Règles de scission
• Applicables automatiquement
• A partir:
1. d’un modèle des tâches CTT
2. d’une UP conçue pour la plate-forme source
déduction d’UPs correctes pour la plate-forme cible
Règles de dégradation élégante Niveau interface concrète
Description de l’IU en termes de • objets graphiques ou interacteurs• relations entre objets graphiques
Interface concrète: exemple
<fenêtre f1><libellé l1 texte=titre ><boîte d’édition e1 longueur = 30><libellé l2 texte = éditeur>--------------------------------------------------------------------------f1 contient l1, e1, …l1 à la gauche de e1l1, l2 alignés à droite…
Règles de transformation: exemples (1)
Règles de transformation: exemples (2)
Add all >>
Add >
<< Remove all
< Remove
>>
>
<<
<
>
<
Item 1Item 2Item 3Item 4Item 5Item 6Item 7
Item 1
Group box
Item 1Item 2Item 3Item 4
Item 5Item 6Item 7Item 8
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Règles de transformation: exemples (3)
Règles de transformation: exemples (4)
Règles de dégradation élégante Niveau interface finale
Code source
Règles de dégradation élégante Niveau interface finale
Ex. substitution d’une image par une image dans un format comprimé, réduction du nombre de couleurs, réduction des tailles de police,...
à ce niveau, les règles ne bénéficient pas d’une approche orientée modèle
Plan de l’exposé
1. Description des approches existantes pour les interfaces-utilisateur multiplate-formes
2. Description de l’approche par dégradation élégante
3. Etude exploratoire des règles de transformation pour la dégradation élégante
3.1 niveau tâches et concepts
3.2 niveau interface abstraite
3.3 niveau interface concrète
3.4 niveau interface finale
4. Conclusion / travaux futurs
Conclusion
Résultats actuels:
• Un cadre conceptuel pour la dégradation élégante
• Une collection de règles de transformation
• Une formalisation de certaines de ces règles
Travail futur
2 directions:
• Travail d’évaluation: études d’utilisabilité
• Application assistée de certaines règles dans un outil d’aide à la conception multiplate-forme
Travail futur : évaluation
But des études d’utilisabilité:
• évaluation de la qualité des interfaces produites avec la méthode (manuellement / automatiquement)
• évaluation de la qualité de l’outil
Travail futur : l’outil
• Construction d’un outil de support à la conception d’interfaces multiplate-formes
• Outil basé sur une approche orientée modèle
• Propose au concepteur l’application de règles de dégradation élégante sur une interface préexistante / sur une interface nouvellement créée avec le système