Transcription
1. Bande-annonce: Salut. Je m'appelle Patricia Reiners, je suis UX/UI designer basé à Berlin. Mon objectif est de créer des expériences interactives pour l'avenir pour les applications en ligne mais aussi pour les applications mobiles. J' ai pu travailler avec de nombreuses entreprises comme Google ou Adobe, mais aussi des startups, des agences et des entreprises dans le monde entier. Mon travail est constamment à la recherche de nouvelles façons d'explorer, concevoir et de résoudre des problèmes pour l'avenir. Je vais devoir partager mes connaissances à travers des conférences,
des ateliers, mais aussi partager mes connaissances à travers des podcasts, d'autres sources et des interviews. Le podcast s'appelle Future of UX. Lorsque je conçois et résolve des problèmes pour mes clients, je devrai construire des prototypes rapides et faciles qui devront tester rapidement des idées. Dans ce cours, vous apprendrez comment trouver vos propres idées pour les interfaces du futur dans votre cuisine, comment construire des prototypes vraiment rapides, et comment les tester avec de vrais utilisateurs. Nous allons passer en revue toutes les étapes
du processus afin qu'il vous soit facile de suivre. Nous parlerons des bases du prototypage et nous apprendrons différentes méthodes. En tant que projet final, vous construirez votre propre prototype pour un objet dans votre cuisine. N' importe qui peut construire un grand prototype. Vous n'avez pas besoin de connaître des compétences particulières et cela n'impliquera aucun codage. Ce cours est idéal pour les concepteurs qui viennent de commencer avec conception de
l'expérience utilisateur ou toute personne qui travaille dans le domaine des produits numériques. Commençons.
2. Aperçu du cours et du projet: Bonjour et bienvenue au cours prototypage pour les interfaces futures. Je suis [inaudible] et je suis votre instructeur pour ce cours. Je suis dans l'industrie du design depuis près de sept ans maintenant et travaillé pour de nombreux clients différents pour beaucoup de startups, mais aussi pour des marques plus grandes comme Google et IKEA. En tant que président créatif chez Adobe, j'ai exploré les interfaces numériques et prototypé de nombreux produits pour l'avenir. Ce cours vous fournira tous les contours dont vous avez besoin pour un prototype UX clair et productif. Vous comprendrez comment prototypes et tester rapidement vos idées, ce qui vous aide à prendre de bonnes décisions de conception, donc avoir les compétences nécessaires pour construire de bons prototypes est très précieux pour chaque concepteur. Cela vous aidera à trouver des emplois et à économiser du temps et de l'argent de vos clients. Nous allons diviser le processus en une seule étape afin de recueillir les bonnes idées, les bons commentaires au bon moment. Vous travaillerez sur votre projet pendant ce cours, vous trouverez un problème que vous voulez résoudre, esquisser l'expérience utilisateur, et tester si votre idée résout vraiment le problème. Vous pouvez soit travailler sur votre propre projet, soit simplement suivre les leçons par vous-même. J' ai également préparé une feuille de travail pour vous, alors n'hésitez pas à l'imprimer et à l'utiliser tout au long du cours. En fait, j'ai intégré trois exercices tout
au long du cours et il est super facile de les suivre avec la feuille de travail. Cette classe est idéale pour les concepteurs, marketing, les responsables de produits, les développeurs et tous ceux qui participent à l'élaboration une expérience utilisateur exceptionnelle et qui veulent être en mesure de tester leurs idées dès le début du processus. Vous aurez une meilleure compréhension du test de votre prototype, ce qui vous permettra de concevoir, d'évaluer et d'itérer l'expérience utilisateur. Vous apprendrez certainement beaucoup pendant ce cours, mais vous aurez aussi beaucoup de plaisir. Je peux te le promettre, alors allons-y.
3. Le processus de conception: Avant de commencer le prototypage, je veux partager avec vous pourquoi le prototypage est si important dans le processus d'expérience utilisateur. Qu' est-ce que l'expérience utilisateur et pourquoi le prototypage est-il si important ? L' expérience utilisateur, courte UX, est l'émotion et l'attitude d'une personne à l'égard de l'utilisation d'un produit, d'un système ou d'un service particulier. Lorsque nous concevons des produits, il est super important de s'assurer que ces produits
résolvent réellement un problème pour l'utilisateur et qu'ils sont utiles pour l'utilisateur. Sinon, l'utilisateur ne va pas l'utiliser, donc vraiment simple. Avec un prototype, vous pouvez le vérifier
au tout début pour vous assurer que vous suivez le bon chemin. Si nous regardons en arrière, de nombreuses équipes de conception ont utilisé la méthode des chutes d'eau. Il s'agit d'une rue à sens unique avec peu de rétroaction et de prototypage inclus. Les équipes de conception ont réalisé au cours de la dernière décennie qu'elles doivent être une autre meilleure façon de tester les idées d'abord et réaliser dès le début du processus si les choses fonctionnent à la fin parce qu'avec la méthode de cascade, une
fois est en phase de test, il est très difficile de revenir en arrière et de changer ce qui a déjà été dans la phase de conception. Aucun logiciel de travail n'est produit jusqu'à
la fin du cycle de vie si élevé de risque et d'incertitude. L' approche de conception centrée sur l'homme est très différente parce que l'être humain est au centre de l'ensemble du processus pour l'ensemble du projet et il aide à traiter les retours le plus tôt
possible parce que l'utilisateur est impliqué dans chaque étape de le processus. Ce qui est intéressant ici, c'est que cette approche consiste améliorer toute l'expérience tout au long du processus, allant et en avant et en arrière. Vous incluez la recherche des utilisateurs en plusieurs étapes tout au long de votre projet, alors il est très important de vraiment écouter l'utilisateur et de comprendre ses besoins et ses souhaits, et de vraiment comprendre ce qui les aide à
procéder à une tâche spécifique ou généralement comprendre leur vie quotidienne. Cela vous aide à la fin à concevoir quelque chose dont l'utilisateur a vraiment besoin. C' est une méthode non linéaire, sorte que vous pouvez revenir au prototypage encore et encore. Je fais beaucoup de tests et de prototypage pour différents projets. Ici pouvez-vous voir un prototype que j'ai conçu pour une interface de réalité augmentée ? L' utilisateur pouvait glisser à travers différents événements, soit d'accord sur la participation ou les supprimer et cela a
vraiment fonctionné avec le premier prototype papier parce que j'ai eu quelques commentaires et tests précoces avec les utilisateurs. Beaucoup de prototypes que je construis sont très futuristes et difficiles à construire, donc le prototypage et les tester en premier lieu est essentiel. Cela peut être des interfaces pour les produits, pour la réalité augmentée, pour la réalité virtuelle et Debian, donc même la voix dans ces interfaces et je vais partager sur ces technologies immersives dans un autre cours, mais dans ce cours nous allons nous concentrer sur le prototypage s'il s'agit la même méthode pour n'importe quel support que vous utilisez.
4. Tâche : idéation dans votre cuisine: Nous avons déjà parlé du sujet de ce cours, qui est tout sur le prototypage pour l'interface future dans votre cuisine. A propos de la résolution d'un problème dans votre cuisine pour un objet. Donc, la tâche au cours de ce cours sera de reconcevoir une interface dans votre cuisine. Imaginez-moi être votre client et vous donner le mémoire, s'il vous plaît aider l'utilisateur à utiliser plus d'ingrédients frais et produire moins de déchets alimentaires. Je suis devenu super conscient du sujet et, oui, en travaillant avec [inaudible] continue de me concentrer sur ce domaine. Nous avons déjà parlé du sujet de ce cours, qui est tout sur le prototypage pour l'avenir, sur la résolution d'un problème dans votre future cuisine. La tâche au cours de ce cours sera de redessiner une interface dans votre cuisine. Voilà la tâche. Allez dans votre cuisine, prenez sept minutes pour vraiment regarder autour de vous, cherchez d'autres objets que vous utilisez sur une base quotidienne, choisissez un, vous pensez, oui, ce qui est le plus intéressant et où vous pensez que la plus grande salle pour des améliorations pourraient se produire, puis revenir et nous passerons à la section suivante.
5. Regardez-moi travailler : idéation: J' espère que vous avez trouvé un objet intéressant pour vous. Voici quelques-uns que vous pouvez trouver dans généralement toutes les cuisines. N' hésitez pas à choisir l'un d'entre eux, mais vous êtes complètement libre. Vous pouvez en choisir un avec une interface ou même sans interface et trouver une toute nouvelle idée. Après avoir choisi un objet, nous allons chercher des problèmes. J' ai choisi le réfrigérateur. La tâche est maintenant de prendre des post-its et d'écrire autant de problèmes que vous pouvez penser. Ce qui pourrait aider, c'est de penser à la dernière fois que vous avez utilisé ces objets et de réfléchir à ce qui s'est mal passé. Prenez autant de temps que vous voulez, mais je peux vous recommander environ 10 minutes. Prenons quelques post-its et notons tous les problèmes que nous pouvons trouver. D' abord, parfois on ne trouve pas de choses dans le frigo, c'est vraiment difficile. Parfois, vous mangez quelque chose que vous avez prévu pour un autre repas, ou quel pourrait être un autre problème ? Vous ne savez pas ce que vous avez déjà ouvert, alors vous ouvrez quelque chose deux fois. Les choses vont mal parce que vous ne savez pas quoi cuisiner
avec, avec les restes, par exemple. Parfois, c'est juste vraiment chaotique ou vous oubliez ce que vous avez acheté et l'acheter à nouveau, ou qu'il reste dans le réfrigérateur et que vous l'avez complètement oublié, ou que vous mangez accidentellement de la nourriture de vos colocataires ou quelque chose comme ça, qui n'est pas vraiment à toi. Mettons tous les post-its sur le mur afin que nous ayons un meilleur aperçu de tous les problèmes que nous avons rencontrés. C' est généralement super utile. Jetons un coup d'oeil à tous les problèmes que nous avons rencontrés. Voici quelques problèmes que j'ai rencontrés. Nous allons choisir l'un de ces problèmes maintenant. N' hésitez pas à choisir l'un des problèmes que vous avez notés, mais vous pouvez également utiliser l'un de mes problèmes que je suis complètement d'accord avec cela. Avez-vous choisi un problème ? Comment pouvons-nous résoudre ça maintenant ? J' ai choisi le problème qu'il est vraiment difficile pour les gens de voir ce qu'il y a à l'intérieur du réfrigérateur et de trouver des recettes intéressantes, mais ils peuvent faire avec les choses qu'ils ont dans le réfrigérateur, ce qui est en fait un gros problème. Beaucoup de choses remontent sans vraiment s'en rendre compte. Vous pouvez également travailler sur le même problème, mais n'hésitez pas à utiliser votre propre problème ou votre propre objet. Choisir un objet que vous utilisez tous les jours facilite la résolution de l'un des problèmes. Nous allons construire un prototype et tester si l'idée que
nous allons aborder dans la prochaine demi-heure fonctionne. Ne vous inquiétez pas de la faisabilité, utilisez votre imagination. ne s'agit que de l'innovation et de l'avenir. Maintenant, nous allons chercher des idées, comment résoudre ce problème avec une interface numérique. Reprenons les post-its et remuons des idées. Peut-être qu'on a déjà une idée en tête. Sinon, faites un remue-méninges et réfléchissez à autant d'idées que vous le pouvez. Prenons les post-its et réfléchissons aux idées. Par exemple, nous pourrions faire des photos de nos ingrédients et
obtenir des recommandations comme ce qu'il faut faire avec cela. Nous pouvons montrer les ingrédients à l'extérieur du réfrigérateur, par exemple. On pourrait organiser le frigo, pour que ce soit plus facile. En fait, on a tellement de choses qu'on pourrait faire. Nous pourrions personnaliser les recettes concernant les ingrédients. Pensez à autant d'idées que vous le pouvez. Mettons-les sur le mur. Mes idées sont en fait assez, assez basiques, mais vous pouvez aussi venir avec des idées futuristes vraiment cool aussi. Voici quelques-unes des idées que j'ai trouvées. Je vais aller avec l'idée en fait de montrer les ingrédients à l'extérieur du réfrigérateur et ensuite aider l'utilisateur à trouver des recettes intéressantes, donc une sorte de générateur de recettes intelligent. Mon idée est en fait d'intégrer une fonctionnalité dans le réfrigérateur avec laquelle l'utilisateur peut voir à l'extérieur ce qui est dans le réfrigérateur, puis sélectionne les recettes qu'ils veulent réellement pour l'ensemble du processus de cuisson, et peut sélectionner les différents ingrédients qu'ils veulent y intégrer.
6. Qu'est-ce que le prototypage ?: Avant de commencer à construire notre prototype, avec notre idée que nous avons en tête, parlons brièvement des bases du prototypage. Les prototypes vous aideront à démontrer et à communiquer vos idées avec d'autres personnes. Il peut s'agir de vos collègues, parties prenantes ou utilisateurs pour tester les utilisateurs et vous aider à économiser du temps et l'argent parce que vous n'avez pas besoin de construire l'ensemble du produit, mais commencer par un prototype simple et bon marché. Vous pouvez le tester et apprendre beaucoup avant de vraiment construire le produit final. Ne vous inquiétez pas, si vous n'êtes pas un concepteur, importe qui peut construire un prototype rapide de sorte que vous n'avez pas besoin de compétences particulières pour cela. Qu' est-ce que le prototypage rapide ? Le prototypage rapide est un processus itératif. Cela signifie que c'est répétitif. Le processus est utilisé pour visualiser à quoi ressemblera un site Web ou une application afin d'obtenir les commentaires et la validation des utilisateurs, des
parties prenantes, des développeurs et des concepteurs. Quand il est bien utilisé, prototypage
rapide améliorera la qualité de vos conceptions en améliorant
la communication entre les différentes parties en réduisant le risque de construire quelque chose que personne ne veut dire comme ça vraiment simple. De quoi avez-vous besoin pour le prototypage ? Un prototype n'est pas conçu pour être une version entièrement fonctionnelle d'un système, mais seulement pour aider à visualiser l'expérience utilisateur du produit final. En tant que partenaire Google Venture Design, Daniel Burka dit, « le prototype idéal devrait être Goldilocks qualité. » Si la qualité est trop faible, les gens ne croiront pas vraiment que le prototype est un vrai produit. Si la qualité est trop élevée, vous travaillerez toute la nuit et vous ne finirez jamais probablement. La qualité ne devrait pas être trop élevée, pas trop faible, mais juste juste. Vous pouvez prototyper non seulement des écrans, des applications ou des sites Web, mais presque tout. Le prototypage est une excellente méthode pour tester les conceptions. Quels que soient les designs que vous concevez. Vous pouvez déjà commencer à réfléchir au type d'écrans ou d'interfaces dont
vous avez besoin pour intégrer dans votre prototype et vraiment tester votre idée.
7. Exemples de prototypage: Jetons un coup d'oeil à quelques exemples. Ici, par exemple, vous voyez certains prototypes que McDonald's a fait. Leurs employés de cuisine le long d'un court de tennis vide. Ils utilisent la craie pour cartographier tous les arrangements possibles pour les restaurants, diverses applications de cuisine et les stations de préparation. C' était en fait un test utilisateur super essentiel. Ils ont testé cette façon, qui était la plus efficace et la meilleure mise en page pour accueillir tous les gens. Un autre très bon exemple est l'invention de l'aspirateur Dyson parce que l'inventeur a fait environ 500 prototypes avant le résultat final qu'ils ont vendu.
8. Méthodes de prototypage analogique: Nous avons un problème, nous avons une idée pour résoudre cela, alors parlons des méthodes de prototypage. Il y a en fait beaucoup de méthodes différentes là-bas car il y a littéralement un nombre infini de façons que vous pouvez construire certains prototypes, et je vais vous guider à travers différentes méthodes analogiques. Maintenant, nous allons commencer avec vraiment facile une fois, donc ce sera vraiment bon pour vous d'entrer dans le sujet. utilisation de ces méthodes vous aidera à commencer votre processus de construction sur ces prototypes afin de mettre l'accent sur vos utilisateurs, de
décider de cela et d'affiner vos idées et de tester vos solutions, toutes les choses que nous avons déjà apprises dans leurs chapitres précédents. Mais la chose la plus importante à propos votre prototype est que vous en construisez un avec lequel l'utilisateur peut vraiment interagir et vous donner les informations dont vous avez besoin. Nous allons travailler sur une interface maintenant, et surtout pour les produits numériques comme les applications mobiles, sites Web et les services Web, ainsi que pour d'autres produits ou expériences basés sur écran, il faut souvent créer une gamme de méthodes de prototypage pour tester la conception finale et le développement. Commençons par des prototypes en papier. Les interfaces papier sont pratiques dès les premières étapes du prototypage pour les produits numériques, et vous pouvez créer des prototypes papier en les esquissant ou en
dessinant et découpant des parties utilisables d'une interface comme le champ de texte, ou une goutte menu bas, etc. C'est vraiment facile et le moyen parfait de commencer. Jakob Nielsen, co-fondateur du groupe Nielsen Norman, explique que les prototypes de papier sont extrêmement faciles et bon marché, pourquoi ? Ils peuvent vous fournir de nombreuses informations qui peuvent vous aider à économiser de l'argent en fin de compte. Lors de la conception de produits numériques, vous pouvez être tenté de créer des prototypes
super détaillés directement sur votre ordinateur et commencer à échanger ces problèmes immédiatement. Mais ce qui est vraiment utile, c'est vraiment des interfaces papier. Cependant, vous pouvez découvrir de nombreux domaines d'amélioration, tels que les problèmes de convivialité, par exemple, ou même améliorer l'ensemble des idées ou repenser l'ensemble de la structure. C' est génial pour les premières étapes, et il évite vraiment de perdre du temps ou qui produisent trop de coûts. La deuxième chose est le storyboard. C' est une autre technique géniale et facile en dessinant un storyboard. Raconter des histoires est une excellente façon de guider les gens à travers une expérience utilisateur, et le storyboard est la technique dérivée de l'industrie cinématographique. C' est quelque chose que vous pouvez utiliser pour le prototypage précoce pour vous
permettre de visualiser le parcours de l'utilisateur, ou comment les utilisateurs rencontreraient un problème ou un produit, par exemple. Lorsque vous dessinez un storyboard, essayez d'imaginer l'expérience utilisateur complète, puis capturez-le dans une série d'images ou d'esquisses. Je peux vous recommander autour de six croquis sont vraiment utiles. storyboarding en tant que méthodes de prototypage garantit que nous connaissons assez bien nos utilisateurs. Il ne sera pas difficile d'esquisser un storyboard autrement. Cela nous permet de garder à l'esprit le contexte des solutions que nous concevons. Il est très utile pour le développement et une meilleure compréhension des utilisateurs et pour générer des idées et des discussions de haut niveau. Mais les storyboards ne sont pas très utiles pour affiner les détails des produits, parce que le dessin a tendance à être plus comme microscopique, donc un peu plus grand. Ici vous pouvez voir un storyboard que j'ai trouvé. Comme vous pouvez le voir, j'ai dessiné six étapes
simples, comme sur post-it, super simple et super rapide. De l'utilisateur achetant des produits au supermarché, tout
mettre dans le réfrigérateur, puis prendre des notes sur le réfrigérateur et l'interface, ce qu'il a réellement mis à l'intérieur du réfrigérateur, puis le problème se produit où les choses de l'utilisateur comme, « Que dois-je manger ? » Ensuite, vous pouvez déjà trouver les solutions où il obtient des recettes en dehors du réfrigérateur, qu'il peut cuisiner. Puis à la fin, utilisateur heureux donc il cuisine quelque chose qu'il aime vraiment avec des ingrédients que vous avez dans le réfrigérateur. C' est une façon de faire ça. Passons au point numéro trois, qui est Lego. Nous savons tous que ça remonte à notre enfance, je suppose. Intégrer certains problèmes physiques peut être super utile pour visualiser une idée, et Lego est vraiment une façon génial de le faire. La meilleure partie de l'utilisation de Lego est de construire vos prototypes, c'est qu'ils deviennent faciles à comprendre et twick. Simple détacher une partie de vos prototypes Lego rapidement ici, créer un design alternatif et jouer avec elle pour voir comment cela fonctionne. Le point numéro quatre est un jeu de rôle. Si votre solution au problème est un service et ne se concentre pas beaucoup sur un écran ou une interface, et que vous pouvez indiquer un jeu de rôle et définir l'écran pour le client de manière à ce qu'il puisse rencontrer des pièces spécifiques, c'est la meilleure façon de le faire. Le jeu de rôle est super utile. Point numéro cinq, sont des modèles physiques. Si vos idées de produit physique, par exemple, un nouveau produit ou prototype physique super-utile. Le but d'un modèle physique est d'apporter une idée immatérielle ou esquisse
bidimensionnelle dans un plan de plaques tridimensionnelles physique. Cela permet de meilleurs tests, refuse d'éditer les discussions de Ginsburg sur le facteur de forme de la solution. Ici vous pouvez voir un prototype que j'ai conçu pour un sac à dos il y a quelques années. point numéro six est le Magicien d'Oz. Le Magicien d'Oz est un excellent moyen de tester votre prototype. Peut-être que vous connaissez déjà l'histoire du Magicien d'Oz. La façon la plus simple de mener des tests Wizard of Oz est construire un prototype simple et facile à utiliser qui permet à
l'assistant de réagir rapidement aux gestes de l'utilisateur sont réellement conçu réponse d'un simple clic par exemple. prototypes Wizard of Oz sont des prototypes avec des fonctions fausses. Par exemple, l'interactivité qui provient d'un humain
plutôt que d'un algorithme ou d'un code logiciel, les utilisateurs croyant que ce dernier est le cas. Vous pouvez l'utiliser pour tester avec vos utilisateurs. Par exemple, si vous prototypez une conception vocale ou une interaction spécifique, et que Wizard of Oz fonctionne réellement comme ça, un utilisateur clique sur un bouton spécifique, mais il n'y a en fait aucune fonctionnalité derrière cela, mais quelqu'un dans le fournit vraiment l'information. C' est vraiment utile et vraiment facile de tester vos idées.
9. Tâche : prototypage papier: Vous pouvez construire un prototype pour cela. J' ai fait du développement par exemple, mais aussi pour la communication pour aligner la vision d'idée de votre équipe de conception, par exemple, parce que parfois vous parlez tous de la même chose, mais comprenez que vous parlez en fait complètement idées différentes. Ainsi, vous pouvez également communiquer votre idée à ; pourrait être un collègue ou quelqu'un travaillerait pour un client beaucoup plus facile avec un prototype qu'avec une description écrite d'une idée. Donc apprendre et tester. Si vous construisez un prototype pour l'apprentissage, assurez-vous de le construire de manière que la zone de test vous aidera vraiment à comprendre et à obtenir les informations dont vous avez besoin. Nous avons commencé par rechercher les besoins des utilisateurs, puis réfléchir aux solutions possibles. Ce qui est vraiment important est de toujours s'assurer de vous
poser des questions sur le prototype vérifie vraiment le besoin de l'utilisateur. Par exemple, si votre hypothèse au début était que l' utilisateur gaspille beaucoup de nourriture parce qu'il ne sait pas quoi cuisiner avec les overs gauche, et l'hypothèse est qu'un outil où vous pouvez obtenir des recettes ajustées pour la nourriture que vous avez dans le réfrigérateur, bon espoir, vous pouvez vérifier ces hypothèses en fait en construisant un prototype de papier où vous pouvez montrer ces ingrédients et tout ce qui est à l'intérieur du réfrigérateur, extérieur avec des recettes spécifiques et ensuite inviter les gens pour tester votre prototype et les regarder et écouter, poser la bonne question. Voici donc la tâche pour vous. Pensez aux écrans et aux informations dont vous avez besoin pour prototyper votre idée. Vous pouvez dessiner différents écrans et construire votre propre prototype de papier en concevant un seul écran. Pensez toujours aux interactions et au type d' information dont vous avez réellement besoin pour montrer votre idée. Je vais mettre en avant mes idées, alors n'hésitez pas à regarder et à prendre toutes les informations dont vous avez besoin. Mon idée est en fait d'utiliser un frigo intelligent, qui vous montre d'autres ingrédients qui sont à l'intérieur et à l'extérieur. Cela aide les gens à ne pas oublier leur nourriture et aussi fournir des recettes pour les ingrédients qui sont à l'intérieur du réfrigérateur. Donc, cela vous montre quels ingrédients devaient être consommés en premier et venir avec de très bonnes recettes que l'utilisateur aime. Donc, nous verrons comment ça se passe. Commençons.
10. Travaillons ensemble : prototypage papier: Commençons par le prototype en papier. Je commence habituellement, en fait, en pensant à quel genre d'écrans ai-je besoin. J' ai certainement besoin d'un écran avec pour l'écran d'accueil ou pour toutes les informations de base que l'utilisateur voit en premier. Ensuite, j'ai besoin d'un écran avec la sélection de la recette parce que la principale caractéristique de ce sera en fait que l'utilisateur obtient des recettes personnalisées avec les choses dans le réfrigérateur. Puis aussi, quelque chose où l'utilisateur peut voir la recette, à travers les sélections de la recette, comment cela ressemble. Je vais commencer par ces trois écrans et penser maintenant aux éléments dont j'ai besoin sur chacun de ces écrans, ou feuille de papier pour le moment. La première caractéristique sera en fait que, vous voyez quel type d'ingrédients que vous avez à l'extérieur et aussi voir quand il expire. Quand doit-il être mangé ? Vous pourriez le faire avec un code couleur. Sera également refléter différents rôles et je vais faire que les références ici, par exemple. Si les ingrédients peuvent être consommés en plus d'une semaine ou en une semaine ou en un ou deux jours. Il est urgent de manger cela et ensuite ils sont placés dans les différentes rangées. J'utilise post-it. C' est bien de les déplacer et tout. C' est aussi très utile pour les tests plus tard. Vous pouvez voir, je dessine juste quelques ingrédients et votre fromage, par
exemple, et les place dans différentes rangées ici. L' autre caractéristique est le générateur de recette. C' est un né vraiment important, où l'utilisateur peut choisir d'autres recettes, puis obtient post-ses recettes. L' idée est qu'ils peuvent mettre les post-its dans ces domaines à la fin. L' entrée numérique semble, bien sûr, un peu différent. Ensuite, vous avez des paramètres. Vous pouvez également faire quelques réglages sur la sélection de la recette. Boutons bien sûr, créez votre recette. Mes réglages seraient de la difficulté, et le temps et aussi la possibilité d'
ajouter d'autres ingrédients qui ne sont probablement pas dans le réfrigérateur, par exemple. Ensuite, ajoutez aussi plus d'ingrédients si c'est plus de trois. Si vous voulez intégrer quatre, cinq, ou six ingrédients, ou même plus. Ici, ingrédients qui ne sont pas inclus dans le réfrigérateur pour le moment. La prochaine est de penser à la façon dont une liste ressemblerait. Si l'utilisateur a commencé la création de la recette et obtient une liste et maintenant, je pense à comment cela devrait ressembler. J' ai certainement besoin d'une image de la recette et puis le nom pourrait être Ratatoiue, par
exemple, la difficulté, le temps ainsi, les ingrédients et peu d'image, quoi cela ressemble et, bien
sûr, quelque chose où vous pouvez remplir sur d'autres recettes. Je pourrais kludge actions, un bouton où je pourrais commencer à cuisiner cette recette tout de suite. Puis une autre recette qui pourrait être, par exemple, pâtes avec des légumes et puis le même type d'information ici, le même bouton et soumettre ceci. Ce serait une liste avec aussi l'option de plus d'informations si vous voulez voir les premières étapes avant de décider que vous voulez cuisiner cela. Vous pouvez voir qu'ils sont des fonctions de base. Je n'ai pas tout indiqué ici, mais seulement les bases, qui est de savoir comment créer une personnalisation de recette entière ressemble vraiment à la fin. Ensuite, je pense aussi à la façon dont l'écran ressemblerait si vous sélectionnez une recette. De quel type d'information avez-vous besoin ? Je vais y aller et penser à Ratatoiue, par
exemple, et penser à quel genre d'informations ai-je besoin. Je commence par des choses vraiment, basiques. Bien sûr, j'intègre celui que j'ai déjà fait quelque chose avec d'autres cartes. Vous pouvez voir avec difficulté et le temps et les ingrédients qui
affectent également les différentes étapes de cuisson que vous faites pour préparer cela avec aussi quelques images. Oui. Aussi, certains éléments de navigation, très important. N' oublie pas ça. Alors allons-y.
11. Adobe Xd : wireframing numérique: Prototypage numérique, cette leçon n'est qu'optionnelle. Vous n'avez pas besoin de concevoir un prototype numérique pour tester votre idée, mais si vous le souhaitez, nous pouvons le faire ensemble maintenant. Vous avez décidé de quel niveau vous êtes maintenant. Aujourd'hui, nous allons utiliser Adobe XD. Si vous décidez de numériser votre prototype, si vous voulez utiliser un autre outil de conception, hésitez pas à le faire. Tout ce que vous vous sentez familier avec, mais je recommande l'Adobe XD parce qu'il est gratuit et vous pouvez simplement télécharger très facilement. Je vais vous guider à travers ces trois étapes. abord, nous allons concevoir tous les éléments, puis nous allons les placer sur l'iPad et concevoir les écrans de signal, puis nous allons le prototype. Pourquoi les différents éléments sont-ils réunis ? Que c'est vraiment interactif. Après avoir téléchargé la version gratuite d'Adobe XD sur adobe.com, nous allons ajouter quelques fonctionnalités qui seront le kit d'interface utilisateur filaire. Vous pouvez trouver que ici juste téléchargé gratuitement, J'ai déjà téléchargé, Je ne vais pas le faire à nouveau. C' est gratuit et vraiment génial vous aide beaucoup sur le chemin que je dirais. Ensuite, ouvrez votre premier document, la taille de votre animal de compagnie iPad, quelle que soit la taille que vous allez utiliser pour les tests, je vais utiliser mon iPad. Ensuite, je vais ouvrir le kit d'interface utilisateur filaire et l'enregistrer dans le cloud, c'est très important parce que nous allons le connecter à notre conception maintenant. Je l'ai mis dans le nuage et puis je vais revenir à mon document, et je viens d'ouvrir et j'ai inséré, intégré le kit d'interface utilisateur filaire ici sur le côté, j'ai tous les éléments maintenant sur mon document original qui est vraiment génial. Commençons, je commence par l'écran d' accueil et
la conception de tous les éléments de base. abord, je commence par la nourriture qui est dans le réfrigérateur où je veux intégrer différentes rangées où vous pouvez voir quand il expire réellement. Si c'est plus d'une semaine, si c'est dans une semaine ou si c'est juste dans les deux ou trois jours, donc c'est urgent et ensuite tous les articles sont placés là automatiquement, c'est vraiment cool pour l'utilisateur de voir ce qui doit être mangé en premier. Ensuite, je veux intégrer quelques boutons choses avec tous les différents aliments et légumes et comme une petite icône. Ci-dessous, Je veux intégrer le générateur de recettes où les gens qu'ils utilisent un endroit où ils sont différents aliments là-bas, trois articles différents ou peut-être même plus et puis je crée, obtient une bonne recette, une recette intéressante ce correspond vraiment à cela. Je vais en quelque sorte trois, puis ajouter un signe plus afin qu'ils puissent intégrer peut-être plus de tous les ingrédients qu'ils ont, et aussi un bouton. Ce que vous pouvez faire maintenant est d'utiliser la bibliothèque ou de
les créer vous-même pour que ce soit vraiment votre décision, et ensuite je vais aussi vouloir intégrer quelques icônes ici, je les télécharge sur flaticonou sur les non-projets. Assurez-vous simplement que si vous vendez cela ou si vous donnez vraiment ce développement total, vous devez payer pour ces icônes, mais vous pouvez télécharger une version gratuite pour tester cela et vérifier si cela a vraiment l'air sympa, mais dans le prénatale, payer pour cela. Je vais le faire avec toute l'interface maintenant. Presque terminé, je suis allé au mode prototype et connecté tout ensemble qu'il soit cliquable et je peux vraiment glisser à travers toutes les diapositives et cliquer sur tous les boutons, ce qui est cliquable. Je dois tester ça maintenant sur mon iPad. Cela fonctionne déjà assez bien, j'ai besoin de concevoir tous les différents écrans, bien paraître. Maintenant, nous parlons très brièvement de la façon dont nous pouvons rendre cela interactif. C' est super facile, après avoir conçu tous les éléments sur le plan de travail, nous pouvons passer au prototype, c'est dans le coin inférieur gauche. Ensuite, nous sélectionnons un élément que nous voulons réellement rendre cliquable, nous obtenons ce petit fil et le déplacons vers le plan de travail, qui sera notre destination, dans ce plan de travail un ingrédient est placé dans le dossier de données. Nous pouvons faire quelques ajustements sur le côté et quel déclencheur nous avons. Nous voulons appuyer sur le déclencheur et ensuite comment nous voulons réellement que l'interaction soit ? Nous utiliserions tous les animés afin qu'il se déplace automatiquement de l'autre à l'autre état, cela ressemblera à cela à la fin, fonctionne assez bien. Maintenant, pour les tests, je peux vous recommander de télécharger l'application gratuite Adobe XD, vous pouvez certainement le faire super facilement sur votre appareil, quel que soit le type d'appareil que vous utilisez, vous pouvez voir que tout est interactif. Résumons cette application très brièvement, voici les principaux conseils et astuces pour utiliser l'outil de prototypage numérique comme Adobe XD. D' abord, vous commencez par concevoir tous les éléments, sorte que tous les éléments individuels dont vous avez besoin, cela pourrait être un bouton ou une barre d'onglets, un champ de saisie ou tout type d'éléments que vous utilisez. Les deux choses que vous avez déjà dessinées sur votre prototype papier, sur vos croquis. Ensuite, vous les avez déjà placés sur un plan de travail, vous vous assurez que leur place à la bonne position afin que l'ensemble du plan de travail semble vraiment correct, vous concevez tous les différents scénarios ainsi. Ensuite, la dernière étape est de rendre cela interactif, d'aller vraiment dans le mode prototype et de relier tous les différents éléments ensemble, de les rendre interactifs. C' est super facile en sélectionnant simplement l'un des éléments qui sera la chose, mais vous pouvez cliquer sur et ensuite déplacer le fil à la sortie, en fait est la destination. Ensuite, vous pouvez sélectionner le type d'interaction, par exemple, glisser-déposer ou interaction vocale ou un robinet ou quelque chose comme ça, vous pouvez également changer ou personnaliser le mode d'interaction. Cela pourrait être automatisé tout au plus, automatiquement de l'autre à la première position, ou d'autres points d'interaction différents. C' est super facile et vous avez un très bon résultat, avec pas trop de travail.
12. Adobe Xd : wireframing analogique: Vous pouvez également intégrer votre prototype papier en réalisant une image et en la plaçant sur le tableau d'art. Commencez simplement par prendre des photos de vos diapositives de prototypes en papier et de toutes les différentes étapes. Ensuite, il suffit de les mettre dans Adobe XD et de les placer sur les tableaux d'art uniques. C' est ce que j'ai fait ici. Vous pouvez voir toutes les pages. Puis je les ai placés sur le tableau d'art, et j'ai un peu ajusté la taille. Ils reflètent juste toutes les différentes étapes. Passons au mode prototype. Ce que vous pouvez faire maintenant est de simplement dessiner un rectangle sur la zone que vous voulez réellement animer et supprimer la couleur, et l'arrière-plan, et tout, aller au prototype, puis utiliser ce petit truc de fil et connecter cela à une autre sortie. Faites-le avec tous vos écrans uniques. Tout ce que vous voulez avoir interactif, comme les tomates ici. Nous allons déplacer les couleurs à nouveau, mais les rectangles restent là. Ensuite, allez au prototype et déplacez ça à l'autre tableau d'art. Tu fais ça avec tout. Presque prêt. Essayons ça très vite. Je peux cliquer sur ces choses. Il fonctionne presque comme un prototype numérique avec seulement un écran [inaudible], donc c'est un simple, parfaitement. Super, donc ça marche. Résumons cela très brièvement. La première chose est en fait que vous faites une photo de votre prototype de papier. Les éléments interactifs sont les choses que vous pouvez réellement déplacer. Vous devez prendre différentes photos de toutes les différentes possibilités, avec les différents ingrédients, par
exemple, sur les lieux. Après cela, vous insérez ces images dans Adobe XD et vous les placez sur un tableau d'art. À la fin, vous avez tous ces tableaux d'art sans éléments
numériques mais des images [inaudibles] du prototype papier. point numéro 3 est en fait que vous dessinez des rectangles
transparents sur les endroits qui sont interactifs, puis vous les connectez ensemble. Cela signifie que vous allez au prototype, sélectionnez ce rectangle transparent, puis sélectionnez le tableau d'art de destination, qui est très cliquable. Ensuite, lorsque vous testez cela, passez en mode aperçu, cliquez sur ce petit bouton de lecture. Vous pouvez voir que lorsque vous cliquez sur ce rectangle transparent, vous accédez automatiquement à l'autre tableau d'art. C' est interactif, même si c'est toujours un prototype. Super agréable de prototyper quelque chose, vraiment facile sans trop de temps et d'efforts.
13. Préparation des tests utilisateurs: Dans ce chapitre, nous allons parler de la façon de
mener des tests utilisateur et de recueillir des commentaires. Lorsque vous testez votre prototype, il s'agit de poser les bonnes questions. Permettez-moi de partager quelques conseils et astuces avant de commencer à tester nos propres utilisateurs. Il y a en fait quelques trucs et astuces simples qui aident les gens à se sentir à l'aise et à parler de ce dont ils ont besoin, ce qu'ils veulent, de ce qu'ils pensent. Mais avant d'entrer dans ce domaine, parlons de la façon de planifier et de préparer vos tests utilisateur avec votre prototype. Nous allons parler des personnes avec qui tester, où les rencontrer,
et aussi comment les rendre à l'aise pour obtenir des commentaires précieux. D' abord, qui. Décidez avec qui vous voulez tester le prototype. Au début, il est vraiment facile de tester avec des amis, de la famille ou des collègues. Eh bien, je vous recommande pour ce projet. Regardez autour de vous, si vous avez un ami ou un membre de votre famille avec qui vous pouvez tester, assurez-vous
simplement qu'ils sont liés au sujet. Dans le monde réel, vous recruteriez probablement de vrais utilisateurs. Mais ici, il fonctionne aussi avec votre cercle intérieur et vos amis et votre famille. Où, où allez-vous trouver vos utilisateurs ? Pensez également à l'environnement dans lequel vous voulez tester. Ça pourrait être dans un labo, la rue, peut-être dans le bureau, mais pour ce projet, il est logique de faire les tests où tout se passe, la cuisine. Parlons de la préparation très rapidement. Il est vraiment utile d'avoir des questions préparées. J' ai préparé une feuille de départ pour vous, alors n'hésitez pas à utiliser celle-ci pour la préparation et à préparer les questions sur cette feuille de travail. Nous allons passer par chacune des étapes très rapidement. N' hésitez pas à imprimer la feuille de calcul que j'ai préparée pour vous et utiliser les pages 3 et 4 pour les tests de l'utilisateur. Ce sera super utile pour vous d'écrire la question. Il y a aussi des zones pour prendre des notes. Ce sera super utile, mais nous allons passer par chacune des quatre étapes ensemble maintenant. Tout d'abord, ce qui est fournir le contexte. Les participants doivent examiner le prototype du bon point de vue. Avant de leur montrer le prototype,
je vais généralement leur poser quelques questions, simples à mettre en place la suivante pour m'assurer qu'ils approchent de la bonne mentalité en posant ces questions, même celles que je connais la réponse à, J'ai amorcé les participants pour la prochaine série de tâches. Imaginez que vous vouliez faire ça et ça. Imaginez que vous avez faim et que vous voulez cuisiner quelque chose, ce qui serait le plus important pour vous de savoir, par exemple. Deuxièmement, obtenez les premières impressions. Demandez à l'utilisateur des premières impressions. Quelle est la première chose qui attire votre attention sur ce prototype sur cette interface ? Que pensez-vous pouvoir faire avec cette interface ? Le point numéro 3 est observé. Donnez-leur une tâche. Par exemple, créer une recette sur cette interface parce qu'ils ont faim, puis les observer et vraiment répondre aux questions ce qui les distrait de l'achèvement ? Qu' est-ce qui les confond et aussi, à
quelle vitesse vont-ils accomplir la tâche ? C' est vraiment important, surtout l'observation est une chose super précieuse. Quatre, gros plan avec quelques questions finales. Avant de terminer l'entrevue, posez quelques questions finales pour vous assurer d'avoir toutes les informations dont vous avez besoin. Cela pourrait être, cette interface serait-elle utile pour vous et pourquoi ? Quoi d'autre serait utile pour vous ? Tu manques quelque chose ? Que ferais-tu normalement pour faire quelque chose comme ça pour terminer cette tâche ? Aussi, qu'est-ce qui vous a surpris ? En général, il est vraiment important de demander pourquoi vraiment
comprendre ce qu'ils pensent et ressentent. Voici la tâche pour vous. C' est le moment de tester votre prototype. Vous pouvez le tester avec votre prototype papier, mais aussi avec votre prototype numérique. N' hésitez pas à utiliser la feuille de calcul que j'ai préparée pour vous, n'hésitez pas à la télécharger et à préparer l'entrevue avant de commencer. Écrivez les questions que vous voulez poser, décidez qui vous voulez rencontrer, puis configurez tout pour le test et n'oubliez pas de prendre des notes. Peu importe ce que vous réalisez faire les tests écrire et nous
parlerons après vos sessions de test et réfléchirons aux prochaines étapes. Commençons.
14. Réflexions finales : points à retenir et conseils: C' est le moment idéal pour ajuster votre prototype. Qu' avez-vous appris dans le test utilisateur ? Des commentaires ? Qu'est-ce qui n'a pas marché ? Quand ils l'utilisent, certaines zones ne comprenaient pas vraiment, ce n'est pas un problème du tout. Vous pouvez simplement améliorer le prototype et répéter les tests après cela. Ensuite, vous pouvez passer au niveau suivant via le cadrage ou la conception de l'interface utilisateur, mais c'est un autre cours. Gardez à l'esprit que les meilleurs designers n'obtiennent pas le prototype parfait à la première fois. C' est plus rapide, mais pas parfait. perfectionnisme n'est pas la bonne approche. rétroaction est la chose la plus importante, tôt et souvent, alors assurez-vous que vous travaillez sur les mêmes problèmes. Qu' avons-nous appris dans ce cours ? En fait, on a beaucoup appris. Nous avons appris les bases du prototypage. Nous avons appris les différentes méthodes de prototypage, analogiques et numériques, et nous avons construit notre propre prototype et l'avons testé. Wow, en fait, c'est beaucoup. Vous pouvez être absolument fier de vous-même que vous avez terminé ce cours. A quelques reprises, par exemple, si vous collaborez avec des personnes dans d'autres équipes, je peux vous recommander quelques outils. Par exemple, Miro. C' est un outil vraiment cool pour faire des sessions postées à distance, c'est génial. Ou je peux vous recommander Zoom pour les tests utilisateur à distance, c'est aussi vraiment génial. Les gars, ce sont les derniers mots. J' ai hâte de voir tes prototypes. Je ne peux pas attendre [inaudible] quelles idées vous venez avec. Je suis super excité de voir ça. Merci beaucoup d'avoir suivi ce cours. C' était super amusant et vraiment génial. Vous pouvez être absolument fier de vous-même que vous avez terminé ce cours, et à bientôt les gars. Merci beaucoup d'avoir suivi le cours.
