Accueil > Outillage > Outils de maquettage (1/6) – Balsamiq Mockups

Outils de maquettage (1/6) – Balsamiq Mockups

Le sujet suivant : « Quel outil utiliser pour maquetter une application Windows 8 ? » a récemment été abordé sur la mailing-list Objet Direct puis repris sous forme d’article dans le blog . Beaucoup de personnes ayant été intéressées, nous avons décidé d’approfondir l’étude sur les 5 outils suggérés : BalsamiqFlairBuilder, Moqups, Justinmind, Axure .

A suivre, donc, un article par outil, et un bilan comparatif.

Balsamiq Mockups

La philosophie de Balsamiq peut être résumée en une phrase :

Mockups intentionally makes your wireframes scream both “This is not final!” and “I just threw this together“, eliciting honest feedback, which results in better wireframes, which results in easier to use features, which results in happier users of your software or website, which is what it’s all about.

En effet son style « sketchy » qui imite un dessin à main levée produit l’effet de quelque chose de non fini. C’est une démarche volontaire de la part de l’éditeur afin d’inciter les utilisateurs à critiquer et à modifier les maquettes. Le but est de pouvoir faire des itérations fréquentes sur l’IHM et de concentrer l’attention sur les fonctionnalités plutôt que sur l’apparence.

Je n’ai pu tester que la version web de l’application (disponible gratuitement ici) qui est moins riche fonctionnellement que la version desktop, mais donne quand même un bon aperçu.

La prise en main

L’interface est simple et intuitive. Elle permet de commencer à construire les interfaces très rapidement. La barre d’outils en haut de la page permet d’accéder à tous les composants et de les placer en mode drag-and-drop. Il m’a fallu moins de 30 minutes pour construire la maquette de la page d’accueil d’Objet Direct (sachant que le plus long a été de copier-coller les champs texte).

Les fonctionnalités

Balsamiq propose 75 composants graphiques (boutons, tabs, panels et autres widgets) et 187 icônes pour construire les interfaces, ce qui suffit dans la plupart des cas. Et si on veut faire quelque chose de plus spécifique, il existe toute une batterie de bibliothèques « communautaires » avec des composants groupés par thème : appli mobiles (iOS, Android, Blackberry, Windows8), social (facebook, twiter, linkedin, etc.), applications de bureaux (Outlook, Explorer, Skype) et beaucoup d’autres.

Le mode « Calque »  permet de définir des composants réutilisables, pour les entêtes et pieds de pages d’un site Web par exemple. Ou encore, pour construire des templates et des bibliothèques.

Il y a pas mal de raccourcis clavier pour manipuler l’interface plus rapidement et une aide à la saisie pour rechercher des composants plus facilement.

Il est possible de créer des enchaînements entre les vues à l’aide de liens pour faire des prototypes « fully clickable », c’est-à-dire navigables.

Pour ceux qui n’aiment pas le look « dessin à main levée », il est possible de choisir un style plus classique, avec un rendu de composants propre pour un effet plus abouti.

Collaboration et partage

Balsamiq permet d’exporter les maquettes sous forme d’images PNG et de PDF (cliquables). Il est également possible d’exporter au format XML pour partager son travail ou pour permuter entre les versions desktop et web de l’application.

Il est possible de transformer les maquettes directement en code source à l’aide d’outils tiers. Les plugins existants couvrent html/css/js, gwt, flash, coldfusion, android et iOS. Comme je n’ai pas pu tester ces fonctionnalités, je ne peux pas me prononcer sur la qualité du code produit.

Balsamiq propose également des plugins pour faciliter l’intégration avec d’autres outils de la chaîne de production :

  • Google Drive – ajout et modification des maquettes directement à partir de google drive pour faciliter le partage et la collaboration.
  • Création de maquettes dans les outils : Confluence, Mockups, FogBugz, JIRA, XWiki, pour ajouter des maquettes dans les bug-reports et les wikis.
  • Possibilité de partager des bibliothèques de composants avec la communauté des utilisateurs via le site web officiel.

Coût de licence

Le prix de la licence varie :

  • en fonction du nombre d’utilisateurs pour la version desktop
  • en fonction du nombre de projets pour la version web

Le prix de base est de $79 pour 1 utilisateur (desktop) et $12/mois pour la gestion de 3 projets avec un nombre illimité d’utilisateurs sur le web.  Il faut noter aussi que l’utilisation de certains plugins a un coût supplémentaire.

Voici un récapitulatif des prix:

Nombre d’utilisateurs

1

2

10

20

100

200

Version desktop

$79

$158

$709

$1,299

$3,950

$7,900

Nombre de projets

3

10

20

50

100

Version web

$12 /mois

$24 /mois

$49 /mois

$99 /mois

$249 /mois

Les détails des prix peuvent être trouvés sur le site : http://www.balsamiq.com/buy

Conclusion

Balsamiq est un outil simple qui arrive à proposer suffisamment de fonctionnalités pour un utilisateur moyen et même plus via ses nombreux plugins et les bibliothèques communautaires. On retiendra surtout sa facilité d’utilisation et son style pour les prototypes, volontairement non-abouti, qu’on aime ou pas, mais qui ne laisse pas indifférent.

A suivre dans un prochain article : la présentation de FlairBuilder.

  1. 22/05/2013 à 16:43 | #1

    Bonjour, une veille a également été faite à ce sujet par l’une de mes collègues, mais on avait identifié un autre outil que l’on a finalement adopté pour nos maquettes, il s’agit de MockFlow : http://mockflow.com/

  1. Pas encore de trackbacks


− un = 1