Ce billet, le 3ème d’une série consacrée aux outils online de conception de wireframes, concerne Balsamiq Mockups.

PRÉSENTATION

Balsamiq est une entreprise fondée en Mars 2008 par Giacomo Guilizzoni, un ancien ingénieur senior de chez Adobe. Balsamiq est une Micro-ISV (l’équivalent d’une micro-entreprise en France) et vend des applications online de bureau et c’est Giacomo Guilizzoni lui seul qui a crée, développé et lancé Balsamiq Mockup (chapeau bas Monsieur !), qui permet de réaliser des wireframes avec un style "dessiné à la main".

Balsamiq Mockup existe plusieurs versions :

  • web (version de démo),
  • desktop,
  • web office, avec des versions intégrées à Confluence, JIRA et XWiki.

Dans un 1er temps, mon test a été effectué sur la version web réalisée en Flash. Puis, dans un 2nd temps, j’ai importé mon wireframe sur la version Desktop dont l’interface a été réalisée avec Adobe Air.

Voici un rapide aperçu en vidéo de l’application :

PRÉSENTATION DE L’INTERFACE

L’interface, très simple, est découpée en 3 zones :

  • en haut se trouvent les menus classiques (fichier, édition, affichage et aide) avec reprise de certaines fonctionnalités sous forme d’icônes sur la droite,
  • juste en-dessous se trouvent les éléments HTML disponibles,
  • enfin il y a la feuille de papier sur laquelle on va composer notre wireframe. On dessine donc sur un carnet de croquis avec un style "fait main" au trait irrégulier et tremblotant.

Comme vous le voyez, l’interface est simple, sans fioriture mais assez efficace car elle permet de se concentrer sur le plus important : la mise en scène d’éléments pour nos wireframes.

LES CRITÈRES D’ÉVALUATION

1. Prise en main et Utilisation

La prise en main est très facile : drag’n’drop pour positionner les éléments, double clic pour éditer les textes des éléments, et le clic sur un élément fait apparaître en surimpression une palette de propriétés. Cette dernière propose des réglages contextuels divers : formatage du texte (taille, couleur, alignement...), état des éléments (in focus, selected, disabled...) bordure, transparence, gestion des plans...

Les éléments HTML dont on dispose pour créer les wireframes sont très nombreux (63 si j’ai bien compté) et certains d’entre eux sont très utiles : player vidéo, accordéon, breadcrumb, tableau, calendrier, nuage de tags… Balsamiq Mockups est d’ailleurs la 1ère application que je teste qui propose autant d’éléments ! Vu le nombre, ils sont divisés en plusieurs groupes : boutons, containers, layout, texte… D’ailleurs, ce n’est pas très évident parfois de savoir dans quel groupe on peut trouver tel ou tel élément, mais il suffit de cliquer sur le bouton « All » pour voir tous les éléments, ou de taper directement le nom de l’élément que l’on souhaite utiliser dans un champ de saisie, et l’élément en question est positionné automatiquement sur la page.

Les raccourcis clavier sont pris en compte (notamment le Ctrl +D pour Dupliquer, le Ctrl+A pour Sélectionner tout, le Ctrl+ Z est illimité et on peut faire des sélections multiples avec la touche Ctrl et la souris...) ce qui est très agréable à l’utilisation. Aussi, ce que j’ai appelé la "sélection rectangulaire à la souris" (qui manque à Gliffy) est pris en compte avec Balsamiq Mockups.

Des aides visuelles pour l’alignement s’affichent automatiquement quand on déplace des éléments et la taille de ces derniers apparaît en surimpression quand on les agrandit / réduit.

Enfin, on peut avoir plusieurs documents ouverts en même temps et on passe de l’un à l’autre en changeant d’onglet.

Quelques points négatifs cependant :

  • on ne peut pas (encore) uploader d'images, on peut utiliser uniquement les placeholders,
  • pas (encore) la possibilité de choisir une autre typo : c’est du Comic sans MS, un point c’est tout ;-)
  • de part son style graphique, l’interface est moins soignée que celle de Gliffy et fait "moins professionnelle" alors que l’outil est fiable et sérieux,
  • le clic droit de la souris pourrait être utilisé pour du formatage de texte ou autre, sachant que Flash et Air permettent de le personnaliser.

Malgré ces quelques points négatifs dont certains vont être corrigés, le temps nécessaire à l’apprentissage est quasi nul et l’application est très agréable et très pratique à utiliser.

Ci-dessous, voici le wireframe que j’ai réalisé rapidement et simplement avec Balsamiq Mockups (vous pouvez également télécharger le fichier XML correspondant à ce wireframe).

Cliquez sur l'image pour l'agrandir.

2. Prototypage rapide

Balsamiq Mockups est parfaitement adapté pour cela : j’ai réalisé cette page en quelques clics et ce, sans aucune difficulté, ce qui prouve bien que l'utilisation des éléments et leur paramétrage sont aisés.

3. Partage des fichiers / Travail collaboratif

Il n’est pas possible de partager un fichier ou de travailler à plusieurs de façon collaborative. Mais en fait, c’est tout à fait logique car Balsamiq Mockups n’est pas une application online, c’est une application de bureau ! Le fait qu’il y ait une version online m’a induit en erreur : je pensais que c’était la version de travail alors que ce n’est qu’une version de démonstration...

4. Options d’export

Balsamiq Mockups permet l’export de ses wireframes en 2 formats : XML et PNG. Ainsi, en XML, les données sont portables et décrites dans un format ouvert. Mais on peut choisir l’export en PNG pour utiliser ses images dans Powerpoint et y ajouter des commentaires ou des annotations par exemple.

5. Interactivité des éléments

Impossible (pour le moment) de faire des liens HTML. Pour ma part, c'est LE problème de l'application : on peut placer un élément de type "lien" sur notre wireframe mais il est géré comme un texte normal et n’est donc pas interactif. Aucune interaction n’est possible pour le moment mais cela fait partie des améliorations majeures qui sont prévues par Giacomo Guilizzoni.

6. Wireframes adaptés à l’écran / au print

Comme il n’y a pas encore la possibilité de créer de liens entre les pages, les wireframes réalisés sous Balsamiq Mockup sont prévus pour être exportés puis imprimés. La gestion native de l’impression est également une des améliorations à venir.

Le fait que le style graphique ressemble à du "fait main" et que l’on conçoive ses wireframes sur un carnet de croquis n’est pas anodin... Balsamiq Mockup est plutôt adapté à un usage print et peut être couplé avec un autre logiciel.

7. Coût

Balsamiq Mockups existe en plusieurs versions :

  • la version web, mais ce n’est pas une version de travail, c’est simplement une version de démo car on ne peut pas enregistrer son wireframe,
  • la version Desktop est, elle, totalement complète. La licence coûte $ 79 mais comme il est très généreux, Giacomo Guilizzoni peut vous envoyer un n° de licence si vous êtes blogueur ;-)
  • et Balsamiq Mockups a été pensé pour pouvoir fonctionner avec Confluence, JIRA et XWiki.
    • Plugin pour Confluence, de $ 300 à $ 4 000
    • Plugin pour JIRA, de $ 149 à $ 799
    • Plugin pour XWiki, de $ 450 à $ 6 000

Je n’ai pas testé les différents plugins mais le prix de la licence Desktop est vraiment dérisoire vu les qualités de l’application. Pour vous faire une idée, vous pouvez donc tester la version web et vous verrez que l’investissement vaut la peine.

LES AMÉLIORATIONS A VENIR

J’ai pû échanger quelques emails avec Giacomo Guilizzoni, le responsable de Balsamiq. Il m’a précisé les améliorations qui sont prévues dans sa roadmap, voici les plus importantes :

  • l’upload d’images (la demande la plus importante)
  • possibilité de faire des liens entre les wireframes,
  • améliorer l’éditeur de texte actuel et possibilité d’utiliser d’autres typos,
  • gestion native de l’impression,
  • développement de l’application vers d‘autres wikis,
  • éléments HTML spécifiques mobile / iPhone,
  • et enfin, faire des versions localisées.

CONCLUSION

Balsamiq Mockup est une application souple, efficace, qui permet de réaliser des wireframes rapidement. La quantité importante des éléments HTML disponible est un gain de temps appréciable pour les concepteurs, et les nombreux raccourcis claviers sont un gros plus au niveau du confort d’utilisation.

Seul gros inconvénient pour ma part, l’impossibilité de faire des liens entre les pages. Mais c’est un inconvénient qui sera bientôt réglé (cf. « les améliorations à venir ») et qui n’est pas en contradiction avec une utilisation Print.

Je vous conseille d’essayer Balsamiq Mockup rien qu’une seule fois et vous verrez, vous devriez être conquis par sa facilité d’utilisation et son potentiel. Le prix d’une licence est minime, quand on s’aperçoit des qualités de cette application. Et quand on se dit que c’est une seule et même personne qui a pensé et développé tout ça, on est encore plus admiratif !

Prochain billet de la série : "Les outils online de conception de wireframes (4/5) : Protoshare."