Les wireframes sont un sujet sans fin dans la profession. Vous pouvez leur donner différents noms (storyboard, maquette fonctionnelle, zoning…), LA grande question de savoir quel est l’outil le plus approprié revient régulièrement (un peu comme le salaire des cadres ou le prix de l’immobilier). C’est un peu notre sujet « marronnier » à nous !
Bref, tout ça pour dire que ça fait longtemps que je ne me suis pas exprimé sur le sujet. Je pense ne pas me tromper en disant que la profession semble avoir unanimement adopté l’idée de faire de prototypage rapide. Le débat porte plutôt sur le niveau de détail, à savoir : quel est le bon niveau de détail d’un prototype ? J’ai complètement abandonné l’idée d’apporter une réponse à cette question existentielle, aussi je vous conseille plutôt la lecture de ces différents articles pour vous faire une idée :
- Wireframes are dead, long live rapid prototyping
- Sketches and Wireframes and Prototypes! Oh My! Creating Your Own Magical Wizard Experience
- Design Better And Faster With Rapid Prototyping
- Ultimate Guide to Website Wireframing
Il existe ainsi différentes écoles correspondant à différentes techniques et catégorie d’outils :
- L’utilisation du papier / crayons pour faire du sketching (je recommande l’utilisation d’un masque comme celui proposé par UI Stencils ainsi que d’un bloc note qui vous aidera à tracer des traits droits comme le Dot Grid Book) ;
- L’utilisation de bibliothèque de composants avec un outil de présentation comme PowerPoint ou Keynote (j’ai récemment découvert les Wireframe Tollkits de KeynoteKungFu) ;
- L’utilisation d’outils de prototypage rapide comme Balsamiq ;
- L’utilisation de solutions beaucoup plus puissantes comme Axure RP.
Pendant 10 ans j’ai utilisé ma propre bibliothèque de composants sur PowerPoint mais je pense avoir définitivement tourné la page sur cette méthode (trop laborieux et pas forcément adapté à un processus de création collaboratif). Après plusieurs tentatives j’ai également abandonné Axure qui est un outil très puissant, mais beaucoup trop lourd (à n’utiliser que pour les équipes de plus de 10 personnes et les projets de plus d’1 an).
J’ai récemment trouvé un bon compromis avec l’utilisation conjointe du papier et d’un outil de prototypage rapide. L’idée est d’utiliser le papier/crayon directement en réunion pour poser les grandes lignes des interfaces et interagir en séance, puis de formaliser ça dans un outil de prototypage apportant un peu plus de structure et permettant de pérenniser le travail (les feuilles de papier ne sont définitivement pas assez stables).
Concernant les outils de prototypage rapide, il existe plus d’une dizaine de solutions que nous pouvons classer en deux catégories :
- Les outils en ligne comme Mockingbird ou MockFlow qui sont très légers et parfaits pour faire de la collaboration (mais du coup un peu « légers ») ;
- Des outils à installer mais qui intègre une couche de collaboration (les deux produits les plus avancés sont FlairBuilder et Balsamiq).
Là où ces deux dernières solutions font la différence, c’est dans leur capacité à gérer les templates, à savoir les différentes couches qui composent votre interface et qui ne changent pas forcément à tous les écrans. FlairBuilder propose ainsi un principe de Master Pages assez intuitif :
Balsamiq va un peu plus loin avec le principe de Symbol qui sont à la fois plus souple et plus puissant (vous pouvez vous servir des symbols pour créer des composants réutilisables ou des masters). Cerise sur le gâteau, les symbols peuvent être instanciés et contextualisés :
Au final j’ai donc une légère préférence pour Balsamiq qui est à la fois plus simple à prendre en main, mais également plus puissant. Le produit évolue vite et propose en plus un environnement collaboratif (MyBalsamiq). La question à laquelle je ne trouve pas de réponse est la suivante : puisque les maquettes créées sont en XML (plus précisément en BBML), pourquoi ne peuvent-elles pas être récupérées dans des outils de création graphique ? Dans mes rêves les plus fous, je verrais bien Adobe racheter Balsmaiq et l’intégrer à la Creative Suite… Dans tous les cas de figure, Balsamiq est une valeur sûre.
Impossible pour moi de conclure cet article sans mentionner deux formidables blogs qui listent des exemples de wireframes : Mockups To Go et Wireframe Showcase.