journée intech device independence – page 1 ihm et multiplicité des supports : problématique -...

Journée Intech Device Independence –

IHM et multiplicité des supports :

problématique - aperçu de la recherche

et des solutions actuelles

Anne-Marie Déry [email protected]


Motivations et exemples d’applications

visées


IHM sur supports mobiles

Complexification de la conception ergonomique et logicielle



Complexification de la conception ergonomique et

logicielle



Complexification de la conception ergonomique et logicielle


Les enjeux de la mutation

De nouveaux problèmes à résoudre– prendre en compte le contexte dans l'interaction

• Perception/modélisation/adaptation Des solutions à des problèmes anciens à revoir

– les techniques d'interaction : windows, icons, menus, pointing Des problèmes classiques prennent une importance particulière

– concevoir pour plusieurs plates-formes– Ingénierie au cas par cas insuffisante

• Coûts de développement et de maintenance• Cohérence ergonomique entre versions


Plasticité des interfaces

Un peu d’histoire …

– Introduction du terme à Interact’99

– Capacité d’une interface à s’adapter à son contexte d’usage dans

le respect de son utilisabilité

– Contexte d’usage• Plate-forme• Environnement• Utilisateur (2001)


Des solutions : des traducteurs, la

plasticité, la prise en compte du

contexte, des architectures,

l’ergonomie


Contenu du module

Semaine 1 3/12 1H : Introduction au module (AM Dery) 3H : Cours XUL (Paul Franchi)

Semaine 2- 10/12 4H : XUL (Paul Franchi)

Semaine 3 17/12 2H + 2H : Présentation Open Plug

Semaine 4 7/1 2H + 2H : Aperçu des autres langages (Cedric Joffroy)

Semaine 5 14/1 2H + 2H : Approche composants (Rainbow )

Semaine 6 21/1 2H + 2H : Apprche IIHM (Gaelle Calvary)

Semaine 7 28/1 User plasticity : DV (Mireille Blay Fornarino)

Semaine 8 4/2 EXPOSES


Contenu du module

Illustration des besoins en entreprise–Pour la téléphonie

Exemple d’Open Plug


Contenu du module

Langages à balises et IHM


Traducteurs

XML

XSLHTML

VoiceML

WML

XML et XSL pour la présentation, UIML, SUNML, Xforms ….


Langage de description d’interfaces


De l’IHM abstraite vers l’IHM concrète

JFrame1

JPanel1

JLabel1 JField1 ...

IHM concrète (Exécution)

Projection

FicheClient

MainDialog

LabelFieldNom FieldNom ...

IHM abstraite (Exécution)

HMI

Dialog

Field Field

JFrame

JPanel

JTextFieldJLabelLégende

Instance

<sunml> <interface id="FicheClient"> <structure> <dialog id="MainDialog" sequence="true"> ... <field id="LabelFieldNom" mode="read"> <element type="String">Nom :</element> </field> <field id="FieldNom" mode="read-write"> <element type="String">Toto</element> </field> ... </dialog> </structure> </interface></sunml>

Fichier SUNML (Spécification)

Réification


Contenu du module

Pourquoi XUL ?


Plasticité des interfaces :une nécessité

Problème ?

– Exemple• SI la batterie du PC faiblit ALORS passer sur PDA

– SI condition ALORS action

Action Réaction


Espace problème

Initiateur duchangement

Action

Cible

Utilisateur

Autre

Utilisateur

EnvironnementPlate-forme

Effecteur

Réaction

Nature

Utilisateur

Système

Intervention sur la cible

RedistributionRemodelage Migration

Reprise

Partielle

Totale

Espace de travailConceptPixel

SessionTâche composéeTâche élémentaireAction physique

(a) Aucun systèmede navigation

(b1) Navigation par onglet

(b2) Navigation par menu déroulant


Espace problème

Domaine de plasticité

Environnement

Plate-forme

Utilisateur

Seuil de plasticité

Domaine de plasticité

C2 Contexte non couvert

C1 Contexte couvert par l’IHM


Contenu du module

Traitement e l’adaptation :

–Approches de l’équipe IIHM (Grenoble)


Cadre de référence : phase “conception”

Config 1 ModèleTâches etConcepts

IHM concrète

IHM finale

IHM abstraite

ModèleTâches etConcepts

Modèles archétypes

Config 2Concepts

Tâches

User

Plate-forme

Environment

Evolution

Transition

IHM concrète

IHM finale

IHM abstraite

Concepts

Tâches

User

Plate-forme

Environment

Evolution

Transition

Domaine

Concepts

Tâches

Contexte

User

Plate-forme

Environment

Adaptation

Evolution

Transition

Modèles ontologiques

ARTStudio

D. Thevenin

Réification, Factorisation, Traduction, Abstraction / Reconception, Crossing, Intervention Humaine

“Spécifier 1 fois -> N Interfaces” approche par modèles


Tâches &Concepts

IHM abstraite

IHM concrète

IHM finale

Config 1

Cadre de référence : phase “conception”


Reconnaissance de situation

Exécution de la réaction

Capture du

contexte

IdentificationDes solutions

candidates

Selection d’unesolutioncandidate

Détection de

changement decontexte

Identification du

changement decontexte

Exécution du

prologue

Execution de la

reaction

Execution de

L’épilogue

Calcul d’une réaction

Cadre de référence : phase “exécution”


Ingénierie : Capture de contexte

Donnée captée et méta-donnée• Précision• Fréquence• Stabilité• Zone de couverture• Complétude• Ambiguïté• Complémentarité• Redondance

Architecture logicielle


Contexte (U,T) = ensemble de rôles et de relations entre entités pour la réalisation de T par U Changement de Contexte = l’ensemble des rôles change,et/ou l’ensemble des relations change Tâches et activités ont lieu dans un réseau de contextes Contexte (U,T) = un réseau de situations qui partagent le même ensemble de rôles et de relations

Ontologie …

Les tâches mettent en jeu des entités (ex.: une table, un crayon, une couleur)Entité = un regroupement d’observablesEntités peuvent jouer un rôle = une fonction relative à une tâche, qui est satisfaite par une entité, (par exemple, une table satisfait la fonction « surface de dépôt »)Entités peuvent entretenir des relations

Domaine (monde) = un réseau d’états reliés par des actionsÉtat = un prédicat sur des observablesBut = état souhaitéTâche = <état courant, but>, c.-à-d. absence de planActivité = <tâche courante, {tâches de fond}>


Contenu du module

Adapation à l’évolution des services fonctionnelsApproche de l’équpe RAINBOW


Applications viséesProblématique

Applications évolutives et adaptables – accessibles via un PDA, un portable ou une station– variabilité des fonctionnalités selon le contexte d'utilisation (mode dégradé, connecté ou déconnecté, dépendance des ressources…)

Applications construites à base de composants (composants métiers, composants d’IHM, composants services…)

S’appuyer sur les infrastructures systèmes (RMI, EJB, …) Fournir une plate-forme à composants

Exemples :– Agenda collaboratif – Gestion commerciale (facturations, commandes, client, fournisseur)


Spécificités des applications et contraintes IHMs

Changement du contexte d'exécution du composant (d’utilisation de fonctionnalités) d'une station à un PDA, un téléphone portable … "Reconfiguration" du

composant

Retrait / ajout de composants (demande de fonctionnalités, de services)

Composition de composants

Comment réutiliser une IHM existante sur un support différent ?

Comment composer les IHMs des composants métiers ?

Déporter le composant prise de commande sur un PDA pour le consultant sur site

Ajouter dynamiquement le service de gestion de stock pour informer du délai…


Proposition : modèle de composants et abstraction

La communication entre composants IHM et métier est exprimée par des interactions

Un langage abstrait de description structurelle des IHMs : SUNML dans la lignée de

XForms, RIML,... (inspiré de UIML)

Composition de composants métiers par interactions

Règles de composition adaptées aux IHMs

Fusion de règles vérifiant la cohérence de la composition

Atelier de composition

Réutiliser des composants métiers

Composer les IHMs des composants

métiers

Un modèle de composant + ISL + SUNML

Un modèle de composants qui découple composant métier et composants d ’IHM.

Spécification d ’ IHM indépendantes du support



JFrame1

JPanel1

JLabel1 JField1 ...

IHM concrète (Exécution)

Projection

FicheClient

MainDialog

LabelFieldNom FieldNom ...

IHM abstraite (Exécution)

HMI

Dialog

Field Field

JFrame

JPanel

JTextFieldJLabelLégende

Instance

<sunml> <interface id="FicheClient"> <structure> <dialog id="MainDialog" sequence="true"> ... <field id="LabelFieldNom" mode="read"> <element type="String">Nom :</element> </field> <field id="FieldNom" mode="read-write"> <element type="String">Toto</element> </field> ... </dialog> </structure> </interface></sunml>

Fichier SUNML (Spécification)

Réification

durand

Composant métier (Exécution)

?

?

?



Séparation du composant d’IHM du composant métierExpression des communications possibles entre ces composants avec ISLAdaptation des composants suivant le contexte d’exécution

durand

FicheClient

IHM concrète

IHM abstraite

Composant métier

JFrame1

LégendeInstance

interaction

Controleur


Exemple de Liste de Clients

<sunml> <interface id="ListeClients"> <structure> <dialog id="MainDialog" sequence="true"> <list id="ListeClients" reference="FicheClient" select="Field[FieldNom]"/> </list> </structure> </interface></sunml>

Fichier SUNML (spécification)

Exemple en Swing

Composition Représentant – Client (1-n) : Liste de clients


Contenu du module

Exemple d’adaptation aux utilisateurs :–Web pour Déficients visuels

journée intech device independence – page 1 ihm et multiplicité des supports : problématique -...

Documents

ihm page

logicielle page

versions page

lergonomie page

exemple dopen plug page

contenu du module

compte du contexte

module am dery