De l’utilité de Prototyper

Vous avez peut être déjà eu l’oc­ca­sion de mener des projets web en vous passant de la phase de proto­ty­page, avec comme justi­fi­ca­tion « c’est juste un site vitrine, on n’a pas besoin de conseils UX ». Cet argu­ment, somme toute défen­dable dans le cadre d’un site ayant peu ou pas de fonc­tion­na­li­tés, l’est beau­coup moins dans le cas d’un site Web ou d’une appli­ca­tion plus complexe.

En effet, le proto­ty­page en 3 étapes permet de limi­ter le risque d’ir­ré­ver­si­bi­lité du projet. Dans le cadre d’une évolu­tion par itéra­tion, cette étape est indis­pen­sable pour avan­cer dans le projet et l’ame­ner à matu­rité avant de commen­cer le webde­sign et le déve­lop­pe­ment, qui sont les étapes les plus longues et donc coûteuses du projet. Ainsi, cette étape vous permet­tra de réduire le coût final de votre site Web ou de votre appli­ca­tion.

Avant le proto­ty­page, il faut se poser les bonnes ques­tions !

Au démar­rage de tout projet, il est indis­pen­sable que les équipes agence et client se réunissent afin de procé­der à la phase de ques­tion­ne­ment. Cette phase est déter­mi­nante dans le bon dérou­le­ment de votre projet, car elle invite l’en­semble des inter­ve­nants du projet à se réunir et soule­ver les ques­tions préli­mi­naires au démar­rage du projet :

• Qui va utili­ser mon appli­ca­tion / mon site Web ?
• Dans quels contextes est utili­sée mon appli­ca­tion / mon site Web ?
• Quels services apporte mon appli­ca­tion / site web ?
• Quel sera le contenu de mon appli­ca­tion / mon site Web ?
• Quels sont les conte­nus prio­ri­taires ?

Ces ques­tions sont primor­diales pour comprendre le fonc­tion­ne­ment global du projet,  et défi­nir ce qui est faisable ou non dans le péri­mètre offert par le budget et les délais de livrai­son du produit fini. C’est une étape d’échange qui permet­tra de défi­nir la plani­fi­ca­tion globale du proje­tet la raison d’être de l’ap­pli­ca­tion / du site Web.Une fois que l’équipe projet a répondu à ces ques­tions, on peut passer à la première phase du proto­ty­page : les sketch.

Phase 1 : les sketch

Les Sketch (ou zonings) sont des maquettes réali­sées à l’aide d’un papier et d’un crayon. On peut égale­ment s’ai­der de post-its pour aller plus rapi­de­ment et jouer avec les diffé­rents éléments comme un puzzle. Cet échange ouvrira le débat sur la hiérar­chi­sa­tion et l’ar­chi­tec­ture de l’in­for­ma­tion et la posi­tion de chaque élément dans la maquette. Ainsi, l’agence pourra déve­lop­per des concepts autour des diffé­rentes fonc­tion­na­li­tés expri­mées, et des modes de navi­ga­tion. Ce sera aussi l’oc­ca­sion de défi­nir un MVP (mini­mum Value Product), c’est à dire les fonc­tion­na­li­tés essen­tielles néces­saires à l’ac­com­plis­se­ment de l’objec­tif du produit. Ce sera égale­ment l’oc­ca­sion de cerner les attentes parfois non expri­mées par le client, car elles sont impli­cites à ses yeux.

Phase 2 : les mockups ou wire­frames

Les wire­frames sont des proto­types plus avan­cés que les Sketch, ce sont des maquettes « fil de fer » à échelle réelle. Réali­sées à l’aide de logi­ciels comme Balsa­miq ou Axure, ces maquettes permet­tront de défi­nir l’as­pect fonc­tion­nel du site Web / de l’ap­pli­ca­tion : quel compor­te­ment a telle page au scroll, quelles sont les étapes de connexion à l’es­pace mon compte etc… On maquette tous les écrans clés et les écrans type qui servi­ront de base pour le reste du site / de l’ap­pli­ca­tion. Ce maquet­tage permet­tra d’af­fi­ner le budget de déve­lop­pe­ment de manière précise (on pourra défi­nir le temps passé plus préci­sé­ment que sur un devis « à l’aveugle ») et de faire évoluer la réflexion autour du projet, tant du côté du client que du côté de l’agence. Cette phase est égale­ment riche en échanges et néces­site d’éta­blir un dialogue construc­tif. Lors de cette phase, l’UX desi­gner conseille le client au quoti­dien afin de rendre le site acces­sible à tous, faci­le­ment, et avec une expé­rience claire et riche.

Phase 3 : les proto­types animés

Une fois les mockups termi­nés, vous pouvez passer au webde­sign, mais le rendu maquettes reste statique et offre une vision parcel­laire de l’ex­pé­rience utili­sa­teur. Pour palier à la froi­deur des pages en jpg, des appli­ca­tions vous permettent d’ani­mer vos proto­types en défi­nis­sant des zones cliquables et des pages d’at­ter­ris­sage, comme Invi­sion, Axure ou encore Atomic. L’ani­ma­tion des proto­types a l’avan­tage d’of­frir au client une expé­rience immer­sive, qui lui donnera une idée assez précise du rendu final, en dehors des anima­tions CSS ou javas­cript.  Atten­tion néan­moins à faire preuve de péda­go­gie, car certains inter­lo­cu­teurs ne comprennent pas bien en quoi le déve­lop­pe­ment est néces­saire, tant l’ex­pé­rience peut se rappro­cher de la réalité !

En résumé, le proto­ty­page n’a que des avan­tages

• Il permet à l’équipe de se poser les bonnes ques­tions, et à échan­ger.
• Il permet d’ob­te­nir rapi­de­ment un support permet­tant l’échange et la nais­sance d’idées.
• Il permet d’ame­ner votre site Web / appli­ca­tion mobile à un stade de matu­rité plus avancé.
• Il permet de réduire les coûts du webde­sign en limi­tant l’in­ter­pré­ta­tion sur la concep­tion du produit et donc éviter des allers-retours inutiles.
• Il permet de cadrer les coûts de déve­lop­pe­ment dès les phases préli­mi­naires au déve­lop­pe­ment, avec des vali­da­tions inter­mé­diaires.
• Il permet au client d’avoir une immer­sion dans le projet via les proto­types animés.

Pour conclure, ne vous passez pas de l’étape proto­ty­page qui peut vous sembler allon­ger le plan­ning, mais qui en réalité vous permet­tra de gagner du temps par la suite, et assu­rera à votre projet une dura­bi­lité du fait de la réflexion enga­gée main dans la main avec l’agence qui vous conseille !