Maîtrise de l'UX prototypage : de la conception à la création interactive

1. Introduction: Bienvenue dans les fondamentaux du prototypage Ux. Bonjour, je suis Manon Battel graphiste et designer d' expérience utilisateur Dans ce cours, nous aborderons le prototypage dans le cadre de votre processus de conception et expliquerons comment prototypage peut créer une meilleure expérience utilisateur Nous aborderons également les différentes fidélités de prototypage, et nous terminerons ce cours en créant un prototype interactif avec Le cours donne un aperçu du prototypage, et nous découvrirons certains des outils de base qui peuvent vous aider à soutenir ce processus de prototypage Donc, si vous êtes prêt, laissez-nous approfondir les principes fondamentaux du prototypage UX Ce cours s'adresse à tous les concepteurs d' expérience utilisateur, aux graphistes, aux concepteurs d'interface utilisateur et même à ceux qui souhaitent en savoir plus sur le prototypage et Figma Point fort, je vous verrai lors de la première conférence. 2. Les bases du prototypage dans la conception UX: Le prototype a plusieurs significations et plusieurs définitions. Je veux donc définir le terme prototype pour le champ d'application du cours avant de commencer. Un prototype est l'un des premiers modèles fonctionnels d'un design utilisé pour recueillir des commentaires afin d' expérimenter rapidement de nouvelles idées. Plusieurs facteurs influencent le type de prototype que vous allez créer, calendrier du projet, l'état d'avancement du processus de conception et la robustesse du prototype. Un prototype peut être créé à l'aide de croquis, cadres métalliques ou de maquettes. Une esquisse est un dessin de l'interface utilisateur où le design commence à prendre forme. Ensuite, les wireframes sont des représentations des mises en page et du contenu et de l'endroit où tout résidera sur l' interface utilisateur Les wireframes peuvent être en niveaux de gris ou en noir et blanc. Une maquette est généralement une interface utilisateur entièrement rendue avec des détails de couleur, typographie et une mise en page générale définis Une maquette ressemble à un produit final ou à un design final. Permettez-moi de vous donner une note rapide sur les wireframes et les maquettes. Parfois, les termes wireframes et maquettes sont utilisés manière interchangeable parce que les gens appellent leurs œuvres de conception des wireframes, même s'il ne s'agit leurs œuvres de conception des wireframes, même s'il Lorsque vous travaillez avec un système de conception de robots, il est parfois plus facile de concevoir des composants afin que vos wireframes apparaissent entièrement rendus, même si votre travail est toujours en cours Les croquis, les wireframes et les maquettes sont des représentations statiques de votre design Mais ils ne représentent pas l'interaction conçue par eux-mêmes. Vous devez ajouter de l'interactivité ou une notation à ces écrans statiques pour comprendre comment le design interagira lorsque quelqu' un agira sur votre interface utilisateur Je définis l'interactivité comme tout comportement qui modifie l'état du design ou le flux en fonction de l'interaction de l'utilisateur Des exemples simples d'interactivité comme une icône qui peut modifier l'affichage de la page ou, en cliquant dessus, l'icône ouvre un menu contextuel La façon dont l'utilisateur interagit avec votre interface est l' aspect clé de votre conception globale Le prototypage nous permet donc de tester nos différents flux, valider les concepts de conception, de passer en revue différentes idées et de proposer une expérience cohérente L'un des concepts clés du prototypage est de valider vos conceptions à un stade précoce, voire fréquent, sans trop de frais supplémentaires. Il existe de nombreuses manières d' aborder un problème de conception. Le prototypage d'idées et de concepts vous aidera à éliminer rapidement les mauvaises idées et à en faire ressortir de nouvelles. Il n' est pas nécessaire que votre prototype soit un code. Vous pouvez créer un prototype avec n'importe quoi, des croquis à l'aide de maquettes entièrement rendues Et c'est exactement ce que nous allons faire dans ce cours, portera votre expertise en matière d'expérience utilisateur à un tout autre niveau. Très bien, je te verrai lors de la prochaine conférence. 3. L'importance du prototypage dans la création d'UX: L'un des points essentiels à retenir à propos du prototypage est qu'il ne s'agit pas de vos outils Il s'agit de votre design. Oui, les outils vous soutiendront et vous aideront dans votre conception, mais votre objectif principal est de vous concentrer sur votre conception. prototypage, en toute fidélité, nous aide à éliminer le risque d'investir dans un produit qui ne trouve pas d'écho auprès de l'utilisateur, n'est pas facile à utiliser ou qui ne résout pas les problèmes commerciaux appropriés Permettez-moi de vous donner d'autres exemples expliquant pourquoi nous créons des prototypes. La première consiste à valider une nouvelle idée de produit. Par exemple, l' entreprise souhaite créer une nouvelle idée ou un nouveau produit. Ainsi, en créant un premier prototype et en testant l' idée à moindre coût, nous donnerons suffisamment d'indications pour déterminer s'il s'agit d'un produit ou d'un futur qui vaut la peine d'y investir, plutôt que de dépenser trop de ressources sur le front. La seconde consiste à valider les concepts ou les flux de conception. Il existe plusieurs manières de résoudre un problème de conception. Et dans le cadre de votre processus de conception, plusieurs idées et plusieurs mises en page peuvent souvent être prototypes afin de déterminer l'orientation de conception mieux adaptée à l'entreprise et aux utilisateurs La troisième consiste à déterminer si l'expérience du produit est utilisable ou non. prototypes issus des tests d' utilisabilité sont généralement plus détaillés et plus fidèles. Parce qu'à ce stade, l'orientation de la conception a déjà été définie, et maintenant les commentaires sont davantage axés sur la question de savoir si le produit est utilisable ou non. Au cours de cette phase, le type de feedback que vous souhaiterez peut-être rechercher inclurait des informations indiquant si les libellés des boutons sont clairs et si les interactions sont comprises par l'utilisateur ou non. Les éléments de conception, y compris le contenu, permettent de recueillir des commentaires dans ce prototype haute fidélité. La quatrième consiste à communiquer une idée ou une vision. Les prototypes sont d'excellents outils pour communiquer aux autres sur le fonctionnement de votre conception. Si vous présentez régulièrement votre travail à d'autres personnes, ce sera une bonne habitude d'avoir un prototype à portée de main au cas où pourriez répondre à la question de savoir comment il fonctionnera. Voici quelques exemples des raisons pour lesquelles nous avons besoin d'un prototype. Donc, la prochaine fois que vous créerez votre propre prototype, gardez ces raisons à l'esprit. Très bien, je vous verrai lors de la prochaine conférence. 4. Atténuer les risques grâce au prototypage: développer des produits sans avoir obtenu au préalable Il est très risqué de développer des produits sans avoir obtenu au préalable les commentaires de votre marché cible. Il est coûteux de créer un produit sans avoir d'abord déterminé si votre marché est adaptable à votre idée ou à votre produit. Créer une expérience produit inadaptée coûte du temps de développement. Si vous avez une idée de produit et que vous créez une expérience entièrement fonctionnelle, vous découvrirez peut-être que le produit ne correspond pas aux attentes des utilisateurs. C'est là que le prototypage peut vous être très utile. du processus de prototypage, vous découvrirez où vos idées de conception échouent ou où elles brillent Les prototypes sont utiles à toutes les étapes de votre processus de conception. Vous pouvez créer un prototype juste pour déterminer comment votre expérience devrait fonctionner lors d'une phase de découverte. Dans les étapes ultérieures, vous pouvez créer des prototypes plus robustes le but de recueillir les commentaires des utilisateurs. Lorsque vous créez des prototypes à partir de commentaires, déterminez le type de feedback que vous recherchez , car cela pourrait influencer le type de prototype que vous créerez ultérieurement. Par exemple, si vous recherchez des commentaires plus précis, vous souhaitez un prototype plus fidèle avec lequel l'utilisateur puisse interagir Avec l'aide d'un bon modérateur, vous pouvez obtenir de nombreux commentaires sur le design avec des prototypes peu fidèles S'il s'agit d'une session de modérateur, l' absence d'un prototype entièrement fonctionnel offre plus de flexibilité , car le modérateur peut aider l'utilisateur à parcourir les zones du prototype qui ne fonctionnent pas, tandis que sessions non modérées sont autonomes via une plate-forme de test Vous devez donc vous assurer que votre prototype peut résister à la tâche et aux clics qu'il va rencontrer dans un environnement non modéré. La plupart des outils de prototypage couvrent à la fois la basse fidélité et la haute fidélité Mais pour des interactions plus réalistes, vous aurez peut-être besoin d'une logique et de conditions plus avancées. Par exemple, si vous devez stocker les données d'un utilisateur ou si vous avez besoin d'un lecteur vidéo natif à ouvrir sur l'appareil de votre utilisateur, agit de besoins de prototypage avancés, et vous devez vous assurer que vous disposez de l' outil adapté à la tâche Mais avant cela, vous devriez vous poser ces questions. Le prototype doit-il être aussi avancé ? Parce que parfois nous voulons que les choses restent réalistes et aussi simples que possible. La question suivante que vous pouvez vous poser est est-il important d'obtenir les commentaires dont vous avez besoin ? Enfin, la simulation de l'expérience est-elle suffisante pour indiquer où doit aller le design Déterminer le type de feedback dont vous aurez besoin vous aidera à décider de la manière d'aborder votre prototype. Très bien, je vous verrai lors de la prochaine conférence. 5. Prototypage et design : modèles de processus de conception clés: Vous vous demandez peut-être comment appliquer votre pensée conceptuelle à vos produits, à vos designs ou à quoi que ce soit d'autre. Eh bien, pour répondre à cette question, il existe quelques modèles distincts dans le processus de conception. Fondamentalement, le processus de conception est une méthode de résolution de problèmes. Et même s'il existe quelques modèles distincts de processus de conception, l'idée clé ou le concept clé est largement le même. Al, c'est de la gestation. prototypage est une phase clé du processus de conception, et à mesure que le produit est mieux défini, les techniques de prototypage peuvent également changer en conséquence, passant d'une fidélité inférieure à une fidélité plus élevée Avant de passer à la fidélité, examinons le processus de conception. Le premier modèle est le double diamant d'un conseil de design. Le double diamant met l'accent sur les étapes clés du processus de conception. Découvrez, définissez, développez et livrez. Le modèle suivant est l'approche scolaire standard D avec les étapes clés suivantes : mettre l'accent, définir, idéer, prototyper et tester Ces modèles présentent désormais des différences, mais tous les modèles de processus de conception répondent aux mêmes attributs clés. Ils sont centrés sur l'utilisateur accent sur l'empathie envers l'utilisateur afin de comprendre ses défis tout en découvrant des opportunités et des idées En définissant l'espace du problème sur la base de ces informations et en élaborant des idées à travers divers concepts et idées de conception, nous trouvons des solutions potentielles, prototypons et itérons ces idées et concepts de conception, puis nous mettons enfin en œuvre ces idées clés Le processus de conception du centre utilisateur est complexe et itératif et n'est pas aussi linéaire qu'il n'y paraît Le processus est conçu comme un cadre dans lequel vous pouvez créer des solutions de conception. Idéalement, vous devez suivre ces étapes clés dans votre conception pour vous assurer que vous vous concentrez sur la conception des bons éléments et que vous livrez le bon produit. Par exemple, vous êtes peut-être en train de retester utilisant différentes idées et concepts Vous pouvez donc commencer par le prototypage papier. Au fur et à mesure que votre projet passe à la livraison finale, vous souhaiterez peut-être un prototype fonctionnel plus robuste pour recueillir des commentaires sur l' utilisabilité et communiquer votre conception à votre équipe. Vous pouvez créer un prototype à n'importe quelle étape de votre processus de conception. Et à mesure que la fidélité du design augmente, la fidélité du prototype augmente également. En d'autres termes, haute fidélité. Nous avons parlé de différents modèles de processus de conception et de prototypes. Dans la prochaine conférence, nous aborderons question de la fidélité des prototypes. Ou lumière, je t'y verrai. 6. Les trois niveaux de fidélité aux prototypes dans la création d'UX: Prenons un moment pour parler de fidélité. La fidélité fait référence à l'exhaustivité de l'interface utilisateur, de l'interaction et du flux. La fidélité peut également faire référence à l'apparence visuelle, mais également à la fonctionnalité du prototype Il existe essentiellement trois types de fidélité : faible, moyenne et enfin élevée. Nous parlerons de chacun d'entre eux en détail. Appliquer une faible fidélité est un bon moyen de se concentrer sur la datation correcte des interactions dans le flux sans trop se soucier de l'interface visuelle. Par exemple, lorsque vous souhaitez utiliser une approche basse fidélité vous en êtes au début de l' entretien avec vos utilisateurs et que vous avez une idée des problèmes que vous souhaitez résoudre Mais vous voulez obtenir des commentaires avant d'aller trop loin dans cette idée. Dans ce cas, esquisser des idées de haut niveau et les présenter à votre utilisateur est un excellent moyen d' obtenir des commentaires et de suivre ses réactions Les croquis peuvent introduire un nouveau niveau d'idées auxquelles l'utilisateur n'aurait peut-être pas pensé avant d' avoir vu votre croquis. Ils peuvent recueillir de nombreuses idées intéressantes et entamer de nombreuses nouvelles conversations L'un des avantages de l'esquisse est que vous pouvez rapidement itérer ou répéter rapidement les concepts et les intégrer très rapidement dans les commentaires des utilisateurs Les prototypes peu fidèles ne s'appliquent pas uniquement aux croquis. N'oubliez pas que vous pouvez avoir un prototype peu fidèle dont l'interface est très peu polie, comme un cadre métallique en échelle de gris Certains outils de prototypage sont également conçus pour créer une interface sommaire utilisant formes de base pour exprimer ce faible niveau de fidélité Les prototypes à fidélité moyenne peuvent combiner des fonctionnalités de base et certains éléments d'interface définis. Mais il se peut que certains flux ne soient pas complets. Parce que vous souhaitez davantage d'informations et de commentaires de la part de l'utilisateur pour guider votre conception. Par exemple, dans le cadre d'un projet sur lequel je travaille, je présente un prototype de fidélité moyenne à mes utilisateurs. Seuls quelques liens fonctionnent parce que je voulais obtenir des commentaires sur les liens qui ne fonctionnaient pas, et je voulais que l'utilisateur me dise où il pense devoir aller et pourquoi. Dans cet exemple, le design était partiellement défini, mais j'avais besoin de plus de compréhension de la part de l'utilisateur pour définir le reste de mon design. Généralement, les prototypes de fidélité moyenne sont utilisés dans le cadre d'une conception où certains éléments clés sont présents, mais vous devez tout de même valider certains concepts pour mieux comprendre les besoins de vos utilisateurs. Les prototypes haute fidélité sont particulièrement adaptés aux scénarios dans lesquels vous avez une idée précise de l'apparence et du fonctionnement de l'interface de conception, et dans lesquels vous souhaitez obtenir des informations plus spécifiques. Il convient de noter que les interfaces visuelles hautement définies donnent l'impression que le produit est final et fini. Les commentaires peuvent se situer au niveau de l'interface et se concentrer davantage sur les couleurs, les fonds et les étiquettes fiscales. Mais si vous ne tenez pas compte de ce type de feedback, vous pouvez vous en tenir à une fidélité inférieure pour concentrer davantage sur les bases des interactions et des flux. conception haute fidélité est également utile pour la livraison finale, car elle permet à tous les membres de l'équipe de développement participer à la conception et de voir comment elle fonctionne. Le prototypage est utile à n'importe quelle étape de votre processus de conception, et Fidelity vous indique le type de feedback que vous souhaitez obtenir et où vous en êtes dans votre processus de conception Très bien, je te verrai lors de la prochaine conférence. 7. Comprendre les prototypes de faible fidélité dans la conception UX: Les prototypes peu fidèles sont une présentation approximative de votre idée ou de votre design, et ils ne sont pas vraiment très définis. Ils peuvent être facilement réalisés sous forme de croquis sur du papier, mais certains outils numériques peuvent stimuler cette apparence inachevée Et nous les examinerons plus tard dans ce cours. faible fidélité est parfois définie comme une simple base en papier, comme un croquis sur papier. Ce débat n'a rien à voir, mais je définis la basse fidélité incluant les wireframes cliquables, qui peuvent être créés dans un logiciel de prototypage imitant une mais je définis la basse fidélité comme incluant les wireframes cliquables, qui peuvent être créés dans un logiciel de prototypage imitant une interface basse fidélité. de prototypes peu fidèles présente de nombreux avantages et avantages utilisation de prototypes peu fidèles présente de nombreux avantages et avantages, particulier au début du processus de conception de l'expérience utilisateur. principaux avantages, citons le fait que les utilisateurs sont plus susceptibles d' exprimer leurs commentaires en toute transparence. faible fidélité du prototype donne l' impression que la conception est une phase de conception antérieure Et si vous demandez des commentaires, les utilisateurs seront plus enclins à donner leur avis honnête car ils savent toujours que le projet est en cours de construction. Ensuite, ils sont très faciles à créer avec peu de temps ou d'efforts. Et si vous utilisez du papier, vous pouvez rapidement esquisser une idée et quelques écrans clés pour comprendre le concept de base. Il est facile de les répéter rapidement en fonction des commentaires. Et si le premier concept de basse fidélité fonctionne à nouveau, vous pouvez essayer quelque chose de nouveau. Avec les prototypes peu fidèles, vous pouvez facilement proposer une nouvelle idée ou un nouveau concept en fonction commentaires de l'utilisateur ou d'autres éléments qui n'ont pas été inclus après le premier prototype, puis itérer et intégrer ces commentaires très rapidement L'accent est davantage mis sur les intégrations et les flux lorsque vous créez des designs peu fidèles Cela vous donne l'opportunité de vraiment vous concentrer sur l'interaction et le flux sans trop vous soucier de la couche visuelle. Parfois, il suffit d'avoir le design de base en tête. Eh bien, certains inconvénients des prototypes à faible fidélité sont qu'ils sont limités en termes de flux et de comportement d'interaction. La conception de prototypes peu fidèles limite l' interaction et le comportement réalistes. Vous ne pourrez donc pas recevoir de commentaires détaillés sur le fonctionnement de l'élément d'interface. Ce sont des véhicules faciles à conduire. Parfois, les prototypes peu fidèles ne présentent pas interface suffisamment claire pour se démarquer par eux-mêmes et être compris par les utilisateurs. Un facilitateur est donc nécessaire pour guider l'utilisateur tout au long du design afin qu'il sache ce qu'il regarde et qu'il puisse l' aider à naviguer dans le flux et à interagir Troisièmement, la facilité d'utilisation est indéterminée. Un autre point important à garder à l'esprit est qu' ils sont excellents pour détecter des problèmes d'utilisabilité de haut niveau, mais qu'ils ne proviennent pas de commentaires d' utilisabilité détaillés sur le comportement des interactions Une faible fidélité peut être associée à un excès d'imagination. Oui, il existe ce qu' on appelle une trop faible fidélité. Si votre version basse fidélité n' est qu'une case pour stimuler une mise en page, et que vous demandez à l' utilisateur de remplir cette case. Parfois, les utilisateurs n' ont pas l'imagination ou vocabulaire visuel nécessaires pour décrire les causes de cette boîte. Il faut encore apporter une certaine orientation au design à faible intensité que l'utilisateur peut interpréter Mais il est tout de même très avantageux de conserver une faible fidélité au cours de la première phase de votre processus de conception. Les prototypes à faible fidélité sont utiles et fonctionneront dans presque tous les projets, mais ils sont très utiles au début de votre processus de conception. Donc, la prochaine fois que vous aurez un projet difficile et qu'il vous faudra vous concentrer sur l'essentiel, essayez d'utiliser des prototypes peu fidèles et vous vous aiderez grandement. Très bien, je vous verrai lors de la prochaine conférence. 8. Comprendre les prototypes de moyenne et de haute fidélité: Les prototypes de moyenne fidélité peuvent partager les mêmes caractéristiques que les prototypes de haute fidélité tels que le Luke et le fel, mais ils ne possèdent pas nécessairement toutes les fonctionnalités. Les prototypes à fidélité moyenne fonctionnent bien lorsque vous avez pris en compte une partie du design, mais que vous n'avez peut-être pas encore une image complète de votre design. Ils peuvent comporter un mélange d'éléments qui peuvent être conçus et non conçus ou non définis Ils sont les meilleurs à partir de scénarios. Ensuite, vous êtes plutôt satisfait certains éléments du design et de l'interaction, mais vous avez encore des questions suspens et vous ne savez pas dans quelle direction aller. Vous pouvez avoir un mélange d'éléments établis, mais conserver les éléments sous forme de substituants. Vous pouvez leur poser d'autres questions pour les aider à clarifier le type de contenu et la direction à adopter pour le design. En comparaison, les prototypes de haute fidélité sont généralement proches du design final et nous avons toutes les couleurs et l' Habituellement, les interactions par clic sont également de mise dans les conceptions haute fidélité Certains avantages des prototypes à fidélité moyenne sont leur flexibilité Ils fonctionnent très bien, et vous avez quelques idées, mais vous n'avez pas encore tout compris. Il y a un peu plus de flexibilité dans la façon dont vous abordez le design. Maintenant, quelques inconvénients. Vous aurez besoin d'un facilitateur, surtout si vous êtes à la recherche de nouvelles idées. Vous devrez peut-être laisser libre cours à l'imagination de l'utilisateur lorsqu'il consulte la page contenant du contenu de type « lieu ser ». De plus, les prototypes de fidélité moyenne ne sont pas fiables pour détecter les problèmes d'utilisabilité car il est trop probable qu'ils soient de haut niveau. Les conceptions haute fidélité, en revanche, présentent des avantages uniques par rapport aux conceptions de fidélité moyenne. abord, ils sont plus représentatifs de l'apparence du design car celui-ci semble plus réel et réaliste, et les utilisateurs examineront le prototype comme s'ils en avaient une expérience normale. Deuxièmement, le design n'a probablement pas besoin d'un facilitateur. Si le design est presque terminé, il n'est généralement pas nécessaire d'avoir un facilitateur pour guider l'utilisateur tout au long du design Vous pouvez même utiliser un programme de test à distance que l'utilisateur peut effectuer lui-même. Le troisième est que des problèmes d'utilisabilité seront probablement détectés. Tout problème d'utilisabilité qui subsiste ou qui n' a pas été détecté lors des premiers prototypes sera probablement détecté dans les conceptions haute fidélité. Voici quelques inconvénients des conceptions de fidélité moyenne à élevée. La première est qu'ils ont besoin de beaucoup de temps pour être créés. Les prototypes d'alimentation H ih peuvent être très robustes, et il faudra plus de temps pour créer un prototype de polissage entièrement fonctionnel Ensuite, les utilisateurs ne sont pas aussi disposés à donner leur avis qu'au niveau précédent du prototype. L'aspect final du design peut limiter le type de commentaires que les utilisateurs sont prêts à donner, car prêts à donner, car le design est tellement final et fantastique. Par exemple, si le flux crée de la confusion, ils peuvent s'abstenir de le dire parce qu'ils peuvent avoir l' impression que le design est déjà terminé et ils peuvent l'ajouter eux-mêmes. Et le troisième est qu'ils sont plus difficiles à utiliser. prototypes haute fidélité peut prendre beaucoup de temps création de prototypes haute fidélité peut prendre beaucoup de temps s'ils nécessitent de nombreuses interactions et de nombreux cas d'utilisation. Par conséquent, ils peuvent être difficiles à mettre à jour, en particulier si certains problèmes liés aux fonctionnalités de base sont mis en évidence lors de ces tests. Le prototypage est un aspect fondamental du processus de conception américain. Et en connaissant certains des inconvénients et des avantages, vous pouvez savoir quelle fidélité vous convient le mieux et où vous en êtes dans votre processus de conception. 9. Optimiser les retours des utilisateurs : techniques de prototypage: Lorsque vous créez vos prototypes de conception, vous devez être conscient du type de feedback que vous recherchez Vous devez vous assurer d'obtenir le bon type de feedback qu'il sera utile d'intégrer dans vos conceptions. Lorsque vous testez votre prototype avec un facilitateur, vous aurez besoin d'un chercheur utilisateur ou d'une personne neutre, qui connaît bien le prototype et les objectifs de conception Il est très important que le facilitateur soit neutre, car vous ne voulez pas quiconque pose des questions suggestives ou juge l'utilisateur de quelque façon Si vous testez des prototypes de faible ou moyenne fidélité, le concepteur et le facilitateur collaboreront pour définir le type de questions que vous poserez au sujet de la conception Les questions relatives aux prototypes de faible fidélité seront ouvertes. Et pour ce qui est des designs de fidélité moyenne, la question peut aller d'une conception ouverte à une conception spécifique. Enfin, à partir de prototypes de haute fidélité, la question sera plus précise. Vous devrez établir un objectif clair quant à ce que vous attendez de vos tests. Il est donc important que les animateurs soient capables de poser les bonnes questions sans amener l' utilisateur à trouver la réponse La recherche ouverte peut s'avérer délicate, car les gens se poseront des questions et un bon animateur sera en mesure de laisser libre cours à la discussion, mais de se concentrer à nouveau sur le design si nécessaire Généralement, lorsqu'un facilitateur interroge l'utilisateur à distance ou en personne, l'équipe du projet et le concepteur observent la session Il est essentiel que le concepteur soit présent lors la session de recherche sur les utilisateurs pour entendre les commentaires directement de l'utilisateur. Même si vous pensez que votre design est solide, il est toujours humble d' écouter l'utilisateur Les concepteurs organisent parfois leurs propres sessions de conception avec l'utilisateur, ce qui n'est pas un problème si le concepteur est ouvert à tous les commentaires, maintient un état d'esprit curieux pendant l'entretien et peut poser des questions sans guider l'utilisateur. Parfois, lorsque les concepteurs testent leur propre travail, le biais de confirmation peut s'installer biais de confirmation se produit lorsque vous attendez de vos utilisateurs qu'ils perçoivent le design comme vous le souhaitez. Et lorsque le feedback est opposé ou à 180 degrés, ils minimisent ou ignorent ce feedback. L'objectif du test de votre prototype est de déterminer si votre design trouve un écho auprès de votre utilisateur ou non Parfois c'est le cas, parfois non. Toutes ces informations sont utiles pour nous, car nous pouvons intégrer les commentaires et les idées dans la prochaine itération. Maintenant que nous avons appris différents types de fidélité et que nous avons testé le prototypage, apprenons à créer des prototypes à différents niveaux Très bien, je vous verrai lors de la prochaine conférence. 10. Maquettage papier: La création d'un prototype papier est un processus très simple met davantage l'accent sur la compréhension principaux attributs de votre conception, tels que les flux, les interactions et les mises en page La conception du papier a besoin de quelqu'un pour faciliter la conversation car cela demande un peu d' imagination de la part de l'utilisateur Un facilitateur sera en mesure de proposer contextes en leur proposant des scénarios auxquels ils pourront réfléchir et aider l'utilisateur à s'exprimer davantage sur le design s'il est bloqué ou pour l'amener à exprimer davantage son opinion sur le design Le prototypage papier est assez facile à réaliser. Vous n'avez pas à vous soucier de savoir si vous pouvez dessiner ou non, et la fidélité doit simplement être suffisamment claire pour faire passer votre message à travers des carrés, des rectangles, des lignes et des mots Tout ce dont vous avez vraiment besoin est un marqueur noir, du papier et des notes autocollantes. Pour tester des prototypes papier mobiles, il est intéressant d'avoir une découpe dans un cadre mobile afin de limiter la visibilité des objets dans la fenêtre d'affichage Le reste du prototype peut être dessiné sur papier. Lorsque vous utilisez le même prototype pour plusieurs personnes. Parfois, le papier se déchire ou s'use. Il est donc fortement recommandé d'utiliser un presse-papier plus lourd qui aidera à éviter cela. Imaginons que nous voulions créer une application de commerce électronique pour appareils mobiles. Lorsque vous abordez un type de prototype, vous devez commencer par esquisser vos idées concernant les écrans et les mises en page, ainsi que les flux de votre conception Par exemple, j'ai quelques itérations où j'ai simplement proposé des approches différentes à partir de mon design Disons la page d'accueil et le type de contenu que je souhaite présenter. J'ai également une idée de la façon dont la barre de ruban devrait être organisée. Vous pouvez voir que c' est assez dur. Et mes croquis visent vraiment à mettre plusieurs idées sur le papier. Vous n'avez pas besoin de perfection ici. La prochaine chose que j'ai faite a été de créer un flux de haut niveau écrans clés et d'interactions dès le design. Dans mon exemple, j'ai ici la page d'accueil, certaines fonctionnalités et la possibilité d'ajouter un article à la carte. Vous pouvez simuler le comportement de défilement en utilisant des bandes de dessin animé léger et en les déplaçant de haut en bas dans la fenêtre d'affichage de votre modèle ou d' côté à l'autre pour stimuler le défilement de gauche à stimuler le défilement Idéalement, vous pouvez dessiner vos dessins en portrait pour stimuler le défilement vers haut ou vers le bas ou en paysage pour une interaction horizontale entre les partitions Tout tourne autour du prototypage papier, et dans la prochaine conférence, nous passerons à Figma Très bien, je t'y verrai. 11. Prototyper les bases dans Figma: Bonjour, et bon retour à tous. À partir de cette conférence , nous allons commencer à prototyper dans Figma Alors téléchargez le Figma et connectez-vous ou créez un compte Figma Très bien, je te verrai sur l'écran de Figma. J'ai créé ces écrans pour une société fictive de commerce électronique à l'aide de ces éléments. Tous ces fichiers se trouvent dans la section des ressources, alors assurez-vous de les consulter, et tous ces actifs y sont inclus. Vous pouvez donc me suivre dans Figma. Passons en revue le flux global et les interactions. Il s'agit d'une entreprise fictive qui vend des chapeaux, et les clients peuvent personnaliser un chapeau s'ils sélectionnent cette option. Depuis la page d'accueil, vous pouvez coller du ruban adhésif sur cette tête en particulier, et cela vous amènera à la page détaillée du produit. Vous pouvez faire défiler cette page et voir le contenu complémentaire, comme les détails et les critiques. Lorsque je clique sur le lien pour consulter les pratiques éthiques, je vois une feuille inférieure contenant plus d'informations. Je peux faire glisser la feuille inférieure haut et faire défiler la page pour voir plus d'images. Commençons par organiser tous les écrans et tous les éléments, puis commençons notre prototypage en les connectant dans Figma. Je vais utiliser la taille d' image de l'iPhone, qui est de 390 x 844, qui est la taille par défaut de l'iPhone Sélectionnez F sur le clavier pour créer un nouveau cadre. Pour sélectionner la taille et le type de cadre. Dans le panneau de droite, il y aura différents types et tailles d' écran. Faites-en deux autres en copiant et en collant. Nommons la première maison à ossature, et la seconde, la vente au détail de produits Et le dernier, feuille inférieure. J'ai les éléments que nous allons utiliser sur la gauche, et nous allons composer les écrans en utilisant ces éléments. Ici, j'ai trois cadres. Un depuis l'en-tête de la page d'accueil, un depuis le contenu et le dernier depuis la barre d'onglets. Je vais sélectionner l'en-tête de la page d'accueil dans la couche, le copier et le coller dans le cadre. Je nomme la maison en utilisant Command plus C sur MC ou Control plus sur Windows pour copier. Je vais sélectionner le cadre d'accueil et le coller dans le cadre. Je ferai la même chose depuis le contenu d'accueil. Je vais le copier-coller dans le cadre et le repositionner Enfin, je vais copier-coller l' élément de la barre d'onglets dans le cadre et le repositionner Pour la page détaillée du produit, nous utiliserons le même processus. Copiez et goûtez tous les éléments la même manière que nous l'avons fait sur la première page. Je vais le faire maintenant. Le bouton Ajouter deux voitures apparaîtra en bas de l'écran. Je vais donc le repositionner pour qu'il se trouve en bas Pour le dernier écran, nous allons prendre les deux éléments de la couche à partir des éléments de la feuille inférieure et les copier et les coller dans le cadre de la feuille inférieure. Pour l'écran de la feuille inférieure, je vais changer le rayon haut à gauche et à droite à dix pour correspondre aux coins arrondis du style de feuille inférieur pour l'en-tête. Une fois que nous avons repositionné ces éléments, copions et collons ensuite copions et collons la feuille inférieure pour créer une deuxième feuille inférieure Maintenant, changeons la hauteur de la deuxième feuille inférieure à 268 et nommons-la feuille inférieure deux. Il s'agit des deux hauteurs des feuilles inférieures. Lorsque nous créons le prototype qui le connecte, nous voulons simuler l'interaction du glissement. Nous avons donc besoin de deux hauteurs différentes, la hauteur minimale et la hauteur maximale. Nous avons aménagé nos écrans pour préparer au prototype. Dans la prochaine conférence, nous allons connecter notre prototype et le faire fonctionner. Tous, n'allez nulle part, et je vous verrai dans le prochain. 12. Maîtriser les prototypes interactifs dans Figma: Dans la vidéo précédente, nous avons configuré nos écrans pour commencer à nous connecter à notre prototype et à transformer notre vision en idées. Pour ce prototype, le flux commence à partir de l' image du chapeau sur la page d'accueil. Tout d'abord, agrandissons le cadre d'accueil pour afficher l'image qu'il contient. Notre contenu n'est pas visible en dehors du cadre, mais c'est ce que nous voulons, car cela permet à la zone de faire défiler l'étiquette dans cette fenêtre lorsque nous la configurons pour le faire défiler Ce chapeau avec la bande bleue étiquetée campagne est l'article que je souhaite connecter à notre prochain écran. le panneau de droite, vous trouverez un prototype d'étiquette à onglets. L'écran d'accueil étant sélectionné, appuyons sur le prototype. Lorsque vous appuyez sur les éléments du cadre en mode prototypage. Vous verrez des contours de formes comportant des cercles, et lorsque vous les survolez, ils se transformeront en signes positifs Il s'agit des points de connexion où vous pouvez faire glisser des flèches vers les autres écrans pour créer une interaction. Ajoutons cette connexion depuis l'en-tête de la page d'accueil vers la page détaillée de notre produit. Lorsque vous établissez cette connexion, vous verrez cette fenêtre contextuelle qui vous permet de sélectionner le type de déclencheur dans lequel vous naviguez et le type d' interaction que vous souhaitez En appuyant sur cette zone d' interaction, nous aurons différentes options. L'action que je recherche, c'est du push. Lorsque la touche est sélectionnée, quatre flèches différentes indiquent le sens de la poussée. Je vais sélectionner la première flèche. Sur la flèche de retour de la page détaillée du produit, nous ajouterons cette intégration push ou interaction push qui se connecte à notre page d'accueil. Nous allons sélectionner la deuxième flèche pour nous donner le comportement de poussée opposé Soyons magnifiques et parfaits à mes yeux. Ensuite, je vais mettre à jour le cadre de la maison pour qu'il revienne à hauteur de 844 en ajustant la hauteur dans le panneau de conception situé sur le côté droit Ajoutons maintenant la zone défilante. Sélectionnez le home frame et collez le prototype sur le côté droit. Nous allons sélectionner le défilement vertical dans la zone de comportement du défilement. Cela permettra de faire défiler le cadre. Nous voulons que l'en-tête et la barre de ruban restent en place. Nous allons donc sélectionner l'en-tête, retourner au panneau de prototypage et sélectionner la position fixe dans la zone de comportement du défilement Ensuite, nous allons sélectionner la barre de ruban et, dans le panneau de prototypage, sélectionner Corriger dans la zone de comportement du défilement Réglons le flux pour qu'il n'y ait pas de défilement. Pour la page détaillée du produit, nous voulons également nous assurer que le contenu est bien défini en réglant le cadre à la verticale. L'en-tête de cette page doit également être corrigé ainsi que le bouton Ajouter à la carte. Nous allons faire la même chose que sur l'écran d'accueil en sélectionnant l'en-tête et en modifiant le réglage dans le panneau de prototypage pour fixer la position avec le trop-plein réglé sur aucun Nous le ferons à la fois à partir de l'en-tête et du bouton Ajouter deux cartes. Il est temps de prévisualiser notre design et de voir comment il fonctionne. Le défilement devrait être parfait. Et si vous collez du ruban adhésif sur la tête, vous devriez voir le produit pousser sur la page. Votre design ne défile pas, vérifiez vos couches. Vous devriez voir une zone indiquant des défilements, et vous devez vous assurer que les bonnes couches se trouvent sous cette zone de défilement. Si vous ne voyez pas l' option de correction dans le panneau de droite, essayez de faire glisser l' élément vers la zone sous correction dans le panneau des couches sur la gauche Dans la vidéo suivante, nous allons configurer notre interaction avec le bas de la feuille en utilisant des superpositions et une interaction avec des chiffons. 13. Prototypage avancé dans Figma: Dans la vidéo précédente, nous avons mis en place une page d'accueil défilante et une interaction dactylographiable ou dactylographique pour la page détaillée de notre produit Passons aux superpositions de la feuille inférieure et aux interactions médicamenteuses simples Nous avons déjà placé tous les éléments sur la feuille inférieure, nous allons donc maintenant les connecter. À partir de ce lien sur la vente au détail du produit, je veux coller dessus pour faire apparaître la feuille inférieure. Cette feuille inférieure contient des informations supplémentaires sur la façon dont les matériaux sont produits et obtenus. Je l'ai conçu comme une feuille inférieure parce que quelqu'un ne peut le coller que s'il souhaite en savoir plus. La feuille inférieure comporte une notation horizontale et verticale pour afficher plus d'informations dans un espace restreint. Commençons par connecter ce prototype. Je vais ajouter un rectangle au-dessus du plutex en tapant la lettre R sur le Supprimons ensuite le remplissage en sélectionnant la forme du rectangle, puis sur le panneau de droite, le remplissage à zéro ou en le retirant avec une taille négative Une fois le rectangle sélectionné, passez au prototype du stylet et connectez le rectangle à la petite feuille inférieure avec le Dans le menu contextuel, nous voulons sélectionner la propriété et sélectionner Move in Sélectionnez la dernière icône de la flèche pointant vers le haut. Dans la zone de réglage de la superposition, sélectionnez l'option située en bas au centre, qui correspond également à la dernière icône Vous devez sélectionner les deux options de fermeture lorsque vous cliquez à l'extérieur et que vous ajoutez un arrière-plan. Ce paramètre indique l'endroit où apparaîtra la feuille inférieure, ainsi que le comportement à suivre si l'utilisateur efface la feuille inférieure si l' utilisateur tape à l'extérieur de celle-ci. L'arrière-plan fait référence à l'effet dégradant qui recouvre l'écran lorsque la feuille de boutons est activée Voyons à quoi ça ressemble. Vous pouvez voir qu'il remonte par le bas. Et quand je tape en arrière-plan, la feuille inférieure redescend, et c'est exactement ce que nous voulions. Ensuite, faisons défiler la première série d' images de la feuille inférieure à l'horizontale. Nous avons fait un défilement vertical lors de la dernière conférence, ce concept nous est donc familier Mais maintenant, nous pouvons définir l'ensemble d'images intitulé scroll horizontal en sélectionnant le groupe d'images et en réglant le trop-plein sur horizontal Appliquons également le même effet horizontal à l'autre feuille inférieure. Commençons par le faire, et cela semble fonctionner comme prévu. Ajoutons ensuite cette interaction de glissement depuis la poignée supérieure de la feuille inférieure. Sélectionnera la poignée supérieure et, dans la section prototype, connectera la poignée supérieure à la feuille inférieure la plus haute Nous allons changer l' interaction en, et nous allons sélectionner Swamp Overlay et Smart Nous appliquerons les mêmes paramètres à la feuille inférieure la plus haute relier à la plus petite feuille inférieure Sur le cadre de feuille inférieur le plus haut, nous allons sélectionner le contenu à faire défiler verticalement, et nous allons tester notre design 14. Projet de classe: Bonjour et bon retour à tous. Dans cette conférence, nous allons discuter de vos devoirs de classe ou de votre projet de classe. Le projet de cours pour vous sera le suivant : vous devrez réaliser un prototypage papier pour n'importe quelle idée, produit ou design Laissez-moi vous montrer de quoi je parle. Comme vous pouvez le voir à l'écran, voici quelques exemples de prototypage papier Et n'oubliez pas et n'oubliez pas que nous en avons déjà parlé dans certaines des conférences précédentes. N'hésitez pas à faire du prototypage papier pour chacune de vos idées. Ne vous inquiétez pas si vous savez dessiner ou non. Le prototypage papier est très simple, et tout le monde peut le faire. » Supposons que vous puissiez simplement faire un prototypage papier en un simple croquis, que vous puissiez personnaliser votre prototypage papier, à votre guise et selon vos Le but ultime de ce projet de cours est de vous aider à démarrer votre parcours de conception UX. C'est bon. Une fois votre prototypage papier terminé, cliquez sur l'image ou joignez la capture d' écran dans la section projet pour obtenir votre certificat C'est tout pour cette conférence et je vous souhaite le meilleur pour votre projet ou vos devoirs. Et n'hésitez pas à me poser n'importe quelle question si vous en avez. Très bien, je te verrai dans un autre. 15. Vous avez réussi ! Moment de clôture: Merci beaucoup d'avoir suivi ce cours. J'espère que vous comprendrez maintenant en toute confiance comment le prototypage s'intègre dans votre processus de conception global et comment vous pouvez obtenir la meilleure interface utilisateur et donner vie à votre design Pour en savoir plus sur moi, rendez-vous sur mon lien et suivez-moi. Vous pouvez consulter mon autre cours sur le design graphique dans Canva J'aimerais en savoir plus sur projets sur lesquels vous travaillez et je serais heureuse de répondre à toutes vos questions. Merci encore et bonne conception.