Les wireframes et les prototypes sont les deux livrables les plus souvent associés à la conception UX. De nombreuses personnes dans le domaine de la conception numérique utilisent les termes "filaire" et "prototype" de manière interchangeable, mais il existe une différence importante entre les deux : ils ont un aspect différent, communiquent des choses différentes et ont des objectifs différents. Pour en savoir plus, 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 UX.
Maquettes
Qu'est-ce qu'un wireframe?
Une structure filaire (également appelée « squelette ») est une représentation statique et de faible fidélité des différentes configurations qui composent un produit. Il s'agit d'une représentation visuelle d'une interface qui n'utilise que des formes simples (les wireframes semblent avoir été conçus avec des fils, d'où le nom). Les wireframes sont utilisés pour communiquer la structure (comment les éléments de la page s'emboîteront), le contenu (ce qui sera affiché sur la page) et la fonctionnalité (comment l'interface fonctionnera).
Fondamentalement, les images filaires sont des histoires sur l'avenir. Ils aident les équipes de conception à créer un sens partagé de l'état actuel, de la vision future et du chemin qu'ils emprunteront pour y arriver. Les wireframes ont une fonction similaire à celle d'un plan d'architecture (plan détaillé d'un futur bâtiment). Si vous consultez un plan d'architecture, vous verrez comment un certain espace sera réparti entre les différentes pièces, mais vous ne verrez pas la maison finie. Assurez-vous de consulter cette collection d'exemples de sites Web et d'applications mobiles.
A quoi ressemble un wireframe?
Les wireframes ne ressemblent en rien au produit final réel – les caractéristiques visuelles d'un wireframe sont très limitées. La plupart des éléments de conception (tels que les images, les vidéos, le texte, etc.) sont omis. Souvent, ces parties omises de l'interface sont représentées par des espaces réservés (les objets associés aux éléments de conception réels, tels que les images, ont tendance à être représentés par des boîtes croisées et du texte Lorem Ipsum). Les lignes, les espaces réservés et une palette de couleurs en niveaux de gris communiquent sur l'architecture de l'information, le contenu et les considérations de conception. Selon les besoins d'un projet, certains espaces réservés peuvent être convertis en graphiques réels ou en texte réel afin que les concepteurs et les développeurs puissent mieux comprendre comment tout cela s'emboîte.
Quel est l'objectif principal du coaching?
Le rôle du coaching est de créer une base sur laquelle les designers peuvent construire et fournir une direction à l'équipe créative. Ils donnent aux équipes créatives la possibilité de planifier correctement avant d'aller de l'avant, réduisant ainsi le risque de reculer parce que quelque chose a été manqué.
Les wireframes permettent également aux concepteurs de tester rapidement leur stratégie de conception globale sans s'enliser dans les détails d'une conception visuelle. Une quantité limitée de 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 créer des wireframes?
Les structures filaires doivent être créées au début du processus de conception avant que l'équipe ne commence à travailler sur les détails visuels. À ce stade, il est beaucoup plus efficace de faire de grands changements. Étant donné que les wireframes sont relativement rapides et peu coûteux à produire, les concepteurs peuvent expérimenter le déplacement de contenu et d'objets, le regroupement d'éléments et l'ajout ou la suppression d'éléments.
Les avantages du wireframe
– C'est un outil de communication. Une image vaut mieux que mille mots. Les wireframes communiquent clairement les décisions de conception aux parties prenantes et aux coéquipiers, et en regardant un wireframe, ils devraient avoir une bonne idée des écrans d'une application ou d'un site Web. Même un site Web filaire ou une application mobile remplie de caractères de remplissage permet aux parties prenantes et aux coéquipiers de voir à quoi ressemble la conception.
– 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 longueur d'onde.
Les limites du fil.
Les wireframes ne sont pas bons pour les tests utilisateurs. Bien qu'ils puissent vous aider à recueillir des commentaires lors de la phase de recherche initiale (sous la forme de quelques idées rapides), le fait qu'ils soient statiques rend très difficile leur utilisation pour évaluer l'expérience utilisateur globale du site Web.
Les wireframes ne vous aideront pas non plus si vous devez décrire des idées de conception complexes telles que des effets animés, des transitions complexes ou des gestes. Bien que quelques wireframes puissent montrer où commence et se termine l'interaction, cela ne décrit pas ce qui se passe entre les deux. Si vous devez décrire des effets dynamiques, il est préférable d'utiliser un prototype interactif haute fidélité, qui rendra ce comportement explicite et supprimera toute conjecture pour les téléspectateurs.
méthodes d'entraînement
– Croquis. Les grilles peuvent être facilement dessinées à 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 visualiser rapidement différentes idées (par exemple, explorer une variété de conceptions pour une vue donnée). Plus vous pouvez mettre d'idées sur papier, plus vite vous progresserez lorsque vous arriverez à l'ordinateur.
Le dessin est un moyen rapide de visualiser une idée (comme la conception d'une nouvelle interface). Crédits image : 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 d'expérience utilisateur. Le principal avantage de l'utilisation d'un logiciel spécial est la possibilité de passer en toute transparence des wireframes aux prototypes sans avoir à passer à un autre outil. Avec des outils comme Adobe XD, les concepteurs peuvent transformer leurs wireframes en prototypes lo-fi en quelques minutes.
des astuces
– Gardez-les simples. La clé du cadrage est la rapidité et la simplicité. Les wireframes doivent être créés rapidement car le but d'un wireframe est de montrer la structure de mise en page d'une page. Les détails viendront plus tard.
– Courtes annotations "exprès". Les matrices sont lues par les membres de l'équipe plus que tout autre document, donc si vous prévoyez de présenter une matrice à l'équipe, incluez toujours des annotations. Les annotations aident à créer un contexte et à transmettre rapidement des idées clés.
– Encourager les commentaires. Partager vos schémas et encourager les commentaires des membres de votre équipe est un moyen sûr de les améliorer.
– Utilisez un kit de câbles. Lancez-vous dans vos wireframes avec Wires, des kits de wireframe gratuits pour Adobe XD.
prototypes
Qu'est-ce qu'un prototype?
Le prototypage est le processus d'exploration d'une idée en créant une expérience interactive. Un prototype est une représentation de moyenne à haute fidélité du produit final, simulant l'interaction de l'interface utilisateur. Le prototypage est la première phase où les designers peuvent interagir avec leur création.
Comment est un prototype?
Contrairement aux wireframes, qui se ressemblent souvent, les prototypes peuvent varier considérablement. Les prototypes sont de toutes formes et tailles, des prototypes papier analogiques 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é au prototype fait référence au niveau de détail et de fonctionnalité intégré au prototype :
– Un prototype lo-fi est une représentation approximative de vos concepts qui aide les concepteurs à les valider au début du processus de conception. Les prototypes basse fidélité sont souvent limités en termes de fonction et d'interaction. Un exemple de prototype lo-fi est un prototype cliquable créé à partir de croquis ou de wireframes.
– Un prototype haute fidélité est un prototype interactif qui simule les fonctionnalités et les détails de conception d'un site Web ou d'une application réels. 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 pour tout produit destiné à être utilisé par des personnes. Les prototypes servent souvent de passerelle vers le produit réel. Le but d'un prototype est de simuler l'interaction entre l'utilisateur et l'interface. Bien que toutes les interactions ne soient pas nécessairement présentes dans un prototype, vous devez présenter les principales interactions qui permettront de comprendre comment le produit final fonctionnera. Cela le rend adapté aux tests avec de vrais utilisateurs, car les prototypes permettent aux gens de découvrir le fonctionnement d'une application ou d'un site Web, le fonctionnement des interactions et de tester la convivialité et la faisabilité des conceptions de produits. Sans prototypes et tests, il sera difficile de prédire comment les utilisateurs réels interagiront avec un produit.
Quand prototyper?
Le moment où une équipe créative a besoin d'un prototype varie en fonction des besoins du projet. En règle générale, l'équipe a besoin d'un prototype lorsqu'elle souhaite associer la conception visuelle et la conception d'interaction, avant que le développement proprement dit ne commence.
Les avantages du prototypage
– C'est bon pour le remue-méninges. Un prototype interactif simple peut vendre une idée mieux qu'une spécification ou une autre forme de description textuelle de la conception. En utilisant des 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 essaie de 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 des commentaires 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 révélateur. Cela permet aux concepteurs de tester le parcours de l'utilisateur et de détecter les problèmes potentiels au début du flux d'interaction.
– Ceci est utile lors de la recherche d'utilisateurs. Un prototype met également en évidence les préférences de l'utilisateur cible. Tester les prototypes tôt peut économiser des tonnes d'argent et de temps qui auraient été consacrés au développement de la mauvaise solution. En recherchant la validation tôt dans le cycle de vie du produit, les concepteurs seront en mesure d'identifier les fonctionnalités qui résonnent le plus avec leurs utilisateurs et d'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 papier. Un humain simule les interactions (agit comme un "ordinateur", changeant de rôle selon les choix de l'utilisateur). Bien que ces prototypes soient rapides et faciles à réaliser, cette méthode nécessite beaucoup d'imagination de la part de l'utilisateur et peut ne pas refléter de nombreux problèmes d'interaction.
– Un logiciel de présentation. En reliant différentes pages entre elles 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 à construire, mais ont généralement une interactivité limitée.
– Logiciel de conception. Un logiciel de conception spécialisé est livré avec presque toutes les fonctionnalités nécessaires pour construire un prototype. La plupart des outils ont 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épart.
– Prototype natif. Le prototypage natif consiste à écrire du code. Cela peut signifier écrire une application Android avec Java, créer une application iOS avec Swift ou écrire HTML/CSS/JavaScript pour une application Web. Le prototypage natif doit être fait en utilisant autant que possible des données réelles, de vrais appareils et de vrais utilisateurs, et ce type de prototypage nécessite de solides compétences techniques. Le prototypage natif est essentiel lorsque votre produit implique l'utilisation de technologies difficiles à créer à l'aide d'un logiciel de conception (par exemple, votre projet est une application mobile qui nécessite de vraies données GPS).
des astuces
– 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 juste 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 de tester autant d'idées différentes que possible. En divergeant, l'équipe peut en savoir plus sur l'espace du problème et trouver toutes les solutions possibles.
– Choisissez la bonne fidélité pour votre projet. Dans son article "Cinq pièges courants lors du prototypage", Jared Spool mentionne que travailler avec une faible fidélité peut être un écueil majeur lors du prototypage. La fidélité doit être choisie en fonction des objectifs du test, de l'intégrité de la conception et des ressources disponibles.
– Prototypage itératif. Une façon courante de prototyper consiste à commencer rapidement avec un prototype basse fidélité, puis à itérer progressivement sur les versions haute fidélité (Apple pratique une technique similaire). Le processus est fortement influencé par les commentaires des utilisateurs, ce qui augmente les chances d'arriver à 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 chronophage. C'est pourquoi il est toujours préférable de créer des prototypes réutilisables lors du développement.
conclusion
Les wireframes et les prototypes diffèrent par leurs fonctionnalités, mais les deux servent d'outils utiles qui permettent aux équipes de créer de meilleurs produits. La clé d'une conception de produit réussie consiste à investir dans le processus de conception et à utiliser le cadrage et le prototypage comme partie intégrante de votre flux de travail. Mais n'oubliez jamais : ne réalisez jamais un wireframe ou un prototype de produit sans penser à l'utilisateur. L'utilisateur doit toujours être au centre de tout design qu'il crée. Cela vous aidera à créer de meilleurs produits que vos utilisateurs vont adorer.
