Concevoir mieux et plus vite avec le prototypage rapide

À propos de l’auteur

Lyndon Cerejo est un stratège certifié en expérience utilisateur au sein de la pratique de conception rapide & de visualisation de Capgemini, avec une expérience réussie auprès …En savoir plus surLyndon↬

Le vieil adage, « une image parle mille mots » capture ce qu’est le prototypage d’interface utilisateur : utiliser des visuels pour décrire des milliers de mots de spécifications de conception et de développement qui détaillent comment un système doit se comporter et se présenter. Dans une approche itérative de la conception de l’interface utilisateur, le prototypage rapide est le processus qui consiste à maquetter rapidement l’état futur d’un système, qu’il s’agisse d’un site Web ou d’une application, et à le valider avec une équipe plus large d’utilisateurs, de parties prenantes, de développeurs et de concepteurs.

Faire cela rapidement et de manière itérative génère un retour d’information tôt et souvent dans le processus, ce qui améliore la conception finale et réduit le besoin de modifications pendant le développement.

Lectures complémentaires sur SmashingMag :

• Optimiser votre conception pour les tests de prototypes rapides
• Choisir le bon outil de prototypage
• Le prototypage de contenu dans le Responsive Web Design
• Ressusciter les prototypes d’interface utilisateur (sans créer de zombies)

Les prototypes vont des ébauches sur papier aux simulations interactives qui ressemblent et fonctionnent comme le produit final. Les clés d’un prototypage rapide réussi sont de réviser rapidement en fonction des commentaires et d’utiliser l’approche de prototypage appropriée. Le prototypage rapide aide les équipes à expérimenter plusieurs approches et idées, il facilite la discussion par le biais de visuels plutôt que de mots, il garantit que tout le monde partage une compréhension commune, et il réduit les risques et évite les exigences manquées, ce qui conduit à une meilleure conception plus rapidement.

Le processus de prototypage rapide

Le prototypage rapide implique plusieurs itérations d’un processus en trois étapes :

1. Prototype Convertir la description de la solution par les utilisateurs en maquettes, en tenant compte des normes d’expérience utilisateur et des meilleures pratiques.
2. Examiner Partager le prototype avec les utilisateurs et évaluer s’il répond à leurs besoins et à leurs attentes.
3. Affiner Sur la base des commentaires, identifier les domaines qui doivent être affinés ou mieux définis et clarifiés.

Le prototype commence généralement à petite échelle, avec quelques zones clés en maquette, et s’élargit en largeur et en profondeur au cours de plusieurs itérations, à mesure que les zones requises sont construites, jusqu’à ce que le prototype soit finalisé et remis pour le développement du produit final. La rapidité du processus est plus évidente dans les itérations, qui vont des changements en temps réel à des cycles d’itération de quelques jours, selon la portée du prototype.

Scoping A Prototype

Le mot prototype évoque souvent des images d’une version codée et entièrement fonctionnelle d’une application ou d’une interface. Les prototypes rapides ne sont pas destinés à évoluer vers des solutions entièrement fonctionnelles, mais sont destinés à aider les utilisateurs à visualiser et à façonner l’expérience utilisateur du produit final. En gardant cela à l’esprit, lors du cadrage d’un prototype, décidez de quelques questions clés avant de commencer tout travail de prototypage.

Qu’est-ce qui doit être prototypé ?

Les bons candidats au prototypage comprennent les interactions complexes, les nouvelles fonctionnalités et les changements dans le flux de travail, la technologie ou la conception. Par exemple, le prototypage des résultats de recherche est utile lorsque vous souhaitez vous écarter de manière significative de l’expérience de recherche standard ; par exemple, pour introduire la recherche à facettes ou la possibilité de prévisualiser un document sans quitter les résultats de recherche.

Combien faut-il prototyper ?

Une bonne règle empirique consiste à se concentrer sur les 20% de la fonctionnalité qui seront utilisés 80% du temps ; c’est-à-dire la fonctionnalité clé qui sera utilisée le plus souvent. Rappelez-vous, le but du prototypage rapide est de montrer comment quelque chose fonctionnera ou, dans les étapes ultérieures, à quoi ressemblera le design, sans prototyper le produit entier.

Trouver l’histoire

Après avoir identifié les domaines à prototyper, tissez-les ensemble dans un ou plusieurs scénarios : identifiez les chemins cohérents à travers l’expérience utilisateur que le prototype simule. Pour un site Web qui vend des chaussures, un scénario pourrait être « Joe l’ennuyeux » achetant exactement les mêmes chaussures de course Nike qu’il a achetées il y a six mois, tandis qu’un autre scénario pourrait être « Sam l’explorateur » parcourant les tailles 10 pour trouver une paire d’Oxfords et une paire de mocassins qui l’intéressent.

Planifiez vos itérations

Le prototype entier n’est généralement pas construit en une seule itération, mais plutôt pièce par pièce. Une bonne approche consiste à commencer à prototyper largement et largement, puis à plonger profondément dans des zones sélectionnées de la solution. Pour un site Web, cela signifie qu’il faut construire la page d’accueil et les pages de destination des principales sections lors de la première itération (parfois appelée prototype horizontal), puis examiner et réviser cette structure. Les itérations suivantes pourraient approfondir une ou plusieurs sections du site Web (un prototype vertical) ; pour un site Web de téléchargement de médias, il pourrait s’agir des étapes qu’un utilisateur suivrait pour trouver une vidéo et la télécharger, ou de la façon dont il gérerait les médias dans sa bibliothèque en ligne.

Choisir la fidélité appropriée

La fidélité fait référence au degré de ressemblance entre un prototype et la solution finale. Il existe plusieurs dimensions de la fidélité, et les prototypes peuvent se situer n’importe où sur le spectre pour chacune de ces dimensions. En fonction de l’étape du processus de conception et des objectifs du prototype, sélectionnez la fidélité appropriée pour chacun des éléments suivants :

• Fidélité visuelle (esquissé ↔ stylé) L’aspect et le toucher sont la dimension la plus perceptible de la fidélité d’un prototype et, s’ils ne sont pas correctement sélectionnés, peuvent faire dévier les examens du prototype. Passez à la haute fidélité trop tôt et les utilisateurs se concentreront sur la conception visuelle, ce qui n’est pas approprié dans les premiers stades. D’un point de vue visuel, les prototypes n’ont pas besoin d’être parfaits en termes de pixels, mais doivent être proportionnels ; par exemple, si la zone de navigation gauche doit occuper un cinquième d’un écran de 1 024 pixels, il n’est pas nécessaire qu’elle ait exactement 204 pixels de large, tant qu’elle est représentée proportionnellement dans le prototype. À mesure que le prototypage progresse dans le cycle de conception, augmentez la fidélité visuelle au besoin en introduisant des éléments de style, de couleur, de marque et de graphisme.
• Fidélité fonctionnelle (statique ↔ interactive) Le prototype révèle-t-il comment la solution fonctionnera (statique) ou semble-t-il être entièrement fonctionnel et répondre aux entrées de l’utilisateur (interactif) ? Cette dimension est moins distrayante pour les utilisateurs, mais l’ajout d’interactivité dans les itérations ultérieures augmente la fidélité fonctionnelle et permet d’utiliser le prototype pour les tests d’utilisabilité et les formations et communications.
• Fidélité du contenu (lorem ipsum ↔ contenu réel) Une autre dimension qui distrait souvent les utilisateurs est le contenu qui s’affiche dans le prototype. Les lignes ondulées et le texte factice comme lorem ipsum sont utiles à éviter dans les premières étapes du prototypage. Mais au fur et à mesure que le prototype est affiné, évaluez la nécessité de remplacer le texte factice par du contenu réel pour avoir une idée de la façon dont il affecte la conception globale.

Le spectre du prototypage

La basse fidélité

La façon la plus rapide de commencer le prototypage est aussi la plus facile : mettre le stylo(cil) sur le papier. L’esquisse sur papier est une approche de basse fidélité que tout le monde peut faire ; aucun outil spécial ou expérience n’est nécessaire. Utilisée le plus souvent au cours des premières étapes d’un cycle de conception, l’esquisse est un moyen rapide de créer des maquettes grossières d’approches et de concepts de conception et de recueillir les commentaires des utilisateurs. Le prototypage papier est idéal pendant le brainstorming et la conceptualisation et peut être réalisé seul dans un box avec un carnet de croquis ou en groupe avec un tableau à feuilles (ou un tableau blanc) et des marqueurs.

Situé à l’extrémité de basse fidélité du spectre de prototypage, les prototypes papier sont statiques et ont généralement une faible fidélité visuelle et de contenu. Cela oblige les utilisateurs à se concentrer sur la façon dont ils utiliseront le système plutôt que sur son apparence, et cela rend les concepteurs plus ouverts aux changements basés sur les commentaires des utilisateurs.

Le prototypage à faible fidélité se prête au prototypage rapide. Il n’a pas de courbe d’apprentissage mais vous permet d’apporter des changements facilement et rapidement.

Fidélité moyenne

Lorsque nous commençons à utiliser des outils informatiques tels que Visio et Omnigraffle pour prototyper, la fidélité augmente sur la plupart des fronts, donnant lieu à des prototypes de fidélité moyenne. Les wireframes, les flux de tâches et les scénarios créés à l’aide de ces outils demandent plus de temps et d’efforts, mais semblent plus formels et plus raffinés. Bien que des éléments visuels de marque, de couleurs et de style puissent être introduits, les prototypistes s’en tiennent souvent à l’écart, s’attachant plutôt à démontrer le comportement de l’application. L’interactivité peut être simulée en reliant des pages ou des écrans, mais la fidélité fonctionnelle est ici moyenne, au mieux. Ces prototypes sont les mieux adaptés pour déterminer si les besoins des utilisateurs sont satisfaits et si l’expérience utilisateur est optimale.

Il y a deux raisons pour lesquelles on pourrait intentionnellement faire en sorte qu’un prototype de fidélité moyenne ne ressemble pas à un prototype de fidélité moyenne :

• La première est que, en utilisant Balsamiq ou des pochoirs Visio sommaires pour donner au prototype un aspect de basse fidélité, vous forcez les utilisateurs à le considérer comme une ébauche ou un travail en cours, plutôt que comme un produit poli et fini.
• La seconde est que, en donnant au prototype une haute fidélité visuelle (par exemple, dans une mise en page complète réalisée dans Photoshop), vous amenez l’utilisateur à se concentrer sur la conception visuelle et l’apparence, y compris la couleur, les polices, la mise en page, le logo et les images.

La vitesse du prototypage de moyenne fidélité est atteinte avec des modèles, des pochoirs et des widgets et éléments réutilisables. Elle s’accélère au fur et à mesure que vous maîtrisez les outils de votre choix.

Haute fidélité

Les prototypes haute fidélité sont les plus réalistes et sont souvent confondus avec le produit final, mais ils demandent généralement beaucoup de temps. Il y a quelques années, la seule façon de créer des prototypes haute-fidélité était de coder réellement à l’aide d’un langage de programmation, ce qui exigeait souvent que le concepteur et le développeur travaillent ensemble. Aujourd’hui, cependant, les outils de simulation d’applications permettent aux utilisateurs non techniques de glisser et de déposer des widgets d’interface utilisateur pour créer des prototypes haute fidélité qui simulent la fonctionnalité du produit final, même pour la logique métier et les interactions avec les bases de données. Axure et iRise sont quelques exemples d’outils de simulation d’applications qui peuvent être utilisés pour créer des prototypes haute-fidélité.

Ces prototypes sont appropriés lorsqu’une haute fidélité visuelle et fonctionnelle est requise ; par exemple, lors de l’introduction d’une nouvelle technologie (disons, lors du passage d’une application mainframe – oui, ils existent encore !- à une solution Web. La plupart de ces prototypes ne peuvent être convertis en code utilisable, mais ils constituent une excellente référence pour les développeurs. Ils sont également utiles pour effectuer des tests d’utilisabilité et former les utilisateurs.

Le prototypage haute-fidélité est relativement rapide, compte tenu du niveau d’interactivité et de fidélité impliqué, et il peut être accéléré par l’utilisation d’outils de simulation par glisser-déposer. En outre, certains de ces outils facilitent la collecte des commentaires des utilisateurs et la documentation des exigences, ce qui accélère encore le processus de conception. Même si vous n’avez pas besoin d’apprendre un nouveau langage de programmation, ces outils ont une courbe d’apprentissage.

Sélectionner un niveau de fidélité

Pour choisir la fidélité du prototype, il n’y a pas une seule approche correcte. Il est préférable de commencer la plupart des conceptions de nouveaux produits par des croquis, puis de passer à des prototypes de moyenne ou haute fidélité, selon la complexité du système et les exigences des dimensions de la fidélité.

En travaillant avec un client particulier dans l’industrie pharmaceutique, nous sommes passés des tableaux blancs aux prototypes interactifs qui avaient une haute fidélité fonctionnelle et de contenu, mais une faible fidélité visuelle. Ils se souciaient moins de l’aspect et de la convivialité que du respect des directives de l’entreprise.

Pour un autre client, celui-ci dans le commerce de détail, notre prototype interactif devait avoir une haute fidélité visuelle et fonctionnelle. La fidélité du contenu n’avait pas d’importance car ils allaient réutiliser le contenu et le connaissaient déjà. Pour eux, l’apparence et l’expérience interactive importaient davantage parce qu’il s’agissait de leur première mise en œuvre de SharePoint, et ils voulaient que le portail ait l’air  » non SharePointy  » !

Sélectionner des outils

Selon votre approche, vous avez une grande variété d’outils à choisir. Dan Harrelson a compilé une liste d’outils de prototypage populaires sur le blogue d’Adaptive Path.

Chaque outil possède son propre ensemble de fonctionnalités et ses propres forces. En fonction de vos besoins et des exigences des projets sur lesquels vous travaillez, évaluez quel outil serait le plus approprié. Voici quelques questions à prendre en compte lors de l’évaluation des outils :

• Est-il facile d’apprendre et d’utiliser l’outil ?
• Est-il flexible pour prendre en charge les prototypes pour les applications Web, les applications logicielles packagées et personnalisées, ainsi que les applications de bureau et mobiles ?
• Un référentiel de pochoirs, de modèles ou de widgets réutilisables est-il disponible ?
• Est-il facile de partager le prototype avec d’autres personnes pour examen ? Leurs commentaires peuvent-ils être capturés à l’aide de l’outil ?
• Est-il facile d’apporter des modifications à la volée ou d’intégrer des commentaires ?
• Est-il doté de fonctionnalités de collaboration, par exemple en permettant à plusieurs personnes de travailler dessus en même temps ?
• Quelles sont les conditions et les coûts de licence ?

Dos et Don’ts

Alors que vous vous lancez, voici quelques points sur le prototypage rapide efficace à garder à l’esprit :

Faire…

• Travailler en collaboration avec les utilisateurs, les parties prenantes commerciales et informatiques tout en effectuant un prototypage rapide. En plus de donner un feedback précieux, ils acquièrent également un sentiment d’appartenance au produit final.
• Évitez le « prototype creep » en fixant des attentes pour le processus, y compris celles qui affectent le but, la fidélité, la portée et la durée. Rappelez à tous, y compris à vous-même, que le prototypage rapide est un moyen d’atteindre une fin, et non une fin en soi.
• Lors de la création de prototypes et de simulations interactifs haute fidélité, intégrez des délais réalistes (par exemple, pour le rafraîchissement de l’écran ou le passage d’une étape à l’autre d’une transaction), afin que les utilisateurs ne s’attendent pas à des temps de réponse instantanés de la part du produit final.
• Réutiliser, réutiliser, réutiliser. Pour le prototypage sur ordinateur, cela signifie sauvegarder des modèles, pochoirs, patrons et widgets réutilisables pour de futurs projets.
• Plus important encore, commencez chaque session de révision du prototype par l’avertissement qu’il ne s’agit que d’un prototype, d’une maquette, et non de la solution réelle. Cela rappelle aux utilisateurs qu’il s’agit d’un travail en cours, cela encourage la rétroaction et, dans le cas des prototypes haute fidélité, cela empêche les utilisateurs de le confondre avec une solution fonctionnelle.

Ne pas…

• Ne pas prototyper des caractéristiques ou des fonctionnalités qui ne peuvent pas être mises en œuvre – c’est souvent un problème avec les implémentations de progiciels. En cas de doute, confirmez avec les développeurs avant de commencer.
• Ne prenez pas chaque changement ou demande qui ressort d’une revue de prototype comme une nouvelle exigence. Le prototypage rapide aide à capturer les exigences manquées, mais ces nouvelles exigences doivent être évaluées avec soin. Certaines peuvent être mises en œuvre, tandis que d’autres sont repoussées à une version ultérieure.
• Ne commencez pas les sessions de revue de prototype sans directives claires pour le feedback. Soyez très spécifique sur le type de rétroaction que vous recherchez. (Les étapes sont-elles disposées de manière logique ? La navigation est-elle claire et intuitive ?) Si ce n’est pas le cas, préparez-vous à ce qui suit :  » Je n’aime pas le bleu de l’en-tête « , ou  » Ne pouvons-nous pas utiliser cette police à la place ?  » ou  » Pouvez-vous rendre cela plus grand, plus gras, en rouge et clignotant ? « 
• Ne soyez pas perfectionniste. Dans la plupart des cas, le prototypage rapide n’a pas besoin d’être parfait à 100%, juste assez bon pour donner à tout le monde une compréhension commune.
• Ne prototypez pas tout. La plupart du temps, vous ne devriez pas avoir à le faire.

Ressources supplémentaires

• Si vous avez besoin d’un coup de pouce pour commencer à faire des croquis, essayez le livre The Back of the Napkin de Dan Roam.
• Découvrez le prototypage sur papier dans le livre Paper Prototyping de Carolyn Snyder : The Fast and Easy Way to Design and Refine User Interfaces.
• Le sketchboarding, une technique pour explorer et affiner les concepts.
• Vous avez besoin d’un contenu de basse fidélité ? Générez du texte Lorem Ipsum pour votre prototype.
• Vous voulez que votre croquis papier ait l’air haute fidélité ? Essayez ces pochoirs pour le Web, l’iPad et l’iPhone.
• Outils d’esquisse et de prototypage pour les applications iPhone
• Esquisse et prototypage simples dans Firefox avec le module complémentaire Pencil.
• Modèles PDF gratuits imprimables pour l’esquisse, le wireframing et la prise de notes
• 50 kits, ressources et fichiers sources gratuits pour le wireframing de l’interface utilisateur et du design Web

(al)

.