L’incontournable étape du wireframe

30 mars 2015

Wireframe. Derrière ce mot anglais se cache la méthode qui consiste à structurer un site web ou une application mobile en « maquettes fil de fer ». Si le wireframe n’a généralement pas beaucoup de secrets pour un graphiste, il en est tout autre pour les consultants et responsables marketing.

 

On peut l’appeler wireframe, zoning ou encore mockup. Même s’il peut exister de légères variations de définitions entre entre ces termes, ils représentent tous un même principe : la modélisation des contenus d’un site web ou d’une application mobile sous une forme schématisée, également appelée « maquette en fils de fer ». Celle-ci permet d’apposer les contenus de façon réaliste, et de commencer à hiérarchiser l’information dans la page, via la proportion des blocs et zones de contenus. Les wireframes sont généralement réalisés en noir et blanc.

Selon les compétences de la personne qui réalise le wireframe, il est possible d’aller plus ou moins ou moins dans la précision du document. Il est par exemple tout à fait envisageable de griffonner un wireframe sur papier, même si cela sera évidemment moins précis que sur ordinateur.

Alors justement, comment on procède pour créer un wireframe/zoning/mockup ? Avant toute chose, il faut trouver le meilleur logiciel. Et par « meilleur », j’entends celui qui sera le plus adapté à vos besoins. Voici une petite liste des meilleurs outils de wireframe, tous testés par mes soins :

  • Cacoo.com : il n’est pas vraiment le plus connu, et pourtant il s’agit de l’un des outils les plus puissants du marché. Développé par la société japonaise Nulab, Cacoo est mon outil de wireframe préféré. Après un temps d’adaptation nécessaire, Cacoo permet de créer toutes sortes de schémas très facilement, tout en permettant l’import de ses propres images. L’outil est évidemment collaboratif, et il est possible de travailler en temps réel sur un même document, à la manière de Google Docs.
  • Balsamiq Mockups : disponible aussi bien sous la forme d’application que sous la forme d’un service web, Balsamiq mise tout sur la simplicité et la rapidité de création. L’outil est agréable car bien conçu et son style « dessin » est plutôt original.
  • Omnigraffle : disponible uniquement sur Mac, Omnigraffle est la Rolls Royce des outils de wireframe. Son prix de 100$ minimum va de paire avec ses nombreuses possibilités et la solidité de l’ensemble. Son interface est toutefois parfois un peu dense, ce qui rend son usage destiné à une cible avertie.
  • Gliffy : Gliffy est l’un des outils les réputés pour créer des schémas. Avec son interface simple et épurée, il se maitrise très rapidement. Ses fonctions de collaboration sont en enoutre assez évoluées. Gliffy est à mes yeux un sérieux concurrent à Cacoo.
  • Justinmind : il s’agit peut-être de l’outil de wireframe le plus poussé qui existe, si bien que le terme « wireframe » ne lui correspond plus forcément. Just In Mind se présente plutôt comme un outil de prototypage extrêmement puissant, puisqu’il offre la possibilité de rendre ses schémas et zonings interactifs. A réserver pour les projets ambitieux et pour les utilisateurs exigeants. Son prix de 495 $ (ou 29 $ par mois) fait d’ailleurs de lui l’outil le plus cher du marché.

Il existe évidemment beaucoup d’autres logiciels, dont certains également très intéressants. Je n’ai listé ici que ceux que j’ai testé.

Ensuite, la création du wireframe dépendra de votre rôle et de votre cible. Contrairement à d’autres processus, le wireframe peut être réalisé par tout le monde, avec un peu de temps… et de bon sens ! Si vous êtes client, vous pouvez vous-même déjà posé les grandes lignes de votre projet grâce à cette méthode. Cela permettra à vos prestataires de mieux comprendre vos besoins. En outre, vos échanges seront basés sur quelque chose de visuel, de quasi « physique », ce qui facilitera les choses. Si vous êtes graphiste, je ne vous ferai pas l’affront de vous apprendre votre métier. Mais là aussi, avant de vous précipiter sur le maquettage, il conviendra de d’abord poser ses idées via le wireframe. Cela permettra des échanges mieux construits avec le client, et vous fera économiser du temps (et donc de l’argent) sur la création de vos maquettes.

J’en viens maintenant à mon métier, le marketing. Dans ce milieu, je me suis rendu compte que de nombreuses personnes ne savaient tout simplement pas faire de wireframe. En règle générale, les marketeurs, communicants et autres publicitaires préfèrent parler (trop) au lieu de mettre les mains de le cambouis. Il semblerait en effet qu’il soit plus aisé de faire de grandes phrases et d’évoquer d’étranges théories aux noms bourrés d’anglicismes plutôt que de produire des éléments concrets. Pourtant, il s’agit à mes yeux d’un manque flagrant de compétences qui, tôt ou tard dans le processus du projet, se fera sentir. Car le marketeur, en étant bien souvent à la base du projet, a la possibilité de poser les fondations d’un futur succès, via la définition d’une architecture pertinente et solide. Une architecture qui se matérialise, notamment, par un wireframe. Poser un wireframe dès l’amorce du projet permet effectivement de se rendre compte de certains problèmes et ainsi de les contourner. On évite ainsi bien des sueurs froides.

Clauses de confidentialité obligent, je ne peux pas vous montrer d’exemples réalisés pour mes clients. J’ai donc pris le temps de concevoir le wireframe de la page d’accueil de l’application iPhone d’Ebay.

 

Exemple de wireframe réalisé par mes soins

A gauche, l’application Ebay sur iPhone – à droite, sa représentation type wireframe

wireframe_ebay

 

Vous l’avez compris, le wireframe représente dans les métiers du numérique une étape incontournable à ne pas sous-estimer, quel que soit votre métier ou votre rôle dans un projet. Pour découvrir d’autres outils de wireframe, vous pouvez consulter l’article du site Creativ Bloq, qui recense pas moins de 20 logiciels.