À quoi ça sert un wireframe?

La conception de sites Web et d’applications mobiles requiert une planification solide. Ainsi, des procédures sont mises en place pour tenter d’éviter les mauvaises surprises tout au long d’un projet de cette nature. Lors de l’étape du design, une de ces procédures consiste à tracer l’interface du site Web ou de l’application mobile à l’aide de « fils de fer », mieux connus sous le nom de wireframes (ou alors l’étape du prototypage). À quels objectifs répondent ces wireframes? 

Un wireframe dans Axure

C’est quoi

Tel le plan d’un architecte, le wireframe montre uniquement les aspects fonctionnels d’un site Web, en évitant de s’attarder aux détails graphiques. D’ailleurs, certains wireframes sont intentionnellement faits avec des traits imparfaits pour clairement démontrer que le graphisme n’est pas pris en considération. Ainsi, en ne s’attardant qu’au contenu et à la structure du site, on peut avoir d’un coup d’oeil l’essentiel du site, ce qui permet d’évaluer plus facilement ce qui fonctionne ou pas, à l’aide de tests utilisateurs notamment. Une couche visuelle à ce stade-ci ne ferait qu’amener des distractions qui dilueraient les fonctions coeur du site.

Outre le graphisme, le wireframe contient tout élément que votre site Web final contiendra : votre entête, vos menus, votre contenu principal, votre pied de page, vos boutons, etc. Cependant, à la place des textes et des images finales se trouveront des espaces réservés (placeholders): des boîtes pour montrer les images et du texte bidon pour montrer où les paragraphes se trouveront (cependant, si le texte final est déjà rédigé, il est recommandé de l’intégrer à ce stade, pour voir le poids qu’aura celui-ci par rapport au reste des éléments présents). À noter que la disposition de ces éléments doit répondre aux objectifs établis préalablement. Des étapes préparatoires peuvent contribuer au développement des wireframes, telles que des benchmarks de la concurrence ou une analyse des meilleures pratiques dans le domaine.

Le wireframe peut prendre différentes formes :

• Sur papier, tracé au crayon (ou même sur une napkin si nécessaire!).

Le sketch est une façon efficace de faire un wireframe: c’est gratuit et rapide!

• Sur une application faite pour faire des wireframes. Nous en verrons quelques unes à la fin de ce billet.

Et il peut afficher différents niveaux de détails :

• Basse fidélité : tel que décrit ci-dessus, il ne s’agit que de traits généralement en noir et blanc ou teintes de gris, qui démontrent la structure du site.

Les wireframes basse fidélité dans Balsamiq ont intentionnellement des traits arrondis pour démontrer qu’il faut faire abstraction du graphisme

• Haute fidélité : incorpore les éléments graphiques. Il s’agit de concepts développés lorsque les wireframes à basse fidélité sont validés, et constituent en fait des maquettes quasi finales du site. En général, lorsqu’on parle de wireframes, il s’agit plus souvent qu’autrement de celles qui sont à basse fidélité.

Un prototype à haute fidélité dans Proto.io

Idéalement, on doit faire un wireframe de chaque type de pages principales (Accueil, Produits, Contact, etc.) pour pouvoir la tester. Si des contraintes financières ou de temps s’imposent, on pourra uniquement développer celles pour les pages plus critiques du site Web.

À quoi ça sert

Les wireframes permettent de se représenter rapidement les éléments suivants :

• La structure hiérarchique de l’information (grosseur des différents niveaux de titres, contenu principal, etc.).
• La design de la navigation du site ou application (menus, boutons, formulaires, calls-to-action, etc.).
• Le design de l’interface (disposition des éléments visuels, de l’entête, du pied de page, etc.).

Moins dispendieux et longs à produire que des maquettes visuelles, ils permettent de facilement obtenir du feedback d’usagers et d’experts et d’apporter des modifications sans devoir tout refaire. Se rendre compte à la toute fin de la production d’un site Web qu’il y a des problèmes d’utilisabilité s’avère effectivement beaucoup plus complexe à résoudre qu’à l’étape de prototypage. C’est pourquoi il faut tester, tester et tester, ce qui, heureusement, se fait facilement avec les wireframes!

Quelques applications pour faire des wireframes

Il existe une multitude d’applications pour développer des prototypes. Certaines sont spécifiquement développées avec ce but, tandis que d’autres préfèrent la versatilité d’applications de graphisme, ou alors l’accessibilité d’un outil comme Powerpoint. Voici quelques unes de ces applications:

Applications spécifiques pour wireframing: 

• Prototypes web et mobiles: 
  • Axure: un incontournable dans le domaine. Très complet, mais (un peu) plus complexe.
  • Baslsamiq: excellent pour concevoir des maquettes qui ont l’air d’esquisses (communique bien le fait qu’il s’agit d’un prototype!)
  • Invision: Outil versatile misant sur la collaboration en ligne entre différentes équipes.
  • Ainsi que plusieurs autres non testées: Mockflow, Mockingbird, Wireframe Sketcher, JustInMind, Quickfocus SnapUp
• Prototypes mobiles uniquement:
  • Proto.io: très pratique pour concevoir des maquettes haute fidélité pour appareils mobiles, puisqu’il contient une librairie d’éléments de navigation standards pour toutes les plateformes.
  • Pop app et Marvel: transforme vos esquisses ou images en prototypes mobiles fonctionnels.

Autres applications utilisées pour faire des wireframes

• Illustrator, Indesign, Fireworks: Plusieurs applications de la suite Creative d’Adobe permettre de faire des maquettes de façon plus manuelle.
• Powerpoint: L’outil accessible à tous permet d’élaborer des maquettes de bases en disposant différentes formes sur des diapositives. Pas le meilleur outil pour la tâche, mais le plus accessible à tous!