Patterns de conception d’IHM
-
Upload
ralph-osborne -
Category
Documents
-
view
56 -
download
0
description
Transcript of Patterns de conception d’IHM
![Page 1: Patterns de conception d’IHM](https://reader035.fdocument.pub/reader035/viewer/2022062422/56813463550346895d9b48db/html5/thumbnails/1.jpg)
1
![Page 2: Patterns de conception d’IHM](https://reader035.fdocument.pub/reader035/viewer/2022062422/56813463550346895d9b48db/html5/thumbnails/2.jpg)
2
Patterns de conception
d’IHM
Patterns de conception
d’IHM
Jean-Bernard Crampes et Laurent Nonne IUT de Blagnac
![Page 3: Patterns de conception d’IHM](https://reader035.fdocument.pub/reader035/viewer/2022062422/56813463550346895d9b48db/html5/thumbnails/3.jpg)
3
PLANPLAN
3 : Patterns de conception d’IHM
1 : Introduction
2 : Modélisation de l’IHM
4 : Conclusion
![Page 4: Patterns de conception d’IHM](https://reader035.fdocument.pub/reader035/viewer/2022062422/56813463550346895d9b48db/html5/thumbnails/4.jpg)
4
IntroductionIntroduction
11
Modélisation de l’IHM ConclusionPatterns de conception d’IHMIntroduction
![Page 5: Patterns de conception d’IHM](https://reader035.fdocument.pub/reader035/viewer/2022062422/56813463550346895d9b48db/html5/thumbnails/5.jpg)
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
![Page 6: Patterns de conception d’IHM](https://reader035.fdocument.pub/reader035/viewer/2022062422/56813463550346895d9b48db/html5/thumbnails/6.jpg)
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
![Page 7: Patterns de conception d’IHM](https://reader035.fdocument.pub/reader035/viewer/2022062422/56813463550346895d9b48db/html5/thumbnails/7.jpg)
7
Modélisation de l’IHMModélisation de l’IHM
22
Modélisation de l’IHM ConclusionPatterns de conception d’IHMIntroduction
![Page 8: Patterns de conception d’IHM](https://reader035.fdocument.pub/reader035/viewer/2022062422/56813463550346895d9b48db/html5/thumbnails/8.jpg)
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
![Page 9: Patterns de conception d’IHM](https://reader035.fdocument.pub/reader035/viewer/2022062422/56813463550346895d9b48db/html5/thumbnails/9.jpg)
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
![Page 10: Patterns de conception d’IHM](https://reader035.fdocument.pub/reader035/viewer/2022062422/56813463550346895d9b48db/html5/thumbnails/10.jpg)
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
![Page 11: Patterns de conception d’IHM](https://reader035.fdocument.pub/reader035/viewer/2022062422/56813463550346895d9b48db/html5/thumbnails/11.jpg)
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
![Page 12: Patterns de conception d’IHM](https://reader035.fdocument.pub/reader035/viewer/2022062422/56813463550346895d9b48db/html5/thumbnails/12.jpg)
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
![Page 13: Patterns de conception d’IHM](https://reader035.fdocument.pub/reader035/viewer/2022062422/56813463550346895d9b48db/html5/thumbnails/13.jpg)
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
![Page 14: Patterns de conception d’IHM](https://reader035.fdocument.pub/reader035/viewer/2022062422/56813463550346895d9b48db/html5/thumbnails/14.jpg)
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
![Page 15: Patterns de conception d’IHM](https://reader035.fdocument.pub/reader035/viewer/2022062422/56813463550346895d9b48db/html5/thumbnails/15.jpg)
15
Patterns de conception d’IHMPatterns de conception d’IHM
33
Modélisation de l’IHM ConclusionPatterns de conception d’IHMIntroduction
![Page 16: Patterns de conception d’IHM](https://reader035.fdocument.pub/reader035/viewer/2022062422/56813463550346895d9b48db/html5/thumbnails/16.jpg)
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
![Page 17: Patterns de conception d’IHM](https://reader035.fdocument.pub/reader035/viewer/2022062422/56813463550346895d9b48db/html5/thumbnails/17.jpg)
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
![Page 18: Patterns de conception d’IHM](https://reader035.fdocument.pub/reader035/viewer/2022062422/56813463550346895d9b48db/html5/thumbnails/18.jpg)
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
![Page 19: Patterns de conception d’IHM](https://reader035.fdocument.pub/reader035/viewer/2022062422/56813463550346895d9b48db/html5/thumbnails/19.jpg)
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
![Page 20: Patterns de conception d’IHM](https://reader035.fdocument.pub/reader035/viewer/2022062422/56813463550346895d9b48db/html5/thumbnails/20.jpg)
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
![Page 21: Patterns de conception d’IHM](https://reader035.fdocument.pub/reader035/viewer/2022062422/56813463550346895d9b48db/html5/thumbnails/21.jpg)
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
![Page 22: Patterns de conception d’IHM](https://reader035.fdocument.pub/reader035/viewer/2022062422/56813463550346895d9b48db/html5/thumbnails/22.jpg)
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
![Page 23: Patterns de conception d’IHM](https://reader035.fdocument.pub/reader035/viewer/2022062422/56813463550346895d9b48db/html5/thumbnails/23.jpg)
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
![Page 24: Patterns de conception d’IHM](https://reader035.fdocument.pub/reader035/viewer/2022062422/56813463550346895d9b48db/html5/thumbnails/24.jpg)
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
![Page 25: Patterns de conception d’IHM](https://reader035.fdocument.pub/reader035/viewer/2022062422/56813463550346895d9b48db/html5/thumbnails/25.jpg)
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
![Page 26: Patterns de conception d’IHM](https://reader035.fdocument.pub/reader035/viewer/2022062422/56813463550346895d9b48db/html5/thumbnails/26.jpg)
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
![Page 27: Patterns de conception d’IHM](https://reader035.fdocument.pub/reader035/viewer/2022062422/56813463550346895d9b48db/html5/thumbnails/27.jpg)
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 »
![Page 28: Patterns de conception d’IHM](https://reader035.fdocument.pub/reader035/viewer/2022062422/56813463550346895d9b48db/html5/thumbnails/28.jpg)
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
![Page 29: Patterns de conception d’IHM](https://reader035.fdocument.pub/reader035/viewer/2022062422/56813463550346895d9b48db/html5/thumbnails/29.jpg)
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
![Page 30: Patterns de conception d’IHM](https://reader035.fdocument.pub/reader035/viewer/2022062422/56813463550346895d9b48db/html5/thumbnails/30.jpg)
30
44ConclusionConclusion
Modélisation de l’IHM ConclusionPatterns de conception d’IHMIntroduction
![Page 31: Patterns de conception d’IHM](https://reader035.fdocument.pub/reader035/viewer/2022062422/56813463550346895d9b48db/html5/thumbnails/31.jpg)
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
![Page 32: Patterns de conception d’IHM](https://reader035.fdocument.pub/reader035/viewer/2022062422/56813463550346895d9b48db/html5/thumbnails/32.jpg)
32
MERCI DE VOTRE ATTENTION