Journée Intech Device Independence – Page 1 Conception et Architecture d IHM : Introduction Anne-Marie Déry [email protected] Merci tout particulièrement à

Journée Intech Device Independence – Page 1

Conception et Architecture d’ IHM :

Introduction

Anne-Marie Déry [email protected]

Merci tout particulièrement à Laurence Nigay, Gaelle

Calvary de l’IMAG et au GT Mobilité et Ubiquité


Quelques définitions

CHM Communication Homme MachineEtude de la conception des systèmes informatiques

contrôle aérien, centrale nucléaire : sécuritébureautique : productivitéjeux : engagement

Des utilisateurs

IHM Interface Homme Machine (1970)contact utilisateur système =

langage d'entrée +de sortie + gestion de l'interaction

Interaction Homme Machine (1980)Discipline englobant la conception, l'évaluation et le

développement de systèmes interactifs


Problématique actuelle

Prendre en compte les avancées technologiquesnouveaux supports matérielsarrivée du net (masse de données + réseaux)nouveaux moyens d'interactionsmultimédia : son, images

de plus en plus d'utilisateurs des novices aux experts

Succès des interfaces ?facilité d'utilisation même si le service offert est complexevoiture vs électroménagertéléphone : nouvelle gamme


Utilisabilité des interfaces

Facile à apprendre et à utiliserRetour d'information rassurant, informatif et immédiat

La conception doit répondre aux besoins, connaissances etCaractéristiques des utilisateurs

Objectif avoué : fiabilité, efficacité, productivité

3 aspects étudiés à travers le moduleconception, évaluation, prototypage


Objectifs du module

Etude de marché et/ou réalisation de logiciels à la demande (constructeurs d’applications)

Fournir un prototype adapté aux besoins clients

Evaluer le coût de réalisation du produit final– Mettre l’accent sur l’IHM pour le dialogue

ETAPE 2 (février)

Architecture logicielle pour la mise en œuvre réelle de l’application

ETAPE 1 (décembre)


Cycle de vie des IHMs


Plan à suivre (étape 1)

Définir le modèle conceptuel de l’utilisateur

Dégager le modèle de conception

Charte graphique et contraintes ergonomiques

Réaliser un prototype

Evaluer le prototype


Plan à suivre (étape 2)

Prendre en compte les retours de l’évaluation

Préparer l’architecture logicielle : choix

d’implémentation

Réaliser un prototype plus finalisé


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

– Ingénierie au cas par cas insuffisante

• Coûts de développement et de maintenance

• Cohérence ergonomique entre versions

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– assurer la sécurité et la confidentialité


Analyse des besoins

Conception

Conception logicielle

Codage

Tests Unitaires

Tests d’intégration

Tests UtilisateursEvaluation ergonomique

Boîtes à outils

Mécanismes généraux

Modèle d’architecture logicielle

Espace de conception

Propriétés ergonomiques

Dimensions de l ’espace problème


Espace de conception :

Plasticité

Propriétés ergonomiques :

Autonomie

Poids


Conception ergonomique

Conception logicielle Outil de développement :

Context Toolkit



Selon trois axes

Techniques d’interaction

Collaboration

Contexte



Selon trois axes


Collaboration

Contexte


Système interactif sensible au contexte

Système interactif sensible au contexte• capable d’identifier les circonstances qui entourent l’action utilisateur • en vue d’offrir des services contextualisés

– offre sélective d’information – décoration contextuelle pour recherche ultérieure

Contexte : ensemble de propriétés de phénomènes physiques qui peuvent être captées





Exemple : Plate-forme MAGIC


Applicatifs envisagés

Localisation de l’utilisateur

Identification et localisation de dispositifs d’interaction


Applications de proximité

Applications de proximité centraux légers

CEP Vendeurs Clients potentiels

Centre hospitalierServeurs BD, PC

des secrétariats …

Médecins : PDAs, PC portables

Patients : carte vitale

…

Hospitalisation à domicile

« HAN fixe » du patient

Médecins : PDAs, PC portables …



Selon trois axes


Collaboration

Contexte


Mobilité : nouveau découpage spatio-temporel

Déplacement dans l’espace

Variation dans le temps : synchronisme/ asynchronisme

local distant

asyn

chro

ne

syn

chro

ne


Mobilité : nouveau découpage spatial

Etude selon les lieux d’interaction et non la distance

CONFINElieu de l’interaction

délimité

VAGABONDlieu de l’interaction

n’importe oùENSEMBLE DISPERSE

IDENTIQUE(local)

DIFFERENT(distant)


Plate-forme Magic

Camera + Micro

Casque + Ecouteurs

Capteur d’orientation

Stylos

Tablette + Extenseur de port

Réseau sans fils


MAGIC : Travail sur le terrain de fouille

Explorer le site (Mobilité)

Travailler en groupe sur le site (Collecticiel)

S’informer auprès d’experts distants (Collecticiel)

Comparer des objets physiques avec des objets d’une base de données (Augmentation)

Accéder aux objets enlevés du site (Augmentation)


MAGIC : vue d’ensemble

• Sur la tablette :– Communication

(forum, mail, etc.)

– Coordination (carte)

– Production (outils d’édition)

• A travers le casque:– Combinaison du

physique avec l’informatique grâce à la passerelle


• Un archéologue travaille

• Il trouve un objet• La découverte est retirée

du site

• L’objet est sauvegardé dans une base de données

• Un archéologue approche de où était l’objet

• La découverte est virtuellement disponible

Terrain augmenté


Menu

Formules

Liste

Gestion du piège

Gestion des cubes

HistoriqueCarte

TROC : Interface de la tablette tactile


Temps de jeu

Objet ciblé

Description de l’objet ciblé

Formules actives

Autre objet visible

Niveau d’énergie magique

Œil magiqueMessages

Interface dans le casque



Selon trois axes


Collaboration

Contexte


Mobilité : Interface « Baby face » De très nombreuses techniques d ’interaction

Technique d ’interaction : plusieurs perspectives• psychologie cognitive : système sensoriel• informatique : technique d’interaction

Technique d’interaction : plusieurs niveaux d’abstraction–dispositif physique

clavier, souris, écran, haut-parleur, ...

–Système représentationnellangue pseudo-naturelle, manipulation directe, ...

Système sensoriel

Système cognitif


Interface « Baby face »

Technique d ’interaction en sortie

Son spatialisé : T = <haut-parleur, LN>

SoundbeamNeckset

RDV à 15h


Interface « Baby face » : multimodalité

Plusieurs techniques ou modalités d ’interaction

Apports de la multimodalité –Flexibilité/adaptabilité (contexte d ’usage)–Robustesse (complémentarité, redondance)–Expressivité (complémentarité)

Problèmes posés –Validation empirique de ces apports –Etude de l’usage des modalités (choix, appropriation, etc.)


Interface « Baby face » : multimodalité Technique = <d, s> Go to the middle

of the message

T = <caméra-doigt, gestes> T = <micro, pseudo LN>

T = <ordinateur, gestes> T = <stylet, manipulation directe>



Magicien d ’oz

Compère Sujet observé



Usage des modalités par les sujets

Toutes commandes / Toutes sessions

Vocale

Tactile

Gestuelle

Embodied



Usage des techniques d ’interaction par les sujets

Variabilité inter-individuelle importante dans l ’usage (fréquence, préférences variées)

Spécialisation

Peu de redondance et de complémentarité



Interaction homme-machine


Collaboration

Contexte



– Ingénierie au cas par cas insuffisante

• Coûts de développement et de maintenance

• Cohérence ergonomique entre versions

Des problèmes classiques prennent une importance particulière– concevoir pour plusieurs plates-formes– assurer la sécurité et la confidentialité


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)


Traducteurs

XML

XSLHTML

VoiceML

WML

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


Langage de description d’interfaces


UIML

« User Interface Markup Language »

Langage multi-interface (graphique, voix, ...)

Une norme : UIML (uiml.org)

Des implémentations ou « renderers » Harmonia : Awt/Swing, HTML, WML, VXML, ... Rubico : Visual Basic, GUI builder TV Server, AG : C++ for embedded systems

Jeremy Fierstone / Equipe Rainbow / 45


Document UIML

Les 4 parties d'un document UIML:

<Head> : metadata (author, date, version, ...) <Template> : réutilisation de fragments <Interface> : interface proprement dite

<Structure> : arbre des « widgets » <Style> : styles (propriétés) des widgets <Content> : contenu (texte, image, son) <Behavior> : objet / événement / action

<Peers> : mappings et liens vers l'extérieur

Jeremy Fierstone / Equipe Rainbow / 46


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


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



Traductions automatiques insufisantes

Ergonomie des versions

Multiplicité des traducteurs


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


Cadre de référence : principes “Spécifier 1 fois -> N Interfaces” approche par modèles

Trois groupes de modèles

Domaine

Contexte

Adaptation

Trois instanciations

Ontologiques: Métadescriptifs, théorie

Archetypes: spécifiques au contexte ciblé, phase “conception”

Observés: exécutables, phase “exécution”


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


Tâches &Concepts

IHM abstraite

IHM concrète

IHM finale

Config 1

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


Consensus et RIML (SAP)

Même principe que ArtStudio : un moteur d'adaptation basé sur une catégorisation des devices (analyse d'utilisabilité donne un nombre de classes de devices limité qui représente des devices se comportant de façon similaire pour les utilisateurs)

–Avantages pour les programmeurs d'application

–Abstraction des devices

–Inutile d'apprendre de nouveaux langages, de connaître de nouveaux devices

–Facilité d'intégration

–Meilleure usabilité que les traducteurs

–libre choix de devices

– Rapidité de développement sur de nouveaux devices

•Ajout d'un render


Adaptation syntaxique

En fonction du device

Règles d'encodage

Adaptation

Editeur

RIML

Adaptation sémantique

Filtrage des données



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


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


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


Leçon 1: Le contexte peut seulement être défini pour une finalité

Leçon 2: Le contexte est un espace d'informations qui sert l'interprétation

Leçon 3: Le contexte est un espace d'informations partagé

Leçon 4: Le contexte est un espace d’informations infini et évolutif

Contexte : Absence de consensus mais des leçons


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}>



Des solutions à des problèmes anciens à revoir– les techniques d'interaction : windows, icons, menus, pointing


Ordinateur, ubiquité et mobilité

Ubiquité(environnementéquipé)

Mobilité(utilisateuréquipé)


Ordinateur Vestimentaire

L ’ordinateur vestimentaire apparaît donc comme l’ordinateur de l’utilisateur mobile– Encore souvent son téléphone, son ordinateur de

bureau...– Or la mobilité appelle d’autres applications pour

l ’ordinateur : ordinateur de plongée, ...

Il s ’agit souvent de systèmes Ad-Hoc, non ouverts, non flexibles


Mini Projets d'IHM

Par groupe de 4 au plus

Sujets accessibles à l'adresse :http://www.essi.fr/~pinna/MODULEIHM/

Choix par mail avant mercredi prochain A priori 1 groupe pour un sujet


Merci à … Laurence Nigay (IMAG) :

– Exposé de synthèse aux Asisses I3 Marie THILLIEZ (Université de Valenciennes) :

– LES APPLICATIONS DE PROXIMITE

Gaëtan Rey, Joëlle Coutaz (IMAG) : – LE CONTEXTEUR: UN MODELE COMPUTATIONEL POUR LE CONTEXTE

Joelle Coutaz et Gaelle Calvary (IMAG) :– Plasticité des interfaces

Philippe Renevier, Laurence Nigay, Pascal Salembier, Jullien Bouchet, Laurence Pasqualetti

(IMAG)– SYSTEMES MIXTES MOBILES ET COLLABORATIFS

– TROC : UN JEU COLLABORATIF SUR SUPPORT MOBILEEXPLOITANT DES TECHNIQUES DE REALITE AUGMENTEE

Jean-Yves Tigli (I3S)– WCOMP : UNE PLATE-FORME EXPERIMENTALE OUVERTE D'ORDINATEUR VESTIMENTAIRE

Anne-Marie Dery-Pinna et Jérémy Fierstone (I3S) : – COMPOSANTS ADAPTABLES ET MOBILES

– Et tout le groupe : http://iihm.imag.fr/nigay/GTMOB/Dec2002/

Documents

Journée Intech Device Independence – Page 1 Conception et Architecture d IHM : Introduction Anne-Marie Déry [email protected] Merci tout particulièrement à