Patterns de conception d’IHM

2. Patterns de conception d’IHM Jean-Bernard Crampes et Laurent Nonne IUT de Blagnac

3. PLAN 1 : Introduction 2 : Modélisation de l’IHM 3 : Patterns de conception d’IHM 4 : Conclusion

4. Modélisation de l’IHM Patterns de conception d’IHM Conclusion Introduction 1 Introduction

5. Modélisation de l’IHM Patterns de conception d’IHM Conclusion Introduction Nécessité de concevoir l’IHM • Permettre une bonne capture des besoins utilisateurs en modélisant la logique d'enchaînement des fonctions de l'application (analyse). • Décliner cette logique d’enchaînement en modèles plus proches du développement (traçabilité entre analyse, conception et développement). • Avoir une vision d’ensemble de l’IHM de l’application (communication, maintenance…). • Permettre une estimation de la charge de développement de l’IHM (nb jours/homme par fenêtre ou page Web).

6. Modélisation de l’IHM Patterns de conception d’IHM Conclusion Introduction Constat • UML propose de nombreux modèles mais aucun n’est véritablement adapté à la modélisation des IHM. • Les concepts UML (objet, classe, état, message…) ne sont pas des concepts adaptés aux IHM. Justification de modèles complémentaires à UML pour modéliser l’IHM…

7. Modélisation de l’IHM Introduction Patterns de conception d’IHM Conclusion 2 Modélisation de l’IHM

8. Modélisation de l’IHM Introduction Patterns de conception d’IHM Conclusion Les modèles d’IHM de la méthode MACAO • Modèle Conceptuel d’IHM (MCI) • Modèle Logique d’IHM (MLI) http://www.iut-blagnac.fr/MACAO/PageMACAO.html

9. Modélisation de l’IHM Introduction Patterns de conception d’IHM Conclusion Le Schéma Navigationnel d'IHM (SNI) Le SNI permet de concevoir et de modéliser la logique d'enchaînement des fonctions de l'application en fonction du comportement supposé de l'utilisateur. Le SNI est purement conceptuel (MCI) • il est indépendant du type d'interface utilisé (texte, graphique, web…) • il fait abstraction de tout aspect matériel (clavier, écran, souris...) • il ne représente pas les traitementsréalisés dans l'application

10. Modélisation de l’IHM Introduction Patterns de conception d’IHM Conclusion Les Unités de Dialogue On appellera "Unité de Dialogue" (UD) l'ensemble des fonctions offertes à l'utilisateur de façon simultanée (sur un même écran, dans une même fenêtre, dans une même page) Chaque UD est représentée par un ou plusieurs symboles dans le SNI Une UD élémentaire = un seul symbole Une UD composée = plusieurs symboles

11. Modélisation de l’IHM Introduction Patterns de conception d’IHM Conclusion Saisie de données Affichage simple (un objet ou un résultat) Affichage d’une liste d’objets Proposition d’options Opt1 Opt2 Opt3 Opt4 Opt5 Message (erreur, avertissement, information) Les UD élémentaires

12. Modélisation de l’IHM Introduction Patterns de conception d’IHM Conclusion Modification de données Suites à donner à un affichage simple • Suites à donner à une liste • Opt1 : indépendamment des objets • Opt2 : pour un objet sélectionné • Opt3 : pour N objets sélectionnés N 1 Opt1 Opt2 Opt3 Opt4 Opt5 Opt1 Opt2 Opt3 Les UD composées par juxtaposition

13. Modélisation de l’IHM Introduction Patterns de conception d’IHM Conclusion Affichage simultané de deux objets Objet 1 Objet 2 Affichage simultané d’un objet et d’une liste d’objets Objet Liste Les UD composées par boîte de groupage

14. Modélisation de l’IHM Introduction Patterns de conception d’IHM Conclusion Construction du SNI ? • Nécessité de disposer d’une méthodologie de conception • Besoin de « Patterns de conception » pour faciliter et standardiser la réalisation de l’IHM

15. Introduction Modélisation de l’IHM Patterns de conception d’IHM Conclusion 3 Patterns de conception d’IHM

16. Introduction Modélisation de l’IHM Patterns de conception d’IHM Conclusion Construction du Schéma Navigationnel d'IHM (SNI) Le SNI est construit en utilisant : • Le diagramme des classes métier • Classes et attributs • Relations (associations, généralisations) • L'architecture fonctionnelle • Cas d’utilisation • Droits d'accès

17. Introduction Modélisation de l’IHM Patterns de conception d’IHM Conclusion Adoption du principe OBJET ACTION Méthode de construction du SNI Mise en évidence de cinq patrons d’IHM à partir du diagramme des classes : 1 – Racine (classes ciblées) 2 – Détail (sélection d’un objet dans une liste d’objets) 3 – Liaison (association entre deux classes) 4 – Aiguillage (généralisation) 5 – Administration (mise à jour, création, suppression d’objets)

18. Introduction Modélisation de l’IHM Patterns de conception d’IHM Conclusion C1 C3 C1 C2 C3 Objets-C3 (a1C3, a2C3) a1C1a2C1 a1C2a2C2 a1C3a2C3 ... ... ... Application Objets-C1 (a1C1, a2C1) Le patron « racine » Ciblage des classesMettre en évidence les classes prépondérantes, dont les objets seront présentés au premier niveau de l’IHM

19. Introduction Modélisation de l’IHM Patterns de conception d’IHM Conclusion C1 C2 a1C1a2C1... a1C2a2C2... 0.. 1 Application C1 1 Détail Attributs de C2 Attributs de C1 Le patron « détail » Objets-C1 (a1C1, a2C1, a1C2)

20. Introduction Modélisation de l’IHM Patterns de conception d’IHM Conclusion C Super-classe Liste C C (Attributs de C TypeObjet) Attributs de C R 1 TypeObjet R Détail Sous-classes [ TypeObjet = T1 ] [ TypeObjet = T2 ] Attributs de C Attributs de C SC1 SC2 + + Attributs de SC1 Attributs de SC1 Attributs de SC2 Attributs de SC2 R2 R1 R1 R R2 R Le patron « aiguillage » : détail d’une généralisation

21. Introduction Modélisation de l’IHM Patterns de conception d’IHM Conclusion C1 C3 1..* lier * a1C1a2C1... a1C3a2C3... Application C1 C3 Objets-C1 (a1C1, a2C1) Objets-C3 (a1C3, a2C3) 1 1 objets-C3 liés objets-C1 liés Le patron « liaison »

22. Introduction Modélisation de l’IHM Patterns de conception d’IHM Conclusion C1 C2 * a1C1a2C1... a1C2a2C2... Application C1 Objets-C1 (a1C1, a2C1) 1 Détail Attributs de C1 C2 (...) Le patron « liaison » : cas particulier d’une composition

23. Introduction Modélisation de l’IHM Patterns de conception d’IHM Conclusion [ Administrateur ] C1 (a1C1, a2C1) N 1 Supprimer Nouveau Détail Objet-C1 Objet-C1 Erreur Confirmation Confirmation Modifier Supprimer Objet-C1 Erreur Le patron « administration »

24. Introduction Modélisation de l’IHM Patterns de conception d’IHM Conclusion Clients Comptes TypeCpte codeClinomadresse num/ solde codeType libellé * 1.. * * 1.. 1 1 1 calculSolde() Prélèvement Automatique Compte Epargne Compte Chèque datelibellémontantdestinataire tauxInterets decouvAutorisedateCmdeCheq Opérations calculInterets( ) datelibellémontant calculAgios( ) * 0 .. 1 Exemple : Gestion de comptes bancaires Ciblage des classes

25. Introduction Modélisation de l’IHM Patterns de conception d’IHM Conclusion Gestion bancaire Clients Comptes Comptes (num, type) Clients (codeCli, nom) Mise en oeuvre du patron « racine »

26. Introduction Modélisation de l’IHM Patterns de conception d’IHM Conclusion Gestion bancaire Clients Comptes Comptes (num, type) Clients (codeCli, nom) 1 Détail client Comptes (Num, Type) Client Mise en oeuvre des patrons « détail » et « composition »

27. Introduction Modélisation de l’IHM Patterns de conception d’IHM Conclusion Gestion bancaire Comptes Comptes (num, type) 1 Détail [ type =Epargne ] [ type = Chèque ] Compte (num, solde, decouvAutorise, dateCdeCheq) Compte (num, solde, tauxInterets) Client Opérations Opérations Client Prélèvements automatiques Prélèvements Automatiques Mise en oeuvre du patron « aiguillage » ... ...et du patron « liaison »

28. Introduction Modélisation de l’IHM Patterns de conception d’IHM Conclusion [ Administrateur ] Clients (codeCli, nom) N 1 Supprimer Nouveau Détail Client Client Erreur Confirmation Confirmation Modifier Supprimer Client Erreur Mise en oeuvre du patron « administration »

29. Introduction Modélisation de l’IHM Modélisation de l’IHM Patterns de conception d’IHM Conclusion Introduction Modélisation de l’IHM Patterns de conception d’IHM Conclusion Gestion bancaire Calculer les Agios Comptes Comptes (num, type) Chef d’agence bancaire (C.A.) 1 Calculer les Intérêts [ C.A. ] [ C.A. ] Détail Calcul des intérêts Calcul des agios Complément du SNI avec le diagramme d’UC

30. Introduction Modélisation de l’IHM Patterns de conception d’IHM Conclusion 4 Conclusion

31. Introduction Modélisation de l’IHM Patterns de conception d’IHM Conclusion Conclusion • Le SNI comble un manque d’UML en matière de modélisation d’interface • Le SNI permet une conception de l’IHM en liaison avec 2 des principaux diagrammes d’UML: • Diagramme des Classes • Diagramme d’UC • Des Patterns de conception d’IHM permettent une modélisation facilitée du SNI.

32. MERCI DE VOTRE ATTENTION