Blog

Qu'est-ce que le Wireframe ?

1. Qu'est-ce qu'un Wireframe et qui l'utilise ?

Commençons par la question évidente : qu'est-ce qu'un wireframe ?

Non sans rappeler un plan d'architecture, un wireframe est un squelette bidimensionnel d'une page web ou d'une application. Les wireframes fournissent une vue d'ensemble claire de la structure de la page, de la mise en page, de l'architecture de l'information, du flux d'utilisateurs, de la fonctionnalité et des comportements attendus. Étant donné qu'un wireframe représente généralement le concept initial du produit, le style, la couleur et les graphiques sont réduits au minimum. Les wireframes peuvent être dessinés à la main ou créés numériquement, en fonction du degré de détail requis.

Le wireframe est la pratique la plus couramment utilisée par les concepteurs d'UX. Ce processus permet à toutes les parties prenantes de se mettre d'accord sur l'emplacement des informations avant que les développeurs ne construisent l'interface avec le code.

2. Quand a lieu le Wireframe?

Le processus de wireframe a tendance à se dérouler pendant la phase exploratoire du cycle de vie du produit. Au cours de cette phase, les concepteurs testent la portée du produit, collaborent sur les idées et identifient les exigences commerciales. Le wireframe est généralement la première itération d'une page web, utilisé comme point de départ pour la conception du produit. Forts des précieuses informations recueillies auprès des utilisateurs, les concepteurs peuvent s'appuyer sur la prochaine itération plus détaillée de la conception du produit, comme le prototype ou la maquette.

3. Quel est l'objectif du Wireframe ?

Les wireframes servent trois objectifs principaux :

Ils permettent de garder le concept centré sur l'utilisateur.

Les wireframes sont utilisés efficacement comme dispositifs de communication ; ils facilitent le retour d'information des utilisateurs, suscitent des conversations avec les parties prenantes et génèrent des idées entre les concepteurs. La réalisation de tests par les utilisateurs au début de la phase d'encadrement permet au concepteur d'obtenir un retour d'information honnête et d'identifier les principaux points problématiques qui contribuent à établir et à développer le concept du produit.

Le cadrage est le moyen idéal pour les concepteurs d'évaluer la manière dont l'utilisateur interagirait avec l'interface. En utilisant des dispositifs tels que le Lorem Ipsum, un texte pseudo-latin qui sert d'emplacement pour le futur contenu, les concepteurs peuvent poser aux utilisateurs des questions telles que "que pensez-vous qu'il y aurait à écrire ici ? Ces informations aident le concepteur à comprendre ce qui semble intuitif pour l'utilisateur et à créer des produits confortables et faciles à utiliser.

Les wireframes permettent de clarifier et de définir les caractéristiques d'un site web.

Lorsque vous communiquez vos idées à vos clients, il se peut qu'ils n'aient pas le lexique technique nécessaire pour se tenir au courant de termes comme "image de héros" ou "appel à l'action". Les caractéristiques spécifiques du wireframe communiqueront clairement à vos clients la façon dont elles fonctionnent et à quoi elles serviront. Le cadrage permet à toutes les parties prenantes d'évaluer l'espace nécessaire pour chaque élément, de relier l'architecture de l'information du site à sa conception visuelle et de clarifier la fonctionnalité de la page.

Voir les éléments sur un wireframe vous permettra également de visualiser comment ils fonctionnent tous ensemble, et peut même vous inciter à décider d'en supprimer quelques-uns si vous pensez qu'ils ne fonctionnent pas tout à fait avec le reste des éléments de la page.

Les wireframes sont rapides et peu coûteux à créer.

La meilleure partie sur les wireframes ? Ils sont incroyablement bon marché et faciles à créer. En fait, si vous avez un stylo et du papier à portée de main, vous pouvez rapidement esquisser un cadre métallique sans dépenser un centime. L'abondance d'outils disponibles permet également de construire une image filaire numérique en quelques minutes. 

Souvent, lorsqu'un produit semble trop soigné, l'utilisateur est moins enclin à être honnête sur ses premières impressions. Mais en exposant le cœur même de la mise en page, les défauts et les points douloureux peuvent être facilement identifiés et rectifiés sans dépense importante de temps ou d'argent. Plus le processus de conception du produit est tardif, plus il est difficile d'y apporter des modifications !

Illustration wireframe

4. Quels sont les différents types de Wireframe ?

Il existe trois principaux types : les wireframe basse fidélité, les wireframe moyenne fidélité et les wireframe haute fidélité. Le facteur de distinction le plus important entre ces wireframe est la quantité de détails qu'ils contiennent.

Examinons-les de plus près ! 

Les Wireframe de faible-fidélité

Les wireframes de faible fidélité sont des représentations visuelles de base de la page web et servent généralement de point de départ à la conception. Les wireframes de faible fidélité omettent tout détail qui pourrait potentiellement être une distraction et ne comprennent que des images simplistes, des formes de blocs et un contenu simulé, comme le texte de remplissage des étiquettes et des titres.

Ils sont utiles pour lancer des conversations, décider de la disposition de la navigation et cartographier le flux d'utilisateurs. En bref, les wireframes de faible fidélité sont idéaux si vous avez des intervenants ou des clients dans la salle et que vous voulez faire un croquis au stylo en milieu de réunion. Ils sont également très utiles pour les concepteurs qui ont plusieurs concepts de produits et qui veulent décider rapidement de la direction à prendre.

Les Wireframes de moyenne-fidélité 

Parmi les trois wireframes les plus utilisés, les wireframe de moyenne fidélité offrent une représentation plus précise de la mise en page. Bien qu'ils évitent encore les distractions telles que les images ou la typographie, plus de détails sont attribués à des composants spécifiques, et les caractéristiques sont clairement différenciées les unes des autres. Des poids de texte variables peuvent également être utilisés pour séparer les titres et le contenu du corps.

Bien que toujours en noir et blanc, les concepteurs peuvent utiliser différentes nuances de gris pour communiquer la proéminence visuelle des éléments individuels. Bien qu'ils soient encore pertinents dans les premières étapes d'un produit, les wireframes de moyenne fidélité sont généralement créés à l'aide d'un outil de wireframing numérique, tel que Sketch ou Balsamiq.

Les Wireframe de haute-fidélité

Enfin, les wireframes de haute-fidélité présentent des dispositions spécifiques aux pixels. Alors qu'un wireframe de faible fidélité peut comporter des remplissages de texte pseudo-latin et des cases grises remplies d'un "X" pour indiquer une image, les wireframes de haute fidélité peuvent comporter des images réelles et un contenu écrit pertinent. Ces détails supplémentaires font d’eux un outil idéal pour explorer et documenter des concepts complexes tels que les systèmes de menus ou les cartes interactives.

Les wireframes de haute fidélité doivent être sauvegardés pour les dernières étapes du cycle de conception du produit.

5. Qu'est-ce qui est inclus dans un Wireframe ?

Comme nous l'avons déjà mentionné, le nombre de fonctions incluses dans un wireframe  dépend en grande partie du type de fidélité (faible, moyenne ou haute). 

Toutefois, les éléments que l'on trouve généralement dans les wireframes sont les logos, les champs de recherche, les en-têtes, les boutons de partage et le texte pseudo-latin (Lorem Ipsum). Les wireframes haute fidélité peuvent également inclure des systèmes de navigation, des informations de contact et des pieds de page. La typographie et l'imagerie ne doivent pas faire partie d'un wireframe de faible ou moyenne fidélité, mais les concepteurs jouent souvent avec la taille du texte pour représenter la hiérarchie de l'information ou indiquer un en-tête.

Les wireframes sont traditionnellement créés en niveaux de gris, de sorte que les concepteurs jouent souvent avec les ombres, en utilisant des tons de gris plus clairs pour représenter les couleurs claires, et des tons plus sombres pour représenter les couleurs plus audacieuses.

Dans les wireframes haute fidélité, les concepteurs peuvent ajouter une couleur occasionnelle, comme le rouge pour indiquer un message d'avertissement ou d'erreur, ou le bleu foncé pour représenter un lien actif. Comme les wireframes sont bidimensionnels, il est important de garder à l'esprit qu'ils ne sont pas adaptés à l'affichage des fonctions interactives de l'interface, comme les listes déroulantes, les états de survol ou les accordéons qui mettent en œuvre la fonctionnalité "montrer-cacher".

wireframe

6. Les sites web Wireframes et les sites mobiles Wireframes

Lorsque nous pensons aux wireframes, nous pensons souvent aux wireframes des sites web. Mais les wireframes mobiles nécessitent des considérations particulières. Quelles sont donc les principales différences entre les deux ?

Taille

En raison des différences de taille entre les applications mobiles et les sites web de bureau, les mises en page doivent être étudiées très attentivement. En raison de la largeur de l'écran d'un site web de bureau, par exemple, votre site web peut présenter une mise en page qui s'étend sur plusieurs colonnes. Sur une application mobile, le nombre de colonnes est généralement limité à une ou deux colonnes maximum. Vous devrez décider si elles voient un défilement infini, ou si vous voulez diminuer le nombre d'éléments par page afin d'afficher d'autres contenus en dessous.

Comportement

La deuxième différence essentielle est le comportement de l'application mobile ou du site web. Sur un site web, l'utilisateur utilisera une souris ou un trackpad pour naviguer sur la page. L'utilisateur peut également cliquer sur certaines fonctionnalités pour révéler des informations supplémentaires, ou même survoler certaines interactions pour révéler des menus.

Sur une application mobile, en revanche, l'utilisateur devra toucher l'écran pour ouvrir une fonction. Dans le cas des applications mobiles, cela signifie qu'il faut réfléchir plus attentivement à la manière dont vous allez encourager vos utilisateurs à appuyer sur un bouton spécifique pour atteindre un objectif précis.

Interaction

La façon dont les utilisateurs interagissent avec les applications mobiles diffère considérablement de celle dont ils interagissent sur un ordinateur de bureau. L'application peut extraire du contenu et des données de l'internet de la même manière qu'un site web, mais de nombreuses applications offrent également à l'utilisateur la possibilité de télécharger du contenu pour une utilisation hors ligne. Ces "modes hors ligne" spécifiques aux applications mobiles doivent être reflétés dans votre ordinateur portable.

7. Quels sont les outils utilisés pour créer des Wireframes ?

Dans le paysage technologique actuel, les concepteurs ont à leur disposition une myriade d'outils et de programmes de pointe pour la création de wireframes. Les composants intégrés de l'interface utilisateur, tels que les éléments de formulaire, l'état des boutons et la navigation, permettent aux concepteurs de tirer parti de décisions de conception préétablies et de créer des wireframes en une fraction du temps. 

L'un des outils de wireframe les plus connus sur la scène est Sketch, qui utilise une combinaison de tableaux et de formes de conception vectorielle pour permettre aux concepteurs de créer facilement des wireframes sur une toile basée sur des pixels. Sketch est également doté d'une fonction pratique de symboles, ce qui signifie que vous pourrez réutiliser les éléments de l'interface utilisateur une fois qu'ils auront été créés.

Vous avez besoin de quelque chose de plus professionnel qu'un cadre métallique en papier, mais vous ne recherchez pas la perfection au niveau des pixels ? Optez pour le tout aussi populaire Balsamiq, un outil qui permet aux concepteurs de se concentrer sur la mise en page, la conception d'interactions intuitives et l'architecture des informations de base plutôt que sur la qualité esthétique.

8. Conclusion 

Voilà, nous avons tout ce qu'il faut savoir (et même plus) sur les wireframes. Ils peuvent sembler assez élémentaires pour être négligés, mais les wireframes vous permettront d'obtenir l'approbation essentielle des utilisateurs, des clients et des parties prenantes en ce qui concerne la mise en page et la navigation des pages clés du produit. Forts de cette approbation, vous pouvez aller de l'avant avec la certitude que vous concevez quelque chose que vos clients et utilisateurs vont adorer. Le bonus ? Les wireframes permettent d'économiser beaucoup de temps et d'argent à long terme !