1 / 67

Quelques définitions

Conception et Architecture d’ IHM : Introduction Anne-Marie Déry pinna@essi.fr Merci tout particulièrement à Laurence Nigay, Gaelle Calvary de l’IMAG et au GT Mobilité et Ubiquité. Quelques définitions. CHM Communication Homme Machine Etude de la conception des systèmes informatiques

sirius
Download Presentation

Quelques définitions

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Conception et Architecture d’ IHM : IntroductionAnne-Marie Déry pinna@essi.frMerci tout particulièrement à Laurence Nigay, Gaelle Calvary de l’IMAG et au GT Mobilité et Ubiquité

  2. Quelques définitions CHM Communication Homme Machine Etude 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

  3. Problématique actuelle Prendre en compte les avancées technologiques nouveaux supports matériels arrivée du net (masse de données + réseaux) nouveaux moyens d'interactions multimé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 complexe voiture vs électroménager téléphone : nouvelle gamme

  4. Utilisabilité des interfaces Facile à apprendre et à utiliser Retour d'information rassurant, informatif et immédiat La conception doit répondre aux besoins, connaissances et Caractéristiques des utilisateurs Objectif avoué : fiabilité, efficacité, productivité 3 aspects étudiés à travers le module conception, évaluation, prototypage

  5. 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)

  6. Cycle de vie des IHMs

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

  8. 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é

  9. Motivations et exemples d’applications visées

  10. IHM sur supports mobiles • Complexification de la conception ergonomique et logicielle

  11. IHM sur supports mobiles Complexification de la conception ergonomique et logicielle

  12. IHM sur supports mobiles • Complexification de la conception ergonomique et logicielle

  13. 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é

  14. Dimensions de l ’espace problème Espace de conception Propriétés ergonomiques Modèle d’architecture logicielle Boîtes à outils Mécanismes généraux A n a l y s e d e s b e s o i n s Evaluation ergonomique T e s t s U t i l i s a t e u r s C o n c e p t i o n T e s t s d ’ i n t é g r a t i o n C o n c e p t i o n l o g i c i e l l e T e s t s U n i t a i r e s C o d a g e

  15. Dimensions de l ’espace problème Espace de conception : Plasticité Propriétés ergonomiques : Autonomie Poids Outil de développement : Context Toolkit Conception ergonomique Conception logicielle

  16. Dimensions de l ’espace problème • Selon trois axes Techniques d’interaction Collaboration Contexte

  17. Dimensions de l ’espace problème • Selon trois axes Techniques d’interaction Collaboration Contexte

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

  19. Système interactif sensible au contexte

  20. Système interactif sensible au contexte • Exemple : Plate-forme MAGIC

  21. Applicatifs envisagés • Localisation de l’utilisateur • Identification et localisation de dispositifs d’interaction

  22. Applications de proximité

  23. Dimensions de l ’espace problème • Selon trois axes Techniques d’interaction Collaboration Contexte

  24. Mobilité : nouveau découpage spatio-temporel • Déplacement dans l’espace • Variation dans le temps : synchronisme/ asynchronisme asynchrone synchrone distant local

  25. Mobilité : nouveau découpage spatial IDENTIQUE (local) DIFFERENT (distant) CONFINE lieu de l’interaction délimité VAGABOND lieu de l’interaction n’importe où ENSEMBLE DISPERSE • Etude selon les lieux d’interaction et non la distance

  26. Plate-forme Magic Réseau sans fils Tablette+ Extenseur de port Stylos Casque + Ecouteurs Capteur d’orientation Camera + Micro

  27. 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)

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

  29. Terrain augmenté • 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

  30. TROC : Interface de la tablette tactile Menu Formules Liste Gestion des cubes Gestion du piège Historique Carte

  31. Interface dans le casque Temps de jeu Autre objet visible Objet ciblé Niveau d’énergie magique Description de l’objet ciblé Formules actives Messages Œil magique

  32. Dimensions de l ’espace problème • Selon trois axes Techniques d’interaction Collaboration Contexte

  33. Mobilité : Interface « Baby face » Système sensoriel Système cognitif • 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ésentationnel langue pseudo-naturelle, manipulation directe, ...

  34. Interface « Baby face » • Technique d ’interaction en sortie • Son spatialisé : T = <haut-parleur, LN> RDV à 15h SoundbeamNeckset

  35. 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.)

  36. Interface « Baby face » : multimodalité Go to the middle of the message • Technique = <d, s> T = <caméra-doigt, gestes> T = <micro, pseudo LN> T = <ordinateur, gestes> T = <stylet, manipulation directe>

  37. Interface « Baby face » : multimodalité • Magicien d ’oz Compère Sujet observé

  38. Interface « Baby face » : multimodalité • Usage des modalités par les sujets • Toutes commandes / Toutes sessions Vocale Tactile Gestuelle Embodied

  39. Interface « Baby face » : multimodalité • 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é

  40. Dimensions de l ’espace problème • Interaction homme-machine Techniques d’interaction Collaboration Contexte

  41. 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 • Des problèmes classiques prennent une importance particulière • concevoir pour plusieurs plates-formes • assurer la sécurité et la confidentialité

  42. 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)

  43. Traducteurs XML et XSL pour la présentation, UIML, SUNML, Xforms …. XSL HTML XML VoiceML WML

  44. Langage de description d’interfaces

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

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

  47. De l’IHM abstraite vers l’IHM concrète IHM abstraite (Exécution) Fichier SUNML (Spécification) <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> HMI FicheClient Réification MainDialog Dialog ... LabelFieldNom FieldNom Field Field Projection IHM concrète (Exécution) JFrame1 JFrame JPanel1 JPanel ... JField1 JLabel1 JTextField JLabel Légende Instance

  48. Exemple de Liste de Clients Composition Représentant – Client (1-n) : Liste de clients Fichier SUNML (spécification) <sunml> <interface id="ListeClients"> <structure> <dialog id="MainDialog" sequence="true"> <list id="ListeClients" reference="FicheClient" select="Field[FieldNom]"/> </list> </structure> </interface> </sunml> Exemple en Swing

  49. Les enjeux de la mutation Traductions automatiques insufisantes Ergonomie des versions Multiplicité des traducteurs

  50. Espace problème Seuil de plasticité Domaine de plasticité Contexte couvert par l’IHM Contexte non couvert C1 C2 • Domaine de plasticité

More Related