Edition de maquettes IHM avec Balsamiq Mockups

Il est souvent intéressant dans le cadre de réalisations de projets informatiques de produire des maquettes d’IHM. Traditionnellement réalisées sur papier, des outils émergent pour éditer électroniquement ces maquettes d’autant que celles-ci deviennent de plus en plus utilisées en entreprise. Ce billet a pour but de présenter un outil de prototypage électronique nommé Balsamiq Mockups développé par la société Balsamiq. Plusieurs points seront abordés comme le designer mais aussi la possibilité de générer les maquettes en Flex.

L’intérêt d’un éditeur de maquette

Dans le cadre d’un projet informatique, la création de maquettes IHM peut apporter divers avantages. D’abord, dans le cas d’une prestation de service, il permet de montrer au client un résultat concret du fonctionnement de la future application. Ensuite, la mise au point de l’interface peut se faire en collaboration avec le client, ce qui donne la certitude de répondre à ses attentes. Dans le cadre d’une prestation en régie, la MOA peut rapidement dessiner les maquettes elle-même sans forcément avoir des compétences en développement. La MOA étant responsable de la définition des besoins, créer des prototypes est un bon moyen de clarifier les attentes d’un produit. Un éditeur de maquettes permet également de travailler de manière plus interactive à l’aide d’un vidéoprojecteur par exemple. Plus généralement, la création de maquettes a pour but de définir précisément les caractéristiques de l’IHM.

Balsamiq Mockups

Balsamiq est l’éditeur du produit Balsamiq Mockups, un outil permettant de créer facilement des prototypes d’IHM électronique. Avec Balsamiq Mockups il est ainsi possible de prototyper tout type d’applications (desktop, web, smartphone, …). Voici ce que peut donner la maquette d’un youtube-like en utilisant Mockups.

Le produit facilite le travail collaboratif. Il propose des fonctionnalités pour échanger, importer, publier rapidement des maquettes. De plus les fichiers représentant les maquettes sont de type XML, il est donc possible de coupler Mockups avec un outil de gestion de source (Git, SVN, …) pour pouvoir gérer les différentes versions des maquettes et travailler en équipe en utilisant des outils standards. Une communauté s’est créée autour de ce produit, proposant des plugins supplémentaires que l’on peut intégrer à Balsamiq Mockups. Les plugins proposés sont assez variés. Certains permettent d’exporter une maquettes sous différents formats, d’autres permettent de générer du code à partir de la maquette. Le code généré peut être du HTML/CSS/Javascript, du Flex ou encore du code source Android. Balsamiq Mockups est un produit payant, qui est facturé par utilisateur.
Un produit comme Balsamiq Mockups possède plusieurs atouts, notamment par rapport aux maquettes papier. Il est en effet très facile d’éditer une maquette, l’envoyer au reste de l’équipe et aux éventuels clients. Les destinataires n’ont plus qu’à importer le fichier et peuvent ainsi l’éditer et le redistribuer comme bon leur semble. Une maquette sous version papier sera moins réactive, moins facile à échanger, moins agile. Les tendances du développement logiciel étant portées sur l’agilité et l’offshoring, les équipes de développement n’étant pas forcément dans la même ville voir dans le même pays, un éditeur de maquette électronique est de nos jours devenu un outil indispensable.

Fonctionnalités

Designer

La fonctionnalité la plus importante de Balsamiq Mockups est son designer. Le designer permet de dessiner rapidement un prototype avec des composants existants. Le designer ressemble à ce qui se fait déjà dans divers assistants de création d’IHM comme matisse.
Pour créer son prototype, il suffit de glisser déposer les composants. Il est possible de configurer les composants en changeant la couleur, police, … Balsamiq Mockups offre toutes les fonctionnalités d’édition, comme la sélection d’un ou plusieurs composants, déplacer un groupe de composants, copier, coller, … L’édition de maquette par le designer est très rapide et intuitive à mettre en œuvre. Les composants proposés sont standards : datagrid, combobox input text label, fil d’ariane, … Il propose également des composants spécifiques aux smartphones comme l’iPhone keyboard. De plus il est possible de rajouter des composants téléchargés sur internet comme ici.
Au dela de l’aspect visuel, le designer permet de modéliser sur la maquette l’enchaînement des fenêtres avec des flèches ou de laisser des commentaires sous forme de post it. De plus il permet d’ajouter des liens vers des maquettes externes. Par exemple sur le tabsbar il est possible d’ajouter un lien vers la maquette de destination sur chaque onglet et ainsi simuler une navigation. En prenant l’exemple ci-dessous, en cliquant sur « Préférences », l’éditeur va afficher « preferences.bmml »

 

Autres fonctionnalités

En plus de son designer, Balsamiq Mockups possède un certain nombre de fonctionnalités intéressantes. Il est ainsi possible d’exporter les maquettes sous forme d’image (png) ou pdf. Un plugin intégré par défaut dans balsamiq Mockups permet de générer le code Flex correspondant à la maquette.

Génération de code Flex

Analyse

Comme nous l’avons vu précédemment, il est possible de générer du code Flex depuis la maquette. Nous allons voir ce qu’offre cette fonctionnalité, puis nous analyserons le code Flex résultant d’une génération. Le plugin génère en fait une application avec une partie client et une partie serveur en utilisant WebOrb un concurrent de BlazeDS d’Adobe. Dans le cadre du billet nous analyseront seulement la partie client codée en Flex. Le générateur supporte un nombre limité de composants, il ne fonctionnera donc pas avec un composant téléchargé sur internet, plus d’informations dans la FAQ

Voilà la maquette de test que nous allons étudier, rien de bien impressionnant c’est seulement à des fins d’analyse. Voici ce qui est généré

• Main.mxml
• sampleBalsamiqClient
  • MockupSampleController.as
  • MockupSampleModel.as
  • MockupSampleClient.mxml

Le code client respecte les conventions du framework MVC Cairngorm avec la création d’un composant mockupSampleClient et des fichiers controller, model et client. Le main.xml affiche le composant mockupSampleClient. Le composant mockupSampleClient.mxml contient la description de l’interface graphique :

<MockupSampleController xmlns="sampleBalsamiqClient.*" xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">
    <mx:Canvas x="180" y="50" width="383" height="256" borderStyle="solid" borderColor="#000000" horizontalScrollPolicy="off" verticalScrollPolicy="off">
        <mx:Label x="1" y="1" text="" />
        <mx:Label x="1" y="15" text="Missing mapping between Mockup and Flex component." />
        <mx:Label x="1" y="23" text="Rendering as Canvas." />
    </mx:Canvas>
    <mx:Canvas x="0" y="0" width="383" height="256" borderStyle="solid" borderColor="#000000" horizontalScrollPolicy="off" verticalScrollPolicy="off" />
    <mx:TextInput x="114" y="24">
        <mx:text>
        </mx:text>
    </mx:TextInput>
    <mx:TextInput x="114" y="60">
        <mx:text>
        </mx:text>
    </mx:TextInput>
    <mx:TextInput x="114" y="98">
        <mx:text>
        </mx:text>
    </mx:TextInput>
    <mx:TextInput x="114" y="138">
        <mx:text>
        </mx:text>
    </mx:TextInput>
    <mx:Label x="29" y="25" width="32" height="25">
        <mx:text>login</mx:text>
    </mx:Label>
    <mx:Label x="29" y="61" width="60" height="25">
        <mx:text>password</mx:text>
    </mx:Label>
    <mx:Label x="29" y="99" width="80" height="25">
        <mx:text>confirmation</mx:text>
    </mx:Label>
    <mx:Label x="29" y="139" width="36" height="25">
        <mx:text>email</mx:text>
    </mx:Label>
    <mx:Button x="114" y="189" width="69" height="28">
        <mx:label>Valider</mx:label>
    </mx:Button>
</MockupSampleController>

On peut remarquer que lorsque qu’il n’y a pas de mapping entre les composants de Balsamiq Mockups et les composants Flex, un composant est généré avec un commentaire.

<mx:Canvas x="180" y="50" width="383" height="256" borderStyle="solid" borderColor="#000000" horizontalScrollPolicy="off" verticalScrollPolicy="off">
    <mx:Label x="1" y="1" text="" />
    <mx:Label x="1" y="15" text="Missing mapping between Mockup and Flex component." />
    <mx:Label x="1" y="23" text="Rendering as Canvas." />
</mx:Canvas>

Le controller contient le rudiment de code pour se connecter à la partie serveur.

public class MockupSampleController extends Canvas {
    [Bindable]
    public var model:MockupSampleModel = new MockupSampleModel();
    private var remoteObject:RemoteObject;
    public function MockupSampleController() {
        super();
        remoteObject  = new RemoteObject("GenericDestination");
        remoteObject.source = "sampleBalsamiqServer.MockupSampleService";
        remoteObject.addEventListener("fault", onFault);
        initializeController();
    }
    public function onFault (event:FaultEvent):void {
        Alert.show(event.fault.faultString, "Error");
    }
    public function initializeController():void {
    }
}

Le model contient une classe vide.

package sampleBalsamiqClient {
    import mx.collections.ArrayCollection;
    public class MockupSampleModel {
    }
}

Qualité du code

Le code généré souffre à mon goût d’une grosse lacune, il n’y a en effet pas de hiérarchie entre les composants. Le problème trouve sa source dans Balsamiq Mockups lui-même qui souffre des mêmes soucis. Analysons le fichier bmml de la maquette de l’exemple ci-dessus, la structure de données utilisée pour représenter une maquette est plate.

<control controlID="0" controlTypeID="com.balsamiq.mockups::Canvas" x="0" y="0" w="383" h="256" measuredW="100" measuredH="70" zOrder="0" locked="false" isInGroup="13">
    <controlProperties>
        <color>65535</color>
        <customData/>
        <customID>panel</customID>
    </controlProperties>
</control>
<control controlID="1" controlTypeID="com.balsamiq.mockups::TextInput" x="114" y="24" w="-1" h="-1" measuredW="75" measuredH="29" zOrder="1" locked="false" isInGroup="13">
    <controlProperties>
        <customID>user_login</customID>
        <text> </text>
    </controlProperties>
</control>

Un control ne dépend pas d’un autre. Ci-dessus, il n’y a aucun lien entre le TextInput et le canvas bien que le TextInput soit au niveau de l’affichage inclus dans le panel. La génération se basant sur ce fichier, il hérite du même problème. On perd donc l’intérêt des composants de type container permettant d’architecturer les composants d’u
ne IHM pour du code plus clair et mieux organisé. Voici un exemple simple de ce qui est généré suivi de ce qui aurait été intéressant d’avoir.

<mx:Panel />
<mx:TextInput/>

<mx:Panel>
    <mx:TextInput />
</Panel>

D’autre anomalies plus légères sont à noter, nous pouvons remarquer dans un premier temps que les customId que l’on peut définir dans Balsamiq Mockups ne sont pas retranscrits dans le code Flex. De plus les couleurs ne sont pas non plus portées dans la génération. Un autre souci avec le code généré, dans le cas ou le mapping n’existe pas entre composant Balsamiq et Flex, le message d’erreur ne précise pas quel composant n’est pas géré. Hormis les précédent défauts, il faut reconnaître que le code Flex généré s’affiche plutôt bien. La génération peut servir à faire une démo mais pour le développement de l’IHM, mon avis est plus nuancé, il serait peut être utile de s’en servir comme base mais il faudra prendre du temps pour retravailler le code généré.

Conclusion

Balsamiq Mockups est un bon outil d’édition de maquettes graphiques, simple, intuitif et surtout efficace dans l’édition et le rendu de la maquette. Les fonctionnalités facilitant le travail collaboratif sont appréciables. Un petit bémol pour le plugin de génération Flex intégré qui manque quelque peu de maturité.