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

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

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

Patterns de conception d’IHM Modélisation de l’IHM Conclusion Patterns de conception d’IHM 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).

Patterns de conception d’IHM Introduction Modélisation de l’IHM Patterns de conception d’IHM Conclusion 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…

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

Patterns de conception d’IHM Modélisation de l’IHM Conclusion Patterns de conception d’IHM Introduction 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

Patterns de conception d’IHM Modélisation de l’IHM Conclusion Patterns de conception d’IHM Introduction 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 traitements réalisés dans l'application

Patterns de conception d’IHM Modélisation de l’IHM Conclusion Patterns de conception d’IHM Introduction 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

Patterns de conception d’IHM Modélisation de l’IHM Conclusion Patterns de conception d’IHM Introduction Les UD élémentaires 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)

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

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

Patterns de conception d’IHM Modélisation de l’IHM Conclusion Patterns de conception d’IHM Introduction 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

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

Patterns de conception d’IHM Modélisation de l’IHM Conclusion Patterns de conception d’IHM Introduction 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

Patterns de conception d’IHM Modélisation de l’IHM Conclusion Patterns de conception d’IHM Introduction Méthode de construction du SNI Adoption du principe OBJET ACTION 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)

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

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

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

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

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

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

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

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

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

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

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

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

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

Patterns de conception d’IHM Modélisation de l’IHM Conclusion Patterns de conception d’IHM Introduction 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.

MERCI DE VOTRE ATTENTION