L'art du wireframing : Un guide pour débuter

Le wireframing, l'une des étapes initiales dans la conception d'un projet logiciel, est une phase capitale pour assurer le bon succès d'un projet logiciel ou web.

Il s'agit de l'art de convertir une idée en un schéma visuel qui peut être aisément partagé avec d'autres personnes. Plus concrètement, les wireframes (également connus sous les nom de maquettes filaires, fil-de-fer, croquis ou esquisses) servent de représentations préliminaires de l'apparence possible d'un projet logiciel.

Particulièrement utile en phase de démarrage d'un projet logiciel, cette pratique offre une méthode privilégiée pour définir efficacement le design fonctionnel d'une interface utilisateur.

Les avantages du wireframing

À l'inverse des maquettes à reproduction parfaitement réaliste, les wireframes encouragent la simplicité. Elles font abstraction de l'image de marque, du design graphique et d'autres détails non fonctionnels. On se concentre sur l'essentiel, le fonctionnel, sans se soucier de l'esthétisme. Cette façon de faire a deux principaux avantages :

L'exercice est accessible à tous, incluant les personnes non-designer ou non-techniques.

L'exercice encourage la rapidité, ce qui favorise les itérations rapides.

Objectifs du wireframing

En résumé, les principaux objectifs d'un wireframe sont les suivants :

Faciliter la communication des concepts via des supports visuels.

Simplifier la décomposition d'un système en divers écrans et leurs interconnexions.

Encourager la réflexion sur les fonctionnalités adaptées à des écrans particuliers.

Représenter les fonctionnalités de manière à éviter les distractions liées au design et aux détails superflus.

L'essence de l'art du wireframing réside dans la maîtrise de son approche. Bien qu'il n'y ait pas de directives immuables pour le wireframing, notre expérience dans la réalisation de wireframes pour des projets logiciels chez Witify nous a permis d'identifier une série de recommandations basées sur nos meilleures pratiques.

Wireframes basse-fidélité et haute-fidélité

Les wireframes basse-fidélité (lo-fi)

Les wireframes à basse fidélité constituent une méthode rapide et efficace pour esquisser visuellement une interface utilisateur. Comme le suggère leur appellation, ces ébauches ne requièrent pas une grande précision dans les détails. Ils sont souvent préconisés pour les novices en design web, visant à privilégier la simplicité. Leur création peut s'effectuer traditionnellement avec papier et crayon ou via des applications de wireframing en ligne.

Voici les principales caractéristiques des maquettes filaires à basse fidélité :

Un croquis illustrant l'idée de base.

La capacité à partager des concepts concrets de manière rapide.

Une invitation à discuter du potentiel du projet, en gardant à l'esprit que ce n'est pas encore le produit fini.

Une grande adaptabilité des composants (par exemple, choisir entre un bouton et un lien).

Un niveau de détail réduit ; les textes et images sont souvent représentés par des placeholders, c'est-à-dire des espaces vacants réservés (par exemple, simples lignes ou gribouillis).

L'emploi de textes fictifs comme le Lorem Ipsum pour les placeholders, soulignant que l'objectif est de conceptualiser plutôt que de finaliser le contenu.

La documentation visuelle des idées - à ce stade, il n'y a pas d'erreur possible.

Wireframes à haute fidélité (hi-fi)

Les wireframes à haute fidélité offrent une précision accrue et s'alignent plus étroitement sur le design final envisagé.

Ces wireframes sont typiquement l'œuvre de designers UI/UX chevronnés ou de développeurs front-end compétents. Ils succèdent généralement aux ébauches à basse fidélité, en enrichissant ces dernières avec davantage de détails et d'éléments spécifiques.

Attributs caractéristiques des maquettes filaires à :

Bien qu'ils ne constituent pas le produit fini, ils en fournissent une représentation très proche.

Ils offrent une vision anticipée du rendu possible du produit fini.

Leur interactivité est souvent marquée (par exemple, navigation possible entre les écrans).

Ils intègrent du texte réel, des composants authentiques et des images/photos réalistes (ou quasi).

Ils requièrent moins d'efforts d'interprétation pour être compris (ce qui présente des avantages et des inconvénients).

Selon les besoins spécifiques de votre projet, opter pour des wireframes à haute fidélité peut s'avérer judicieux. Par exemple, pour un client ayant des attentes visuelles précises et ayant déjà partagé ses préférences esthétiques, il peut être pertinent de privilégier directement cette approche plus détaillée.

Toutefois, il est important de se rappeler que l'objectif principal demeure la mise en avant de la fonctionnalité. Dans bien des cas, des wireframes plus sommaires peuvent efficacement remplir cette mission, avec une économie de temps considérable et moins de prérequis décisionnels.

Guide de création des wireframes

Étape 1 : Définir les écrans et fonctionnalités essentiels

Comme lorsqu'on esquisse les plans d'une maison, en identifiant d'abord ses différentes pièces, la première démarche dans la création de wireframes est de réfléchir aux divers écrans nécessaires pour votre application ou logiciel.

Il est parfois recommandé de simplement prendre un crayon et de commencer à esquisser directement (et pour ceux à l'aise avec cette approche, cette étape peut être omise). Néanmoins, élaborer un plan préliminaire peut s'avérer bénéfique.

Prenons l'exemple de la conception d'un wireframe pour un projet logiciel de base, tel qu'un système des soumissions et des commandes. Nous pourrions identifier une liste initiale d'écrans et fonctionnalités comme suit:

Ne vous préoccupez pas si l'emplacement exact des éléments vous échappe pour le moment. Par exemple, faut-il intégrer la fonctionnalité "Visualiser les transactions" au sein du "Compte client" ou bien dans la section "Voir une commande" ? L'essentiel est de consigner tous les concepts qui vous traversent l'esprit, ainsi que vos réflexions sur leur organisation potentielle, que ce soit sur papier ou numériquement.
 

Étape 2 : Choisir une mise en page (« layout »)

Lorsque vous travaillez sur le wireframing, que ce soit pour un logiciel sur mesure, une application web ou une application mobile, il est judicieux de débuter avec une structure de base ou un canevas commun pour l'ensemble des écrans.

Dans le cas d'un logiciel sur mesure infonuagique, choisir la disposition (ou «layout» en anglais) implique de déterminer l'emplacement de la barre de navigation principale (soit en haut, soit sur le côté gauche, par exemple). Pour une application mobile, cela peut signifier opter pour une barre d'onglets en bas pour naviguer ou un menu déroulant sur le côté gauche.

En explorant d'autres logiciels et applications, vous pouvez trouver l'inspiration pour la disposition qui répond à vos besoins. Il existe quelques structures typiques, comme celles évoquées précédemment.

Tout comme les étapes précédentes, rien n'est définitif et le wireframing se veut un processus créatif et visuel. Il est toujours possible de modifier votre approche.

Astuce : Bien qu'il soit possible de revoir vos choix, nous avons remarqué qu'il est bénéfique de ne pas trop se perdre dans les détails au départ. Essayez de finaliser une ébauche de wireframe avant de considérer des réajustements. Rappelez-vous, l'important est la fonctionnalité, pas uniquement l'esthétique.

Vous trouverez ci-dessous quelques exemples de mises en page de différentes interfaces. 

Étape 3 : Écran par écran (le plus important d'abord)

Bien qu'il soit intuitif de débuter avec l'interface d'accueil en tant que page principale, celle-ci n'est pas toujours la plus représentative du reste de votre logiciel. Interrogez vous sur l'interface absolument nécessaire au fonctionnement de l'application ou du logiciel. Il est recommandé de commencer par cette interface et de s'attaquer à la 2e interface la plus importante et ainsi de suite - avec une approche itérative.

Lorsque vous travaillez sur papier pour votre wireframing, utilisez une page par écran/interface, n'hésitez pas à agrandir vos dessins autant que nécessaire. Il n'est pas obligatoire de réduire vos schémas à la taille réelle de l'écran d'un appareil mobile.

Voici quelques astuces pour votre ébauche :

Commencez avec le tracé du conteneur (représentant l'espace de l'écran de navigation ou mobile).

Laissez une marge autour de l'extérieur (pour les annotations).

Limitez-vous à l'utilisation d'une seule couleur pour éviter de complexifier inutilement le wireframe.

Représentez les éléments visuels tels que les paragraphes de texte par de simples lignes ou des gribouillis.

Vous pouvez ajouter du texte réel si vous le souhaitez, mais ne passez pas trop de temps à y penser.

Représentez les images par de simples boîtes contenant des croix.

Laissez beaucoup d'espace blanc autour des éléments.

Étape 4 : Annoter

Une fois les pages de base terminées, il y a généralement des interactions qui ne peuvent pas être représentées visuellement. Les annotations sont utiles pour communiquer les différentes fonctions des wireframes.

C'est pourquoi il est bon de laisser une marge autour de votre wireframe, afin de pouvoir facilement dessiner des flèches et annoter toute caractéristique supplémentaire dont vous estimez devoir communiquer la fonction.

Voici quelques exemples d'annotations :

"[Ce lien] renvoie à la page de profil de l'utilisateur"

"Ce formulaire ne s'affiche que si le gestionnaire est attitré au projet"

"Ce bouton envoie un courriel automatisé avec le PDF en pièce jointe".

Étape 5 : Itérer

Comme pour l'écriture, il est souvent plus facile de réaliser un wireframing en rédigeant une première ébauche, puis en le raffinant à coup de plusieurs itérations par la suite.

Au lieu de passer une heure à choisir minutieusement l'emplacement d'un bouton, dessinez-le quelque part et sachez que vous pourrez toujours y revenir.
 

Outils de wireframing recommandés

Crayon et papier

Tout le monde a accès à un crayon et à du papier, c'est facile et c'est flexible. Le crayon est préférable au stylo car vous pouvez l'effacer, sinon vous risquez d'utiliser beaucoup de papier.

Figma

Il existe un grand nombre d'outils en ligne, mais nous recommandons Figma car il est gratuit est très facile à prendre en main. 
Nous vous recommandons de rester simple au début. Cependant, si vous vous accélérer vos esquisses, nous conseillons cette librairie de la Communauté Figma : https://www.figma.com/file/GBC... Avec ses 50+ composants et ses éléments réutilisables, c'est un bon point de départ pour itérer des wireframes de qualité rapidement.