Malgré leurs similitudes, les maquettes et les filières ont une signification unique dans le processus de conception du web.
Les maquettes de sites web sont des plans de basse fidélité, « nus », généralement présentés avec des espaces réservés au contenu final, à remplir à un stade ultérieur du cycle de conception.
Les wireframes ont pour but de représenter ce qui se trouve où dans un dessin, sans que l’équipe de conception ait à passer trop de temps sur les détails. Lisez cet article pour en savoir plus.
Pourquoi devriez-vous utiliser des images filaires ?
Visualiser la présentation générale d’un site web ou d’une application
On dit qu’une image vaut mille mots, d’où la raison pour laquelle nous utilisons le wireframes en premier lieu. La lecture de tous les documents de spécifications d’un futur site web est pénible – lisez cet article sur le monitoring site web – et c’est un miracle que nous l’ayons fait.
Même avec une image filaire très « sommaire », tout le monde aura la chance de voir comment le futur site sera conçu. Oh, et les images filaires rendent les choses plus claires ! Ils peuvent nous aider à organiser et à partager nos idées, et à éviter les malentendus.
Essayez-le vous-même et vous verrez ce qui est possible et ce qui ne l’est pas. Mais n’oubliez pas que les wireframes servent à démontrer la disposition générale et ne se concentrent généralement pas sur la couleur ou la typographie ( what the font : connaissez-vous ?).
Établir la confiance avec l’utilisateur et les parties prenantes
Il est important de rassurer l’utilisateur sur le fait qu’il se trouve à l’endroit où il veut être. Nous devons l’informer qu’il se trouve dans la bonne section de la page (en utilisant des miettes de pain, de la couleur ou d’autres aides visuelles).
Une fois que vous avez une idée de votre site web, vous devez réfléchir au type de personnes qui l’utiliseront potentiellement. Ces profils d’utilisateurs sont appelés « personas ».
Une fois que vous avez fait cela, vous pouvez commencer à réfléchir à votre interface web, en tenant toujours compte des interactions humaines, des personas et du comportement des utilisateurs.
De même, les wireframes sont très utiles pour montrer des choses aux clients car ils peuvent aider à définir les spécifications et sont finalement utilisés pour la validation et l’approbation du client.
Gagner du temps et de l’argent
Avec une image filaire en main, on obtient une bien meilleure image du résultat final. L’utilisation d’un outil professionnel d’encadrement peut nous faire gagner du temps pendant le processus de développement et nous éviter de devoir retravailler.
Une maquette en ligne peut être rapidement partagée et commentée entre les équipes et nous pouvons y apporter des modifications en continu, de sorte que nous pouvons voir ce qui est fait en temps réel.
Le temps, c’est de l’argent, tout le monde le sait. Qu’il s’agisse de conception, de design ou de développement, gagner du temps peut aussi signifier économiser des ressources.
L’une des principales raisons de la création d’une maquette du produit final est de gagner du temps, et c’est pourquoi elle est généralement développée à l’aide de technologies moins coûteuses et plus simples que celles utilisées dans le produit final.
Pourquoi ne pas utiliser le wireframes ?
Malgré leurs avantages, comme l’explique notre vice-président produit, Victor Conesa, dans ce billet de Validately guest :
« Les wireframes ne peuvent pas toujours transmettre des éléments de conception importants. Les boîtes grises et le contenu des textes en lorem ipsum ne peuvent pas communiquer la façon dont les couleurs et les contrastes influencent le contenu, l’impact visuel du design de la marque, le poids visuel des éléments graphiques ou le cheminement visuel créé par les couleurs, les contrastes et les composants ».
Dans certains cas, le client peut ne pas saisir pleinement l’intérêt d’un wireframes, ou simplement ne pas être d’accord avec les principaux objectifs, ce qui n’est pas un bon début !
Dans ces cas, il est important de se mettre d’accord sur une direction claire pour le design et ensuite de commencer à faire des montages spécifiques.
Papier et images filaires numériques
De nombreux concepteurs prennent le temps de créer un cadre sur papier avant même de commencer à réaliser la version numérique du dessin.
En effet, si la création d’une image filaire basse fidélité est peu coûteuse et rapide, elle ne peut pas être moins chère ni plus rapide que le dessin de vos idées sur une feuille de papier – un argument de poids en soi.
« Les prototypes sur papier permettent un retour d’information maximal pour un effort minimal ».
Mais ce n’est pas tout. Certains concepteurs, affirment que le fait de mettre vos idées sur papier vous aidera à identifier les zones problématiques et les problèmes potentiels de la conception bien plus tôt que ne le font les maquettes numériques habituelles, ce qui permettra à toutes les personnes concernées d’économiser un temps et des efforts précieux.
L’un des avantages du dessin sur papier est que chaque membre de l’équipe peut y contribuer. Le fait de réunir tout le monde autour de la table à dessin peut permettre une meilleure communication et une plus grande participation de tous les membres de l’équipe, qui apprécient de se faire entendre.
N’oubliez pas que tout le monde, en particulier les membres de l’équipe qui ne sont pas des concepteurs d’UX, ne connaîtra pas les logiciels de création d’images filaires. Mais tout le monde peut prendre un stylo et faire une suggestion.
Logiquement, la création de vos wireframes sur papier vous donnera un aperçu précieux de la conception dès les premières étapes. Mais les images filaires sur papier ne peuvent pas aller plus loin.
Pensez à des développeurs dans votre équipe. Compte tenu de leurs connaissances et de leurs compétences, ils n’auraient probablement aucun problème à suivre la logique de votre maquette sur papier.
Mais l’un des principaux avantages de la création d’un wireframes ou d’un prototype est que la plupart des outils exporteront ces conceptions en code – une grande victoire pour les développeurs. Il n’est plus nécessaire de se préoccuper de la création du code pour le dessin, mais plutôt de s’appuyer sur une base donnée par le logiciel de wireframes.
À partir d’un certain point, vous devrez transformer votre wireframe en un véritable logiciel qui peut prendre en compte des éléments tels que les interactions et le flux de navigation.
Si vous souhaitez effectuer des tests utilisateurs, par exemple, vous devrez consacrer du temps à la création d’une image numérique filaire, même si elle est de basse fidélité.
Une introduction aux maquettes
Une maquette est un projet de conception visuelle statique de haut niveau d’un dessin ou d’un dispositif, utilisé pour représenter la structure de l’information, visualiser le contenu et démontrer les fonctionnalités de base de manière statique.
Contrairement à l’image filaire, les maquettes fournissent des détails visuels, tels que les couleurs et la typographie. Alors que les wireframes sont des supports de conception, les maquettes sont construites pour donner au spectateur une impression plus réaliste de l’aspect du produit final.
« Bien que la maquette favorise l’objectif de documentation et d’organisation de la vision de l’équipe, elle présente un avantage supplémentaire par rapport à la maquette : avec ses visuels supérieurs, la maquette est plus utile aux parties prenantes et aux investisseurs ».
En fait, la maquette ajoute une richesse visuelle à la base établie par le wireframes.
Pourquoi utiliser des maquettes ?
Organiser les détails du projet
Les maquettes peuvent aider le concepteur à découvrir les éléments visuels qui s’opposent, avant que vous n’arriviez à la conception finale, finale. Les hiérarchies visuelles, qui montrent la différence entre les éléments de conception tels que la police et la couleur, doivent être déterminées lors de la phase de maquette du processus de conception.
Les éléments visuels étant plus raffinés que dans le cas des wireframes, les maquettes permettent aux parties prenantes d’examiner réellement l’aspect visuel du projet.
Trouver les erreurs dès le début
Les maquettes sont flexibles et cela permet de les itérer facilement. Tout comme le travail avec une image filaire, les maquettes permettent des révisions faciles et rapides qui peuvent s’empiler assez rapidement, car elles ne nécessitent pas de code ou de programmation.
Traduire les idées dans le langage des parties prenantes
Pour les clients et les parties prenantes, la présentation d’une maquette numérique peut être la meilleure solution, car le simple fait d’utiliser un design plat peut ne pas suffire en termes de visualisation et de traduction de l’idéation.
Parfois, il est trop difficile pour le client de comprendre le résultat final simplement en regardant un fichier graphique plat, qui est, le plus souvent, complètement hors contexte.
C’est là que la maquette est placée sur le wireframes, offrant un langage que tous peuvent communiquer et comprendre.
Communiquer des idées entre les membres de l’équipe
Non seulement la maquette peut servir de support de discussion entre le concepteur et l’utilisateur ou la partie prenante, mais elle peut également servir de dispositif de communication entre les membres des équipes de conception.
Les maquettes peuvent contribuer à faciliter le travail au-delà des frontières disciplinaires, en rassemblant des équipes qui travaillent sur des objectifs différents.
Mise en œuvre de la conception
Comment se déroule et fonctionne votre conception initiale ? En regardant une maquette, vous devriez avoir une bonne idée de l’aspect du produit final et une idée approximative de la façon dont il pourrait fonctionner (même si la fonctionnalité n’est pas encore en place).
Le point de vue de l’utilisateur
Le papier et les maquettes basse fidélité ont beaucoup de succès auprès des utilisateurs car ils sont peu coûteux. Mais si l’utilisateur se voit présenter une première version d’un système – une maquette numérique de moyenne fidélité – qui a nécessité un travail important, il peut être plus enclin à se concentrer sur la valeur de la conception.
Pourquoi ne pas utiliser de maquettes ?
Les critiques à l’égard des maquettes viennent du fait qu’elles nécessitent beaucoup de temps et de ressources pour créer quelque chose qui devra ensuite être démonté et remonté au cours du développement.
Comme le montrent ces diapositives : « Les maquettes d’écran peuvent soutenir le processus de collecte des exigences lorsqu’elles sont introduites au bon moment, mais si elles sont introduites trop tôt, elles peuvent devenir problématiques ».
Les outils de maquette et de wireframes sont désormais beaucoup plus centrés sur l’utilisateur. Ainsi, ils ne devraient pas être limités à des rôles tels que ceux d’IA (Information Architect) ou de concepteur de UX. Les wireframes appartiennent à tout le monde.
Des concepteurs aux utilisateurs finaux, en passant par les parties prenantes : tout le monde devrait pouvoir les créer, les tester et les commenter. Mais les maquettes d’écran ou de papier de basse fidélité ne peuvent à elles seules capter le flux dans le système.
Que diriez-vous d’un compromis ? Maquettes d’écran haute-fidélité
Le plus grand débat autour de la conception de maquettes est peut-être la nécessité, ou l’absence, d’inclure des interactions. Parfois, vous voulez que votre utilisateur puisse visualiser le lien ou l’interaction entre les éléments.
Par exemple, quelle boîte d’information apparaîtra après avoir cliqué sur un bouton, ou comment la couleur de la boîte change lorsque la souris la survole. Dans ce cas, une maquette lo-fi en wireframes ou en papier ne suffit pas.
La solution idéale est une maquette d’écran haute-fidélité : un modèle qui fonctionne comme s’il s’agissait du vrai site web ou de la vraie application mobile, réagissant et interagissant avec l’utilisateur. En d’autres termes, une maquette qui inclut certaines des interactions les plus cruciales que le produit fini aura.
Une maquette cliquable présente ses propres avantages et inconvénients. En ce qui concerne les avantages, il n’y a pas de mots pour décrire l’intérêt d’avoir une conception que vous pouvez tester avec des utilisateurs réels.
Le fait de disposer d’un objet sur lequel les utilisateurs peuvent naviguer et sur lequel ils peuvent cliquer permet d’obtenir un retour d’information précieux sur tous les aspects de la maquette.
L’un des principaux avantages de tester votre maquette sur des utilisateurs est l’effet d’éclairage sur votre flux de navigation – un aspect complexe de la conception des UX qu’aucun concepteur ne peut se permettre de ne pas tester le plus tôt possible.
Équilibrer l’investissement et le rendement
Les critiques des maquettes cliquables et haute fidélité ont tendance à dire que celles-ci prennent trop de temps et font augmenter les coûts de développement du produit. Ils ont en partie raison – mais seulement en partie.
Logiquement, le temps nécessaire pour créer une maquette haute fidélité sera plus long qu’une maquette basse fidélité. Mais ce n’est pas le temps investi qui ne servira à rien – investissez sur de nouveaux talents avec Royaltiz ! – c’est le temps investi qui permettra de mettre en évidence les défauts de votre maquette avant que la correction de ces défauts ne devienne coûteuse et stressante. Cette conception peut prendre beaucoup de temps, mais ces interactions ne seront pas simplement jetées lorsque vous commencerez le prototypage.
Vous voulez construire une maquette haute fidélité qui inclut les interactions les plus importantes, comme tout ce qui a trait à la navigation – le résultat servira de base à la construction de votre prototype.
Au final, il n’y aura pas de temps perdu et de nombreux pièges seront identifiés et corrigés en conséquence. Des maquettes cliquables pour gagner !
En d’autres termes, investir du temps dans une maquette cliquable vous fera gagner du temps dans les premières étapes de la création de votre prototype, car les plus grandes interactions seront déjà là.
Bien entendu, la création de maquettes cliquables ou d’images filaires haute-fidélité signifie que vous aurez besoin de l’outil d’image filaire pour créer toutes ces interactions et effectuer les tests correspondants. Heureusement, nous connaissons la solution idéale !
Pourquoi utiliser des maquettes d’écran haute-fidélité ?
– Accélérer l’exploration du design conceptuel de bout en bout
– Réduire le risque d’une nouvelle modification des exigences par les clients
– Améliorer la communication et la compréhension entre les différents membres de l’équipe.
– Tester directement à l’aide de votre maquette d’écran hi-fi
Et n’oubliez pas : ne faites jamais de maquette ou de wireframes d’un site web ou d’une application mobile sans penser à l’utilisateur. Posez-leur des questions, travaillez en groupes de discussion, interrogez-les et créez des sondages. Les réactions des utilisateurs doivent toujours être les bienvenues, entendues et prises en compte !
