Tour d’horizon des wireframes

wireframe

Ce n’est pas anodin si les wireframes, ou maquettes fonctionnelles en français, sont quasi systématiquement utilisés lors de la phase de pré-production d’un site web. De très nombreux atouts leurs sont trouvés et tout particulièrement l’analyse de l’ergonomie dudit site internet. 

Par ailleurs l’expérience utilisateur d’un site étant de plus en plus déterminante, il ne serai pas surprenant de voir les wireframes prendre encore plus d’ampleur en 2019. 

Comme promis dans le titre nous allons donc au cours de cet article passer en revue tous les éléments des wireframes, au sommaire nous retrouvons donc :

  • Définition exacte d’un wireframe
  • Différence entre wireframing et zoning
  • Le wireframing : une étape vraiment indispensable ?
  • Les wireframes papier crayon
  • Les wireframes informatiques
  • Dynamisation de ses wireframes : le maquettage
  • Conclusion

Définition exacte d’un wireframe

Utilisé dans le milieu du webdesign mais surtout de l’UX (user experience). Un wireframe représente la schématisation d’un site web ou d’une application mobile. Ce qui permet de vulgariser une interface en ne faisant ressortir que les éléments principaux, à savoir :

  • texte
  • image
  • vidéo

Les blocs textes étant souvent représentés par des lignes (ou du lorem ipsum éventuellement), les blocs images par des croix et les encarts vidéos par des boutons play.

Différence entre wireframe et zoning

Ces deux termes possèdent en effet une légère distinction, mais si légère qu’elle est elle porte souvent à confusion. Alors qu’un zoning ne consistera qu’à diviser et mettre en place les différentes sections de l’interface (exemple à l’appui).

Dans un wireframe nous retrouvons des croix pour mettre en évidence les blocs images et des lignes pour symboliser le texte. Le zoning est donc une phase à réaliser, si besoin est, en amont des wireframes.

Le wireframing : une étape vraiment indispensable ?

En dépit des quelques atouts cités un peu plus haut, le wireframing reste une étape qui peut vite devenir fastidieuse si le site ou l’application en question possède de nombreuses pages. Aussi tentant qu’il puisse être de vouloir passer à l’étape de production sans prendre le temps d’élaborer ses wireframes. Il est légitime de se demander quelles en seraient les conséquences ?

Premièrement rappelons l’objectif premier des wireframes; mieux conceptualiser l’interface et l’expérience utilisateur afin d’optimiser ces dernières. Par conséquent si vous opter pour passer à la production sans wireframes établis, il est envisageable qu’une fois votre projet terminé vous vous retrouviez avec de mauvaises surprises. Comme celles qui suivent pour ne citer que quelque exemple :

  • CTA (call to action) pas assez mis en avant
  • Problème de concordance entre les pages
  • Esthétique général peu attrayant

En bref, une mauvaise expérience utilisateur et une ergonomie peu intuitive. Ainsi voyez le temps investi dans la réalisation de wireframes comme une douleur à court terme, contre une tâche bien plus longue et laborieuse que vous auriez dû réaliser en aval de votre réalisation.

Il sera en effet toujours plus rapide de modifier une interface sur un papier ou un logiciel dédié, que depuis plusieurs dizaines voir centaines lignes de code.

Les wireframes papiers

Comme son nom l’indique il s’agit de wireframes réalisés à main levée sur du papier. Car comme nous le verrons juste après il y a effectivement plusieurs moyens de réaliser des wireframes. Ce n’est donc pas ici la concept mais simplement le support qui change. Mais comme nous allons le voir cela à tout de même son importance.

Nous concrétisons bien plus facilement nos idées par le biais d’un crayon que par un support numérique. Et ce fait tout webdesigner ou UX manager devrai le connaître. Par conséquent toute production assisté par ordinateur devrai être précédé d’une esquisse sur papier.

Les wireframes ne faisant donc pas exception à la règle, voici quelques avantages que vous trouverez aux wireframes papiers :

  • Meilleur matérialisation de vos idées
  • Modification rapide
  • Gain de temps

Mais malgré leurs nombreux atouts, il ne faut pas considérer les wireframes papiers comme une finalité en soi, mais plutôt comme un moyen de mieux appréhender l’étape suivante :

Les wireframes numériques

Il ne s’agit plus ici de quelques coups de crayon plus ou moins représentatifs de l’interface finale, mais vraiment d’une fine réalisation qui dessine déjà les contours du futur site web (ou application). Mais pour réaliser un tel rendu, il est souvent très apprécié de pouvoir s’appuyer sur ses wireframes papiers préparés en amont.

De nombreux logiciels permettent d’obtenir des rendus similaires, car dans le fond il ne s’agit que de formes basiques et de nuances de gris pour mettre en évidence les contenus importants. Mais un parmi tous, un se démarque de ses concurrents : Adobe XD.

Lancer récemment par Adobe, cet outil gratuit est dédié à la réalisation de wireframes. À destination donc des UX designer, voici le genre d’avantages qu’on peut trouver dans ce logiciel :

  • Gestion des calques
  • Grille de répétition
  • Alignement très intuitif
  • Rendu très proche de la réalisation finale
  • Prototypage et maquettage de ses interfaces

Comme nous allons le voir par la suite, le plus gros avantage d’une réalisation numérique de ses wireframes est la possibilité de la rendre interactive. Nous obtenons ainsi un aperçu très réaliste de l’objectif finale, ce qui permet d’analyser et corriger facilement les points qui nous semble à revoir.

Dynamisation de ses wireframes : le maquettage

Une fois tous vos wireframes réalisés sur Adobe XD, vous pourrez remplacez les croix par vos images, les lignes par du lorem ipsum et enfin mettre de la couleur dans vos différentes sections. Nous sortons alors des wireframes à proprement parler. Mais il est important d’avoir une idée du débouché de ces derniers afin de savoir pourquoi il est important de les réaliser.

Le rendu est alors bien plus représentatif et réaliste de votre interface final. Cependant ce résultat n’aurai pas pu voir le jour sans les étapes préliminaires.

L’étape suivante est de rendre le contenu interactif afin d’obtenir une copie identique ou presque de la réalisation finale.

Conclusion

Si vous avez dans l’optique de créer un site web, une application ou un logiciel, il est vivement conseillé de prendre le temps de réaliser des wireframes en amont. Car en divisant conception et production vous vous évitez d’avoir à retravailler vos interfaces une fois votre projet réalisé.

Parmi les supports vous aurez deux possibilités. Soit vous vous contentez de vos wireframes papiers. Soit vous allez jusqu’à faire vos wireframes sur un logiciel dédié comme Adobe XD.

La première solution à l’avantage d’être rapide à réaliser, mais vous aurez du mal à conceptualiser le rendu final. Il peut être intéressant de s’arrêter là, mais uniquement si votre projet reste relativement petit et que vous êtes déjà sûr de la futur architecture de vos interfaces.

La deuxième solution sera naturellement plus longue à mettre en place. Mais si vous envisagez de créer une application, un logiciel ou un site avec plusieurs centaines de pages, vous n’aurez pas le choix de passer par des wireframes numériques. De cette manière vous pourrez déboucher sur le maquettage de votre projet, et avoir un aperçu bien plus réaliste de votre futur expérience utilisateur.

Newsletter

recevez nos meilleurs conseils web en début de semaine

[contact-form-7 404 "Not Found"]

Fermer le panneau