Les wireframes et les prototypes sont les deux produits livrables qui sont le plus souvent associés à la conception des UX. Beaucoup de personnes dans le domaine de la conception numérique utilisent les termes « wireframe » et « prototype » de manière interchangeable, mais il y a une différence importante entre les deux : ils ont une apparence différente, ils communiquent des choses différentes et ils servent des objectifs différents. Pour plus d’informations, lisez cet article.
Cet article explique les bases : ce que chacun fait, pourquoi ils sont utiles et comment ils s’intègrent dans le processus de conception des UX.
Wireframes
Qu’est-ce qu’un Wireframe ?
Un wireframe (également appelé « squelette ») est une représentation statique, de basse fidélité, des différentes configurations qui forment un produit. C’est une représentation visuelle d’une interface n’utilisant que des formes simples (les wireframes semblent avoir été conçus avec des fils et c’est de là que vient le nom). Les wireframes sont utilisés pour communiquer la structure (comment les éléments de la page seront assemblés), le contenu (ce qui sera affiché sur la page) et la fonctionnalité (comment l’interface fonctionnera).
Au fond, les images fil de fer sont des histoires sur l’avenir. Elles aident les équipes de conception à créer un sens partagé de l’état actuel, de la vision future et du chemin qu’elles prendront pour y parvenir. Les wireframes ont une fonction similaire à celle d’un plan architectural (plan détaillé d’un futur bâtiment). Si vous consultez un plan architectural, vous verrez comment un espace donné sera réparti entre les différentes pièces, mais vous ne verrez pas la maison terminée. N’oubliez pas de consulter cette collection d’exemples de sites web et d’applications mobiles.
À quoi ressemble une image filaire ?
Les images filaires ne ressemblent pas du tout au produit fini réel – les caractéristiques visuelles d’une image filaire sont très limitées. La majorité des éléments de conception (comme les images, les vidéos, le texte, etc.) sont laissés de côté. Souvent, ces parties omises de l’interface sont représentées par des espaces réservés (les objets associés à des éléments de conception réels, comme les images, ont tendance à être représentés par des cases croisées et du texte avec Lorem Ipsum). Les lignes, les espaces réservés et une palette de couleurs en niveaux de gris communiquent des considérations sur l’architecture, le contenu et la mise en page de l’information. En fonction des besoins d’un projet, certains caractères de remplissage peuvent évoluer vers de véritables éléments graphiques ou du texte réel afin que les concepteurs et les développeurs puissent mieux comprendre comment tout s’assemble.
Quel est l’objectif principal de l’encadrement ?
Le rôle de l’encadrement est de créer une base sur laquelle les concepteurs peuvent s’appuyer et de donner une orientation à l’équipe de création. Elles donnent aux équipes créatives une chance de planifier correctement avant d’aller de l’avant, réduisant ainsi le risque de revenir en arrière parce que quelque chose a été manqué.
Les wireframes permettent également aux concepteurs de tester rapidement leur stratégie de conception globale sans s’embourber dans les détails d’une conception visuelle. Un nombre limité d’éléments visuels permet à l’équipe de se concentrer uniquement sur les décisions de conception de base avant de se plonger dans les détails.
Quand faut-il créer des wireframes ?
Les wireframes doivent être créés au début du processus de conception avant que l’équipe ne commence à s’occuper des détails visuels. À ce stade, il est beaucoup plus efficace d’apporter de grands changements. Comme les wireframes sont relativement rapides et peu coûteux à produire, les concepteurs peuvent expérimenter de déplacer le contenu et les objets, de regrouper des éléments et d’en ajouter ou d’en supprimer.
Les avantages du wireframing
– C’est un outil de communication. Une image vaut mille mots. Les images filaires communiquent clairement les décisions de conception aux parties prenantes et aux coéquipiers et, en regardant une image filaire, ils devraient avoir une bonne idée des écrans qu’une application ou un site web aura. Même un site web ou une application mobile filaire remplie de caractères de remplissage permet aux parties prenantes et aux coéquipiers de voir comment le design se présente.
– C’est de la documentation. Les wireframes sont généralement utilisés comme point de référence pour les spécifications fonctionnelles. En tant que produit de conception, les wireframes peuvent être partagés avec toute l’équipe afin que tout le monde soit sur la même page.
Les limites du fil de fer
Les wireframes ne sont pas bons pour les tests des utilisateurs. Bien qu’elles puissent vous aider à recueillir des informations en retour lors de la phase initiale de recherche (sous la forme de quelques aperçus rapides), le fait qu’elles soient statiques rend leur utilisation très difficile pour évaluer l’expérience globale de l’utilisateur.
Les images fil de fer ne vous aideront pas non plus si vous devez décrire des idées de conception complexes comme des effets animés, des transitions complexes ou des gestes. Si une paire d’images filaires peut montrer où l’interaction commence et se termine, elle ne décrit pas ce qui se passe entre les deux. Si vous avez besoin de décrire des effets dynamiques, il est préférable d’utiliser un prototype interactif haute fidélité, qui rendra ce comportement explicite et éliminera toute supposition pour les spectateurs.
Méthodes d’encadrement
– Croquis. Les grillages peuvent être facilement dessinés à la main. Les croquis dessinés à la main sont rapides à créer et à réutiliser. Les croquis sont particulièrement utiles pour les séances de brainstorming lorsque les concepteurs doivent rapidement visualiser différentes idées (par exemple, explorer une variété de mises en page pour une certaine vue). Plus vous pouvez débusquer vos idées sur le papier, plus vous progresserez rapidement lorsque vous passerez à l’ordinateur.
Le croquis est un moyen rapide de visualiser une idée (comme la conception d’une nouvelle interface). Crédits d’images : Nicholas Swanson
– Logiciel de conception graphique. Il est assez facile de créer des images filaires avec des logiciels comme Adobe Photoshop ou Illustrator.
– Logiciel de conception UX. L’avantage majeur de l’utilisation de logiciels spéciaux est la possibilité de passer sans problème des wireframes aux prototypes sans passer à un autre outil. Avec des outils comme Adobe XD, les concepteurs sont capables de transformer leurs images filaires en prototypes basse fidélité en quelques minutes.
Conseils
– Faites en sorte qu’elles soient simples. La clé de l’encadrement est la rapidité et la simplicité. Les wireframes doivent être créés rapidement, car le but d’un wireframe est de montrer la structure du design d’une page. Les détails viendront plus tard.
– De courtes annotations « au but ». Les membres de l’équipe lisent les filières plus que tout autre document, donc si vous prévoyez de présenter une filière à l’équipe, incluez toujours des annotations. Les annotations aident à créer un contexte et à transmettre rapidement les idées clés.
– Encouragez le retour d’information. Partager vos wireframes et encourager les commentaires des membres de votre équipe est un moyen sûr de les améliorer.
– Utilisez un kit de fil de fer. Commencez à travailler sur vos images filaires avec Wires, des kits d’images filaires gratuits pour Adobe XD.
Prototypes
Qu’est-ce qu’un prototype ?
Le prototypage est le processus qui consiste à explorer une idée en construisant une expérience interactive. Un prototype est une représentation de moyenne à haute fidélité du produit final, qui simule l’interaction de l’interface utilisateur. Le prototypage est la première phase au cours de laquelle les designers peuvent réellement interagir avec leur création.
À quoi ressemble un prototype ?
Contrairement aux wireframes, qui se ressemblent souvent, les prototypes peuvent varier considérablement. Les prototypes se présentent sous toutes les formes et toutes les tailles, depuis les prototypes analogiques en papier jusqu’aux produits logiciels réels.
Les prototypes varient en fonction du niveau de fidélité. Il existe deux types de prototypes : les prototypes basse fidélité et les prototypes haute fidélité. La fidélité du prototype fait référence au niveau de détail et de fonctionnalité intégré dans le prototype :
– Un prototype basse fidélité est une représentation approximative de vos concepts qui aide les concepteurs à les valider dès le début du processus de conception. Les prototypes basse fidélité sont généralement limités en termes de fonction et d’interaction. Un exemple de prototype basse fidélité est un prototype cliquable créé à partir de croquis ou d’images filaires.
– Un prototype haute fidélité est un prototype interactif qui simule la fonctionnalité et les détails de conception d’un site web ou d’une application réelle. Le prototypage haute fidélité donne vie à la conception d’un produit et aide les utilisateurs à « sentir » une application ou un site web, et pas seulement à y réagir.
Quel est l’objectif principal d’un prototype ?
Les prototypes sont essentiels à tout produit destiné à être utilisé par des personnes. En général, les prototypes servent de passerelle vers le produit réel. L’objectif d’un prototype est de simuler l’interaction entre l’utilisateur et l’interface. Bien que toutes les interactions ne soient pas forcément présentes dans un prototype, celui-ci doit présenter les principales interactions qui permettront de comprendre clairement comment le produit final fonctionnera. Cela le rend propice aux essais avec des utilisateurs réels, puisque les prototypes permettent aux gens de faire l’expérience du fonctionnement d’une application ou d’un site web, de la façon dont les interactions fonctionnent et de tester la convivialité et la faisabilité des conceptions de produits. Sans prototypes et sans tests, il sera difficile de prévoir comment les utilisateurs réels interagiront avec un produit.
Quand faut-il créer des prototypes ?
Le moment où une équipe créative a besoin d’un prototype varie en fonction des besoins du projet. En général, l’équipe a besoin d’un prototype lorsqu’elle veut lier la conception visuelle et la conception d’interaction, avant que le développement réel ne commence.
Les avantages du prototypage
– C’est bon pour lancer des idées. Un simple prototype interactif peut mieux vendre une idée qu’une spécification ou une autre forme de description textuelle du design. Grâce à l’utilisation de prototypes, il est facile d’obtenir l’adhésion des parties prenantes, car elles peuvent essayer le produit et ressentir l’expérience.
– Cela vous aide à vous familiariser avec le problème. Le prototypage permet à une équipe de mieux comprendre le problème qu’elle cherche à résoudre.
– C’est un outil de communication. Une personne (concepteur, partie prenante ou utilisateur final) peut « jouer » avec les concepts d’un concepteur et fournir un retour d’information précieux.
– C’est un outil de validation. Alors que les wireframes s’occupent de la structure, les prototypes s’occupent de la convivialité. Montrer un prototype aux utilisateurs et leur demander de suivre les flux d’utilisateurs réguliers est incroyablement perspicace. Cela permet aux concepteurs de tester le parcours de l’utilisateur et de trouver très tôt les problèmes potentiels tout au long du flux d’interaction.
– C’est utile pendant la recherche de l’utilisateur. Un prototype met également en évidence les préférences de l’utilisateur cible. Les tests précoces des prototypes peuvent permettre d’économiser des tonnes d’argent et de temps qui auraient été consacrés à la mise au point de la mauvaise solution. En cherchant la validation dès le début du cycle de vie du produit, les concepteurs pourront identifier les caractéristiques qui trouvent le plus d’écho auprès de leurs utilisateurs et orienter les efforts de conception et de développement dans la bonne direction.
Les limites du prototypage
Les prototypes ne peuvent pas être utilisés comme une forme de documentation car ils obligent l’utilisateur à faire un effort pour comprendre le fonctionnement du produit.
Méthodes de prototypage
– Prototypage sur papier. Cette approche non numérique implique des « pages » dessinées sur le papier. Un humain simule les interactions (il agit comme un « ordinateur », changeant le papier en fonction des choix de l’utilisateur). Si ces prototypes sont rapides et faciles à réaliser, cette méthode exige beaucoup d’imagination de la part de l’utilisateur et peut ne pas refléter beaucoup de problèmes d’interaction.
– Logiciel de présentation. En reliant différentes pages et en ajoutant des transitions animées entre elles, vous pouvez créer un prototype très simple dans des logiciels comme PowerPoint et Keynote. Ces prototypes sont rapides et faciles à réaliser mais, généralement, leur interactivité est limitée.
– Logiciels de conception. Les logiciels de conception spécialisés sont dotés de presque toutes les fonctionnalités nécessaires à la construction d’un prototype. La plupart des outils présentent un avantage supplémentaire : la collaboration. Cela signifie que différents membres de l’équipe peuvent commenter le même document – convertir ODT en PDF ? – créant ainsi une bonne boucle de rétroaction dès le début.
– Prototype natif. Le prototypage natif consiste à écrire du code. Cela peut signifier écrire une application Android avec Java, construire une application iOS avec Swift, ou écrire du HTML/CSS/JavaScript pour une application web. Le prototypage natif doit être réalisé en utilisant autant que possible de vraies données, de vrais appareils et de vrais utilisateurs, et ce type de prototypage requiert de solides compétences techniques. Le prototypage natif est essentiel lorsque votre produit implique l’utilisation de technologies difficiles à prototyper à l’aide de logiciels de conception (par exemple, votre projet est une application mobile qui nécessite de vraies données GPS).
Conseils
– Ne vous contentez pas d’une seule idée de conception pour votre prototype. Il est tentant de tomber amoureux de la première idée qui semble être la bonne et de commencer à peaufiner le prototype. Cependant, ce n’est pas la meilleure approche pour le prototypage. Au début de la phase de prototypage, il est important d’essayer autant d’idées différentes que possible. En divergeant, l’équipe peut en apprendre davantage sur l’espace du problème et trouver toutes les solutions possibles.
– Choisissez la bonne fidélité pour votre projet. Dans son article « Five Prevalent Pitfalls when Prototyping », Jared Spool mentionne que travailler dans une mauvaise fidélité peut être un piège majeur lors du prototypage. La fidélité doit être choisie en fonction des objectifs des tests, de l’exhaustivité de la conception et des ressources disponibles.
– Prototypage itératif. Une façon courante de réaliser des prototypes consiste à commencer rapidement avec un prototype de basse fidélité, puis à itéré progressivement en versions de haute fidélité (une technique similaire est pratiquée par Apple). Le processus est fortement influencé par les commentaires des utilisateurs, ce qui augmente la possibilité de parvenir à un produit final beaucoup plus raffiné.
– Essayez de créer des prototypes réutilisables. À quelques exceptions près, le prototypage est un processus de conception coûteux et long. C’est pourquoi il est toujours préférable de créer des prototypes qui peuvent être réutilisés lors du développement.
Conclusion
Les wireframes et les prototypes diffèrent en termes de fonctionnalité, mais tous deux servent d’outils utiles qui permettent aux équipes de créer de meilleurs produits. La clé d’une conception de produit réussie est d’investir dans le processus de conception et d’utiliser le cadrage et le prototypage comme partie intégrante de votre flux de travail. Mais n’oubliez jamais : ne réalisez jamais de fil de fer ou de prototype de produit sans penser à l’utilisateur. L’utilisateur doit toujours être au cœur de toute conception que vous créez. Cela vous aidera à construire de meilleurs produits que vos utilisateurs aimeront.
