Le blog de Sophie

Croquis, Mockups / Wire­frames et Proto­types : quels avan­tages et comment s’y prendre ?

EXIT Studio n’hé­site pas à faire appel au trio croquis (sketch), mockups / wire­frames et proto­type en amont de la réali­sa­tion des desi­gns (et du déve­lop­pe­ment web) de certains de ses projets. Bien que l’er­go­no­mie et la réali­sa­tion de mockups soit quelque chose qui m’in­té­res­sait, j’avais, de prime abord, un peu de mal à conce­voir en quoi cela allait m’être utile, sans me faire perdre du temps. Nombreux sont ceux qui partagent cette idée, et je consacre donc cet article à vous expliquer pourquoi (et comment), la concep­tion de croquis, de mockups / wire­frames et enfin, le proto­ty­page peuvent être utiles tant d’un point de vue graphique et tech­nique, que pour convaincre et rassu­rer un client vis-à-vis d’un projet.

Sketch, Croquis, Mockups, Wireframe, Prototype

Qu’est-ce qu’un mockup / un wire­frame ?

Dans le domaine du web et de l’in­for­ma­tique, un mockup (égale­ment appelé Wire­frame) désigne la maquette simpli­fiée d’une inter­face utili­sa­teur. Cette maquette se concentre prin­ci­pa­le­ment sur les fonc­tion­na­li­tés du site, plus que sur son aspect esthé­tique. Le mockup (ou wire­frame) consti­tue donc le sque­lette de l’in­ter­face.

Mockups et Wire­frames, à quoi ça sert ?

Le mockup (ou wire­frame) présente diverses fonc­tions (très) utiles :

  • Permet de montrer où seront placés les diffé­rents éléments de l’in­ter­face ;
  • Permet d’en­vi­sa­ger le projet dès le départ sous un aspect plus fonc­tion­nel (boutons, zones de textes, zones d’images, éléments inter­ac­tifs, etc.) et ainsi, de débusquer des problèmes que l’on ne soupçon­nait pas ;
  • Permet de se poser toutes les ques­tions au préa­lable et ainsi, de gagner un temps précieux sur les étapes suivantes (web design et concep­tion) ;
  • Dimi­nue le temps de travail du web desi­gner et du web déve­lop­peur car tous les aspects du projet ont déjà été étudiés ;
  • Permet de se concen­trer sur le fond (archi­tec­ture, fonc­tion­na­li­tés, inter­ac­tions, conte­nus, etc.), sans se lais­ser distraire par la forme (aspect esthé­tique du web design) ;
  • Permet d’amé­lio­rer l’ex­pé­rience utili­sa­teur (UX) et l’er­go­no­mie à l’aide de test utili­sa­teurs (sans se lais­ser distraire par l’as­pect esthé­tique) ;
  • Permet de conscien­ti­ser le client et d’évi­ter les modi­fi­ca­tions trop impor­tantes sur le design et la struc­ture, lesquelles risque­raient de rallon­ger le projet.

wireframe-mockup-sketches

En effet, nous avons beau envi­sa­ger et discu­ter d’un maxi­mum d’élé­ments au préa­lable, nul n’est infaillible et des zones d’ombres peuvent toujours subsis­ter. Savoir rapi­de­ment débusquer ces erreurs, en amont du projet, permet de gagner un temps précieux sur le reste de la concep­tion.

« Many deve­lo­pers will be compel­led to imme­dia­tely start writing code, but because code is time consu­ming to create it’s diffi­cult to casually dispose of and makes us less likely to pivot. So, in the begin­ning, avoid writing code and instead test your ideas by itera­ting through wire­frames, mockups and proto­types. Consi­der star­ting with low-fide­lity, non-inter­ac­tive wire­frames (sketches) and tran­si­tio­ning in steps towards high-fide­lity, inter­ac­tive proto­types » – tele­rik.com

Traduc­tion :

De nombreux déve­lop­peurs sont contraints d’en­ta­mer immé­dia­te­ment le déve­lop­pe­ment du code, mais parce qu’é­crire du code prend du temps, il est plus diffi­cile d’en dispo­ser et il est moins probable qu’un chan­ge­ment de direc­tion ou qu’un retour en arrière ait lieu. Ainsi, dès le départ, il est préfé­rable de commen­cer par tester ses idées en les réité­rants sur wire­frames, mockups et proto­types. Commen­cez avec une repro­duc­tion de plus basse-fidé­lité, avec des croquis et wire­frames statiques ; puis passez, étape par étape, vers une produc­tion de plus haute-fidé­lité avec des proto­types inter­ac­tifs.

Quels outils permettent de réali­ser des mockups / wire­frames ?

J’uti­lise pour ma part Balsa­miq Mockups, outil gratuit dans sa version web, fonc­tion­nant sous MAC, Windows et Linux. Selon les concep­teurs de Balsa­miq Mockups, l’ef­fet « dessin crayonné » de l’ou­til a pour objec­tif de donner une impres­sion de « non-abouti », ce qui aurait pour résul­tat d’ap­por­ter un feed­back plus honnête de la part du client qui ne s’at­tar­de­rait pas sur les ques­tions d’es­thé­tiques à propre­ment parlé.

« Mockups inten­tio­nally makes your wire­frames scream both This is not final! and I just threw this toge­ther, elici­ting honest feed­back, which results in better wire­frames, easier-to-use features, and happier users of your product. That’s what it’s all about » – Balsa­miq Mockups.

Traduc­tion :

Balsa­miq Mockups fait inten­tion­nel­le­ment en sorte que vos Wire­frames crient à la fois « ce n’est pas terminé » et « je viens juste de jeter ça sur une feuille de papier », révé­lant un feed­back honnête, ce qui résulte en de meilleurs Wire­frames, des fonc­tion­na­li­tés plus faciles à prendre en main, et des inter­nautes / utili­sa­teurs plus heureux et satis­fait de votre produit / projet. C’est tout ce dont il s’agit.

L’in­ter­face est assez simple à prendre en main. Au-dessus, la barre d’ou­tils met à la dispo­si­tion de l’uti­li­sa­teur une série d’élé­ments qu’il suffit de glis­ser sur la surface de travail pour implé­men­ter (drag & drop). Selon le compo­sant actif, un simple « enter » permet de modi­fier le texte ou d’ajou­ter une image. En dessous, les diffé­rents projets ouverts s’af­fichent et cela permet aisé­ment de réali­ser des copier / coller de l’un à l’autre. Enfin, une fois le projet achevé, il suffit de l’ex­por­ter pour dispo­ser d’une version PNG présen­table.

Balsamiq Mockups Interface

Balsa­miq Mockups met à la dispo­si­tion de ses utili­sa­teurs pas moins de 75 compo­sants et 187 icônes pour construire ses maquettes. Chaque compo­sant est indi­vi­duel­le­ment para­mé­trable, qu’il s’agisse de la taille, de la couleur ou encore du posi­tion­ne­ment par rapport aux autres éléments. On commence par implé­men­ter le conte­neur de base (qu’il s’agisse d’une fenêtre de navi­ga­teur ou de mobile, par exemple) sur lequel on ajoute les compo­sants néces­saires.

See What You Can Build With Balsamiq Mockups

Balsamiq Mockups Elements

Croquis, Mockups / Wire­frames et Proto­type : étude de cas

La réali­sa­tion de mockups doit respec­ter une série d’étapes afin d’op­ti­mi­ser son temps et sa produc­tion. La défi­ni­tion claire et précise de l’ar­chi­tec­ture du site et de ses fonc­tion­na­li­tés permet la consti­tu­tion de croquis. Une fois ceux-ci dessi­nés, ils sont détaillés et digi­ta­li­sés à l’aide des mockups / wire­frames. Enfin, avant même la trans­for­ma­tion de ces maquettes en design, le proto­ty­page permet au client (et à l’équipe tech­nique, au besoin), en plus de visua­li­ser le sque­lette de son site, d’in­te­ra­gir avec ce dernier et de réali­ser des tests utili­sa­teurs.

Croquis, Sketch, Wireframes, Mockups, Prototype

Étape 1 : défi­ni­tion de l’ar­chi­tec­ture du site

La première étape à tout projet est la construc­tion de l’ar­chi­tec­ture du site, à savoir : de quoi sera composé le site en termes de pages et de fonc­tion­na­li­tés ? Quelles pages mène­ront à quelles autres ? Quels éléments devront être mis en avant (call-to-action) ? etc. En somme, la substance même du projet, listé sur papier. Chez EXIT Studio, nous décli­nons tous ces éléments dans notre offre.

Étape 2 : croquis sur papier (sketch)

La seconde étape consiste à réali­ser un croquis sur papier. Il ne sert à rien de s’at­taquer direc­te­ment aux mockups sous Balsa­miq car la moindre modi­fi­ca­tion de base deman­dera bien plus d’ef­fort que de barrer / effa­cer une partie et de recom­men­cer à côté. Le mieux étant de passer à Balsa­miq et ses mockups digi­ta­li­sés, une fois que (le plus gros de) ceux-ci auront été décli­nés sur papier.

Ci-dessous, un aperçu du croquis utilisé pour la concep­tion du site de Jean-Charles Roufosse, réalisé par EXIT Studio.

Croquis, Sketch, Architecte Plan Jean-Charles Roufosse, Exit Studio

Étape 3 : créa­tion des mockups / wire­frames à l’aide de l’ou­til logi­ciel Balsa­miq Mockups

Je commence toujours par implé­men­ter un conte­neur de type « navi­ga­teur » avec une largeur de 1280x (la hauteur de votre choix). Comme au moment de la réali­sa­tion de design, je veille à bien respec­ter les règles de grilles de mise en page, en alignant correc­te­ment les éléments par rapport aux autres, en conser­vant une cohé­rence « graphique », etc.

Ci-dessous, un aperçu de mockups réali­sés par EXIT Studio pour le site de Jean-Charles Roufosse.

Par l'interieur - Jean-Charles Roufosse - Mockups - Exit Studio

Par l'interieur - Jean-Charles Roufosse - Mockups - Exit Studio

Par l'interieur - Jean-Charles Roufosse - Mockups - Exit Studio

Étape 4 : proto­ty­page

Qu’est-ce qu’un proto­ty­page et à quoi ça sert ?

Le proto­ty­page consiste à conce­voir des versions inter­mé­diaires et donc incom­plètes d’un site web, conçues pour tester l’uti­li­sa­tion avant la phase propre­ment dite de déve­lop­pe­ment web. Dans le cadre d’une inter­ven­tion ergo­no­mique, la phase de proto­ty­page permet de tester l’uti­li­sa­tion et l’uti­li­sa­bi­lité d’une inter­face auprès d’uti­li­sa­teurs (test utili­sa­teur, etc.). Il se distingue du mockup (ou wire­frame) en simu­lant le fonc­tion­ne­ment avec des inter­ac­tions possibles.

« A proto­type dives deeper into the inter­ac­tion between the user and the soft­ware, it’s like a dyna­mic version of a wire­frame. It takes much more time to create a dyna­mic, clickable proto­type than a static wire­frame for obvious reasons. A proto­type shows not only the content, but the gene­ral usabi­lity of an appli­ca­tion. This simu­la­tion of inter­ac­tions looks close to the final design, and can be user-tested to make sure that the soft­ware has high usabi­lity – that’s one of their biggest prac­ti­cal advan­tages. Proto­types are great at revea­ling and elimi­na­ting flaws of the design, plan­ning further steps and making esti­ma­tions. It’s easier percei­ved by everyone: deve­lo­pers, soft­ware owners, possi­bly inves­tors, who might have no tech­ni­cal back­ground/educa­tion. Thus it’s a great means of presen­ting the idea of the soft­ware in a detai­led way » – Mobi­dev.biz

Traduc­tion :

Un proto­type plonge plus profon­dé­ment dans l’in­te­rac­tion entre l’uti­li­sa­teur et le logi­ciel (l’in­ter­naute et le site web), c’est comme une version dyna­mique du wire­frame / mockup. Cela prend plus de temps de créer un proto­type dyna­mique et cliquable qu’un wire­frame statique pour des raisons évidentes. Un proto­type ne montre pas unique­ment le contenu, mais l’uti­li­sa­bi­lité globale d’une appli­ca­tion. Cette simu­la­tion d’in­te­rac­tion se rapproche davan­tage du résul­tat final, il peut subir un test-utili­sa­teur afin de s’as­su­rer que le logi­ciel (le site web) est utili­sable – c’est d’ailleurs l’un de ses plus gros avan­tages. Les proto­types sont géniaux pour révé­ler et élimi­ner les défauts du design, plani­fier d’autres étapes et faire des esti­ma­tions. Il est plus faci­le­ment perçu par tous : les déve­lop­peurs, les inves­tis­seurs, les clients, qui ne disposent pas forcé­ment des bases et connais­sances néces­saires. Ainsi, c’est un excellent moyen de présen­ter les idées du logi­ciel (du site web) de manière détaillée.

Comment réali­ser un proto­ty­page sur base de mockups ?

Plusieurs outils existent sur le marché mais j’ai choisi de vous parler de l’ap­pli­ca­tion en ligne gratuite d’InVi­sion App (http://www.invi­sio­napp.com/).

InVision App

Un peu comme Balsa­miq Mockups, InVi­sion App permet d’im­por­ter des mockups (au format exporté PNG) dans son appli­ca­tion (par drag & drop de votre ordi­na­teur ou via le cloud avec DropBox et OneD­rive).

InVision App

Une fois vos mockups impor­tés, il vous est possible de leur appliquer des zones d’in­te­rac­tions. Pour ce faire, il suffit de sélec­tion­ner la zone à l’aide du curseur de sa souris, et de lui lier un fichier de desti­na­tion (sous la forme d’un autre de vos mockups).

InVision App

Selon la taille du projet, le proto­ty­page est réalisé en un court laps de temps et ce, avec une grande faci­lité d’uti­li­sa­tion. Une fois votre proto­type terminé, il vous suffit soit de le télé­char­ger (option payante) soit de mettre à dispo­si­tion de votre client / de votre équipe, un simple lien de partage.

Les avan­tages du proto­ty­page de site web

En plus de porter en lui les avan­tages de la concep­tion de mockups / wire­frames (gain de temps, fonc­tion­na­li­tés, archi­tec­ture, etc.), le proto­ty­page offre un plus non négli­geable dans le chef du client. En effet, face à des indi­vi­dus qui pour­raient avoir du mal à cerner et à inter­pré­ter les mockups qui leurs ont été soumis (et donc, la vision que vous avez du projet), le proto­ty­page offre une inter­ac­ti­vité et une prise en main qui parle d’elle-même. Le sque­lette du projet n’est désor­mais plus inerte, ce ne sont plus juste des images avec lesquelles le client doit jongler. Ce dernier ne doit plus réali­ser lui-même les connexions. Il lui suffit de cliquer sur les zones dotées d’in­te­rac­ti­vité et de navi­guer au sein même de cette maquette.

 « En tant qu’eCom­merce Solu­tion Archi­tect et en tant qu’in­ter­mé­diaire entre le client et les déve­lop­peurs, je suis amené à utili­ser InVi­sion App quasi­ment au quoti­dien et ce, pour diffé­rentes raisons. Premiè­re­ment, cet outil me permet faci­le­ment d’illus­trer un concept/une idée et de montrer au client exac­te­ment ce à quoi ce projet va ressem­bler. Le client peut alors navi­guer au sein des mockups, comme s’il était sur le site, et cela lui permet de mieux saisir ce que l’on essaie de réali­ser. Par le passé, nous devions construire un vrai « proof of concept », assi­gner un déve­lop­peur à un projet que le client n’al­lait peut-être jamais signer. Cela avait donc un coût que l’on ne pouvait pas toujours se permettre. Désor­mais, je peux prendre le design, faire quelques modi­fi­ca­tions dans Photo­shop, utili­ser InVi­sionn App et en quelques heures, j’ai un proto­type que je peux présen­ter au client. L’avan­tage du proto­type est que je peux tout autant l’uti­li­ser en interne pour expliquer le projet de manière simple aux déve­lop­peurs. Le risque qu’il y a, avec de longs docu­ments descrip­tifs, c’est que le déve­lop­peur comprenne mal et déve­loppe quelque chose qui ne corres­ponde pas à la demande. À présent, il peut direc­te­ment voir ce qui est demandé, voir ce qu’il se passe lorsque l’on clique à certains endroits, comment le projet inter­agit, et le docu­ment n’est alors plus utilisé que pour les détails » – Kevin Dechamps, eCom­merce Solu­tion Archi­tect.

Étape 5 : réali­sa­tion du design sur base des mockups

Une fois les mockups / wire­frames pour chaque page réali­sés (et vali­dés par le client), ceux-ci sont envoyés au desi­gner qui aura pour objec­tif d’ajou­ter au sque­lette du site son appa­rence graphique.

Ci-dessous, un aperçu de ce que le passage du mockup au design a donné pour le site de Jean-Charles Roufosse, réalisé par EXIT Studio.

Par l'interieur - Jean-Charles Roufosse - Mockups - Design - Exit StudioPar l'interieur - Jean-Charles Roufosse - Mockups - Design - Exit StudioPar l'interieur - Jean-Charles Roufosse - Mockups - Design - Exit Studio

En conclu­sion – Sketch, Mockups et Proto­type pour un projet maîtrisé.

Beau­coup ont tendance à penser que la réali­sa­tion de sketch, mockups / wire­frames et le proto­ty­page en amont de la concep­tion graphique et du déve­lop­pe­ment web d’un site, consti­tue une perte de temps. Pour­tant, à se jeter direc­te­ment sur la réali­sa­tion du design (sans atta­cher suffi­sam­ment d’im­por­tance à l’er­go­no­mie, l’ex­pé­rience utili­sa­teur (UX), l’in­tui­ti­vité de la navi­ga­tion ou encore la mise en exergue des conte­nus) on peut perdre un temps précieux. En effet, réali­ser en cours de route que des éléments fonc­tion­nels n’avaient pas été pris en compte, que des conte­nus ne peuvent être implé­men­tés ou encore que la navi­ga­tion et l’ar­chi­tec­ture s’avèrent contre intui­tive, fait perdre du temps et de l’argent.

Au-delà des consi­dé­ra­tions fonc­tion­nelles et tempo­relles, il faut égale­ment envi­sa­ger le client. En vali­dant une struc­ture, il valide déjà partiel­le­ment un design, ce qui signi­fie concrè­te­ment que le risque de devoir recom­men­cer de zéro un design (car le client aurait voulu autre chose) est divisé par deux. En plus de cela, si une propo­si­tion de projet doit condi­tion­ner la signa­ture ou non d’un contrat, avoir une version inter­ac­tive de votre maquette est un plus qui peut faire toute la diffé­rence.

Mockups, Wireframes, Prototype, Design

Ainsi, de mon point de vue (et de celui d’EXIT Studio), consa­crer du temps à la réali­sa­tion de croquis (sketch) de mockups (wire­frames) et de proto­types en amont de projets plus complexes est indis­pen­sable dans la mesure où :

  • Cela permet de bien cerner le projet dans son archi­tec­ture, son contenu et ses fonc­tion­na­li­tés ;
  • Cela permet de débusquer les erreurs et les angles morts d’un projet ;
  • Cela offre un gain de temps (et donc d’argent) non négli­geable ;
  • Cela peut permettre de faire la diffé­rence au moment de la soumis­sion du projet à un client ;
  • Enfin, cela faci­lite gran­de­ment le déve­lop­pe­ment du projet, tant d’un point de vue tech­nique que graphique.