Modélisation UML & SysML

Expertise et articles Blog sur UML, SysML, et Enterprise Architect de Sparx Systems

english versionTwitterUMLChannel SparxSystems EA YouTube videosLinkedIn
mercredi, 11 février 2015 00:00

Aperçu du Wireframing d'Enterprise Architect 12

Écrit par
Évaluer cet article
(1 Vote)

sparx systems enterprise architect 12

enterprise architect 12 wireframing example iphone

Introduction

La nouvelle version 12 d'Enterprise Architect est prévue pour cette année, avec la RC2 actuellement disponible en téléchargement. Parmi ses nouvelles fonctionnalités, j'ai testé le Wireframing pour réaliser des maquettes IHM. Mise à jour 12/02/2015 : la première version officielle d'EA 12 vient de sortir.

Le wireframing permet de réaliser une représentation visuelle d'un écran avec ses éléments IHM (champs, libellés, textes, boutons, etc.). Les écrans modélisés peuvent alors être utilisés pour définir le modèle de navigation en indiquant les transitions possibles entre écrans à partir d'actions disponibles (des conditions peuvent être rajoutées si besoin). Exemple : naviguer de l'écran d'authentification vers le compte utilisateur via l'action "se connecter" lorsque la condition "identifiants corrects" est vérifiée.

Le wireframing est utilisé pour définir les diagrammes IHM permettant d'adresser les aspects fonctionnels, et d'obtenir une validation de la MOA en avance de phase. Le wireframing ne traite pas les aspects de styles, couleurs, ou graphisme. Le wireframing d'Enterprise Architect 12 intègre plusieurs appareils mobiles : iPhone 4/5/6, iPad Air/Mini, smartphones et tablettes Android, ainsi que la conception de sites web.

Avant la version 12, les diagrammes IHM sont principalement limités aux applications Windows, même s'ils peuvent être utilisés par exemple pour des interfaces web avec un peu d'abstraction. Cette évolution est donc une très bonne nouvelle car elle va permettre de réaliser des modèles IHM pour sites web et applications mobiles.

Diagrammes Wireframing

La capture d'écran suivante représente les différents types de diagrammes Wireframing :

Sparx enterprise architect 12 Wireframing new diagram

Remarque : les diagrammes IHM “Windows” sont toujours disponibles depuis la sélection Extended > User Interface.

La boîte à outils (toolbox) Apple Wireframe est représentée ci-dessous; elle permet de créer des écrans pour la plupart des modèles iPhone et iPad avec différents contrôles IHM tels que des libellés, champs, cases à cocher, clavier, boutons...

Sparx enterprise architect 12 Wireframing toolbox

Cette boîte à outils propose des patterns pour créer des écrans avec des contrôles prédéfinis, comme illustré ci-dessous avec l'iPhone 5S. Remarque : vous pouvez définir vos propres patterns avec la fonction UML Patterns.

iphone 5s sparx enterprise architect wireframing pattern

A la création d'un nouvel écran, Enterprise Architect propose de choisir entre le mode portrait ou paysage.

screen portrait landscape

portrait landscape wireframing enterprise architect 12

Traçabilité

Alors qu'il existe de nombreux outils de prototypage et de conception IHM d'applications mobiles, le choix d'utiliser Enterprise Architect 12 repose sur la possibilité d'établir puis exploiter la traçabilité des modèles. Les diagrammes wireframing permettent de construire des modèles IHM dans un référentiel pouvant comporter des modèles d'exigences, d'analyse, et de conception. Il est alors possible de créer des associations entre widgets IHM et exigences, cas d'utilisations, classes métier, classes d'implémentation, colonnes de tables de base de données, etc.

Les exemples de traçabilité présentés dans ce chapitre s'appuient sur un site de vente en ligne dont l'arborescence du projet Enterprise Architect est représentée ci-dessous.

enterprise architect project browser traceability

Le diagramme de cas d'utilisations suivant comprend une traçabilité entre les modèles d'analyse et d'exigence (un cas d'utilisation répond à une exigence).

use case diagram enterprise architect 12

Le diagramme BPMN2.0 ci-dessous a été créé sous le cas d'utilisation "Place an order” pour définir son scénario. Chaque étape (acteur ou système) est modélisée via une activité, dont certaines sont associées à un écran du modèle IHM pour spécifier que celui est affiché pour cette étape.

Ces liens permettent d'identifier par exemple les cas d'utilisations utilisant un écran en particulierr, ou d'évaluer l'impact sur le modèle IHM lorsque des modifications sont prévues dans le modèle d'analyse.

Place an Order use case scenario BPMN2 diagram enterprise architect

Le diagramme suivant présente différents types de liens entre un écran d'iPhone 6 et des éléments d'analyse et de conception.

purchase UI screen wireframe enterprise architect 12

Dans cet exemple, l'écran :

  • est utilisé lors de la réalisation d'une commande (Place an order);
  • répond à l'exigence "REQ-001";
  • comporte des champs dont la valeur est rattachée aux attributs de classes métiers (ex : le champ Post code est associé à l'attribut de la classe métier Address.postCode);
  • contient un bouton "Continue" qui exécute la méthode de l'interface InvoiceService.submitInvoice (modèle de conception). 

Cette traçabilité permet par exemple à l'équipe et au chef de projet d'effectuer une analyse d'impact sur le modèle de conception lorsqu'une classe métier est modifiée, ou d'établir la liste des écrans faisant appel à l'un des services IHM réalisé dans une interface Java.

Navigation

Les diagrammes wireframing permettent d'utiliser les écrans du référentiel pour spécifier la navigation au travers d'un site web ou d'une application mobile.

wireframing enterprise archiect 12 navigation

Conclusion

Les diagrammes IHM wireframing disponibles dans Enterprise Architect 12 sont faciles à utiliser et répondent à la grande majorité des besoins de spécification IHM pour un site web ou une application mobile (sur différents modèles si nécessaire).

Le modèle IHM peut être utilisé avant la phase d'implémentation pour obtenir une validation fonctionnelle de la MOA, du client. Des liens de traçabilité peuvent être établis au fur et à mesure avec les éléments d'autres modèles afin de permettre à chacun de maîtriser les impacts entre les exigences, les aspects fonctionnels, métiers, et de conception du projet.