Croyez-le ou non, mais ça fait presque deux ans que je n’ai pas abordé le sujet des outils de prototypage rapide. À ma décharge, je pense ne pas me tromper en disant que la situation que j’avais décrite à l’époque n’a pas beaucoup changé (Wireframes : 4 styles pour 4 types d’outils). Pourtant, l’offre s’est considérablement élargie, comme en témoigne cette analyse comparative très complète : The Ultimate Wireframing Tools Guide.

Il y a plus d’une trentaine d’outils dans ce tableau, et pourtant il n’est pas complet ! J’ai ainsi repéré dernièrement 4 outils particulièrement intéressants que nous pouvons classer dans deux catégories : les ateliers de prototypage en ligne et les applications de dynamisation.

Pour celles et ceux qui veulent concevoir leurs interfaces à l’écran en misant sur la collaboration et le partage, je recommande ainsi ces deux outils :

• Wireframe.cc, une application en ligne minimaliste pour créer des interfaces en quelques secondes (littéralement) :

  

• FluidUI, une application en ligne beaucoup plus sophistiquée qui existe aussi sous forme d’extension pour Chrome. Je vous recommande vivement de tester l’éditeur en lignepour bien juger la puissance de l’outil.

  

Pour celles et ceux qui sont attachés au papier, je recommande les applications suivantes qui permettent de créer des prototypes avec des photos :

• Pop, une application mobile minimaliste, mais parfaitement opérante ;

  

• Solidify, une application équivalente, mais bien plus sophistiquée (qui propose notamment un environnement complet de collaboration).

  

Ces quatre solutions illustrent bien selon moi l’état du marché : des approches novatrices à la fois minimalistes et très sophistiquées. Ceci étant dit, je n’ai toujours pas trouvé l’outil répondant à mes exigences : pouvoir créer une maquette fonctionnelle tout à la souris, la partager en ligne avec des collègues et avoir la possibilité de générer un squelette HTML (pour commencer le travail d’intégration) et l’exporter vers un logiciel de création graphique (pour bien respecter les proportions).

Pour le moment je reste fidèle à mes outils papier et à Balsamiq (qui vient enfin d’introduire les skins), mais ils ne répondent pas non plus à la problématique décrite ci-dessus. Ceci étant dit, je ne désespère pas de trouver la perle rare un jour…

Cette semaine se tient à Los Angeles la grand-messe annuelle d’Adobe où l’éditeur nous présente ses nouveautés et sa stratégie. L’évènement n’étant pas encore terminé, je me garde de vous faire un récapitulatif (qui sera publié en fin de semaine sur InterfacesRiches.fr). Je souhaite néanmoins vous présenter la gamme de produits destinés aux tablettes (les Adobe Touch Apps) qui sont intégrées dans la Creative Suite. L’ambition d’Adobe avec cette nouvelle gamme est de stimuler la créativité au travers d’interfaces tactiles inspirationelles : Adobe Touch Apps Redefine Creative Software.

L’un de ces produits a particulièrement retenu mon attention : Adobe Proto, une application de prototypage rapide pour tablettes Android et iPad. Cela fait de nombreuses années que je milite pour que les grands éditeurs rajoutent à leur catalogue un outil de prototypage rapide digne de ce nom (Wireframes : 4 styles pour 4 types d’outils). Jusqu’à présent, il fallait composer chez Adobe avec des produits bâtards comme les extensions pour Fireworks (trop lourdes à manier) ou Flash Catalyst (plutôt orienté design des interactions). Avec ce Proto, Adobe comble le vide dans sa gamme avec une application tout à fait innovante :

Adobe Proto se présente donc comme une application de prototypage rapide avec une interface tactile particulièrement intuitive :

Pas de menus compliqués, tout se fait avec le doigt : soit vous sélectionnez un composant dans la barre de gauche, soit vous dessinez directement une forme et l’interface l’interprète (cartouche, image, menu…) et la reformate pour vous (alignement sur la grille).

Visiblement l’orientation donnée à cette application est de privilégier la rapidité d’exécution tout en offrant de la rigueur. Il vous suffit de gribouiller dans une cartouche pour que l’interface transforme ça en texte (petit gribouillis) ou titre (gros gribouillis), ce nouvel élément est alors repositionnable et redimensionnable à l’aide de l’inspecteur. Plutôt que de vous faire un long discours, je vous propose de regarder la démo (sautez directement à 2″00′ et 3″30′) :

Comme vous pouvez le constater, l’interface est assez réactive (quoique le temps de latence est encore un peu élevé) et réagit très bien. Vous pourriez me dire que ce Proto n’est pas aussi sophistiqué que les autres applications (iMockups, OmniGraffle, SketchyPad, MoodBoard ou encore AppCooker), mais n’oubliez pas qu’il s’insère dans une gamme, qui elle-même fait partie d’une suite.

Il ne faut donc pas considérer Proto comme un logiciel isolé, mais comme une façon d’exprimer votre créativité parmi d’autres (Ideas permet de dessiner de façon plus libre, Collage permet de faire des montages, Debut permet de présenter ça à vos collègues…). De plus, cette collection d’applications pour tablettes est assortie d’un environnement de collaboration (Adobe Creative Cloud), forcément, puisque’il n’y a pas de système de fichier sur l’iPad (donc impossible d’exporter vos maquettes, sauf dans les nuages).

Pour avoir une idée plus précise du positionnement de cette offre, voici une mise en situation :

Au final, est-ce que je suis emballé par cette application ? Oui, car elle propose une approche tout à novatrice du prototypage. Est-ce que cette application va balayer la concurrence ? Non aucune chance, car pour le moment, Proto n’est à mon sens pas un produit fini. Le prototypage rapide est une méthode de conception très puissante si elle est:

• Itérative / collaborative (nous ne savons pas grand-chose de ce que va proposer le Creative Cloud) ;
• Simple d’accès, mais complète (comment faire pour récupérer une maquette Proto et l’enrichir sur votre ordinateur ?) ;
• Intégrée dans une chaine de création (sera-t-il possible d’exporter les maquettes dans Fireworks ou Photoshop ?).

Je suis donc plutôt réservé quant à l’utilité réelle de cette application qui ne soutient pas la comparaison face à Balsamiq ou FlairBuilder. Certes, ce ne sont pas les mêmes produits, mais si Adobe veut séduire et convaincre les concepteurs, il va falloir faire mieux. Ceci étant dit, je pense ne pas me tromper en disant que cette application a été compilée avec AIR pour faciliter la compatibilité Android / iOS et devrait donc être très facilement portable sur PC/Mac. J’anticipe donc une version desktop de Proto proposant beaucoup plus de fonctionnalités. À partir de là, la chaine de création sera complète et cette application pour tablette aura du sens.

Mais chaque chose en son temps, car Proto vient tout juste d’être annoncée. Cette application sera disponible dès le mois prochain pour les tablettes Android à 9,99$. J’attends avec impatience de pouvoir mettre mes doigts dessus…

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.

Petit à petit la blogosphère commence à se doter de blogs de plus en plus ciblés pour les métiers de la conception web. Nous connaissions déjà les sites “généralistes” comme Smashing Magazine, Boxes and Arrows ou encore Digital Web Magazine. Il y a aussi des portails comme UX Magazine et même des web TV comme l’Information Architecture TV.

Je vous propose de découvrir un blog entièrement dédié aux wireframes (autrement appellées maquettes fonctionnelles, storyboard ou zoning) : Wireframes Magazine.

Différentes techniques de wireframing sont ainsi commentées et analysées. Et puisque nous sommes dans le sujet, laissez-moi vous recommander d’autres sources :

• The what, when and why of wireframes, la génèse des wireframes ;
• La série d’articles sur les outils de conception publiée sur le blog SuperFiction ;
• The Fine Art of Wireframes, où l’auteur nous explique les mérites du prototypage papier ;
• Shades of Gray: Wireframes as Thinking Device, une très bonne étude de cas.

Bon tout ça c’est très bien mais maintenant que je viens de passer sous Mac je ne sais pas si je dois utiliser OmniGraffle ou Flash Catalyst…

(via This is Lovely!)