Interface Homme-Machine 2

Transcription

1 Interface Homme-Machine 2 Les architectures logicielles Jérôme DAVID Master IC2A Une partie de ce cours est issue des cours de : Jean-Yves Antoine (université de Tours) pour la partie règles de conception - ergonomie Nicolas Normand (Polytech Nantes) pour l architecture MVC et les composants JAVA Antoine Pigeau (Polytech Nantes) pour Qt Jambi Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

2 1 Introduction et rappels 2 Analyse de la tâche et des communautés d utilisateurs visés 3 Quelques règles de conception 4 Design général de l interface 5 IHM et architectures logicielles Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

3 Définitions d une interface Défintion d une interface Une interface est une zone, réelle ou virtuelle qui sépare deux éléments. L interface désigne ainsi ce que chaque élément a besoin de connaître de l autre pour pouvoir fonctionner correctement. (Wikipédia) Un autre défintion d une interface Au sens large, une interface est un dispositif qui sert de limite commune à plusieurs entités communicantes. Pour que la communication soit possible, un dispositif doit assurer à la fois la connexion physique entre les entités et effectuer des opérations de traduction entre les formalismes. (J. Coutaz - Interface Homme Machine) Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

4 Définition d une interface Homme-machine Définition de l interface Homme-machine L interface Homme-machine ou interaction humain-machine (IHM) étudie la façon dont les humains interagissent avec les ordinateurs ou entre eux à l aide d ordinateurs, ainsi que la façon de concevoir des systèmes informatiques qui soient ergonomiques, c est-à-dire efficaces, faciles à utiliser ou plus généralement adaptés à leur contexte d utilisation.(wikipédia) La réalisation d une interface suppose donc la connaissance précise du comportement de chacune des entités à relier : si les entités sont des objets artificiels, les formalismes de communication sont maitrisés si l une des entités est un humain, la définition de l interface devient arbitraire Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

5 Méthodologie de conception des IHMs Analyse de la tâche et des communautés d utilisateurs auxquelles est destiné le système modèle de la tâche (donc de l interaction) et de l utilisateur choix de conception de l IHM Conception : respect de principes ergonomiques aide à déterminer les besoins oriente certains choix de conception guide l implémentation des fonctionnalités précises Architecture : modèles de conception d IHM Seeheim, Arch MVC, PAC, PAC Amadeus Évaluation Validation des choix de conception et d implémentation par des tests d usage sur prototypes Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

6 1 Introduction et rappels 2 Analyse de la tâche et des communautés d utilisateurs visés 3 Quelques règles de conception 4 Design général de l interface 5 IHM et architectures logicielles Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

7 La diversité des utilisateurs Les utilisateurs sont très variés : caractéristiques sociologiques (âge, sexe, culture, éducation, etc.) connaissance du contexte capacités physiques différents buts et motivations impact des erreurs utilisateurs etc. Le désign d IHM doit donc commencer par prendre en compte la population visée. Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

8 Les profils d usagers Novice et primo-utilisateur : anxieux, à rassurer pour faciliter l apprentissage et éviter les rejets Limiter le nombre d actions, de concepts Favoriser les retours informatifs Manuel d utilisation intuitif ( man!), tutoriel pas-à-pas Aide contextuelle Utilisateur occasionnel : connaissance globale du système mais difficulté à se rappeler la position des différentes fonctionnalités Consistance de l interface et bonne organisation des menus Prévention des erreurs pour favoriser l exploration des fonctionnalités. Aide en ligne + manuel de référence bien organisé Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

9 Les profils d usagers Utilisateur expert : excellente connaissance du domaine de la tâche, du système et de son interface. Recherche avant tout l efficacité et la rapidité Raccourcis clavier Commande en ligne Création de macros Dilemmes de la conception d une IHM : design for all Un logiciel s adresse souvent à plusieurs communautés d utilisateurs très différents Il faut concevoir des IHM à niveaux d usages multiples (flexibilité de l interface) Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

10 Les profils de tâche Un utilisateur réalise une tâche donnée en combinant plusieurs actions. Les actions complexes peuvent être découpées en actions élémentaires dites atomiques. Le concepteur doit identifier ces actions. 1 er problème : trouver le bon compromis d actions atomiques Pas assez d actions atomiques : utilisateur frustré par le nombre d actions à réaliser pour accomplir sa tâche. Trop d actions atomiques : utilisateur perdu par le nombre d options disponibles. 2 nd problème : il faut organiser ces actions atomiques : Les actions fréquentes doivent être facilement accessibles. Exemple : 1 touche clavier, une icône dans la barre d outil, etc. Les actions moins fréquentes doivent être seulement dans les menus où accessibles via des combinaisons de touches. Exemple : CTRL + TOUCHE Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

11 Les styles d interaction Plusieurs styles d interaction sont envisageables pour une tâche donnée : 1 Langage de commande 2 Menus 3 Manipulation directe : interfaces WIMP 4 Formulaires de saisie 5 Langage naturel (écrit, parole) 6 Interfaces 3D, gestuelles, réalité augmentée... Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

12 Styles d interaction : avantages/désavantages Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

13 Styles d interaction et niveaux d expertise Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

14 1 Introduction et rappels 2 Analyse de la tâche et des communautés d utilisateurs visés 3 Quelques règles de conception Quelques principes ergonomiques Les directives ou guidelines 4 Design général de l interface 5 IHM et architectures logicielles Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

15 Méthodologie : règles de conception Principes ergonomiques règles générales indépendante de la technologie mais inspirées par de la psychologie cognitive ou des sciences sociales recommandations de faible autorité (peu contraignantes) Règles d or de Shneiderman Recommandations ou directives (guidelines) règles de conception encore assez générales mais plus liées à la technologie. Peuvent concerner des éléments précis de l IHM recommandations d autorité modérée Standards règles de conception technologiques très spécifiques recommandations de portée limitée mais de forte autorité (contraintes explicites si on désire suivre la norme) exemple : Normes ISO (TC SC4 Ergonomie IHMs) & AFNOR Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

16 Méthodologie : règles de conception Mise en garde Les directives et autres principes ergonomiques ne constituent pas des vérités absolues : confronter à la réalité du problème Certaines directives peuvent paraître contradictoire entre elles : bien comprendre leur background et leur champ d application Principe de précaution Les principes et autres directives sont avant tout des sources d information issues d expériences à prendre en considération... en en comprenant l esprit. Seules certaines directives de forte autorité doivent être respectées à la lettre (norme ou respecter, standard imposé) Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

17 1 Introduction et rappels 2 Analyse de la tâche et des communautés d utilisateurs visés 3 Quelques règles de conception Quelques principes ergonomiques Les directives ou guidelines 4 Design général de l interface 5 IHM et architectures logicielles Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

18 Les 8 règles d or de Ben Shneiderman 1 S attacher à la consistance de l IHM 2 Permettre aux utilisateurs experts d utiliser des raccourcis 3 Offrir des retours informatifs 4 Concevoir des dialogues pour permettre d arriver à ses fins 5 Permettre la réversibilité des actions 6 Offrir la prévention des erreurs et un traitement des erreurs 7 Donner un sentiment de contrôle aux usagers sur le système (causalité) 8 Réduire la surcharge cognitive de la mémoire à court terme Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

19 La consistance des IHM Il existe plusieurs formes de consistance : la consistance dans les séquences d actions la consistance dans le vocabulaire utilisé la consistance dans la présentation (polices, couleurs, etc.) Exemple : des menus et icônes consistants entre le deux logiciels Word et Excel Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

20 Les raccourcis Un utilisateur expérimenté va vouloir réduire le nombre d interaction avec le système. Il est plus intéressé par une haute-disponibilité du système : réponses rapides, etc. Il faut lui donner des raccourcis : Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

21 Les retours informatifs Ils sont importants mais doit être proportionnés par rapport à l action. action mineure et fréquente : réponse modeste (message dans la barre des tâches) action majeur et occasionnelle : réponse plus détaillée (message dans boite de dialogue) Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

22 Les dialogues interactifs Prévoir des dialogues pour organiser des séquences d actions. Exemple : les assistants Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

23 La réversibilité des actions L utilisateur doit pouvoir annuler/rétablir ses actions ou encore revenir en arrière. Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

24 La prévention des erreurs «Mieux vaut prévenir que guérir» : désactiver les actions non possibles contraindre le format des champs de saisie ou fournir les valeurs attendues (listes) prévenir l utilisateur lors d actions irréversibles etc. Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

25 Le traitement des erreurs Lors du traitement de l erreur, il faut faciliter la tâche de l utilisateur et ne pas le culpabiliser : prévenir l erreur le plus tôt possible placer le message là où l utilisateur est censé regarder permettre à l utilisateur de corriger facilement les données saisies préférer les messages explicatifs et constructifs : donner si possible des instructions pour corriger éviter les «messages d insulte» genre «Erreur fatale...»)ou les messages pas explicites genre «Erreur 500» Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

26 Messages d erreurs Précision et spécificité des messages : un message trop général ne permet pas de comprendre l erreur. Exemple : Cas d une recherche booléenne ordinateur ET (sociologie OU psychologie Erreur de syntaxe A éviter Erreur : manque la parenthèse gauche Préférable Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

27 Messages d erreurs Messages informatifs et constructifs Ne pas condamner l utilisateur pour son erreur Erreur fatale : Mauvaise saisie Erreur : Valeur non reconnue Déconseillé Préférable Eviter les termes techniques dès que possible Proposer si possible une solution (principe de guidage) Formulation naturelle des erreurs Ne pas rappeler à l utilisateur qu il n est pas informaticien... Phrases plutôt que mots clés Ne pas mettre en avant les informations techniques Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

28 Messages d erreurs Messages informatifs / guidage Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

29 Messages d erreurs Messages naturels et constructifs : exemples Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

30 Messages d erreurs Formulation naturelle des messages Éviter les verbes à la forme nominale (exemple : affichage) Forme active plutôt que forme passive Éviter les formes négatives, sources d erreurs Respecter l ordre dans lequel les actions doivent être exécutées Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

31 Messages d erreurs Observabilité : messages détectables Position près de l erreur ou du focus Travail sur la présentation : couleurs, polices de caractères, surbrillance Pop-up windows + caractère dynamique facilement détectable + possibilité de placer le message près de l objet concerné - masquage de l information Alerte sonore + charge cognitive : autre stimulus que la vision - peut être ignorée par l utilisateur - sémantique sonore : limiter le nombre de sons Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

32 Messages d erreurs Exemple Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

33 Messages d erreurs Contre-Exemple Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

34 Donner le sentiment de contrôle : la causalité et l observabilité L utilisateur doit se sentir maître du système. Causalité facilité de déterminer le comportement du système à partir d interactions antérieures. Observabilité facilité offerte à l utilisateur de vérifier les effets de ses actions observabilité immédiate / éventuelle Exemple : l explorateur Windows Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

35 Réduire la charge cognitive de l utilisateur L humain a une mémoire à court terme limitée : capacité : principe des 7 lemmes d information ± 2 de Georges Miller (1956) temps : 15 à 30 secondes facilement distraite Vers des interfaces épurées de superflus : exemple de Google Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

36 1 Introduction et rappels 2 Analyse de la tâche et des communautés d utilisateurs visés 3 Quelques règles de conception Quelques principes ergonomiques Les directives ou guidelines 4 Design général de l interface 5 IHM et architectures logicielles Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

37 Les directives ou guidelines Directives de recommandations générales Synthèses de recommandations générales sur toutes plateformes Smith & Mosier (1986) Brown (1988) Mayhew (1992) Guidelines spécifiques à une plate forme ou un GUI Recommandations (souvent) plus concrètes permettant de favoriser, entre autres, la standardisation entres applications Apple s Human Interface Guidelines Microsoft Windows XP Visual Guidelines IBM Common User Access Advanced Interface Design Guide OSF/Motif Style Guide Java Look and Feel design Guidelines Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

38 Microsoft Windows XP Visual Guidelines Exemple : les icônes Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

39 Apple Human Interface Guidelines Exemple : placement des éléments dans une fenêtre de préférence Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

40 1 Introduction et rappels 2 Analyse de la tâche et des communautés d utilisateurs visés 3 Quelques règles de conception 4 Design général de l interface Agencement de l écran Formats d affichage et polices de caractères Les couleurs 5 IHM et architectures logicielles Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

41 Désign général de l affichage Affichage Problème complexe associant de multiples éléments (couleurs, disposition du texte, densité des données, placement des boutons, rédaction des messages, etc) nombreuses directives (162 chez Smith et Mosier) Points abordés : l agencement de l écran formats d affichage des champs textes ou numériques les polices de caractères les couleurs Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

42 1 Introduction et rappels 2 Analyse de la tâche et des communautés d utilisateurs visés 3 Quelques règles de conception 4 Design général de l interface Agencement de l écran Formats d affichage et polices de caractères Les couleurs 5 IHM et architectures logicielles Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

43 Agencement de l écran Parcours d une image : 2 stratégies Exploration : parcours en Z (culture occidentale) Image connue : recherche sélective à des positions qui lui semblent pertinentes cohérence au sein d une application Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

44 Agencement de l écran Exemple de parcours en Z Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

45 Agencement de l écran Zones de visibilité et d accessibilité Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

46 Agencement de l écran Le tracé régulateur : permet d homogénéiser les différentes fenêtres de l interface et ainsi d en faciliter l apprentissage Commandes Zone de sélection Zone de travail Zone de message à lecture optionnelle Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

47 Agencement de l écran Les zones de manipulation : espaces de l écran sujets à de nombreuses sélections à la souris, par exemple les barres de menus. Sens de lecture de gauche à droite : placement en fonction de l importance. Espace central plus facile à atteindre : commandes fréquentes. Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

48 1 Introduction et rappels 2 Analyse de la tâche et des communautés d utilisateurs visés 3 Quelques règles de conception 4 Design général de l interface Agencement de l écran Formats d affichage et polices de caractères Les couleurs 5 IHM et architectures logicielles Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

49 Formats d affichage Directives sur les formats d affichage issues de Smith & Mosier (1986) : Justifier à gauche les listes de données alphabétiques Justifier à droite les entiers Aligner les valeurs décimales avec la virgule Éviter les zéros non significatifs (sauf conventions contraires) Découper les nombres par groupes de 3 à 4 chiffres Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

50 Polices de caractères Quelques recommandations quant à l usage des polices : Utiliser au maximum 4 polices de caractères et dans le but de différencier les type d objets Les polices droites, sans empattement (sans shérif) facilitent la lecture d éléments isolés : Arial, Helvetica, Verdana Les lettres sérifiées, avec empattement créent une ligne virtuelle horizontal qui facilite la lecture des textes long : Time Eviter les italiques sauf cas particuliers, comme pour mettre en évidence Aérer le texte Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

51 1 Introduction et rappels 2 Analyse de la tâche et des communautés d utilisateurs visés 3 Quelques règles de conception 4 Design général de l interface Agencement de l écran Formats d affichage et polices de caractères Les couleurs 5 IHM et architectures logicielles Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

52 Utilisation des couleurs Codage couleur : recommandations perceptives Eviter le bleu saturé pour des affichages critiques ou du texte ou des objets de petite taille. Le bleu périphérique (encadrement) améliore la vision centrale) Limiter le nombre de couleurs pour favoriser leur discrimination : 4 au maximum dans un display et 7 ± 2 sur l ensemble de l interface. Utiliser des couleurs réparties sur l ensemble du spectre visible, mais éviter les couleurs opposées en juxtaposition. Eviter les contrastes trop faibles et penser aux daltoniens : différence en nuance et luminosité Eviter les fonds marrons et verts (Mayhew 1992) reflets... plus visible que mais plus fatiguant et plus sensible aux Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

53 Utilisation des couleurs Sémantique des couleurs Respecter le sens qu associent les utilisateurs aux couleurs : analyser ce sens suivant la communauté d utilisateurs visée. Faire attention aux significations culturelles et sociales des couleurs Etudier toujours la possibilité d un codage mixte couleur - texte Applications à haut degré de sécurité : norme NF X Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

54 Utilisation des couleurs Méthodologie de détermination des couleurs Concevoir en premier l interface... sans utiliser les couleurs : la couleur ne doit être qu un plus, le codage couleur ne doit JAMAIS se suffire à lui même (trop de risques de mauvaise interprétation) Classifier les types d objets ou de données à afficher Regrouper ces types par niveaux d importance... donc de visibilité Choisir les composantes couleurs pour chaque niveau d importance teinte : sémantique de l objet saturation et luminance : visibilité Prototypage (i.e. validation expérimentale) Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

55 Utilisation des couleurs Recommandations générales Cohérence dans l utilisation des couleurs sur l ensemble de l interface Etre conservateur dans l utilisation des couleurs : éviter les associations qui «flashent» trop sauf pour des messages critiques Utiliser la couleur comme une technique de codage pour l affichage des données, des messages d alerte... Utiliser le codage des couleurs pour densifier l information Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

56 Bibliographie Ouvrages généraux Mayhew D.J. (1992). Principles and guidelines in software user interface design, Prentice-Hall Nogier J.-F. (2005). Ergonomie du logiciel et design Web (3 e édition), Dunod.. Schneiderman B. (1998). Designing the User Interface (3 e édition), Addison-Wesley. Travaux cités Friedman B. (1995) It s the computer fault : reasonning about computers as moral agents. Actes ACM CHI 95, New-York, NJ, Quintanart L. et al (1982) Human computer interaction : a preliminary social psychosocial analysis. Behavior Research Methods and Instrumentation, 14(2), Mosteller W. (1981) Job entry control language errors, SHARE57, Chicago, MI, Pace B. (1984) Color combinations and contrasts reversal on visual display units. Actes 38th Annual Meeting of the Human Factors Society. Santa Monica, CA, Schneidermann B. (1982) System message design : guidelines and experimental results. In Badre A., Schneidermann B. (Ed.) Directions in Human-Computer Interaction. Ablex, Norwood, NJ Walker J., Sproull L., Subramani R. (1994) Using a human face in an interface, Actes ACM CHI 1994, New-York, NJ, Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

57 1 Introduction et rappels 2 Analyse de la tâche et des communautés d utilisateurs visés 3 Quelques règles de conception 4 Design général de l interface 5 IHM et architectures logicielles Programmation modale et programmation événementielle Les modèles de développement Le modèle de développement MVC Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

58 1 Introduction et rappels 2 Analyse de la tâche et des communautés d utilisateurs visés 3 Quelques règles de conception 4 Design général de l interface 5 IHM et architectures logicielles Programmation modale et programmation événementielle Les modèles de développement Le modèle de développement MVC Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

59 Programmation modale (séquentielle) Propriété : L application est divisée en un certain nombre d étapes ou modes qui s enchaînent Dans chaque étape, nous attendons (par scrutation du clavier...) un ordre de la part de l utilisateur et on agit en conséquence Avantage : Conception simple pour le développeur Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

60 Programmation modale (séquentielle) Désavantages : La programmation modale est néfaste pour l ergonomie pas de contrôle par l utilisateur qui subit le déroulement imposé pas de résultat visible immédiatement : difficulté à mémoriser la relation entre la tâche à accomplir et la séquence d action nécessaire pas de stabilité : les choix offerts changent, les mêmes actions produisent des résultats différents la structure du code le rend difficilement réutilisable Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

61 Programmation événementielle Propriétés : Un événement entraîne une action : Pour laisser à l utilisateur le contrôle de l application, un autre schéma doit être adopté dans lequel l utilisateur peut tout (ou presque) faire à tout moment Les actions variées de l utilisateur sont traduites en événements : structures ou objets qui décrivent tous leurs paramètres élément d origine, position,...) Les événements proviennent directement ou non d une action de l utilisateur (clavier, souris, nécessité de redessiner une fenêtre...) Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

62 Programmation événementielle Boucle d événements : Le programme principal est constitué d une boucle infinie qui scrute une file d événements et réagit de façon appropriée à chacun Cela nécessite d identifier la source de l événement et tous ses paramètres pour pouvoir sélectionner la réponse adéquate répéter attendre (événement) traiter (événement) jusqu à la fin Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

63 Programmation événementielle Méthode intégrée : Boucle d événements cachée gérée par le système, la machine virtuelle, l interprète... Méthode de gestion d événements attachée à chaque élément d interface la méthode est définie dans les classes concrètes Avantage/inconvénient : + La conception est plus modulaire - Une classe nouvelle est nécessaire pour chaque type de réaction : une classe de bouton pour Quitter, une autre pour Enregistrer - Le code de l application est trop proche de l interface et est dilué dans de nombreuses classes Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

64 Programmation événementielle Délégation : Chaque élément d interface délègue la gestion des événements à un ou plusieurs objets. séparation du code qui construit l interface de celui qui réagit aux événements Relation source-écouteur entre un élément d interface et les objets qui réagissent à ses événements. c est le modèle d événements de Java depuis la version 1.1 (cf. java.util.eventlistener) Les éléments d interfaces n ont plus à être dérivés pour adapter leurs réactions mais il faut à nouveau une fonction de sélection lorsqu un objet traite les événements provenant de plusieurs sources. Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

65 Programmation événementielle Exemple pour un Bouton : 1 créer un écouteur (comprenant l action à réaliser) et l enregistrer auprès de l élément de l interface 2 on clique sur le bouton : l action doit donc être déclenchée 3 notifier l écouteur 4 l écouteur exécute l action Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

66 Programmation événementielle Exemple pour un Bouton : l émission d un événement n est qu un simple appel de méthode patron de conception : observateur l écouteur doit implémenter une méthode définie à l avance avec l émetteur si une action est réalisée, l émetteur prévient l écouteur qui lance la méthode définie dans l interface ActionListener public MonObservateurDeBouton implements ActionListener {... public void actionperformed (ActionEvent event){... } } Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

67 Programmation événementielle Enregistrement des écouteurs en Java : Les éléments d interface (sources des événements) enregistrent tous les écouteurs qui le désirent. Lorsqu un événement survient, il est transmis à tous ceux qui s étaient inscrits préalablement. Le couplage entre les classes est faible (la source ne connaît chaque écouteur que par son interface). Exemple d enregistrement : mybutton est un bouton (source d événements ActionEvent), myactionlistener est une instance d une classe qui déclare l interface ActionListener. Pour enregistrer l écouteur sur le bouton! : mybutton.addactionlistener (myactionlistener); Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

68 1 Introduction et rappels 2 Analyse de la tâche et des communautés d utilisateurs visés 3 Quelques règles de conception 4 Design général de l interface 5 IHM et architectures logicielles Programmation modale et programmation événementielle Les modèles de développement Le modèle de développement MVC Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

69 Les modèles de développement En IHM, il existe plusieurs modèles de référence. identifient les composants et leur relations guident le choix de l architecture logicielle pour les IHMs Système interactif Utilisateur Interface Noyau fonctionnel "couche métier" Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

70 Les modèles de développement 3 types de modèles : Modèles à couches (ou linguistiques) modèle Seeheim (1885) modèle Arch (1992) Modèles à agents ou interacteurs (orientés objet) MVC Modèle-Vue-Controleur ( ) PAC Présentation-Abstraction-Contrôle (1988) Modèles hybrides PAC-Amodeus (1993) Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

71 Modèles de développement : les patrons Patron de Conception (ou design pattern) : MVC : Modèle - Vue - Contrôleur basé sur les patrons de conception : observateur (publication - souscription), command Propriétés : Séparation entre les données, l interface et le contrôleur le contrôleur s occupe de faire le lien entre les données et l interface Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

72 Patron de Conception Définition : concept destiné à résoudre les problèmes récurrents suivant le paradigme objet Formalisé dans le livre du «Gang of Four» (1995) Propriétés : Objectif : une formalisation de bonnes pratiques solutions éprouvées (prouvé» qu une fois qu il a été utilisé avec succès au moins dans trois cas) indépendants du langage de programmations minimiser les interactions qu il peut y avoir entre les différentes classes (ou modules, plus généralement) diminuer le temps nécessaire au développement augmenter la qualité du résultat, notamment en appliquant des solutions déjà existantes à des problèmes courants de conception définir un vocabulaire commun entre les différents acteurs de l écriture d un logiciel Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

73 Patron de Conception Caractérisation : un patron est caractérisé par 4 éléments essentiels Nom : décrit de façon succincte le problème, ses solutions et conséquences. Problème : situations où le modèle s applique. Solution : éléments de la conception, leurs relations, leur coopération. Conséquences : effets résultant de l application de la solution, contraintes qu elle entraîne. Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

74 Patron de Conception Classification : Les modèles de conceptions classiques (cf. GoF) sont classés en trois familles selon leur rôle! Création : concerne la création d objets (Singleton, Factory). Structurel : composition de classes ou d objets (Decorator). Comportemental : répartition des responsabilités, interaction des classes et instances (Command, Observer). Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

75 1 Introduction et rappels 2 Analyse de la tâche et des communautés d utilisateurs visés 3 Quelques règles de conception 4 Design général de l interface 5 IHM et architectures logicielles Programmation modale et programmation événementielle Les modèles de développement Le modèle de développement MVC Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

76 Modèle MVC MVC : Model - View - Controler Le Modèle Vue Contrôleur (MVC) est une architecture et une méthode de conception pour le développement d applications logicielles qui sépare le modèle de données, l interface utilisateur et la logique de contrôle. Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

77 Modèle MVC Modèle : Les objets modèle encapsulent les données de l application elle-même et l intelligence de leurs interactions : un objet modèle n est pas affichable directement un objet modèle ne fait pas référence à l interface un modèle est utilisable tel quel quelle que soit l interface (graphique, texte, vocale...) Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

78 Modèle MVC Vue : Une vue présente l information à l utilisateur. Elle ignore la sémantique des données qu elle affiche. Elle ne stocke pas les informations de l application. Elle dispose d un mécanisme qui lui permet d être informée des modifications du modèle. Une vue est réutilisable dans tout projet dans lequel des données sont affichées de la même façon. Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

79 Modèle MVC Contrôleur : L utilisateur manipule le contrôleur (en passant par la vue). Il gère les événements et agit sur : la vue (changement de mode d affichage...) le modèle (édition) Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

80 Modèle MVC Multiplicité des vues : La séparation modèle/vue permet plusieurs vues simultanées sur le même modèle. Si l utilisateur modifie le modèle via le contrôleur d une vue, toutes les autres vues sont affectées! : le modèle notifie toutes les vues de ses changements les vues peuvent interroger le modèle et se mettre à jour. Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

81 Modèle de conception en IHM Multiplicité des vues : figure tirée de Addison-Wesley - Design Patterns, p.243 Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

82 Modèle de Conception Modèle de conception en IHM : Quelques modèles de conception utilisés en IHM Observateur Commande Strategy,... Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

83 Modèle de conception en IHM Observateur : définit une dépendance d un sujet vers un ou plusieurs observateurs (objets dépendants). Lorsque que le sujet change son état, il notifie tous ses observateurs. La dépendance est : faible (l objet observé ne connaît pas a priori la classe de ses dépendances), dynamique (la liste des dépendances peut varier). Le pattern «Observateur» est utilisé dans MVC pour lier le modèle aux contrôleurs (aux vues). Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

84 Modèle de conception en IHM figure tirée de Addison-Wesley - Design Patterns, p.244 Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

85 Modèle de conception en IHM figure tirée de Addison-Wesley - Design Patterns, p.245 Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

86 Modèle de conception en IHM Observateur Java : Le package java.util définit plusieurs interfaces pour l implémentation du patron observateur l interface Observer dont héritent les observateurs concrets et qui déclare la méthode update (Observable o, Object arg) appelée lorsque l observé est modifié la classe Observable qui gère l ajout, la suppression des observateurs avec les méthodes addobserver (Observer o) deleteobserver (Observer o) et la notification de tous les observateurs avec : setchanged () notifyobservers (Object arg) Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

87 Modèle de conception en IHM Écouteur : La relation source-écouteur est une variante de la relation sujet-observateur. Exemple dans java.awt et java.awt.event : l interface ActionListener dont héritent les écouteurs concrets intéressés par les événements issus de la source ; elle définit : actionperformed (ActionEvent e) appelée lorsqu un événement est déclenché les composants source (e.g. Button) : chacun gère l ajout, la suppression des écouteurs avec les méthodes addactionlistener (ActionListener l) removeactionlistener (ActionListener l) pour les boutons JButton, JMenuItem, JToggleButton Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

88 Modèle de conception en IHM Commande : Encapsule une requête dans un objet une commande est représentée par un objet contenant les paramètres d entrés Exemple : une librairie d impression peut inclure une classe PrintJob. L utilisateur crée un objet de cette classe avec comme paramètre le nombre de copie, le nom du document à imprimer,...), et ensuite envoie l objet à l imprimante. Utilisation : pourquoi stocker des commandes dans des objets? les paramètres sont stockés dans un objet et la commande peut être lancée plus tard les informations sur la commande peuvent être enrichies : nom de l utilisateur qui a lancé la commande, temps de traitement,... gestion d un ensemble de commande pour les exécuter en mode batch pile de commande : undo/redo. La méthode actionperformed peut stocker un état pour annuler ensuite son effet. Conséquence : ce patron découple les objets invoquant l action des objets l exécutant Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

89 Modèle de conception en IHM figure tirée de Addison-Wesley - Design Patterns, p.196 Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

90 Modèle de conception en IHM figure tirée de Addison-Wesley - Design Patterns, p.196 Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

91 Modèle de conception en IHM figure tirée de Addison-Wesley - Design Patterns, p.197 Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

92 Modèle de conception en IHM Java Swing : javax.swing.action (sous-classe de ActionListener) est dédiée au pattern commande. Une instance concrète peut être connectée à un élément d interface actionnable (bouton, menu...) : l élément déclenche la commande lors d une action de l utilisateur l élément est une vue sur l objet commande et reflète son état (nom, valide ou invalide...) actionperformed une description de l action (chaîne de caractère à afficher sur le bouton) une icône (image du bouton, du menu) état enable ou disable (l état de l action met à jour l interface : bouton grisé/dégrisé ) Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

93 Modèle de conception en IHM Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94

94 Modèle de conception en IHM Plusieurs composants Swing ont une propriété action. Quand une action est initialisée sur un composant, les instructions suivantes sont réalisées : l action est rajoutée comme ActionListener au composant le composant configure certaines de ses propriétés à une valeur identique aux propriétés de l action le composant installe a un propertychangelistener sur l action. Ainsi le composant peut changer ses propriétés pour refléter les changements de l action. Jérôme DAVID () Interface Homme-Machine 2 Master IC2A / 94