Perfectionnez votre processus de conception UX - Un guide pour la conception de prototypes

Le processus de prototypage - de la création de structures filaires simples au test de maquettes entièrement fonctionnelles - est l'un des ensembles de compétences les plus puissants et les plus puissants qu'un concepteur puisse maîtriser. C'est également périlleux dans les lieux de travail où le processus est ignoré au lieu de simplement « concevoir un prototype » comme un simple livrable à donner au prochain service à construire. Quelle que soit la diligence de votre entreprise en matière de prototypage, le processus réel peut souvent faire ou défaire votre produit final.

Comment et pourquoi construire un prototype est souvent un mystère. Demandez à de nombreux designers et ils inclineront la tête comme des chiots confus. "Que veux-tu dire? Faites-le simplement », diront-ils. Et c'est vrai : nous savons tous comment créer un prototype. Nous ne savons tout simplement pas comment nous savons.

Ceci est particulièrement important compte tenu du fait que les prototypes sont souvent le livrable le plus précieux. Les clients et les gestionnaires veulent voir ce que vous avez fait, qu'il s'agisse d'un site Web ou d'un produit physique. Ils veulent l'essayer, inspecter les différents éléments et comprendre le flux de travail. Ils veulent voir "comment ça marche".

Construire un prototype ne suffit pas ; nous devons comprendre le processus impliqué dans la construction des ébauches initiales d'un produit. Cet article approfondira tout ce qu'un designer doit savoir et faire pour y parvenir.

Conception de prototypes - À quoi servent les prototypes

Les êtres humains sont très visuels. En fait, 30 % de notre cortex cérébral est consacré uniquement à la vision. Ainsi, lorsque vous voyez un prototype, le plus important, c'est que vous le voyiez ! Lorsque le client peut le voir et comprendre tous les processus impliqués dans le produit, en particulier les zones de conflit pour les tests futurs, ce prototype prend vie.

Qu'est-ce donc qu'un prototype ? Un prototype est un outil permettant de visualiser un assortiment de travaux de conception interactifs ; en effet, les prototypes (à presque toutes les étapes) sont un amalgame de tout le travail qui a précédé en une seule pièce visible et fonctionnelle. Cette représentation visuelle montre ce que fait le produit à un moment donné, quels sont les éléments interactifs et comment le produit fonctionnerait dans le monde réel.

Bien qu'il existe de nombreux mécanismes pour les différents aspects de la conception de prototypes (comme la création de croquis), il est facile de manquer des choses et de faire des erreurs.

Cela rend le travail sur la façon dont un prototype est construit extrêmement précieux, car à bien des égards, il décrit comment le but du produit est actualisé. Pas parfaitement, et certainement pas avec précision la plupart du temps, mais comme son nom l'indique, les prototypes ne sont pas définitifs.

Ils nous ralentissent pour nous accélérer. En prenant le temps de prototyper nos idées, nous évitons des erreurs coûteuses telles que devenir trop complexe trop tôt et s'en tenir trop longtemps à une idée faible.

Tim Brown, PDG et président d'IDEO

Une façon simple de penser aux prototypes est comme un mécanisme pour démontrer la fonctionnalité.

Cette explication pratique du fonctionnement de quelque chose présente un certain nombre d'avantages de grande valeur, notamment :

• Rendre réel - Avant que les prototypes ne soient construits, le produit est complètement conceptuel ! C'est bien pendant un petit moment, mais cela doit finalement devenir quelque chose que les parties prenantes et les utilisateurs finiront par comprendre et apprécier. Un prototype est la première étape pour passer du conceptuel au réel.
• Travailler un problème - Parfois, nous avons un défi de conception sans solution. En tant que compétence, le prototypage est un excellent moyen de visualiser le problème et d'introduire rapidement des solutions. Si cela ne fonctionne pas, jetez le prototype et réessayez.
• Itérer – Le prototypage se fait par étapes, mais le résultat est le même : faire évoluer vos idées. Des sketchs à la hi-fi, chaque nouvelle itération offre une pléthore de comportements et de fonctions à tester. Et avec plus de données, nous pouvons itérer à la fois plus rapidement et plus intelligemment.
• Détecter les scénarios imprévus - Une fois que quelque chose est visible, nous avons les limites de notre produit disponibles pour étude, ce qui fournit également un meilleur contexte sur ce qui devrait être là... et ce qui ne devrait pas !
• Détecter les problèmes d'utilisabilité - C'est là que vivent de nombreux concepteurs : une fois qu'un produit a un prototype, quel qu'il soit, les problèmes d'utilisabilité deviennent soudainement faciles à repérer et à résoudre.
• Présentation - Les prototypes à n'importe quelle étape sont une norme de présentation. Que vous testiez une version d'une page ou que vous présentiez un produit à un client, un prototype sous une forme ou une autre devrait être là. Et si ce n'est pas le cas, vous pouvez parier que quelqu'un demandera où il se trouve et pourquoi il n'a pas été inclus.

Comment démarrer le processus de prototypage

Après avoir reçu un document d'exigences de 50 pages d'un client, regarder une toile vierge peut être intimidant. Passer en revue les pensées non organisées des réunions avec les clients, les croquis de serviettes et les photos sales du tableau blanc est rarement utile.

Parce que les prototypes sont construits sur tant d'autres informations, il est important de rassembler les détails nécessaires à l'avance pour mettre la plume sur papier. Tenez compte de la liste de contrôle suivante et passez en revue les détails fournis par votre client ou votre responsable :

1. Quels sont les objectifs du projet ?

Commencez par la vue d'ensemble. Le produit répond-il à un réel besoin ? Comment résout-il ce besoin ? Comprendre l' utilité du produit est essentiel pour fournir toute sorte de solution viable.

2. Quels produits concurrents les gens utilisent-ils actuellement ?

Une analyse concurrentielle approfondie fournira une image claire de l'état du marché pour le type de produit, ainsi que des attentes des utilisateurs d'aujourd'hui.

3. Quel est le public ? Quels sont leurs objectifs ?

Comprendre la démographie et les besoins des utilisateurs fournit le contexte nécessaire pour créer des produits destinés à répondre à ces types d'utilisateurs particuliers et à répondre à leurs besoins.

4. De quel type de produit s'agit-il et à quoi (appareil) est-il destiné ?

Avec autant de technologies et de solutions différentes, les concepteurs UX doivent savoir comment le produit sera utilisé (application Web, site Web réactif, application mobile, etc.), sur quel(s) appareil(s) et comment les différentes versions coexisteront (le cas échéant). ).

5. Y a-t-il des précédents visuels à suivre ?

Si le produit existe déjà et que le projet concerne des améliorations ou une refonte, il est possible que certaines exigences existent en tenant compte du comportement actuel de l'utilisateur avec le produit.

6. Quels sont les livrables ?

La définition des attentes concernant les livrables et le processus est essentielle pour votre planification et votre flux de travail. Chaque projet est différent, mais si les livrables sont bien définis, le reste du processus de conception UX a plus de chances de se dérouler sans heurts.

Dessinez vos prototypes

Avec nos données disponibles et organisées, la prochaine étape consiste à commencer à dessiner. De nombreux concepteurs auront déjà une idée de la mise en page, de la structure ou même de l'emplacement d'éléments spécifiques de la conception visuelle avant même de la dessiner. C'est bien, mais le but des croquis initiaux est d'explorer l'espace disponible pour mettre en évidence ce qui est possible et, plus important encore, ce qui ne l'est pas.

Rassemblez vos instruments d'écriture de choix, que ce soit un crayon et du papier ou un tableau blanc et un marqueur. Le processus d'esquisse s'apparente à celui d'un écrivain qui écrit librement ou d'un musicien qui gratte; dessinez ce que vous ressentez en vous basant sur tout le travail que vous avez fait en amont, et en considérant les éléments ci-dessous :

01 | Flux d'utilisateurs – Suivez l'identification des flux d'utilisateurs. Voyez comment les utilisateurs atteignent leurs objectifs et comment ils interagissent au sein du système.

02 | Entités d'information - Chaque flux d'utilisateur affichera certaines entrées et sorties d'utilisateur. Identifiez ce qu'ils sont, comment ils se rapportent au comportement et aux attentes de l'utilisateur, dans quelles interactions ils sont impliqués et comment ils fonctionnent.

03 | Premières esquisses – Après avoir une idée de qui utilisera le système, ce qu'ils vont faire et avec quoi, il est temps de voir comment. Esquissez vos flux d'utilisateurs - pas besoin de créer la mise en page pour le moment, résolvez simplement la fonctionnalité.

04 | Esquissez une structure rudimentaire – Une fois vos flux d'utilisateurs esquissés, vous aurez une meilleure idée de la meilleure disposition pour le produit. Cela inclura du contenu (texte, photos, vidéo, etc.) qui apparaîtra sous forme de cases ou de gribouillis de base. Lorsqu'ils sont écrits à la main, ils ne s'adaptent pas à la taille, de sorte que toute la structure et le contenu sont uniquement destinés à la visualisation, et non à une utilisation réelle.

Une astuce supplémentaire consiste à utiliser des carnets de croquis, du papier spécialement formulé ou des outils pour créer des images filaires plus claires lors de l'esquisse. Ils fournissent la disposition de base de la fenêtre en question, sont relativement peu coûteux et, avec le gabarit approprié, permettent également aux croquis de se présenter plus proprement. Ceux-ci sont extrêmement utiles si vous êtes un tiroir désordonné, car ils fournissent les rapports d'aspect et les lignes de grille corrects pour les smartphones et les navigateurs Web.

Ce processus peut se poursuivre aussi longtemps que vous le souhaitez, mais il est temps de passer à l'étape suivante une fois qu'un flux d'utilisateurs est terminé et que le processus de réalisation de ce flux est clair. C'est une bonne idée de rebondir entre l'esquisse et la construction de wireframes numériques, principalement pour garder le processus créatif. Au fur et à mesure que vous progressez à travers plus de flux, le produit vous semblera plus concret et vous vous éloignerez naturellement de l'esquisse.

Passer au numérique (prototypes de faible à haute fidélité)

Une fois qu'il y a suffisamment de croquis complets pour avancer, il est temps de les numériser. Qu'il s'agisse d'Adobe XD ou de Sketch, de Framer ou de Flinto, ou de tout autre chose, la création de versions numériques de croquis est la première étape pour les formaliser. L'accent passe donc de l'ajout créatif des éléments nécessaires à l'organisation des actifs et de la structure dans les conceptions.

Au fur et à mesure que les prototypes deviennent plus pratiques et les éléments plus structurés, le produit prend forme. Lors du passage aux prototypes numériques, la fidélité est déterminée par le niveau d' interactivité , la conception visuelle et le contenu . Un prototype peut être basse ou haute fidélité individuellement dans ces domaines, bien que la hi-fi intègre les trois au plus haut niveau.

Tenez compte de la hiérarchie en ce qui concerne la satisfaction des besoins des utilisateurs. Chaque croquis se connecte à un flux d'utilisateurs et à une histoire, et les croquis sont une première étape vers la détermination de la mise en page et de la structure d'un produit. Les outils numériques d'aujourd'hui peuvent accélérer une grande partie de cela, par exemple, en définissant des éléments principaux qui s'appliquent à toutes les pages et des modèles pour les types de page.

À chaque nouvelle connexion et itération, posez-vous deux questions majeures : cette page tient-elle compte de son objectif dans le flux d'utilisateurs plus large ? Et l'interaction a-t-elle un sens (c'est-à-dire que l'utilisateur a-t-il compris comment effectuer l'action) ? Nous nous posons beaucoup ces questions. Plus nous en faisons, plus chaque nouvelle itération est susceptible de rapprocher les prototypes d'une ébauche finale.

Les prototypes numériques sont également beaucoup plus faciles à tester car ils sont non seulement plus lisibles mais aussi plus rapides à reproduire et à itérer en masse. C'est là que les outils de prototypage UX comme InVision et Proto.io sont très utiles pour créer des prototypes cliquables. Lorsqu'il est cliquable, il devient facile de tester la convivialité de divers aspects, des boutons individuels aux flux entiers.

Le prototypage cliquable est devenu particulièrement populaire ces dernières années grâce à la facilité d'utilisation de programmes comme InVision. Il est encore plus utile pour les appareils mobiles, où désormais chaque outil de prototypage majeur offre un moyen de voir ou de tester les câbles mobiles directement sur un appareil de test.

Avec un peu de savoir-faire en ingénierie ou des outils plus puissants comme Justinmind ou Axure, il est également possible de construire des prototypes fonctionnels, qui sont interactifs au-delà du simple clic. Les utilisateurs peuvent tester des choses comme remplir des formulaires, accomplir des tâches simples ou complexes et utiliser réellement l'application telle qu'elle est censée être utilisée, le tout sans la créer. Les concepteurs formés à la conception d'interaction homme-machine (IHM), dont de nombreux concepteurs Toptal, construisent et testent régulièrement des prototypes fonctionnels.

Les prototypes interactifs sont parfaits pour tester les animations, les opérations de l'utilisateur dans l'application et les fonctions de niveau supérieur qui ne peuvent parfois pas être testées sans une action fonctionnelle.

Prototype avec but

La beauté et le défi du prototypage sont en cours. Nous pouvons dire la même chose de presque tout, mais les prototypes commencent et finissent avec un but. Sans savoir pourquoi un écran particulier doit se comporter d'une certaine manière, comment une fonctionnalité doit fonctionner ou si les utilisateurs ont besoin d'un entonnoir ou non, le prototype réalisé n'est pas développé ; il est dessiné puis créé ad hoc.

Pourtant, même si chaque wireframe construit est fait de manière si intelligente, les questions posées en cours de route, avec chaque histoire d'utilisateur connexe prise en compte et l'architecture de l'information utilisée comme carte, il est toujours possible de manquer des choses. C'est le défi de la conception de prototypes : les clients, les responsables et même les concepteurs oublient que les prototypes ne sont pas définitifs . Ils ne sont qu'un brouillon, une itération jusqu'à la prochaine version. Tout cela fait partie du processus de conception UX.

Ainsi, lors de la construction de votre prochain ensemble de prototypes, n'oubliez pas de poser au moins une question essentielle : cela produit-il le résultat souhaité ? Si ce n'est pas le cas, c'est une autre occasion de rédiger une nouvelle version.

• • •

Pour en savoir plus sur le blog Toptal Design :

• eCommerce UX - Un aperçu des meilleures pratiques (avec infographie)
• L'importance de la conception centrée sur l'humain dans la conception de produits
• Les meilleurs portefeuilles de concepteurs UX - Études de cas et exemples inspirants
• Principes heuristiques pour les interfaces mobiles
• Conception anticipative : comment créer des expériences utilisateur magiques