1. Un modèle conceptuel d’IHM

Il n’existe pas de modèle de description d’IHM en UML (ou en Merise). Nous allons donc voir le SNI de la méthode MACAO.

jbc Jean-Bernard Crampes (1947-2013), l’inventeur de ce langage de modélisation, était Professeur des Universités à l’IUT de Blagnac!!

2. Objet

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 :

  • il est indépendant du type d’interface utilisé (Windows, WEB, Multimédia…​)

  • il ne représente pas la manière de faire de l’utilisateur (menu déroulant, bouton, glisser-déposer…​)

  • il fait abstraction de tout aspect matériel (clavier, type d’écran, souris…​)

  • il ne représente pas les traitements réalisés

3. SNI et MVC

Le SNI concerne de la partie "Vue" du MVC.

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

5. Les UD élémentaires (UDE)

sni ude
Figure 1. Les UDE
Exemple
Figure 2. Exemple d’UDE
Exemple
Figure 3. Autre exemple d’UDE

6. Les UD composées par juxtaposition (UDC)

Les UD composées par juxtaposition
Figure 4. Les UD composées par juxtaposition
Exemple
Figure 5. Exemple d’UDC

7. Les UD composées par boîte de groupage (UDC)

Les UD composées par boîte de groupage
Figure 6. Les UD composées par boîte de groupage

8. Construction du Schéma Navigationnel d'IHM (SNI)

Deux modes de construction :

  • Mode esquisse (construction progressive)

  • Mode conception (construction structurée)

9. Règles communes

Règles des retours implicites

Après une UDE, le retour implicite s’effectue sur l’UD précédente. Après une option d’un menu juxtaposé à une UD (élémentaire ou composée) le retour implicite s’effectue sur l’UD juxtaposée.
Filtres associés aux listes

Permet de restreindre le nombre de lignes d’une liste.
Un filtre porte sur certains attributs de la classe (présents ou non dans la liste).
Filtre
Figure 7. Exemple de filtre
Tris multiples des listes

Permet de trier une liste de différentes façons.
Les différents tris possibles sont indiqués comme pour un filtre.
tri
Figure 8. Exemple de tri
Rôles et conditions d’accès

Les rôles et les conditions d’accès permettent de contraindre les accès aux menus ([Rôle,…​] ou [-Rôle,…​], [valeur > 1000]).

10. Construction du SNI en mode esquisse

Au cours de l’acquisition des exigences ou

En rétro-conception d’IHM :

  • A partir des besoins des utilisateurs

    • Cas d’utilisation et fonctions

    • Droits et conditions d’accès

    • Contraintes diverses

  • Participation des utilisateurs

11. Construction structurée (patrons d’IHM)

  • Pour les applications importantes

  • Adoption du principe OBJET-ACTION

    • Dans une approche objet-action on demande en premier lieu à l’utilisateur d’indiquer quels sont les objets sur lesquels il désire travailler puis, quelles opérations il veut leur appliquer.

  • Exemple d’illustration :

    • Soit une base de données comportant trois types d‘objets : CLIENTS, PRODUITS, FOURNISSEURS

    • L’utilisateur désire effectuer trois types d’actions générales sur ces objets : CONSULTER, MODIFIER, SUPPRIMER

  • Il désire également réaliser trois traitements spécifiques :

    • Lister les clients triés par régions,

    • Imprimer la fiche de stock d’un produit donné,

    • Marquer tous les fournisseurs dont le chiffre d’affaires est < 1000 €

12. Approche Action-Objet

Approche Action-Objet
Figure 9. Approche Action-Objet

13. Approche Objet-Action

Approche Objet-Action
Figure 10. Approche Objet-Action

14. Mise en oeuvre du principe OBJET-ACTION

15. Démarche

  • On part du diagramme des classes métier

    • Classes et attributs

    • Relations (associations, compositions, spécialisations)

    • Méthodes utilisateur

  • Utilisation de patrons de conception (Design Patterns)

Le SNI obtenu représente alors le squelette du SNI final.

  • Le squelette est complété avec

    • Les filtres

    • Les droits et conditions d’accès

    • L’accès aux fonctions

  • Le SNI est optimisé en cherchant à minimiser le nombre d’actions utilisateur (clics souris)

16. Exemple

Les exigences :

  • Afficher la liste de tous les étudiants classés par année, groupe et ordre alphabétique

  • Imprimer la liste

  • Afficher le détail d’un étudiant

  • Modifier l’étudiant affiché

SNI de départ

Complément 1 : Nouveaux étudiants et Constitution groupes

Complément de SNI

Complément 2 : Gestion complète des groupes

Complément de SNI

Complément 3 : Saisie des notes d’un partiel

Complément de SNI

17. Patrons d’IHM

18. Patrons d’IHM

5 patrons d’IHM obtenus à partir du diagramme des classes :

  • Racine (classes ciblées)

  • Détail (sélection d’un objet dans une liste d’objets)

  • Liaison (association entre plusieurs classes)

  • Aiguillage (spécialisation-généralisation)

  • Administration (mise à jour, création, suppression d’objets)

18.1. Patron Racine

Ciblage des classes métier

Mettre en évidence les classes prépondérantes, dont les objets seront présentés au premier niveau de l’IHM

Patron Racine

18.2. Patron Détail

Représenter tous les attributs d’un objet désigné dans une liste.

Patron Détail Patron Détail avec Fils

18.3. Patron Liaison

Suivre les liens entre les objets appartenant à des classes liées par des associations multiples (*)

Patron Liaison Patron Liaison avec classe-association

18.4. Patron Aiguillage

Utile pour présenter les détails d’une généralisation

Patron Aiguillage Patron Aiguillage

18.5. Patron Administration

Utile pour matérialiser un CRUD limité à l’administrateur

Patron Admin