Patterns de conception d’IHM

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…).


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…


7

Modélisation de l’IHMModélisation de l’IHM

22


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)


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


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


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


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


13

Les UD composées par boîte de groupageLes UD composées par boîte de groupage


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 ?


15

Patterns de conception d’IHMPatterns de conception d’IHM

33


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)


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


18

Le patron « racine »Le patron « racine »

Objets-C1 (a1C1, a2C1)


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... ... ...


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


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


Liste C(Attributs de C

TypeObjet)

C

1

RDétail

21

Le patron « liaison »Le patron « liaison »



C1 C3

Application

1

objets-C3 liés


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


C1

Application

1

Détail

Attributs de C1

C2 (...)

C1 C2a1C2a2C2

...

a1C1a2C1

...

*


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 ]


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..*


25

Mise en oeuvre du patron « racine »Mise en oeuvre du patron « racine »

Clients (codeCli, nom)

Comptes (num, type)

Gestion bancaire

Clients Comptes


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


Comptes

Comptes (num, type)


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


...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


[ Administrateur ]


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


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


ConclusionConclusion

32

MERCI DE VOTRE ATTENTION

Patterns de conception d’IHM

Documents

Transcript of Patterns de conception d’IHM