Wireframes : 4 styles pour 4 types d’outils

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 :

Les master pages de Flairbuilder

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.

13 commentaires pour “Wireframes : 4 styles pour 4 types d’outils”

  1. Posté par Laurent DEMONTIERS a dit : le

    Bonjour Frédéric, et merci pour cet article très documenté.

    Je voulais juste apporter ma petite contribution à l’édifice en précisant qu’Axure reste tout de même un outil de conception plus complet que Balsamiq, et qu’il est encore aujourd’hui leader sur le secteur. Sur le plan fonctionnel balsamiq est encore nettement un cran en dessous.

    Il permet par exemple de faire de l’interfaçage « moderne » en simulant des comportements Ajax, des déplacements de panneaux, apparition dynamique ou contextuelle d’éléments dans l’interface, simulation de comportement JavaScript avancé, etc…

    Puisque tous ces comportements sont aujourd’hui quasiment systématiquement utilisés dans la conception moderne d’interfaces ou dans le layouing, il me semble important de pouvoir les penser avant la phase de prototypage. Ce sont bien là des considérations ergonomiques, et il faut une solution de wireframing qui ne permette.

    Je ne vais pas passer en revue tous les avantages de solutions reconnues comme Axure, je dirai simplement qu’elles permettent encore aujourd’hui de travailler beaucoup plus vite, et peut-être mieux qu’avec les outils naissants.

    Pour ceux qui chercheraient un outil de wireframing je conseillerais de tester plusieurs solutions et de choisir celle qui correspond le mieux à leurs besoins.

    Sinon, lorsque tu dis rechercher une solution qui permette le travail collaboratif : tu parles de collaboration avec les équipes de conceptions ou avec le client ?
    Est-ce que tu invites le client as participer aux phases de Wireframing ? Jusqu’à quelle mesure ?

    Bonne journée

  2. Posté par Webdesign — L’essence précède l’existence (Wireframe, Mockup et Mood Board) a dit : le

    […] Wireframes : 4 styles pour 4 types d’outils — 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 […]

  3. Posté par Florent Gosselin a dit : le

    Hello Fred, je te conseille vivement de jeter un oeil à Fireworks.
    Ce dernier permet la création de wireframes simples ou détaillés, mais aussi d’aller jusqu’aux prototypes html…

    Certains préférent en effet Balsamiq car il contraint de ne pas se perde dans les détails graphiques, et c’est clair que c’est un excellent outil pour une première approche.

    Personnellement, je trouve que Fireworks offre les mêmes possibilités via une librairie d’éléments de type « sketch », mais permet d’aller beaucoup plus loin ensuite (passer du sketch > wireframe > wireframe détaillé > proto > design déf.) tout en restant sur un seul et même outil, et en bénéficiant de la qualité d’UI d’Adobe.
    En revanche, Il faut passer plus de temps pour maitriser complètement l’outil.

    Je n’ai pas testé longuement des solutions comme Axure, mais ces dernières semblent assez exhaustives en terme de features… A creuser !

    PS : Fireworks dispose de notions de master pages, symboles, librairies d’éléments (dont certains html), états, etc… :)

  4. Posté par Florent Gosselin a dit : le

    PS : pour des solutions de partage client, des solutions existent :
    – Notable (www.notableapp.com)
    – ConceptShare (www.conceptshare.com)
    – Mockups (mocksup.com)
    – DraftBoard (www.draftboardapp.com)

    Je ne sais pas si c’est ce genre de solutions que tu cherchaient…

    ++

  5. Posté par Frédéric CAVAZZA a dit : le

    @ Laurent > J’abonde dans ton sens en disant qu’Axure et Balsamiq ne joue pas dans la même cours. Axure est un outil professionnel de prototypage et de conception, Balsamiq est un outil semi-pro de prototypage rapide. De ce fait, Balsamiq est beaucoup moins complet. Mais l’outil le plus puissant est-il nécessairement le meilleur ?

    Oui je parle bien de faire collaborer les équipes et les clients. Idéalement tout le monde devrait pouvoir faire des commentaires et des modifications (voilà pourquoi je privilégie des solutions légères comme Balsamiq plutôt que des machines de guerre comme Axure).

    @ Florent > Je suis le premier à dire que Fireworks est un formidable outil bien trop souvent négligé. Pour faire de la conception graphique d’interfaces, Fireworks est d’ailleurs bien lus performant que Photoshop (qui est, rappelons-le, un outil de retouche photo).

    Si Adobe devait racheter une solution de prototypage rapide (et ils auraient intérêt à le faire), la logique voudrait qu’il l’intègre en amont de Fireworks ou Flash Catalyst. Le fait de pouvoir capitaliser sur un prototype pour lui rajouter une couche graphique (Fireworks), un squelette HTML (Dreamweaver) et une couche d’interaction (Flash Catalyst) serait un gain de temps formidable. J’en rêve !

  6. Posté par zanskar a dit : le

    Pour ma part, je suis une inconditionnelle de Fireworks CS5, le gros plus est effectivement son intégration dans la suite adobe et on peut effectivement comme le dit Florent aller très loin dans le prototypage. IL existe de très bonnes formations en ligne.
    Il est vrai qu’étant autodidacte, je n’ai pas d’habitude de travail à combattre, et je suis partie de l’outil de webdesign qui me semblait le plus correspondre à mon besoin en étant très pragmatique. Avec le même outil, je peux dessiner mon wireframe,faire un prototype de page, faire mes découpes, gérer des pages différents, gérer les états d’un bouton…. et intégrer des éléments graphiques plus poussés travaillés avec Photoshop !

    Pour moi, l’abord de Fireworks est plus facile que Photoshop. Beaucoup plus facile à mon goût, de manipuler des éléments d’une page web sur Fireworks…

  7. Posté par vriine a dit : le

    idem, je suis une adepte de fireworks. Autodidacte, j’aimerais d’ailleurs l’utiliser de façon plus appronfondie, car je pense qu’il s’agit vraiment d’un outil plein de ressources.

    Est-ce que tu invites le client as participer aux phases de Wireframing ? Jusqu’à quelle mesure ?
    -> Cette question m’interresse aussi.

  8. Posté par Guillaume a dit : le

    perso je n’en ai encore jamais utilisé. Mais l’idée est très tentante:
    * pour faire avancer sa propre réflexion (un genre de mind-mapping d’éléments graphiques)
    * pour traiter avec le client

    J’en profite pour vous signaler un blog très complet qui parle beaucoup de wireframes et d’outils de conception:
    http://www.superfiction.net/blog/index.php?Conception-outils

  9. Posté par Christophe Lombard a dit : le

    Bonjour à tous et merci pour cet article et cette conversation passionnante !
    Un petit commentaire pour différencier balsamiq et Axure qui de mon point de vue ne sont pas concurrents.

    Balsamiq : mise en page globale.

    Réalisation de « brouillons » (comme le suggère le picto de l’appli) dont l’objectif est de se mettre d’accord sur une mise en page globale, donc ce qui est pour moi le « zoning ». Et en effet à ce stade l’idée n’est pas de proposer une interaction poussée. De simples liens pour simuler une navigation suffit.

    Axure : les interactions.

    Tout l’intérêt est de mon point de vue de simuler une interaction proche de la version de production. Et dans ce sens d’avoir également un support à des tests utilisateurs.
    Mais pourquoi ne pas utiliser Axure dans la phase de mise en page globale ? Parce que de mon point de vue la « puissance » de balsamiq est justement sa légèreté et sa rapidité d’utilisation.

    Et ensuite ?

    Le problème est qu’à ce stade, il faut tout coder à nouveaux pour passer à la version de production.
    D’où ma question à ceux qui utilisent Fireworks : votre prototype est-il « jetable » ou utilisable comme socle de la phase suivante ?

  10. Posté par Frédéric CAVAZZA a dit : le

    J’espère pour vous (zanskar et vriine) que vos proto Fireworks servent de base pour la prod…

  11. Posté par Guillaume a dit : le

    Je pense qu’on ne peut pas comparer Balsamiq et Axure RP, ce sont deux produits répondants à des besoins différents.

    Pour utiliser intensivement Axure et avoir testé Balsamiq, le premier permet d’aller bien plus loin dans la spécification d’une interface. Le rendu est très propre, l’interface intuitive après quelques heures d’adaptation et on en arrive vite à bout (à tel point qu’on lui découvre ses faiblesses, notamment en matière de scripting).

    Je ne pense pas que l’absence de travail collaboratif soit une faiblesse, car c’est avant tout au chef de projet de collecter les besoins et critiques de l’équipe et de les retranscrire dans le wireframe. C’est moins vrai pour des projets agiles dans lesquels l’aspect décisionnel est secondaire (quand un client, un donneur d’ordre, des décisionnaires n’interviennent pas ou peu).

    L’utilisation de Fireworks m’interpelle et je vais jeter un œil averti à cette solution, qui permettrait de réutiliser quelques éléments de la maquette dans le proto ou le produit final.

    Donc je dirais en résumé : Balsamiq pour du sketching rapide et en équipe, Axure pour une maquette fonctionnelle poussée et Fireworks pour y associer des éléments de design.

  12. Posté par Marc a dit : le

    En effet le débat fait rage. Et il n’y a pas de solution miracle. C’est en se nourrissant des expériences et des visions des autres qu’on avance et que l’on trouve finalement la solution la plus adéquate à nos équipes/projets.
    Voici donc ma vision:

    Je pense que plus l’outil est ouvert (en possibilité) plus il sera adapté (à long terme) à norte utilisation – et surtout moins on sera frustré limité –
    L’idée est bien évidemment de toujours capitaliser ce que l’on fait.

    Il y a à mon sens 2 niveau :
    > un mock up rapide (a faire pendant un brief ou très rapidement après) ici ce sera papier ou balsamiq ou n’importe quelle solution quick and dirty
    > les wireframes de la plupart des écrans de l’app : ceux-ci seront extrêmement précis afin de mettre en avant une qualité auprès des clients (difficile de montrer un balsamiq – c’est gentillet mais pas très pro) et de permettre aux équipes de dev. de bien comprendre et commencer à développer sans avoir un design final.
    – Cette version devra être commentée largement et être dans un format que tout le monde peux ouvrir (pdf) –

    J’ai fait mon choix pour illustrator + Indesign:

    > En effet Illustrator permet une souplesse inégalée – on créé notre propre framework graphique qui n’a pas de limites.(ex. et si on a besoin d’un composant qui n’est pas fournie dans la bibliothèque?)
    > Depuis CS4 il y a les art-board. On peut donc exporter chaque artboard en png.
    > Aussi travailler en vectoriel permet une souplesse si l’on change de médium (web/mobile/tablet/tv/etc.)

    > Du coup dans indesign on peut intégrer ces png dans un livre autour duquel on appose tous les commentaires nécessaires. Je crée donc un pdf qui sert de fil conducteur à tous les intervenants du projets.
    > Une modif a apporter à un screen : il suffit d’exporter la planche concernée et elle sera automatique updaté dans indesign.

    > Pour le prototype : rien de tel que de le développer directement en html/css/js.
    C’est très rapide de nos jours avec les frameworks existants.
    Le travail ne sera jamais perdu. Un prototype sert de fondation au projet… un certain refactoring tout de même.

    Bon wireframing!

  13. Posté par Jerome a dit : le

    Bonjour,

    article intéressant qui reprends les points essentiels du wireframing.
    Par contre, je suis à la recherche d’autre bloc note comme ceux présenté en fin d’article, un peu comme celui-ci : http://www.creativesoutfitter.com/product/34/dot-grid-book

    J’ai essayé de cherché mais c’est très spécifique, avez-vous d’autres exemples ?

    Merci