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 :

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

Laisser un commentaire