1
2
Patterns de conception
d’IHM
Patterns de conception
d’IHM
Jean-Bernard Crampes et Laurent Nonne IUT de Blagnac
3
PLANPLAN
3 : Patterns de conception d’IHM
1 : Introduction
2 : Modélisation de l’IHM
4 : Conclusion
4
IntroductionIntroduction
11
Modélisation de l’IHM ConclusionPatterns de conception d’IHMIntroduction
5
Nécessité de concevoir l’IHMNé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).
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).
Décliner cette logique d’enchaînement en modèles plus proches du développement (traçabilité entre analyse, conception et développement).
Permettre une estimation de la charge de développement de l’IHM (nb jours/homme par fenêtre ou page Web).Permettre une estimation de la charge de développement de l’IHM (nb jours/homme par fenêtre ou page Web).
Avoir une vision d’ensemble de l’IHM de l’application (communication, maintenance…).Avoir une vision d’ensemble de l’IHM de l’application (communication, maintenance…).
Modélisation de l’IHM ConclusionPatterns de conception d’IHMIntroduction
6
ConstatConstat
UML propose de nombreux modèles mais aucun n’est véritablement adapté à la modélisation des IHM. 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.Les concepts UML (objet, classe, état, message…) ne sont pas des concepts adaptés aux IHM.
Justification de modèles complémentaires à Justification de modèles complémentaires à UML pour modéliser l’IHM…UML pour modéliser l’IHM…
Modélisation de l’IHM ConclusionPatterns de conception d’IHMIntroduction
7
Modélisation de l’IHMModélisation de l’IHM
22
Modélisation de l’IHM ConclusionPatterns de conception d’IHMIntroduction
8
Les modèles d’IHM de la méthode MACAOLes modèles d’IHM de la méthode MACAO
Modèle Conceptuel d’IHM (MCI)
http://www.iut-blagnac.fr/MACAO/PageMACAO.htmlhttp://www.iut-blagnac.fr/MACAO/PageMACAO.html
Modèle Logique d’IHM (MLI)
Modélisation de l’IHM ConclusionPatterns de conception d’IHMIntroduction
9
Le Schéma Navigationnel d'IHM (SNI)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
Modélisation de l’IHM ConclusionPatterns de conception d’IHMIntroduction
10
Les Unités de DialogueLes 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 symboleUne UD composée = plusieurs symboles
Modélisation de l’IHM ConclusionPatterns de conception d’IHMIntroduction
11
Les UD élémentairesLes UD élémentaires
Saisie de données
Affichage simple (un objet ou un résultat)
Affichage d’une liste d’objets
Message (erreur, avertissement, information)
Proposition d’options
Opt1 Opt2 Opt3 Opt4 Opt5
Modélisation de l’IHM ConclusionPatterns de conception d’IHMIntroduction
12
Les UD composées par juxtapositionLes 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
Modélisation de l’IHM ConclusionPatterns de conception d’IHMIntroduction
13
Les UD composées par boîte de groupageLes UD composées par boîte de groupage
Modélisation de l’IHM ConclusionPatterns de conception d’IHMIntroduction
Affichage simultané d’un objet et d’une liste d’objetsObjet Liste
Affichage simultané de deux objetsObjet 1 Objet 2
14
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
Construction du SNI ?
Modélisation de l’IHM ConclusionPatterns de conception d’IHMIntroduction
15
Patterns de conception d’IHMPatterns de conception d’IHM
33
Modélisation de l’IHM ConclusionPatterns de conception d’IHMIntroduction
16
L'architecture fonctionnelle Cas d’utilisation Droits d'accès
L'architecture fonctionnelle Cas d’utilisation Droits d'accès
Le diagramme des classes métier Classes et attributs Relations (associations, généralisations)
Le diagramme des classes métier Classes et attributs Relations (associations, généralisations)
Le SNI est construit en utilisant :Le SNI est construit en utilisant :
Construction du Schéma Navigationnel d'IHM (SNI)Construction du Schéma Navigationnel d'IHM (SNI)
Modélisation de l’IHM ConclusionPatterns de conception d’IHMIntroduction
17
Méthode de construction du SNIMéthode de construction du SNI
Mise en évidence de cinq patrons d’IHM à partir du diagramme des classes :Mise en évidence de cinq patrons d’IHM à partir du diagramme des classes :
1 – Racine (classes ciblées)1 – Racine (classes ciblées)
2 – Détail (sélection d’un objet dans une liste d’objets)2 – Détail (sélection d’un objet dans une liste d’objets)
3 – Liaison (association entre deux classes)3 – Liaison (association entre deux classes)
4 – Aiguillage (généralisation)4 – Aiguillage (généralisation)
5 – Administration (mise à jour, création, suppression d’objets)5 – Administration (mise à jour, création, suppression d’objets)
Adoption du principe OBJET ACTION Adoption du principe OBJET ACTION
Modélisation de l’IHM ConclusionPatterns de conception d’IHMIntroduction
18
Le patron « racine »Le patron « racine »
Objets-C1 (a1C1, a2C1)
Objets-C3 (a1C3, a2C3)
C1 C3
Application
Ciblage des classesMettre en évidence les classes prépondérantes, dont les objets seront présentés au premier niveau de l’IHM
C2 C3
a1C3a2C3
a1C2a2C2
C1
a1C1a2C1... ... ...
Modélisation de l’IHM ConclusionPatterns de conception d’IHMIntroduction
19
Le patron « détail »Le patron « détail »
Objets-C1 (a1C1, a2C1,
a1C2)
C1
Application
1
Détail
Attributs de C1
Attributs de C2
0..C1 C2
a1C2a2C2
...
a1C1a2C1
...
1
Modélisation de l’IHM ConclusionPatterns de conception d’IHMIntroduction
20
Le patron « aiguillage » : détail d’une généralisationLe patron « aiguillage » : détail d’une généralisation
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
RR1
Attributs de C+
Attributs de SC2
[ TypeObjet = T2 ]
RR2
Modélisation de l’IHM ConclusionPatterns de conception d’IHMIntroduction
Liste C(Attributs de C
TypeObjet)
C
1
RDétail
21
Le patron « liaison »Le patron « liaison »
Objets-C1 (a1C1, a2C1)
Objets-C3 (a1C3, a2C3)
C1 C3
Application
1
objets-C3 liés
Modélisation de l’IHM ConclusionPatterns de conception d’IHMIntroduction
C1 C3a1C3a2C3
...
a1C1a2C1
...
*lier1..*
1
objets-C1 liés
22
Le patron « liaison » : cas particulier d’une compositionLe patron « liaison » : cas particulier d’une composition
Objets-C1 (a1C1, a2C1)
C1
Application
1
Détail
Attributs de C1
C2 (...)
C1 C2a1C2a2C2
...
a1C1a2C1
...
*
Modélisation de l’IHM ConclusionPatterns de conception d’IHMIntroduction
23
Le patron « administration »Le patron « administration »
ConfirmationConfirmationConfirmationConfirmation
N N
SupprimerSupprimer
Objet-C1Objet-C1Objet-C1Objet-C1
1
DétailDétail
ConfirmationConfirmationConfirmationConfirmation
SupprimerSupprimerModifierModifier
ErreurErreurErreurErreur
Objet-C1Objet-C1Objet-C1Objet-C1
ErreurErreurErreurErreur
NouveauNouveau Objet-C1Objet-C1 Objet-C1Objet-C1
C1(a1C1, a2C1)
[ Administrateur ]
Modélisation de l’IHM ConclusionPatterns de conception d’IHMIntroduction
24
Exemple : Gestion de comptes bancairesExemple : Gestion de comptes bancaires
TypeCpte
codeType libellé* 1
Clients
codeClinomadresse
1 1.. *
Comptes
num/ solde
calculSolde()
Ciblage des classes
Compte Chèque
decouvAutorisedateCmdeCheq
calculAgios( )
Compte Epargne
tauxInterets
calculInterets( )
PrélèvementAutomatique
datelibellémontantdestinataire
1
0 ..*
1
Opérationsdatelibellémontant
1..*
Modélisation de l’IHM ConclusionPatterns de conception d’IHMIntroduction
25
Mise en oeuvre du patron « racine »Mise en oeuvre du patron « racine »
Clients (codeCli, nom)
Comptes (num, type)
Gestion bancaire
Clients Comptes
Modélisation de l’IHM ConclusionPatterns de conception d’IHMIntroduction
26
Mise en oeuvre des patrons « détail » et « composition »Mise en oeuvre des patrons « détail » et « composition »
Comptes (Num, Type)Client
11
Détail client
Gestion bancaire
Clients
Clients (codeCli, nom)
Comptes
Comptes (num, type)
Modélisation de l’IHM ConclusionPatterns de conception d’IHMIntroduction
27
Mise en oeuvre du patron « aiguillage » ...Mise en oeuvre du patron « aiguillage » ...
Client
Compte (num, solde, decouvAutorise, dateCdeCheq)
Opérations
PrélèvementsAutomatiques
Prélèvements automatiques
Client
Compte (num, solde, tauxInterets)
Opérations
[ type = Epargne ] [ type = Chèque ]Détail
1
Comptes (num, type)
Gestion bancaire
Comptes
Modélisation de l’IHM ConclusionPatterns de conception d’IHMIntroduction
...et du patron « liaison »...et du patron « liaison »
28
Mise en oeuvre du patron « administration »Mise en oeuvre du patron « administration »
ConfirmationConfirmation
N N
SupprimerSupprimer
ClientClient
1
DétailDétail
ConfirmationConfirmation
SupprimerSupprimerModifierModifier
ErreurErreur
ClientClient
ErreurErreur
NouveauNouveau Client Client
Clients (codeCli, nom)
[ Administrateur ]
Modélisation de l’IHM ConclusionPatterns de conception d’IHMIntroduction
29
Complément du SNI avec le diagramme d’UCComplément du SNI avec le diagramme d’UC
Calculer les Agios
Calculer les Intérêts
Chef d’agence bancaire (C.A.)
Comptes (num, type)
Gestion bancaire
Comptes
11
Détail
Calcul des agios
[ C.A. ]
Calcul des intérêts
[ C.A. ]
Modélisation de l’IHM ConclusionIntroduction Modélisation de l’IHM Patterns de conception d’IHMModélisation de l’IHM ConclusionPatterns de conception d’IHMIntroduction
30
44ConclusionConclusion
Modélisation de l’IHM ConclusionPatterns de conception d’IHMIntroduction
31
Le SNI permet une conception de l’IHM en liaison avec 2 des principaux diagrammes d’UML:
Diagramme des Classes
Diagramme d’UC
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.
Des Patterns de conception d’IHM permettent une modélisation facilitée du SNI.
Le SNI comble un manque d’UML en matière de modélisation d’interface
Le SNI comble un manque d’UML en matière de modélisation d’interface
Modélisation de l’IHM ConclusionPatterns de conception d’IHMIntroduction
ConclusionConclusion
32
MERCI DE VOTRE ATTENTION