L'importance du wireframe ou de la maquette. Quelle valeur ajoutée pour votre site?

Considérer que le design d'interface ou l’UI (user interface) est suffisant pour définir le site web cible peut se révéler être une erreur en fonction du type de projet. C’est souvent là qu’entre en jeu l’Expérience Utilisateur ou UX (user experience) qui va vous permettre d’assurer la pertinence de votre proposition graphique. Réaliser un site web et penser UX passe par une étape de maquettage ou conception d'interface.

 

Les objectifs du wireframing

Le wireframing permet de cartographier les fonctionnalités et la navigation d’un site web. Il s’agit d’un aperçu afin de se projeter visuellement, sans la partie graphique avec ses couleurs et sans le contenu, sur la structure d’ensemble du site. Il convient ainsi de retrouver sur les wireframes les dispositions des menus, des contenus, et des boutons principaux. Cela permet aussi à l’équipe d’avoir une vision globale du résultat final. L’autre vertu consiste à vulgariser certains concepts difficiles à appréhender sans un visuel.

 

Ce travail de wireframing intervient en début de projet et permet d’identifier les éventuelles erreurs de jugement concernant le design.

Le niveau de détail des wireframes est variable. Il peut se situer à un niveau de fidélité faible ou fort par rapport aux futures maquettes. Dans le premier cas, il s’agit de présenter le positionnement des éléments. Dans le second cas, on se rapproche de la maquette finale.

Dans tous les cas, le processus de wireframing vise à s’assurer de la bonne compréhension du besoin du client avant d’initier la démarche de production des maquettes.

 

Les users stories (ou types de parcours utilisateur sur le site) telles que le parcours d’achats, la souscription à la newsletter, la demande d’informations à travers le formulaire de contact sont autant de cas qui peuvent nécessiter un wireframe. Cela est d’autant plus nécessaire lorsque le client final ne connait pas encore sa solution cible.

 

Le pas à pas pour créer un wireframe

Étape #1 – Pourquoi je veux un site ?

Comprendre quel est l’objectif du site est fondamental avant de se lancer. Quand bien même il est évident qu’un site a pour but de rayonner et de bénéficier d’un maximum de trafic, il est nécessaire de définir les users stories afin d’identifier les objectifs recherchés dans le comportement du visiteur.

Mon visiteur doit télécharger des ressources ?

Mon visiteur doit s’inscrire à un événement ?

Mon visiteur doit souscrire à un abonnement ?

Mon utilisateur doit réaliser un parcours de ventes ?

…

Quels que soient les objectifs recherchés à travers le site web, il faut s’assurer qu’ils sont compris et assimilés par l’équipe de l’agence.

 

Étape #2 – Quel est le parcours ?

En complément de la compréhension des besoins par l’équipe, partager le parcours est très utile. Pour cela, vous devez définir quel est le point d’entrée (l’événement déclencheur) afin d’arriver au point final (soit l’un des objectifs du site) et comment faire pour y parvenir. La description de ce parcours peut être assimilée à la modélisation d’un processus. Cela est d’autant plus essentiel lorsque plusieurs acteurs sont sollicités dans le parcours, notamment dans le cadre d’un processus avec un flux de validation et ses règles de gestion associées.

 

Étape #3 – Quelle taille de wireframe ?

Même s’il est envisageable de réaliser les wireframes sur papier, il faudra, tôt ou tard, les convertir au format numérique.

La taille varie en fonction du support matériel : smartphone, tablette et desktop. Nous vous recommandons d’utiliser le critère du pixel pour définir ces dimensions. Voici quelques standards:

 

Pour un écran d’ordinateur

Largeur : 768 pixels 

Longueur : 1366 pixels

 

Pour un écran de smartphone

Largeur : 1080 pixels

Longueur : 1920 pixels

 

Pour un écran de tablette en 10 pouces

Largeur : 1200 pixels

Longueur :  1920 pixels

 

Étape #4 – Connecter les liens et optimiser les parcours ?

Vous devez relier vos écrans entre eux et définir quel est le parcours en définissant quels sont les liens, les boutons, le déroulé du menu ou tout type d’élément nécessaire à la navigation. Au cours des ateliers entre l’équipe et le client, il n’est pas rare de relever des parcours contenant trop de clics. Ce sera l’opportunité de les simplifier. Quant aux parcours risquant d’être dupliqués, charge à l’équipe projet de définir s’il faut les conserver en fonction de la stratégie de navigation retenue.

 

Étape #5 – Challenger votre proposition de wireframe 

En confrontant la proposition de wireframe à différents profils de l’équipe : les designers (s’ils ne sont pas ceux qui ont fait la proposition) les développeurs, et bien sûr le client final, cela vous permettra de vérifier la pertinence de la proposition et surtout la faisabilité technique.

 

Des exemples de wireframes réalisés par l’équipe de Web Design de Eyefiz Digital

L’équipe Eyefiz Digital a pour habitude de réaliser ses wireframes sur Figma. Vous trouverez ci-dessous quelques exemples réalisés pour différents types de support.

Voici les étapes d'un projet du zoning à la maquette :