Qu'est-ce que le Wireframing ? Un guide du débutant

Publié: 2022-08-02

Qu'est-ce que le wireframing ? En termes simples, c'est l'un des aspects les plus essentiels du processus de conception UX (expérience utilisateur). Si vous vous êtes plongé dans le monde complexe de la conception de l'expérience utilisateur, il y a de fortes chances que vous ayez au moins entendu le terme « wireframes » flotter.

Mais que sont exactement les wireframes et pourquoi sont-ils une partie si importante du processus de conception UX ?

Dans ce guide, vous apprendrez exactement ce qu'est un wireframe. Nous commencerons par vous montrer la composition d'un wireframe et vous expliquerons comment les wireframes s'intègrent dans le processus de conception global. Vous apprendrez également quelles fonctionnalités les wireframes doivent inclure.

Après cela, nous vous montrerons les différents types de wireframe et les outils dont vous aurez besoin pour créer le vôtre.

À la fin, vous ne vous demanderez plus : "Qu'est-ce que le wireframing ?" pour pouvoir créer et utiliser facilement vos propres wireframes.

Maintenant, jetons un coup d'œil.

Qu'est-ce qu'un filaire ?

Commençons à la case départ avec la simple question "Qu'est-ce qu'un wireframe ?"

En réalité, ce n'est pas si différent d'un plan que les architectes utilisent. Il s'agit d'un aperçu en deux dimensions d'une application ou d'une page Web qu'un concepteur utilisera pour créer le produit final. L'intention d'un wireframe est de donner au concepteur un aperçu évident d'une page :

  • Disposition
  • Structure
  • Flux d'utilisateurs
  • Comportements attendus
  • Architecture des informations
  • Fonctionnalité

Un wireframe représentera presque toujours le concept initial du projet de conception. En tant que tels, des éléments tels que les graphiques, la couleur et le style sont réduits au strict minimum.

Dans certains cas, un wireframe peut être esquissé à la main sur une feuille de papier. D'autres wireframes sont créés dans le domaine numérique. Cela dépend vraiment des détails nécessaires dans le wireframe spécifique. Cela dépend également de la quantité de détails qui entreront dans la conception finale de la page Web ou de l'application.

En d'autres termes, plus la page Web est détaillée, plus le wireframe devra être détaillé.

La pratique du wireframing est le plus souvent utilisée par les équipes de conception UX. Passer par le processus permettra à toutes les parties impliquées (parties prenantes) de s'entendre sur l'emplacement des informations sur une page avant que le projet ne soit remis aux développeurs pour être construit.

Wireframing un projet avant qu'il ne soit remis aux développeurs évite souvent beaucoup de maux de tête sur la route. En effet, le plan initial du projet (le wireframe) peut (et doit) toujours être le premier point de référence de ce à quoi le résultat final devrait ressembler.

filaire

Quel est le meilleur moment pour le wireframe ?

Dans la plupart des cas, le processus de wireframing se déroulera pendant la phase du cycle de vie du produit appelée phase exploratoire.

La phase exploratoire est le moment où les concepteurs sont :

  • Collaborer sur des idées
  • Identification des besoins liés à l'activité
  • Tester la portée globale du projet

En d'autres termes, le wireframing d'une page Web lui donne sa première itération, qui est utilisée comme point de départ pour la conception globale d'un projet.

Les wireframes sont également précieux car ils peuvent être présentés aux futurs utilisateurs du site afin d'obtenir des retours sur l'efficacité de la conception. Sur la base des commentaires des utilisateurs, les concepteurs du projet construiront ensuite une itération de conception beaucoup plus détaillée, comme une maquette ou un prototype.

À partir de là, le projet global commencera à se dérouler.

Pourquoi les wireframes sont-ils utiles ?

Les wireframes apportent trois objectifs et avantages importants au processus de conception :

  1. Ils sont peu coûteux et faciles à créer.
  2. Ils définissent et aident à clarifier davantage les caractéristiques spécifiques d'un site Web ou d'une page Web.
  3. Ils maintiennent le processus de conception axé sur l'utilisateur final.

Pour décomposer les choses plus en détail, examinons en détail chacun de ces points importants.

1. Ils sont peu coûteux et faciles à créer

Pourquoi les équipes de conception font-elles autant de wireframing au début de leurs projets ? La réponse est simple : ils sont incroyablement faciles à créer et ne coûtent presque rien. En réalité, si vous avez accès à un stylo et à un bloc de papier, vous pourrez esquisser les détails d'un nouveau wireframe sans rien dépenser du tout.

En ce qui concerne les wireframes numériques, la large gamme d'outils disponibles à portée de main signifie que vous pourrez créer votre propre wireframe numérique en quelques minutes seulement.

Plus d'informations sur ces outils plus loin dans ce guide.

L'un des avantages d'un wireframe est son apparence et sa sensation. Vous voyez, le problème avec la présentation d'un produit raffiné aux utilisateurs pour obtenir des commentaires est que les gens sont moins susceptibles d'être honnêtes quant à leurs véritables opinions lorsqu'un projet semble déjà terminé.

Mais lorsque vous utilisez une structure filaire pour exposer le cœur absolu des mises en page, les points faibles et les défauts évidents sont plus facilement identifiés et signalés. Ces problèmes peuvent ensuite être corrigés par l'équipe de conception sans dépenser beaucoup d'argent ou de temps en réaménagement.

Après tout, plus vous arrivez tard dans le processus de conception du produit, plus il est coûteux et difficile d'apporter des modifications qui auraient pu être facilement effectuées à l'étape du wireframing.

2. Ils définissent et aident à clarifier davantage les fonctionnalités spécifiques d'un site Web ou d'une page Web

Lorsqu'un concepteur de sites Web communique des idées à son client, celui-ci n'a peut-être pas toujours une grande compréhension technique. Les concepteurs utilisent souvent des mots comme « appel à l'action » ou « image de héros », et de nombreux clients ne suivent pas le langage.

En filaire des fonctionnalités de page spécifiques, un concepteur peut communiquer plus clairement aux clients comment ces fonctionnalités fonctionneront et le but exact qu'elles serviront.

Les wireframes permettent également aux parties prenantes de comprendre la quantité d'espace qui devra être allouée à chacune des fonctionnalités de la page. Le processus aide à connecter la conception visuelle à l'architecture des informations d'un site et clarifie la fonctionnalité globale de la page.

Lorsque vous verrez toutes les fonctionnalités de la page sur le wireframe, vous comprendrez également mieux comment toutes ces fonctionnalités fonctionneront à l'unisson. Le processus de wireframing pourrait même vous inciter à supprimer quelques fonctionnalités si vous constatez qu'elles ne fonctionnent pas bien avec le reste des éléments de la page.

Cela peut entraîner des désaccords majeurs entre les parties prenantes du projet au fur et à mesure du déroulement du processus de wireframing. Mais il est préférable que ces désaccords se produisent (et soient résolus) maintenant, plutôt que plus tard dans le processus de conception, lorsque le code devra être réécrit.

3. Les wireframes permettent au processus de conception de se concentrer sur l'utilisateur final

Les wireframes sont d'excellents outils de communication. En effet, ils facilitent les précieux commentaires des utilisateurs, stimulent le partage d'idées entre les concepteurs et lancent des conversations importantes entre les parties prenantes.

En s'engageant dans des tests utilisateurs au cours des premières étapes du processus de conception, le wireframing favorise une rétroaction plus honnête des utilisateurs. Il identifie mieux les principaux points faibles qui aideront à développer un concept et un produit final réussis.

Le wireframing est un moyen inestimable pour les concepteurs Web de voir exactement comment les utilisateurs interagiraient avec l'interface proposée. Les informations recueillies montrent au concepteur ce qui semble intuitif pour un utilisateur. Les concepteurs peuvent ensuite créer des résultats finaux faciles à utiliser et confortables, basés sur les commentaires des utilisateurs.

Quels différents types de wireframes pouvez-vous utiliser ?

Il existe trois types de wireframes différents. Le type de filaire est déterminé par la quantité de détails qu'il contient.

1. Structures filaires Lo-Fi

Il s'agit d'une représentation simple et très basique d'une page Web. Il servira presque toujours de point de départ d'un design.

Pour cette raison, les wireframes lo-fi sont généralement assez grossiers. Ils sont créés sans sens de la précision des pixels, de la grille ou de l'échelle.

Le but d'un wireframe lo-fi est d'omettre des détails qui pourraient autrement détourner l'attention de la disposition globale. Il comprendra :

  • Formes de bloc
  • Contenu fictif (texte de remplissage pour les titres et les étiquettes)
  • Images simples

Les wireframes Lo-Fi sont utilisés pour faire avancer les conversations, cartographier le flux des utilisateurs et décider de la disposition de la navigation. En termes simples, une structure filaire lo-fi est la solution idéale lorsque vous avez des clients ou des parties prenantes assis dans une pièce avec vous et que vous souhaitez rédiger rapidement quelque chose tout en étant assis en réunion.

Ils fonctionnent également très bien pour les concepteurs qui envisagent plusieurs concepts différents et qui souhaitent décider de la direction dans laquelle ils doivent aller avec un projet.

2. Structures filaires Mid-Fi

C'est le wireframe le plus couramment utilisé dans le processus de conception.

Un wireframe mid-fi affichera une représentation plus complète de la mise en page. Bien qu'il ne contienne pas d'éléments tels que la typographie ou les images, beaucoup plus de détails sont donnés aux composants spécifiques. Et les fonctionnalités de la page sont plus clairement définies et séparées.

Dans la plupart des cas, un wireframe mid-fi aura des poids de texte variables qui séparent le contenu du corps des en-têtes. Bien que les wireframes mid-fi soient toujours en noir et blanc, un designer utilisera souvent différentes nuances de gris pour mettre en valeur les différents éléments de la conception.

Un wireframe mid-fi est créé avec un outil de wireframing numérique, tel que Balsamiq ou Sketch.

Pour les propriétaires de sites WordPress, la fonctionnalité Wireframe Blocks du plugin Kadence Blocks vous offre le moyen le plus simple de créer des structures filaires. Un peu plus à ce sujet plus tard.

3. Filaires Hi-Fi

Dernier point, mais non le moindre, les wireframes hi-fi. Ceux-ci ont des mises en page spécifiques aux pixels. Un wireframe lo-fi, par exemple, aura probablement des remplissages de texte "lorem ipsum" et des cases grises remplies de X qui indiquent le placement de l'image. Un wireframe hi-fi, cependant, inclura un contenu entièrement écrit et les images réelles qui seront présentées sur la page.

Les détails contenus dans un wireframe hi-fi le rendent idéal pour documenter et explorer des concepts de conception complexes, comme des cartes interactives ou des systèmes de menus. En raison du temps nécessaire pour assembler un wireframe hi-fi, ils doivent être réservés aux dernières étapes de votre cycle de conception.

Qu'est-ce qui est inclus dans un wireframe ?

Le nombre de fonctionnalités incluses dans une structure filaire dépendra en grande partie de sa fidélité basse, moyenne ou haute. Cependant, d'une manière générale, les principaux éléments que chaque wireframe comprendra sont :

  • Champs de recherche
  • Boutons de partage
  • Logos
  • En-têtes
  • Texte d'espace réservé Lorem ipsum

Une structure filaire hi-fi comprendra également des informations de contact, des systèmes de navigation et des pieds de page.

N'oubliez pas que l'imagerie et la typographie n'ont jamais besoin d'être incluses dans un wireframe lo ou mid-fi. Cependant, de nombreux concepteurs expérimenteront le dimensionnement du texte pour aider à représenter la hiérarchie des informations ou pour indiquer où un en-tête est placé.

Traditionnellement, les wireframes sont toujours créés en niveaux de gris. Pour cette raison, un concepteur expérimentera également l'ombrage en niveaux de gris en utilisant des nuances de gris claires pour indiquer les couleurs claires. Les nuances de gris sombres indiqueront des couleurs vives.

Dans une structure filaire hi-fi, certains concepteurs peuvent ajouter de la couleur occasionnellement. Le plus souvent, il se limitera au rouge et au bleu foncé.

L'utilisation de la coloration rouge indiquera un message d'erreur ou un avertissement, tandis que le bleu foncé représentera ce qui sera plus tard un lien actif.

Les wireframes sont toujours en deux dimensions. Pour cette raison, il est important de se rappeler qu'ils ne font pas grand-chose pour présenter les fonctionnalités interactives de la conception proposée, telles que les états de survol, les listes déroulantes ou les accordéons qui utilisent la fonctionnalité afficher-masquer.

Wireframes mobiles vs Wireframes de sites Web

Si vous êtes comme la plupart des gens qui lisent ce guide, vous pensez probablement principalement aux wireframes de bureau et pas beaucoup aux wireframes mobiles. Mais en vérité, les wireframes mobiles nécessiteront leurs propres considérations particulières.

Sachant cela, quelle est exactement la différence entre les wireframes mobiles et les wireframes de sites Web ?

1. Taille filaire

Étant donné qu'il existe une différence de taille évidente entre les sites Web de bureau et les sites/applications mobiles, les mises en page de chacun doivent être prises en considération.

Par exemple, un site Web de bureau a un écran large. Pour cette raison, le wireframe d'un site de bureau comporterait probablement une mise en page qui s'étend sur plusieurs colonnes différentes.

Sur mobile, cependant, une structure filaire sera généralement limitée à une ou deux colonnes. Cela signifie que vous devrez décider si un utilisateur voit un défilement infini ou si vous préférez réduire le nombre d'éléments affichés par page dans le but d'afficher du contenu supplémentaire en dessous.

2. Comportement

Une autre différence fondamentale est le comportement global d'un site de bureau ou d'une application/site mobile. Sur un site de bureau, un utilisateur du site utilise un pavé tactile ou une souris pour naviguer sur la page Web. De plus, un utilisateur peut cliquer sur les fonctionnalités qui l'intéressent afin de révéler plus d'informations.

Sur le bureau, les utilisateurs peuvent même survoler certains éléments pour afficher les menus du site.

Lorsqu'un utilisateur est sur mobile, cependant, les utilisateurs doivent appuyer sur leurs écrans pour ouvrir les fonctionnalités.

Cela signifie que lorsque vous faites du wireframing pour mobile, vous devrez réfléchir de manière plus critique à la manière dont vous souhaitez encourager les utilisateurs à appuyer sur des boutons spécifiques pour atteindre certains objectifs.

3. Interactions

Les utilisateurs interagissent très différemment sur votre site mobile ou votre application par rapport à votre site pour ordinateur.

Alors que la version mobile de votre site extrait des données et du contenu de la même manière qu'un site de bureau, les applications et les sites mobiles offrent souvent aux utilisateurs la possibilité de télécharger du contenu pour une utilisation hors ligne, par exemple.

Lors du wireframing pour mobile, assurez-vous de prendre en compte la façon dont l'interaction varie entre le mobile et le bureau.

Wireframing dans WordPress

Dans le paysage actuel d'une technologie abondante pour apparemment tout ce qui est imaginable, les concepteurs de sites Web disposent de nombreux programmes et outils de wireframing avancés.

Dans l'ensemble, Sketch est probablement l'outil le plus connu pour le wireframing. Il utilise une combinaison de formes de conception vectorielle et de plans de travail qui permettent aux concepteurs Web de créer leurs propres structures filaires sur un canevas basé sur des pixels.

Pour les utilisateurs de WordPress, cependant, le meilleur outil pour le wireframing est la toute nouvelle fonctionnalité Wireframe Blocks du plugin Kadence Blocks.

Les blocs Wireframing de Kadence Blocks sont un nouvel ensemble de blocs WordPress qui vous donneront des sections propres et pré-construites qui vous aideront à guider la construction de votre site. Mieux encore, tout est fait directement à l'intérieur de l'éditeur de blocs natvie WordPress.

Les blocs filaires offrent aux utilisateurs plus de 30 blocs filaires différents à utiliser, notamment :

  • Contenu
  • Tableaux de prix
  • Pieds de page
  • Témoignages
  • Cartes
  • Comptes à rebours
  • Portefeuilles
  • Formes
  • Beaucoup plus

En tant que propriétaire de site WordPress, il n'est pas nécessaire de faire votre wireforming en dehors de l'éditeur de blocs WordPress natif. Wireframe Blocks de Kadence Blocks vous offre le seul outil dont vous avez besoin pour créer des wireframes dans WordPress.

Et il ne pourrait pas être plus facile à utiliser.

Les nouveaux blocs Wireframe sont disponibles dans le plugin gratuit Kadence Blocks. Jetez un coup d'œil et voyez ce qu'il peut faire pour votre processus de wireframing.

Qu'est-ce que le wireframing ? Maintenant tu sais!

Voilà: "Qu'est-ce que le wireframing?" expliqué en 10 minutes ou moins.

Les wireframes peuvent sembler être quelque chose qui pourrait facilement être négligé. Mais ils permettront aux concepteurs d'obtenir des commentaires clairs des clients, des parties prenantes et des utilisateurs concernant la navigation et la mise en page des pages importantes d'un site.

Et lorsque vous êtes armé de l'approbation des clients, des parties prenantes et des utilisateurs à l'étape du wireframing, vous serez en mesure de faire avancer votre projet en toute confiance, sachant que vous créez quelque chose que les utilisateurs et les clients approuveront... et espérons-le aimer.

Téléchargez Kadence Blocks avec une bibliothèque de wireframing de site Web gratuite

Si vous aimez créer du contenu convaincant avec un beau design, Kadence Blocks fournit des outils pour être créatif directement dans l'éditeur WordPress natif. De plus, profitez de tonnes de contenu prédéfini que vous pouvez facilement inclure dans votre site, y compris une bibliothèque filaire de blocs pour vous lancer dans votre prochaine conception Web. Idéal pour l'inspiration et le développement rapide!

Télécharger maintenant