Design Thinking 04: Prototype
Introduction
Après avoir mené une recherche utilisateur pendant la phase d’empathie, et avoir ensuite défini le problème à résoudre pendant la phase de définition, des idées ont émergé pendant la phase d’idéation.
Il est maintenant temps de tenter de donner vie à cette idée ou à ce concept. C'est la phase de prototypage où le but est de construire rapidement un modèle et d’apprendre en le testant le plus tôt possible. Cela permet d'adapter sa solution avant de consacrer beaucoup de temps et de budget à la production d’un produit fini.
Il existe différents types de prototypes et plusieurs façons de les créer, que nous allons aborder dans cette quête.
🤓 À la fin de cette quête, tu sauras:
- ✅ Qu’est ce qu’un prototype ?
- ✅ Les différents types de prototypes
- ✅ Prototype basse fidélité
- ✅ Prototype haute fidélité
- ✅ Les outils à utiliser pour la conception des prototypes haute fidélité
- ✅ Qu'est ce qu'un Design System et un Kit UI et comment peuvent-t-ils t'aider à gagner du temps
- ✅ Quelles sont les différences entre un Design system et un Kit UI
Qu’est ce qu’un prototype ?
En design thinking, le prototype est la concrétisation d’une idée dont on peut tirer des leçons avant d’investir beaucoup de temps et d’argent dans la réalisation complète d’un produit.
Dans le cadre du digital, un prototype est un modèle général de site Web ou d’application, qui visualise la disposition de tous les éléments et fonctionnalités. Il permet d’illustrer les concepts de manière concrète et de procéder à des ajustements avec un minimum de coûts et d’efforts.
Le but du prototypage n’est pas de finaliser immédiatement sa solution mais de préciser les idées et de rapidement rectifier le tir en opérant des tests pendant la conception du modèle. Le prototype sera amélioré par itération en fonction des premiers retours avant de se lancer dans la production.
Quels sont les avantages du prototypage ?
- Recueillir des retours des utilisateurs pendant la conception
- Éliminer les erreurs de conception
- Définir les interactions principales, l’emplacement des sections et la navigation
- Valider la faisabilité des fonctionnalités avec les développeurs
- Donner de la visibilité aux parties prenantes
Les différents types de prototypes
Qu’il s’agisse d’une esquisse sur papier ou d’une structure interactive de plusieurs pages, en plus de travailler à l’optimisation de la conception, ils permettent aussi de synchroniser la vision du client et des développeurs sur ce à quoi le résultat doit ressembler.
Il existe deux types de prototypes:
- Prototypes basse fidélité
- Prototypes haute fidélité
Prototype basse fidélité
Un prototype basse fidélité offre un faible niveau de détails. Il présente certaines fonctionnalités mais n’est pas complet. Il peut être réalisé sur papier ou via des outils digitaux. Le format papier permet de tester plusieurs pistes avec un minimum de coûts et de temps. Ces ébauches permettent déjà de s'assurer de la compréhension du cheminement, de la disposition des éléments, et de valider si la solution permet d’atteindre l’objectif de la solution imaginée.
Les wireframes
Le wireframe (ou maquette filaire ou fil de fer) est un premier jet schématique définissant les zones et les composants qui constitueront l'interface de la solution. C'est généralement une première étape permettant d'avoir une vue d'ensemble en se libérant des détails graphiques comme les couleurs, la typographie, les images ou la marque.
La démarche de recourir à des wireframes s'inscrit dans une recherche d'ergonomie. Elle est surtout utilisée dans le cadre du développement logiciel et des sites et applications Web. Le wireframe consiste concrètement en un croquis, un collage papier ou un schéma numérique produit sur des outils digitaux.
-
Wireframes physiques : Papier, feutres, ciseaux, colle, scotch…
-
Wireframe digitaux Balsamiq, Figma, Sketch, MockFlow
La maquette graphique
À partir d'un wireframe, la déclinaison graphique peut être initiée et présentée sur une maquette réalisée par un designer. Elle définit les couleurs, les typographies, les types de visuels, les traités graphiques des blocs et y intégrera l’identité visuelle de la marque.
Elle fourni une représentation de fidélité moyenne car la maquette graphique est statique et ne permet pas de représenter concrètement les interactions.
- Outils digitaux Sketch, Figma, Adobe XD, Invision
Source : Brainhub : Difference Between Wireframe, Mockup and Prototype?
Prototype haute fidélité
Les prototypes haute fidélité sont des éléments visuels sophistiqués dont l’apparence et le fonctionnement se rapprochent le plus de l’idée qu’on se fait du produit final. Il comprend de vraies données et des maquettes fonctionnelles et interactives.
Source : Victor Luna
Outils pour la conception des prototypes haute fidélité
Tous les logiciels ont leurs avantages et leurs inconvénients, et ils font constamment l’objet d’améliorations. Un bon nombre d’entre eux proposent des périodes d’essai gratuites qui permettent d’évaluer l’outil.
- Figma
- Adobe XD
- Sketch (uniquement sur Mac)
- Invision
- Principle (uniquement sur Mac)
- Protopie
- Axure
L'un des logiciels de conception les plus utilisés.
Design system et UI Kits
Un Design system (système de conception) et un Kit UI (kit d’interface utilisateur) mettent à disposition une librairie de composants prêts à l'emploi. Ils permettent de gagner en productivité et en cohérence graphique. Ce temps gagné à ne pas redéfinir graphiquement chaque élément permet de se concentrer sur l’agencement, l'utilisabilité et l’atteinte de l’objectif.
Différence entre Design System et Kit UI ?
On peut facilement les confondre. Un kit UI fournit un catalogue de composants qui ne sont pas toujours hiérarchisés ou spécifiés en termes d’usages et d’interactions. Le design system hiérarchise et spécifie toutes les règles à appliquer lors de l’utilisation des éléments.
Un design system ordonne les éléments en appliquant l'approche modulaire de l’Atomic Design. Cela consiste à décomposer les objets jusqu’au plus bas niveau possible (couleur, typos , conteneurs ) en composants dynamiques réutilisables et imbriquables.
Les Kits UI sont souvent proposés sous la forme d’une suite d’écrans embarquant les composants nécessaires de façon statique et non flexible (conception écran par écran figée dans le temps). Avec l’évolution des méthodes, des Kits UI peuvent aujourd'hui adopter une approche atomic design dans la présentation des éléments.
Le Design System est un référentiel UX/UI évolutif, centralisé et partagé entre les différentes équipes (Design, Développement, Marketing produit). Toute modification apportée à un élément dans le Design System se répercute sur tous les composants.
L’objectif des deux convergent mais ils sont complémentaires. Le design system spécifie dans le détail et le KIT UI présente l’ensemble des composants visuels développés sur la base du design system.
Exemples de KIT UI sur Figma
Exemples de DESIGN SYSTEM sur Figma
Material Design est un Design System open source créé par Google
☝️ Résumé
- Lors de la phase prototype, on conçoit une représentation graphique du produit pouvant être testée par l'utilisateur
- Il existe différents types de prototypes allant de basse fidélité à haute fidélité
- Utiliser un Design System ou un Kit UI facilite la création d'un prototype haute fidélité