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 :
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...
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.
A la création d'un nouvel écran, Enterprise Architect propose de choisir entre le mode portrait ou paysage.
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.
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).
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.
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.
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.
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.