Cours accéléré UX : prototypage

Même si vous n’avez pas accès à des outils de prototypage avancés, vous pouvez encore faire beaucoup de choses. Jetons un coup d’œil à différentes options de prototypage et à la manière dont vous pouvez les exploiter.

Plus tôt dans la série de cours intensifs, nous avons parlé de story-boards et filaires— alors maintenant, abordons l’un des autres moyens courants de partager et de tester votre travail : les prototypes !

La principale différence entre les prototypes et les autres approches de maquette d’interface utilisateur réside dans la possibilité d’interagir avec un prototype. Les prototypes permettent à l’utilisateur (ou à n’importe qui, vraiment) de cliquer, d’explorer et de naviguer dans une conception d’interface utilisateur avant qu’elle ne soit codée.

Bien entendu, les prototypes n’auront pas toute l’étendue des fonctionnalités disponibles dans une application complète et finie. Cependant, les outils de prototypage avancés peuvent nous rapprocher sacrément, plus près que vous ne l’imaginez ! Avec des options telles que Figma ou Axure, vous pouvez créer des prototypes qui imitent avec précision 80 à 90 % du comportement complet de l’application. Cela offre une valeur incroyable en ce qui concerne à la fois les tests d’utilisabilité et la communication du comportement d’interaction pendant le processus de transfert.

Cela étant dit, même si vous n’avez pas accès à ces outils avancés, vous pouvez encore faire beaucoup de choses. Jetons un coup d’œil à différentes options de prototypage et à la manière dont vous pouvez les exploiter.

Prototypage papier

Écoutez, je vais être tout à fait honnête ici : les prototypes papier ne sont pas mon approche de prototypage préférée. Mais ils restent une option – et idéale pour quelques cas d’utilisation spécifiques – donc je m’en voudrais de ne pas en parler.

Les prototypes papier sont à peu près exactement ce à quoi ils ressemblent : une interface utilisateur, dessinée sur papier, qui permet une interaction manuelle. Avec un prototype papier, vous avez besoin d’un facilitateur pour gérer les contrôles « en coulisses » et pour que le changement se produise lorsqu’un utilisateur « clique » sur un bouton.

Ces changements peuvent ressembler à une nouvelle couche de papier ajoutée par-dessus pour simuler un modal, en remplaçant un morceau de papier par un autre pour simuler un changement de page, en ajoutant des post-it pour simuler des champs de formulaire et plus encore. Cela demande un peu d’imagination et de suspension de l’incrédulité de la part de l’utilisateur. Évidemment, ils peuvent vous voir échanger des papiers ou étendre des composants pliés en « accordéon », ce ne sera donc pas une réplique directe de la façon dont le produit final fonctionnera.

Il existe un argument très valable selon lequel d’autres outils, même les plus basiques, comme Google Slides ou PowerPoint, vous permettent de créer des prototypes d’interface utilisateur plus élaborés, à la fois plus rapidement et plus facilement. Il y a une part de vérité là-dedans, en supposant que vous conceviez des interfaces utilisateur d’application standard ; la plupart du temps, vous n’aurez probablement pas recours au prototypage papier. Cependant, il existe quelques situations dans lesquelles il brille vraiment.

Premièrement, c’est idéal pour communiquer rapidement des idées avec les équipes internes. Dans ce cas, vous n’avez vraiment pas besoin que quelque chose ait l’air soigné ou se comporte parfaitement : vous essayez simplement de faire sortir les idées de votre tête et de les intégrer à celles de quelqu’un d’autre, afin que vous puissiez tous les deux être alignés sur le concept. À ce stade du processus de conception, vous perdrez en réalité beaucoup plus de temps à utiliser un outil de prototypage, car il vous obligera à réfléchir aux polices de caractères, aux couleurs, à la taille, à la mise en page, etc., ce qui n’est tout simplement pas important lorsque vous Nous essayons seulement d’expliquer le flux général de l’application à quelqu’un. Cliquez ici, cela arrive. Glissez ça, cela arrive. Les prototypes papier sont parfaits pour comprendre ce type de conception d’interaction de haut niveau et la partager avec d’autres en interne.

Les prototypes papier sont également utiles pour tester des interfaces ou des appareils non standard. Si vous concevez du matériel, pas seulement des logiciels, les prototypes papier sont parfaits ! Des choses comme les télécommandes, les appareils intelligents avec de petits écrans ou d’autres situations uniques peuvent être moquées de manière plus facile et plus réaliste via du papier et du carton que sur l’ordinateur. Dans ce cas, la quantité d’imagination requise est en réalité moindre que si vous demandiez à quelqu’un d’interagir avec une maquette 3D sur l’ordinateur. Ils peuvent réellement tenir quelque chose, voir s’ils peuvent atteindre tous les boutons d’une seule main, comprendre comment cela rentrerait dans leur poche ou leur sac à main. Bien sûr, c’est une niche, mais elle est importante.

Prototypes de slidewares

Si vous souhaitez créer des prototypes numériques, mais que vous n’avez pas accès ou n’êtes pas intéressé par la courbe d’apprentissage des outils spécifiques au prototypage, ce n’est pas grave : vous pouvez toujours créer de superbes prototypes avec des slidewares comme Keynote, PowerPoint ou Google Slides. . Bien sûr, il faudra naturellement qu’il s’agisse de prototypes plus simples et plus rationalisés, mais il n’y a rien de mal en soi à cela. En fait, tout comme pour le dessin, il peut y avoir certains avantages à garder les choses simples et à ne pas trop se laisser entraîner par une interface utilisateur « au pixel près ».

Des prototypes dans un slideware peuvent être créés à l’aide de la fonction de liaison de diapositives. Vous allez simplement créer une version simplifiée de votre interface utilisateur sur une diapositive, puis lier l’élément spécifique (comme un bouton) que vous souhaitez naviguer vers une nouvelle diapositive. Évidemment, cela est assez simple pour des choses de base comme la navigation dans les pages, mais cela commencera à devenir délicat lorsqu’il s’agira de représenter des choses comme les changements d’état.

Vous pouvez, bien sûr, créer tout cela et relier les diapositives selon différents chemins pour représenter les différents choix que l’utilisateur peut faire… mais vous constaterez que, d’ici peu, vos diapositives commencent à se compter par centaines. Cela présente des défis évidents, surtout si vous souhaitez apporter des modifications : la mise à jour d’un seul mot dans le titre d’une page peut nécessiter la mise à jour de 30 ou 40 diapositives.

Le prototypage Slideware est idéal pour les travaux simples et de plus petite envergure. Des tâches telles que l’élaboration de la structure du plan du site ou le prototypage d’une seule fonctionnalité peuvent être facilement réalisées en utilisant cette approche. C’est bien parce que c’est quelque chose auquel tout le monde a accès et qui peut être facilement partagé, contrairement aux outils plus avancés, qui peuvent nécessiter des abonnements ou des téléchargements de logiciels spécialisés.

Il a également l’avantage d’être quelque chose que vous savez déjà utiliser. Presque tout le monde connaît au moins un programme slideware courant, vous n’avez donc pas de courbe d’apprentissage comme vous le feriez avec un tout nouveau logiciel. Bien sûr, vous serez quelque peu limité à ce que vous pouvez créer avec les formes et les outils de texte de base, mais de toute façon, les sites Web sont principalement constitués de rectangles. Vous pouvez créer des travaux très solides en basse et moyenne fidélité à l’aide de slidewares, et c’est un excellent moyen (et hautement accessible) de vous lancer dans le prototypage !

Prototypes haute fidélité

Si vous souhaitez créer un de ces prototypes qui sera presque impossible à distinguer du produit fini, vous devrez alors vous familiariser avec les logiciels de prototypage.

La bonne nouvelle est qu’il existe de bonnes options, même si vous n’avez pas le budget nécessaire pour payer un service d’abonnement sophistiqué. Figma propose un niveau gratuit limité, tandis que PenPot est entièrement open source. Les deux vous permettront d’ajouter une interactivité de base, comme enchaîner des pages, activer des cases à cocher, ouvrir des listes déroulantes, etc. Lorsque vous vous sentez prêt à investir dans quelque chose d’un un peu plus puissant, un abonnement Figma ou Axure vous offrira des outils permettant de créer des prototypes qui pourraient véritablement passer pour des applications et des sites Web finis.

Les prototypes réalisés avec un véritable logiciel de prototypage seront beaucoup plus faciles et plus rapides à créer que ceux réalisés avec un slideware. Ces prototypes seront également plus rapides à mettre à jour et pourront inclure une interactivité plus avancée. De nombreuses solutions logicielles de prototypage vous permettent également d’intégrer des éléments tels que des animations, des transitions et un niveau de base de gestion d’état (mémorisation des sélections et mise à jour de l’interface utilisateur en fonction des choix de l’utilisateur). Entrer dans ce niveau de détail nécessitera évidemment pas mal de temps et d’efforts, mais (en fonction de votre projet) cela pourrait en valoir la peine.

Lorsque nous présentons un rendu haute fidélité à un utilisateur, nous pouvons obtenir en grande partie les mêmes commentaires que nous pourrions obtenir lors des tests d’utilisabilité, avant que le produit n’existe réellement ! Cela vaut doublement pour les prototypes interactifs, où les utilisateurs peuvent réellement « utiliser » l’interface. Cela peut nous fournir des informations inestimables, validant nos hypothèses sur ce qui fonctionne, nous aidant à détecter les erreurs et bien plus encore.

Il existe également des avantages significatifs si vous travaillez sur un projet important ou à budget extrêmement élevé. Dans cette situation, les parties prenantes nerveuses préfèrent souvent avoir une vue très détaillée avant d’approuver le passage au développement. Si vous êtes le concepteur dans cette situation, s’assurer que les supérieurs ont vu et approuvé le travail avant de passer à la phase suivante peut être une décision judicieuse. Obtenez cette approbation par écrit et assurez-vous que tout le monde est aligné avant le début du développement !

Faites du prototypage !

Beaucoup de gens imaginent des prototypes haute fidélité et incroyablement détaillés lorsqu’ils pensent au prototypage, mais il est bon de garder à l’esprit que vous avez d’autres options ! Le prototypage offre d’immenses avantages, quelle que soit la manière dont vous vous y prenez. Même si un prototype haute fidélité peut être précieux, ne présumez pas que c’est votre seul choix. Même si vous ne disposez pas des outils ou de l’expérience nécessaires pour utiliser un logiciel de prototypage, vous pouvez toujours bénéficier du processus soit sur papier, soit en utilisant un slideware gratuit. Il est temps de se lancer dans le prototypage !