🎁 Formez-vous en continu à l'UX Design et au CRO (Optimisation des conversions)
Formation CRO gratuite
Boostez vos conversions avec le process CRO ultime
.png)
Florent Kiecken
17/7/2020
Dernière MAJ :
9/2/2024
Le but ici est que vous compreniez l'importance des wireframes et des prototypes dans la création et l'optimisation de site.
Si vous voulez en savoir plus sur l'optimisation des conversions, vous pouvez commencer à vous former grâce à nos 5 cours vidéos sur le sujet.
Créer une maquette pour son site web permet de concevoir et de visualiser la future interface concernant le site en question. Cette maquette peut être plus ou moins fidèle à l'interface voulue pour ensuite être soumise à des tests utilisateur.
Une maquette peut être réalisée par un designer en collaboration avec un développeur ou par un UX Designer en charge de faire tester une future interface avant son développement.
Néanmoins, lorsque l’on parle de maquette, on parle dans la majorité des situations de maquette ‘’jetable’’ non-officielle. Lorsque l’on veut parler d’une maquette finie et basée sur le produit final, on parle de prototype. Nous y reviendrons plus tard. Le maquettage fait donc appel à des connaissances en ergonomie et en design, mais le prototypage ajoute lui des connaissances en développement et en interactivité.
Les wireframes sont des plans, des brouillons qui établissent la mise en page, le contenu et la fonctionnalité d’une interface. Ils ne traitent donc pas du design à proprement parler, on ne retrouve pas de couleurs, d’éléments graphiques, de typographies. Les wireframes sont des guides visuels concernant les différents éléments d’une interface, d’une page web ou d’une application.
Ces wireframes peuvent être des dessins simples, grossiers et ne représentent pas l’interface voulue dans les détails. L'objectif ici est juste de se faire une idée de l’allure globale et de l’emplacement des composants d’une interface.
Sachant qu’il n’est pas question ici de détail, d’UI précise ou de réel design, les outils pour créer des wireframes sont nombreux. Vous pouvez simplement utiliser un carnet et un crayon. Vous avez également la possibilité d’utiliser des logiciels comme Adobe XD, Sketch, Figma et un tas d’autres accès en ligne.
Le wireframe doit toujours être de faible qualité. Rien ne sert de consacrer du temps sur des détails. Le wireframe est au design ce que le brouillon est au dessin. L'objectif ici est juste de dessiner des idées, des emplacements, une vue globale de ce que vous avez en tête. Vous verrez que par la suite, vous pourrez concrétiser vos idées grâce aux prototypes, maquettes, mockups, etc.
Aussi, pensez dès lors que vous créez des wireframes d’utiliser un maximum de vrais contenus. Limitez le plus possible les ‘’lorem ipsum’’ qui en général rentrent parfaitement dans votre plan, ce qui n’est surement pas le cas du vrai contenu texte.
Enfin, ne vous pressez pas à vite finaliser vos plans concernant les wireframes. N’oubliez pas que ces wireframes sont là pour tester beaucoup d’idées, de mises en pages, d’emplacements, de fonctionnalités. C’est l’étape où il est le plus facile de modifier des choses alors profitez-en. Lors des étapes de prototypage et de développement, le coût pour modifier et tester des éléments sera plus élevé.
Les wireframes sont uniquement là pour mettre à plat plusieurs idées que vous avez afin d’avoir une vision claire de ce qu’il est possible de mettre en place pour votre interface et de partager ça avec votre équipe.
Un prototype d’une interface est une représentation et un modèle de conception basse ou haute fidélité concernant un site web ou une application. Contrairement au wireframe, l'objectif d’un prototype est de représenter l’interface avec son aspect graphique, son design, sa mise en page précise, ses interactions principales, etc. L’idée principale d’un prototype est de représenter une interface la plus proche possible du rendu final.
En UX/UI et en optimisation du taux de conversion, le prototype permet de tester une interface sans pour autant investir dans son développement. Il est possible donc d’effectuer des tests utilisateur avec une interface qui n’a pas encore été codée. Si le prototype est correct et que les interactions sont semblables au rendu voulu, le prototype sera vu comme l'interface réelle et les tests utilisateur seront concluants.
Le prototype s’appuie sur le wireframe pour proposer une interface qui ressemble le plus possible aux résultats voulus. Le prototype est donc indispensable pour obtenir un rendu visuel de l’interface sans avoir besoin de coder ou d’investir dans le développement.
Les prototypes sont plus coûteux que les wireframes à produire mais ils sont très utiles pour réaliser des tests utilisateurs et avoir des retours rapidement sur le produit. Ici impossible de réaliser des prototypes avec des outils simples ou avec un crayon. Il va falloir utiliser des outils plus techniques comme Sketch ou Figma par exemple.
L’un des avantages du prototype est qu’il est possible de le faire tester. Est-ce que cela veut dire que les pages doivent être connectées entre elles ? que toutes les fonctionnalités doivent fonctionner sans lignes de code HTML, CSS ou JS ? que toutes les interactions doivent être disponibles ? Pas forcément.
Il est tout à fait possible de ‘’simuler’’ l'interaction pendant ces tests. L’interaction et les liens entre les pages sont des aspects qui concernent surtout la partie développement web en matière de technicité. La conception d’un prototype interactif prend plus de temps, il est donc possible de sauter cette étape pour ne tester que les pages une par une concernant l’allure des pages et la navigation ‘’on page’’.
Concernant les prototypes interactifs, le design doit fournir une réponse pour chaque action et chaque interaction. Si l'utilisateur du prototype clique sur un bouton, cela doit effectuer automatiquement l’action. S’il clique sur un lien dans le menu, cela doit l’emmener sur la page en question. S’il clique sur une flèche sur un carrousel, l’image doit changer. Etc.
Le prototype interactif, même avec les meilleurs outils, peut mettre du temps à produire. Attention donc à bien définir son utilisation et à évaluer si oui on non il est judicieux d'ajouter l’interaction au prototype.
Avec le prototype statique, l'interaction n’existe pas. Du moins, c’est le designer qui gère en temps réel l’interaction, les actions et les changements de page. Lors d’un test utilisateur donc, les réponses aux actions des utilisateurs sont données en temps réel par le concepteur qui connaît l’interface.
Vous avez la possibilité de créer un prototype plus ou moins fidèle au rendu voulu. Cela dépend de vos attentes, de ce que vous voulez tester et de la précision attendue.
La fidélité d’un prototype concerne trois grands aspects de l’interface :
Ce sont ces trois grands aspects qui vont définir si votre prototype est haute ou basse fidélité.
Le prototype haut fidélité remplit tous les critères de l’interface finale. L’interaction est automatique, comme sur un vrai site web. Le visuel est à jour, pas de lorem ipsum, le contenu est “officiel”.
Même si le prototype haute fidélité peut prendre du temps à mettre en place, cela peut en valoir le coût dans certains projets.
Les avantages du prototype haute fidélité sont nombreux :
Les prototypes basse fidélité sont des représentations visuelles d'une interface avec le contenu, la hiérarchisation, le design, etc. sans aller dans la précision. Sur ce genre de prototype, on va souvent retrouver des lorem ipsums, des images génériques, peu ou pas du tout d'interaction, etc.
Le prototype basse fidélité n’est pas aussi représentatif qu’un haute fidélité mais il a le mérite d’avoir tout de même quelques avantages :
Cela prend moins de temps qu’un prototype interactif. Ici, il est possible de se concentrer sur le design et sur la conception plutôt que sur les actions. Il y a bien sûr l’organisation des différentes pages à afficher lorsqu’un utilisateur effectue une action mais cela prend moins de temps que de créer un prototype entièrement cliquable.
Il est plus simple de modifier un prototype basse fidélité. Si une modification est à faire, il est plus simple pour un designer de modifier un prototype basse fidélité avec un design, un contenu et une interface pas totalement finie plutôt que sur une interface quasiment parfaite.
Il est plus simple d’émettre des jugements instinctifs sur un prototype créé rapidement. Sur un prototype haute fidélité qui a mis du temps à être créé, les jugements et les remarques ne vont pas se faire naturellement. Une pression va se créer et les utilisateurs auront du mal à dire sincèrement ce qu’il ne va pas à leur sens.
Le processus de maquettage peut varier en fonction du projet, des ressources, du temps de l'entreprise en question.
Néanmoins, en général, on retrouve quasiment toujours les mêmes étapes :
La première étape qui est le wireframing consiste à utiliser les éléments mis à votre disposition pour tenter d'élaborer et d'organiser des idées concernant une mise en page.
Aucune interaction n'est attendue sur un wireframe. C’est une maquette entièrement statique où vous allez pouvoir tester la compréhension, l'agencement des composants, organiser les sections, etc.
On parle ici de zoning. Le zoning consiste à placer les composants et les groupes d’information afin d’organiser la structure de la page en question. Ce travail indique donc le rôle, le contenu, l’importance visuelle, et la taille de chaque zone de l’interface. Le zoning est donc primordial pour établir les bases de l'interface pour ensuite apporter du design graphique. Le designer viendra donc par la suite ‘’habiller’’ le travail de zoning qui a été fait pour avoir une interface qui ressemble au produit final.
Vous pouvez ici réaliser la maquette sur papier afin d’avoir plus de flexibilité. Il est également tout à fait possible de faire tester votre maquette papier par des utilisateurs. Cela peut paraître étrange mais vous pouvez tout à fait avoir des retours cohérents si votre wireframe papier est correctement réalisé.
Bien évidemment, il est impossible d’y implanter du vrai texte, les tests utilisateurs ne seront pas efficace à 100%. Mais pour tester des petits composants, des mises en pages globales, cela peut être intéressant. Et en plus de ça, le coût sera faible.
Pour aller plus loin, les wireframes peuvent être réalisés sur écran, via des logiciels. Attention seulement, le wireframe doit rester basse fidélité et ne doit pas prendre en compte les détails visuels, graphiques, etc. Restez donc sur quelque chose de simple, de grossier en utilisant le noir et blanc.
Selon l'aspect visuel de la maquette et son habillement concernant le côté graphique, on dit d’une maquette qu’elle est haute ou basse fidélité. Lorsqu'elle est donc complétée par du design graphique et de l’interactivité, on peut dire ici que c’est un véritable prototype de l’interface finale.
C’est le degré d’interactivité et de détail visuel qui va indiquer la fidélité du prototype. Plus ces aspects-là vont être travaillés, plus le prototype et les tests utilisateur seront réalistes.
Le travail de prototypage doit donc être basé sur le travail de wireframing et de zoning réalisé au préalable. L'objectif ici est d’habiller les wireframes pour produire un prototype qui correspond du mieux possible à l’interface voulue.
Ici, tous les composants graphiques doivent être créés. Que ce soit pour la version mobile ou ordinateur.
Depuis peu, on ne parle plus de maquette page par page. L'objectif de la conception d'interface aujourd’hui est de développer un design system regroupant tous les composants comme des pièces de puzzle. Ces pièces pourront être ensuite ré-utilisées pour former les autres pages afin de gagner du temps sur la conception, d’avoir une cohérence graphique entre toutes les pages et d'optimiser la collaboration entre développeurs et designers.
Pour avoir un processus de conception et de prototypage efficace, l’atomic design propose une démarche permettant de concevoir des plus petits éléments pour ensuite former des plus gros composants.
Cette démarche divise les différents éléments d’une interface en 5 grandes catégories : atomes, molécules, organismes, templates et pages.
Parmi les atomes, on retrouve les plus petits éléments de base comme :
Les molécules, elles, sont composées d'atomes, ce sont les premiers regroupements d'éléments. On peut donc retrouver dans les molécules des éléments comme par exemple une forme de bouton et son lien, des boutons actifs (hover) et des regroupements de titres - paragraphes.
Ensuite, il y a les organismes qui regroupent des combinaisons de molécules et également dans certains cas quelques atomes. Par exemple, un champ de saisi accompagné d’un bouton et d’un titre représente ensemble un organisme.
Puis, on retrouve les templates qui eux servent à représenter un modèle de page complet. Seulement, on ne retrouve ici pas de textes réels, le texte est remplacé par du lorem ipsum et les images sont remplacées par des placeholders. Les templates sont là pour vérifier la mise en page concernant le responsive des organismes et les différents supports d'affichage.
Enfin, les pages correspondent une page du prototype et donc à une étape du parcours utilisateur. Elles sont basées sur des templates afin de rajouter le vrai contenu par-dessus. Contenu qui aura pour but d’orienter les utilisateurs vers la tâche voulue lors des tests par exemple.
Cette méthode d’atomic design permet finalement de créer des composants basés sur les wireframes réalisés au préalable. Il suffit ensuite d’assembler les composants créés comme des pièces de puzzle pour générer des pages et des prototypes plus rapidement.
Une maquette n'est pas une fin en soi. Elle permet de tester une interface et surtout d'avoir une base sur laquelle s'appuyer lorsque l'on développe le produit final.
Après avoir fini les prototypes, la dernière étape consiste à développer l’interface et à coder en réel l'interface avec toutes les interactions, le design, le code HTML,CSS, JS, etc.
La collaboration là aussi doit être au rendez-vous. Le design system doit être au cœur du projet afin que le développeur de votre agence web ait accès à tous les composants du prototype.
Concernant les outils de wireframing, de prototypage et de maquettage, de nombreux outils sont disponibles. Néanmoins, ça n’est pas l’outil qui va faire la différence ici. Vous pouvez d'ailleurs effectuer la plupart de vos maquettes basse fidélité à l’aide de papier/crayon.
Pour les wireframes plusieurs solutions sont accessibles :
Mais concernant la prototypage haute fidélité, il va vous falloir plus de précision et des outils prenant en compte du design UX et des interactions.
Plusieurs outils de prototypage :
Les outils sont assez simples à prendre en main et sont pour la plupart gratuits au départ.
