Cours universitaire de conception de l'expérience utilisateur, introduction à la conception de l'UI et de l'UX, dispensé par un spécialiste universitaire de l'UX.

1. Introduction au cours: Bienvenue dans le cours 101 de conception de l'expérience utilisateur. m'appelle Erin Lawrence et je suis concepteur UX principal et fondateur d'une agence UX appelée UX Honey à San Francisco, en Californie. Je suis également instructeur UX. Ryan enseigne le design UX avancé à l'Academy of Art University, également ici à San Francisco. Très bien, commençons par un aperçu de haut niveau de l' introduction du cours. Et je vais couvrir tous les sujets que nous aborderons. accord, alors qu'est-ce que l'UX, quelles sont ses origines ? Et si vous le regardez, ce que je présente ici, c'est le U et le X provient de l'expérience utilisateur. Et les utilisateurs expérimentent exactement ce qu'il dit. Vous concevez des choses que les gens peuvent utiliser. C'est vraiment important à savoir. Et de nombreux cas pour lesquels vous n'êtes pas l'utilisateur des produits pour lesquels vous concevez. Vous devez sortir et apprendre autour de ces gens. Vous devez vérifier que la solution vous concevez fonctionne également pour ces personnes. Quelle est la différence entre l'UX commune et la terminologie de terme et d'interface utilisateur ? J'aime bien l'analogie qui est un cookie. conception de l'interface utilisateur dans l'analogie d' un cookie est le cookie lui-même. C'est à quoi ça ressemble. Il a l'air moelleux, il a l'air chocolat. Il n'est pas vert fluo et on ne dirait pas que ça va te rendre malade. La première chose que vous allez faire, c'est que vous allez manger avec vos yeux. Le cookie doit donc m' intéresser visuellement. Tout d'abord, je vois le biscuit. C'est beau et chaud, y a de la bonté au chocolat. Et puis je le mange. Quand quelqu'un m'a demandé comment était ce biscuit, je leur ai dit que c'était vraiment bon, mais j'aimerais qu'il y ait plus de raisins secs dedans. L'acte d'apprendre comment c'était. C'est l'UX qui demande à quelqu'un pourquoi et comment s'est passée cette expérience ? L'expérience utilisateur est-elle artisanale, tandis que l' interface utilisateur apprend comment créer des objets visuellement. J'espère que c'est utile. Mais juste au cas où, allons approfondir ce sujet de l'UX et de l'interface utilisateur. Quelle est la réussite de l'expérience utilisateur ? La conception réussie de l'expérience utilisateur permet de relier objectifs commerciaux aux motivations des clients et créer des solutions qui permettent d' obtenir de bons résultats pour les entreprises tout en résolvant les besoins des client. Il est donc important que vous compreniez les objectifs de l'entreprise, ainsi que les motivations du client. Et vous allez résoudre des problèmes qui profitent l'entreprise et résoudront également les besoins du client. Nous allons faire, c'est que nous allons réaliser la conception de l' expérience utilisateur 101 dans l'ensemble, c'est le même programme que celui que j'enseigne au niveau universitaire. Le résultat de cette étude est une étude de cas. Ce que vous allez apprendre, toutes les méthodes et les outils nécessaires pour réaliser une étude de cas UX solide. Laissez-moi passer en revue toutes les choses que nous allons traverser dans ce cours. Dans cette classe, vous apprendrez à définir des objectifs, à créer un personnage, à créer un script d' entretien utilisateur. Les meilleures pratiques lors de la recherche ont fait l'objet d'une synthèse des résultats de recherche. Comment rédiger une déclaration de problème, comment créer une carte du parcours client, esquisser des modèles et des frameworks. Comment créer une conception filaire, comment créer un prototype cliquable, comment effectuer des tests utilisateur, base des systèmes de conception, comment appliquer la conception visuelle à votre filaire et bonnes pratiques quand il s'agit de concevoir des CV. Très bien, allons jeter un coup d'œil à tout le matériel de classe que nous allons aborder dans la prochaine série de vidéos. Je vais fermer mon aperçu. Je vais venir à l'étude de cas. Je vais vous donner l'exemple de l' étude de cas à la fin. Et je vais rapidement parcourir tout le matériel que nous allons partager et tous les sujets que nous allons aborder. Mais vous pouvez le voir, voici tous les sujets exposés dans un seul site Web. Et encore une fois, c'est ce que j'enseigne à l'Académie des arts. La première chose que nous allons aborder ici c'est que nous allons assister à la réunion de lancement. C'est ici que vous parcourez tous les objectifs. Et les objectifs que nous aborderons seront les objectifs commerciaux. Je vais en parler. Les objectifs du produit, les utilisateurs et leurs objectifs, les parties prenantes. Ce sont des personnes qui ont un intérêt dans votre projet. Ce sont les clients que vous devez connaître à leur sujet, sont les personnes que vous effectuez des évaluations avec le risque auquel vous êtes confronté et comment atténuer ces risques. La prochaine chose que nous aborderons, c' est que nous allons examiner le cadre pour créer un personnage. Et le personnage ressemble à ça. Et nous apprendrons que ri, les persona sont importants, le processus de création d'un personnage. Ensuite, nous allons voir comment créer un script d'entrevue. Et j'ai aussi des modèles à vous donner. Vous pouvez donc télécharger certains de ces modèles et les remplir vous-même. Je vais vous apprendre à créer un script. Lorsque vous commencerez à en construire un, je vous donnerai un modèle à utiliser. Et vous pouvez remplir ce modèle de questions et vous pouvez passer à court et vous pouvez interroger les personnes qui vous intéressent. Et je vais également vous donner les meilleures pratiques des entretiens, comment sortir et interviewer les gens prendre des notes et enregistrer ces entretiens. De cette façon, vous pouvez revenir et faire la synthèse et le regroupement. C'est ici que vous prenez toutes les informations que vous avez trouvées au cours de la recherche et que vous y donnez un sens. Vous recherchez des motifs. Et ces modèles aident à orienter vos solutions ou les problèmes et à valider les problèmes auxquels vous essayez de faire face. Après cela, je vous apprendrai comment faire une déclaration de problème. Ainsi, après avoir appris les gens et les problèmes, vous pouvez répéter le problème. De cette façon, vous pouvez concevoir des solutions autour de ces problèmes validés. Après cela, nous allons apprendre la carte du parcours client. Vous pouvez venir ici et tracer le parcours dans lequel vous allez faire participer votre client. De cette façon, vous pouvez commencer à esquisser pour ce voyage et je vous en donnerai des exemples lors de chaque vidéo. Ce sera la vidéo la plus longue de la classe. La plupart des vidéos que vous aurez seront des sessions assez courtes. Il devrait donc être facile pour vous de ramasser, apprendre et de faire vous-même. Une fois que vous aurez terminé la carte du parcours client, nous passerons aux concepts. Ce que nous allons apprendre ici s' appelle l'accessoire de valeur, ressemble en quelque sorte à ceci. Nous en apprendrons plus de cadres conceptuels, comme un modèle quatre. Apprenez une autre technique appelée le cadre photo. Je vais également vous pointer vers d'autres sites Web où vous trouverez des exemples plus intéressants façon de dessiner et de faire des concepts en équipe, en groupe ou vous-même. Après cela, je vous apprendrai à tous comment créer un filaire. Je vais venir ici. J'utilise Adobe XD en ce moment. Et j'ai créé un flux de travail filaire sur la façon de livrer Baba t chez vous à la demande. L'objectif de cette application est donc de faire livrer baba t chez vous quand vous le souhaitez à San Francisco. Allons donc jouer à ce prototype. Je vais cliquer dessus. Chargé. Je vais faire mon prénom, mon nom, je leur envoie un e-mail et je m' inscris à l'application. Je vois l'inscription. Je peux voir toutes les boissons d' application Bobo que j'ai. Je peux en ajouter un. Je veux que celui-ci ne soit pas régulier, sucré, mais juste semi sucré. Je veux un grand tapioca. Je vais appuyer sur Add. Je vais aller vérifier. Je vais voir combien de boissons au thé Bobo j'aimerais commander. Un seul va bien. Je vais appuyer sur Next. Je vais mettre ma rue, mon adresse. Je vais payer ce baba t maintenant je le vois sur une carte et il va arriver à suite de ma maison. Ok, donc ce que vous apprendrez ensuite, c'est de prendre cette image filaire que vous concevez pour votre étude de cas ne doit pas nécessairement être Baba t, quel que soit le design que vous proposez. Et vous sortirez et vous ferez des tests d'utilisabilité. Mais avant de faire cela, vous aurez à voir avec le script de test utilisateur. J'ai un modèle à remplir pour savoir comment le faire correctement, et je vous donnerai les meilleures pratiques de test utilisateur. Après cela, nous apprendrons les systèmes de conception. Je vais donc vous expliquer ce qu' est un système de conception hors de l'approche, ce qu'est un guide de style, il y a aussi beaucoup de plonger ici. Une fois que vous aurez compris que nous pouvons prendre l'application Bobo t, je ferai une autre série de vidéos pour vous montrer comment prendre ce design ici et le rendre visuel. Vous pouvez donc voir maintenant que nous y avons ajouté le design visuel. Je reviendrai sur cette question de façon plus visuelle. Je me suis inscrit. Je voyais comment le Bouddha est doux. Je veux un thé au lait régulier. Je le veux avec un ensemble régulier, notre semi-sucré. Je suis sur un grand tapioca. Je veux l'ajouter au panier. Je vois qu'il a été ajouté ici. Je vais venir ici. J'ai la quantité que je peux modifier, je peux supprimer les choses que j'ai apprises lors des tests d'utilisabilité. J'appuie sur Suivant, j'ai posé mon adresse. Nous avons également appris que les gens voulaient que ce soit un texto quand ils sont Baba t était, qu'ils allaient être livrés. Nous avons donc ajouté le numéro de téléphone ici en fonction des tests d'utilisabilité que nous avons effectués. Nous appuyons sur Next. J'ai mis les informations de ma carte de crédit et je regarde ça. L'ampoule va venir chez moi à la livraison. Et nous avons cinq minutes, deux minutes. Et c'est presque là. Oui, j'ai Bobo t et je reçois le message qu'il est livré à ma porte d'entrée, vais rencontrer la personne Apple. Quoi, ce que vous pourriez faire à la toute fin du cours, vous pouvez créer une étude de cas. Je vais donc faire un cours sur l'étude de cas et le cadre d'une étude de cas appropriée. Vous avez l'image époustouflante, le design final que vous avez réalisé. Vous pouvez faire un peu sur vous-même. Vous pouvez montrer vos objectifs, les objectifs du produit, les objectifs commerciaux. Vous pouvez parler du problème auquel vous allez faire face. Vous pouvez faire votre personnage et un look très cool comme je l'ai fait ici. Vous pouvez parler de vos hypothèses ou de vos objectifs d'apprentissage. Ce sont les questions que vous souhaitez aborder et connaître pour les personnes que vous avez ciblées. Vous allez faire des recherches. Vous allez parler aux gens. Je veux que vous preniez des photos de ces personnes à qui vous parlez. Vous pouvez faire des citations d'utilisateurs sur ce que vous avez entendu. Je vais vous apprendre comment faire cette synthèse. Comme si vous voyiez des photos ici. Vous allez faire les apprentissages et les résultats qui sont les modèles que vous avez trouvés. Vous allez prendre des décisions sur ces schémas. Vous allez revenir recréer, répéter l'énoncé du problème. Vous allez faire des croquis et des concepts et prendre des photos de ceux-ci. Vous allez esquisser des idées. Vous allez faire du service client, des cartes de parcours client. Vous allez créer les filaires comme je vous l'ai montré dans l'application Bobo t. Vous allez faire des tests d'utilisabilité et des tests utilisateur comme nous l'avons trouvé ici. Montrez des photos de ça. Vous allez décrire les leçons que vous avez apprises lors des tests utilisateur. Vous allez composer la fidélité, la rendre jolie, mettre tous les beaux motifs, les icônes et les illustrations. Et puis je peux cliquer dessus. Et je peux aller voir le dernier que vous avez créé ici . C'est plutôt génial. Je suis excité. J'espère que vous l'êtes. Allez-y et jetez un coup d'œil à toutes les autres vidéos et nous allons approfondir chaque sujet que j'ai examiné avec vous. Et je terminerai sur mon site Web ici, Aaron Lawrence, étui design.com. Vous voulez voir plus de mon travail. Et je vous remercie d'avoir passé les 20 dernières minutes avec moi. Et j'espère que vous apprécierez le cours. Au revoir. 2. Fixer des objectifs pour vos décisions de conception UX: Bonjour, Bienvenue dans la vidéo 1 sur la façon de construire une étude de cas UX design et UX design 1011 des premières choses que nous faisons avant de passer par tous les processus de conception et de recherche. Si nous comprenons que nos objectifs sont la première chose que nous faisons dans la conception UX. Et quels types d'objectifs devriez-vous connaître ? Et qui a cette information, ces informations ? Et comment extraire ces informations sont des choses que je vais vous montrer dans cette prochaine vidéo. Et rappelez-vous que ce qui est une expérience utilisateur réussie. Ux est axé sur la connexion des objectifs commerciaux aux motivations des clients et la création de solutions qui ont obtenu de bons résultats pour l'entreprise tout en répondant aux besoins du client. Il est donc important que vous compreniez les besoins des clients. Mais vous travaillez également sur des logiciels destinés aux entreprises. Vous devez donc savoir quels sont les bons avantages et les bons résultats pour l'entreprise lorsqu'elle prévoit de créer, de créer et de lancer des logiciels sur le marché. Et qu'est-ce qui constitue un marché ? Un marché est un groupe de personnes que vous ciblez pour résoudre leurs problèmes et vous le résolvez avec du contenu dans un logiciel. Pourquoi est-il important que vous compreniez vos objectifs ? C'est important parce qu'il nous aide à comprendre les raisons et les intentions de la raison pour laquelle nous faisons le travail que nous allons faire. Il nous aide à évaluer la valeur de nos conceptions, de nos solutions. Et si vous vous en souvenez, R est une expression où le design a des intentions et des motivations derrière elle. Par conséquent, toutes les décisions de conception UX doivent être mappées à la raison et à la logique. Et comprendre les différents objectifs sont des aspects importants qui tiennent compte de la raison pour laquelle vous résolvez un certain problème et de la façon dont cette solution et tend à bénéficier aux entreprises. Et au fil du temps, les chefs de produits et les concepteurs UX devront suivre et mesurer ces solutions et voir comment ils aident l'entreprise à atteindre ces objectifs que nous allons apprendre dans Layout aujourd'hui. Dans cette vidéo, je vais vous montrer ce qu'on appelle une réunion de lancement. C'est ici que nous rencontrons les personnes qui ont ces objectifs, qui possèdent ces informations. Et je vais vous montrer le cadre dans lequel vous extrayez ces informations de ces personnes. Très bien, maintenant que vous avez accès à toutes les vidéos, je veux vous montrer où vous pouvez accéder à toutes ces informations que je vais vous montrer tout au long de la classe. C'est un site Web, et ce site Web s'appelle UX Honey.com. Vous pouvez voir le logo directement au centre. J'aurai également une documentation jointe à chaque vidéo que vous pourrez télécharger et utiliser pour chaque sujet. Nous allons donc trouver où vous pouvez en apprendre autour la réunion de lancement, des objectifs et de l'UX Honey.com. Donc, si vous venez à x2 ici, vous cliquez dessus et vous faites défiler vers le bas. Et vous voyez où il est dit la réunion de lancement. C'est la principale chose que nous faisons avant d'entrer dans l'exemple de l'étude de cas. Laissez-moi ouvrir l'étude de cas. Permettez-moi de vous montrer comment les résultats de l'apprentissage de ces objectifs seront présentés dans votre étude de cas. Vous aurez donc une réunion de lancement. Voici à quoi ressemblent ces réunions. Il y a beaucoup de gens là-dedans. Nous avons un ordre du jour. L'ordre du jour est qu'il passe à travers les objectifs et regarde le début de cette étude de cas où j'ai défini des objectifs. Et c'est juste avant que je commence à parler des utilisateurs et du personnage. Revenons donc en arrière. Je vais cliquer sur cette réunion de lancement et parler un peu autour de la réunion de lancement. Imaginez cela. Vous avez été contacté par une startup ou une entreprise sur un marché spécifique et elle vous a engagé pour effectuer des recherches et développer une solution de conception UX qui répond aux besoins, aux objectifs de l'entreprise et aux personnes qu'elle cible. Vous allez avoir cette réunion lundi. Et vous devez obtenir et ils veulent que vous dirigiez cette réunion et obteniez les informations dont vous avez besoin pour commencer. On dirait que vous savez quoi faire. Si ce n'est pas le cas, c'est bon parce que je vais vous montrer quoi faire. Ce que vous allez faire, c'est que vous allez avoir une réunion de lancement. C'est une réunion d'une journée complète. Il est généralement de 10 h à 17 h 00. Et vous avez un programme à suivre. Et l'ordre du jour est que vous voulez parler des objectifs commerciaux et des objectifs du produit, utilisateurs et de leurs objectifs, des parties prenantes, des clients, des risques et des atténuations que vous ferez. Donc, je ressemble généralement à ça. Il y a le sens. Vous pouvez avoir un bureau génial. Vous pouvez également le faire par téléphone, c'est très bien. Vous allez écrire des agendas. Je vous ai déjà donné le genre, mais assurez-vous de faire des présentations. Vous devez vous présenter. peu à sec comment se déroulera cette réunion. Et certains vous ont donné des exemples de ce que nous avons fait au cours des années ici. Et maintenant, permettez-moi de parler un peu de ce qu'est une réunion de lancement. Toute personne impliquée dans votre projet doit se rencontrer en réunion avant que tout le monde ne commence à faire le travail. La réunion de lancement est composée de gens d'affaires, spécialistes des produits et de toute autre personne responsable du projet. N'oubliez pas que nous construisons des logiciels. Et les logiciels coûtent cher et le coût de la modification des logiciels est encore plus élevé. Il est donc très important, en tant que concepteur UX, savoir comment prendre vos décisions. Il y a des problèmes et vos solutions sont validées. Vous savez donc qu'ils atteindront les objectifs que nous allons définir lors de cette prochaine session ou de cette session ici. La réunion nous aide donc à externaliser les informations. C'est important pour tout le monde de le savoir et de le comprendre. Une fois que tous les participants à cette réunion ont compris, nous pouvons utiliser ce temps pour hiérarchiser une ligne de priorité et convenir de certaines priorités. Et notre mémoire, vous allez prendre ces informations qui vous aideront à prendre des décisions de conception UX au fil du processus. Passons donc en revue l'agenda ici, savoir les objectifs commerciaux, les objectifs du produit, les utilisateurs et leurs objectifs, les parties prenantes, les risques et les atténuations. Commençons donc par les objectifs commerciaux. Je vais faire sauter ça un peu plus gros. D'accord ? Donc, les objectifs de l'entreprise et les raisons qui sous-tendent, vous voulez connaître les indicateurs de performance clés. Ces indicateurs sont appelés indicateurs de performance clés qui informent Business Analytics. Voici un exemple. Les gens veulent construire des logiciels, disent qu'il s'agit d'une entreprise solaire et qu'ils veulent réduire le nombre appels téléphoniques de support qu'ils reçoivent en donnant des informations sur ce qu'il faut faire en cas de problème. Ou un aperçu de ce à quoi s'attendre lorsque vous achetez du solaire, c'est un chiffre, c'est un indicateur. Et ce sont là des indicateurs de performance clés que nous voulons utiliser. Nous voulons réduire ce nombre en construisant des logiciels. Vous pouvez donc dire maintenant sans logiciel sur le marché à ces clients, voici un certain nombre, disons 500. Les appels téléphoniques arrivent en un jour. Une fois le logiciel lancé, nous voulons savoir que ce nombre diminue. Et c'est un élément important d'un objectif commercial. Vous voulez donc comprendre l'objectif commercial et la façon dont ils correspondent aux jalons que votre conception devra atteindre. Cela permet également de relier les besoins et les objectifs des utilisateurs à l'entreprise. Vous voulez savoir dans quelle mesure vos décisions de conception permettent d' orienter les objectifs commerciaux dans les petites et grandes étapes. étapes très importantes ici. Vous ne concevez pas de solutions à l'aide de logiciels parce que c'est cool et amusant. Vous les concevez parce qu'ils atteignent des objectifs commerciaux. Et il est vraiment important que vous sachiez cela et que vous compreniez quelles sont les intentions commerciales derrière la création de logiciels et quel type de résultats ils aimeraient après le lancement du logiciel. Parlons donc des gens d'affaires. Que sont-ils, à qui sont-ils ? Ils ont généralement des questions sur ce que nous faisons. En recherche. Vous devrez informer les gens d'affaires en développant l'empathie des clients. Il s'agit de l'empathie des utilisateurs et de l'expérimentation de solutions. Nous réduirons les risques liés aux inconnues de l'entreprise et contribuerons à assurer le succès des produits. Plus vous pouvez vous aligner sur leurs objectifs, comprendre leurs initiatives et parler dans leur jargon. Plus vous serez précieux au niveau commercial de n'importe quelle entreprise. Par conséquent, plus vous serez longtemps dans une entreprise, donc plus ils vous paieront en tant qu'employé. D'accord ? Ainsi, lors de cette réunion, vous pouvez écrire un cadre sur un mur ou parcourir un document et je vais vous donner suite et nous reviendrons sur le site Web ici dans une seconde. J'ai ce document qui décrit les compartiments d'information que vous allez parcourir. Nous avons donc les objectifs commerciaux, les objectifs produits que les utilisateurs et leurs objectifs, les parties prenantes et le risque. Et je l'ai fait et je l'ai rempli pour vous. Vous pouvez donc en voir quelques exemples. Vous pouvez donc télécharger ce document dans la vidéo. Et vous pouvez l'utiliser chaque fois que vous vous lancez dans un projet UX, UX ou que vous démarrez votre projet. Revenons ici et parlons de ça. Imaginons que vous aviez les objectifs commerciaux sur un tableau blanc ou que vous receviez un appel avec des gens d'affaires au début de votre réunion. Voici quelques questions que vous pouvez leur poser pour les faire avancer. Vous pouvez donc leur demander ce que vous comptez réaliser en construisant des logiciels ? Comment l'entreprise va-t-elle bénéficier de cette expérience logicielle ? Une fois qu'ils commencent à parler pour écrire ces informations, c'est leurs objectifs. Vous pouvez également leur demander explicitement quels sont les objectifs commerciaux. Vous pouvez également dire, disons que le projet est terminé et que l'application est terminée, et qu'elle soit couronnée de succès. À quoi ressemble le succès du secteur des logiciels ? Ils vous donnent le succès. Vous définissez cela comme un objectif. C'est une chose à qui vous pouvez parler. Il s'agit donc de deux questions que vous pouvez utiliser lorsque vous atteignez des objectifs commerciaux. Et si vous posez ces deux questions ici, les gens d'affaires étaient vraiment comme vous, croyez-moi. Parlons ici des objectifs du produit et des raisons pour lesquelles. Il est donc important de comprendre ce que l'entreprise pense de ses objectifs de produits possibles. Ce ne sont pas de bons détails, mais globalement, comme ce dont nous avons besoin pour atteindre les objectifs commerciaux. Donc, si votre objectif est de gagner de l'argent, vous aurez probablement besoin d'un moyen dans le logiciel pour facturer les gens à l'aide de leur carte de crédit afin que l'entreprise puisse gagner de l'argent. C'est une connexion facile là-bas. Et imaginez cela. Vous ne pouvez pas avoir d'application de prise de photos si vous n'avez pas d'appareil photo. Nous devrons donc utiliser l'appareil photo de votre téléphone afin de pouvoir prendre des photos. Ces objectifs peuvent donc être modifiés en fonction de la recherche et des résultats des tests de solution. Tu te souviens de ça ? Parlons des gens du produit. À quoi ressemblaient-ils ? Ces personnes sont donc généralement des experts en la matière. Cela signifie qu'ils connaissent beaucoup de choses autour d'un certain secteur du marché. Disons que c'est bon, mais ces gens en sauraient beaucoup sur Baba T. Il y a aussi des chefs de produits. Les chefs de produits sont des spécialistes et de la stratégie. Et ils pourraient aussi être des ingénieurs. Et ces personnes comprendront bien plus le design que les gens d'affaires. Ils auront également des questions sur les composants spécifiques de l'interface utilisateur et les détails de l'équipe de conception des interactions. Les médecins sont là pour vous aider à vous en souvenir. Ils ne sont pas là pour écraser votre dessin. Ils sont là pour vous aider à vous connecter à votre conception, aux objectifs commerciaux et aux objectifs produits que nous nous sommes fixés pour atteindre. N'oubliez donc pas que votre conception sert d'outil de communication. C'est ça, non ? C'est ce que les ingénieurs construisent est la dernière chose que les utilisateurs voient. Vos conceptions aident donc tout le monde à comprendre ce que nous construisons, pourquoi nous construisons et la valeur que nous avons l'intention d'apprendre. Les utilisateurs finaux ne voient donc pas les conceptions finales. Ils voient ce que l'ingénieur a construit. Passons donc aux questions que vous pouvez vous poser. Vous pouvez donc dire, que doit faire votre produit pour atteindre les objectifs commerciaux ? Question. On peut aussi dire que si votre produit était humain, que passerait-il le plus clair de son temps à faire ? Et vous voulez écrire et capturer ces informations. Et encore une fois, je vais vous montrer des exemples de ce à quoi cela ressemble après une réunion. Il s'agit donc de votre domaine, car vous êtes généralement l'expert en conception centré sur l'utilisateur, appelé UCSD, pour une grande partie de la philosophie consistant à effectuer des recherches centrées sur l'utilisateur ou sur l'UX. Nous essayons de comprendre les utilisateurs qui doivent être centrés sur les utilisateurs à concevoir sont destinés aux utilisateurs. Souvenez-vous donc de ce terme, vous voyez D, un design centré sur l'utilisateur. Alors pourquoi est-il important de comprendre aux utilisateurs tous les aspects que je viens d'exposer ? Dans cette réunion, vous pouvez également utiliser cette période pour prioriser les utilisateurs. Si l'application compte nombreux utilisateurs, cela vous donnera l'accent et le point de départ de ceux avec qui vous devriez parler en premier. N'oubliez pas que c'est votre région. Habituellement, vous pouvez être appelé à gérer cette partie de la réunion. Si vous faites partie d'une équipe, vous devez capturer uniquement des informations de haut niveau sur les utilisateurs. Je n'ai pas appelé ça un profil utilisateur. Nous voulons connaître le marché cible, disent les gens qui aiment le bocce. Nous voulons parler de l'utilisateur cible. On peut les appeler amoureux du mobile. Et nous voulons connaître les objectifs et les problèmes au sein de la population ou de la personnalité de cet utilisateur. Vous souhaitez poser des questions pour accéder aux informations de base au niveau du profil utilisateur. Vous pouvez donc voir ci-dessous et demander un nom d'utilisateur à leur sujet. Vous voulez connaître un peu leurs objectifs, certains de leurs problèmes et de leurs douleurs, puis savoir comment, comment avez-vous mis la main sur ces personnes pour la recherche et les tests ? Habituellement, l'entreprise a une bonne idée et peut commencer par des liens sur Qui sont ces personnes que vous ciblez et comment les trouver. Et puis il faut les trouver dans la nature. Il faut recruter des gens pour aller les chercher. Donc, les questions pour faire circuler les jus et amener les gens à parler autour des utilisateurs sont les personnes que nous ciblons pour atteindre les objectifs du produit ? Que savez-vous de ces gens ? Quels sont les problèmes les plus importants à résoudre pour eux ? Quels sont les objectifs les plus importants de ces personnes et qu'est-ce qui les motive ? Sont-ils à proximité ? Où puis-je les trouver ? Quelqu'un peut-il me connecter à eux ? Toutes les questions que j'ai utilisées par le passé avec les clients. C'est essayé, vrai et testé et vous devriez avoir un vrai succès. Mais juste ces quatre questions ici. D'accord ? Ce sont donc des parties prenantes, sont vos clients, sont des personnes qui sont responsables de la solution que vous concevez et des ingénieurs. Cette solution et ça tourne mal. Ce sont généralement eux qui en sont responsables. N'oubliez pas que ces personnes peuvent perdre leur emploi si les choses ne se passent pas correctement. Les gens d'affaires doivent prendre des décisions sur le budget et les résultats commerciaux qui répondent aux stratégies et aux initiatives de l'entreprise. Ils ont un intérêt là-dedans, mais ils ne peuvent pas être avec vous tout le temps. C'est pourquoi nous les appelons parties prenantes parce qu'elles ont un intérêt important dans ce processus. Alors pourquoi est-il important que vous les identifiiez ? Vous devrez effectuer des revues de conception pour montrer les résultats de la recherche et de la solution. Environ toutes les deux semaines, c'est mieux. Et ce sont les personnes qui peuvent entrer dans votre projet et perturber votre logique de conception centrée sur l'utilisateur avec leurs opinions. Parce qu'ils peuvent ne pas faire confiance à ce qui se passe sur le projet en raison d'un manque d'implication très tôt, nous appelons cela l'anxiété des parties prenantes. Donc, impliquer ces personnes dans le processus, comme faire des sprints de design, dont je ferai une autre vidéo que vous verrez, aidera tout le monde à faire une ligne et à partager la propriété des informations, des décisions et des idées. Plus vous pouvez impliquer ces personnes dans la logique utilisateur dès le début du processus. Et il ne suffit pas de les jeter dans les dessins. Moins ils vous diront comment concevoir. Et ils renforceront la confiance avec vous. Plus ils vous font confiance, croyez-moi, plus vous serez heureux. Cela ne fonctionnerait donc pas dans une équipe. Habituellement, un PM peut prendre cette zone Product Manager pour vous. Si ce n'est pas le cas, vous devrez prendre ça. Vous pouvez donc généralement être appelé à le gérer. Si ce n'est pas le cas, comptez sur un chef de produit. Mais vous voudrez savoir ce qui suit. Qui prend les décisions concernant le produit et le design ? Découvrez ces gens. Ce sont les personnes avec lesquelles vous souhaitez faire des critiques de design. Vous pouvez demander qui possède des connaissances techniques, et nous pouvons les utiliser comme experts en la matière, qui connaît beaucoup de choses autour des personnes que je cible. Vous voulez impliquer les personnes qui peuvent nous aider à trouver des utilisateurs, à identifier ces personnes. N'oubliez pas de connaître leurs horaires et quelle heure il est bon d'avoir des critiques de conception avec ces personnes. Vous voudrez peut-être les interroger sur les objectifs de l'entreprise et le succès de votre projet. C'est ce qu'on appelle un entretien avec les parties prenantes, et c'est ce que vous faites dès le début du projet. Il s'agit d'un outil qui ressemble à la recherche, tout comme un entretien d'utilisateur, mais vous le faites avec les parties prenantes. Et vous avez des questions sur ce qui vous permet de rester debout la nuit ? Quels sont vos objectifs et vos initiatives ? quoi ressemble le succès dans ce projet ? Et si vous le faites, c' est déjà un outil que vous pouvez utiliser pour établir la confiance avec eux. Parlons du risque et de la façon dont nous atténuons les risques. Le risque est donc tout ce qui peut bloquer, perturber ou faire tomber un projet ou un logiciel que nous construisons. Un risque peut être transformé en question. Et cela peut vous donner du travail. En répondant à cette question, vous voudrez savoir ce qui contribue au succès d'un projet. Mais tout aussi important, vous voulez savoir ce qui fera échouer un projet. Après avoir pris connaissance des contextes du projet, tout le monde devrait avoir le temps d'appeler et de prioriser les risques. Ainsi, une équipe peut commencer à se concentrer sur des activités qui auront l'intention d'atténuer ou de résoudre les hypothèses les plus risquées. Donc généralement, les gens d'affaires ont cela et ils adorent en parler. Fais-moi confiance. Ils comprennent toujours les problèmes plus que vous et vous avez beaucoup plus de valeur lorsque vous pouvez les aider. Obtenez donc les réponses aux questions en parlant à leurs clients. plupart du temps, ils se demandent comment les gens pensent de leur entreprise et comment ils vont utiliser leur produit. Vous pouvez également travailler avec eux en incluant le processus de conception centré sur l'utilisateur et en discutant avec leurs clients et en aidant à obtenir des réponses aux questions qu'ils se posent. Donc, lorsque l'entreprise est un logiciel, rappelez-vous qu'il s'agit de l'UX et que c'est là que vous êtes l'une des armes les plus précieuses de l'entreprise. Rappelez-vous cela, et assurez-vous d'être très bien payé ici parce que ce n'est pas un travail bon marché. Vous résolvez des problèmes commerciaux pour les entreprises qui créent des logiciels. Donc, les questions que vous pouvez parler et poser aux gens d'affaires autour du risque sont quelles sont les choses qui peuvent arriver qui rendront cela infructueux et n'atteindront pas nos objectifs. Disons que nous avons échoué. Quelles sont les choses qui, selon vous, nous ont causé l'échec ? Nous pouvons donc comprendre cela avant de travailler et nous pouvons éviter l'échec. Quelle est la première chose que nous pouvons faire pour commencer à atténuer ces événements infructueux. Atténuation, c'est-à-dire que pouvons-nous éviter ces événements ? Que devons-nous faire pour nous assurer qu'ils ne se produisent pas ? D'accord ? Et cela conclut la plupart des objectifs commerciaux, les risques auxquels les utilisateurs sont confrontés, tous les objectifs. Donc, si vous avez toutes ces informations et où vous pouvez éventuellement aller plus loin dans votre étude de cas. Et vous pouvez l'inclure au début de votre étude de cas. Ces vidéos, je vais vous montrer les informations et les outils et techniques que je vous enseigne et comment insérer ces informations dans votre étude de cas pour que vous puissiez voir que je l'ai ici. D'accord. La dernière chose que je vais vous montrer, c'est l'application sur laquelle je travaille, qui est une application bobo t. Je vais donc vous guider à travers ce robot ce que T expérimenter. Et puis j'y retournerai et je vous montrerai les objectifs. Et les objectifs du produit, les objectifs commerciaux, les utilisateurs et toutes les informations qui nous aident à créer cette application ici. Ce qui se passe ici, c'est que vous avez du bokeh, nous y allons et nous nous connectons. processus normal de connexion a réprimé l'inscription, nous voyons une liste de boissons biloba et d'applications. Et je peux vous montrer cette page ici. Assez petit, mais vu que je fais défiler vers le bas, je peux voir tout l'arc, mais c'est le cas. Une fois que je suis sélectionnable avec T, je peux choisir la douceur habituelle ou semi-sucrée. Je peux aussi dire qu'il y a un grand tapioca ici. Je peux l'ajouter au panier. Voyez ici, le panier comporte désormais une icône. Maintenant, je peux commencer à vérifier. Je peux commander une quantité de bot, mais je peux venir à cette adresse. Et vous êtes mon adresse, mon numéro de téléphone. Je peux insérer les informations de ma carte de crédit. Je peux payer. Et puis je ne verrai que la carte de San Francisco. Et je verrai Bowtie venir me voir à la livraison. Et puis, boum, mon bobo arrivera. Disons donc que c'était une affaire. Et tout comme le document contenu dans la vidéo que vous pouvez télécharger, vous pouvez l'utiliser ici. J'ai également des exemples basés sur le bateau, l'activité de l'équipe. Nous allons donc parler un peu de cette activité et de ses objectifs. première chose est donc le propriétaire de l'entreprise et je veux vendre plus de 100 nœuds, mais c'est un jour avec notre nouveau logiciel à la demande. C'est l'objectif de ce logiciel. Nous voulons nous associer à un service de livraison existant et les utiliser pour livrer BO. Mais t, Nous voulons faire des revenus supplémentaires facturant et des frais de livraison pour chaque Baba t qui est fait, qui est livré. Bon, et bien, comment nos produits sont-ils objectifs pour nous aider à atteindre les objectifs commerciaux ? Bien que nous ayons besoin des utilisateurs de s'inscrire. Nous allons permettre différentes saveurs d'arc, mais pas d'être sélectionnées. Nous allons permettre aux utilisateurs de sélectionner les préférences en matière de lait, douceur et de glace ainsi que leurs préférences de garniture. Nous allons permettre aux utilisateurs d'interadresser les numéros de téléphone et les détails de paiement. Et nous allons montrer une mise à jour en temps réel de Baba T livrée des stations de création de Bobo vers les emplacements des utilisateurs. Allons parler un peu des utilisateurs et leurs objectifs étaient de parler de bot, mais de deux amants à San Francisco. Et ce sont des gens qui veulent faire livrer Baba à leur domicile ou à leur bureau. Les parties prenantes ici comme moi-même. Je suis donc disponible de 10 h à 17 h 00. Donc, si vous voulez avoir des critiques de conception avec moi, assurez-vous de le faire du lundi au vendredi dans ce fuseau horaire. Et certains des risques auxquels nous serons confrontés en développant cette application sont que l'équipe Bobo fond et ne reste pas fraîche à la livraison car elle n'est pas livrée assez rapidement. Cela provoque deux ou trois choses. Ce Bobo peut rendre quelqu'un malade. Et maintenant, nous avons quelqu'un malade. Comment allons-nous risquer le risque que nous ayons trop de remboursements à cause de cela et que nous commençons à perdre de l'argent en raison du coût de livraison. D'accord ? Vous pouvez donc voir des exemples de toutes ces informations sur les objectifs. Très bien, cela explique comment fixer des objectifs pour notre première vidéo lors de la première étape du processus et de la conception UX. Rejoignez-nous dans la vidéo suivante pour apprendre à créer un personnage. voit. 3. Créer un Persona UX Design Design Persona: Très bien, Bienvenue dans la vidéo suivante sur la création d' une étude de cas UX et d'une conception d'expérience utilisateur 101. Et la dernière vidéo, je vous ai montré comment fixer des objectifs. La prochaine chose que nous allons faire dans le processus, c'est d' apprendre comment créer un personnage et ce qu'est un personnage. Alors sans plus tarder, allons regarder et plonger dans un personnage. Je vais donc venir ici sur le site Web UX Honey.com. Je vais cliquer sur UX pour bien, c'est le site que j' utilise avec tout le matériel pour enseigner aux étudiants de l'Academy of Art University. Et ici, je vois que j'ai les scripts d'interview utilisateur persona invalidés. Je vais cliquer sur ce bouton. Et j'ai cette section du site Web qui décrit la persona. La première chose que je vais faire, c'est de parler un peu d'un personnage. Ensuite, je vais vous montrer le cadre d'un personnage. Et j'ai également une documentation jointe à la vidéo que vous pouvez télécharger, mais vous pouvez utiliser pour créer vos personnages. Parlons donc un peu de ce qu'est un personnage. Un personnage est un artefact de design qui représente un vaste marché de personnes, quels que soient leur âge et leur sexe. Genre. Dans la plupart des cas, ces personnes ont les mêmes problèmes, objectifs, motivations et comportements. Et sa première a été construite à partir de nos hypothèses invalidées. Avant de faire des recherches. Lorsque nous faisons des recherches, nous parlons à ces personnes, nous apprenons tout un tas d'entre eux. Et puis nous revenons après les recherches et nous revisitons l'artefact persona et nous le mettons à jour avec ses apprentissages validés. Le but de cette persona est donc de capturer le contexte réel validé, les problèmes, les comportements et les activités, les besoins, les objectifs et les motivations qui reflètent la personne que nous ciblons et de mettre tout cela dans un artefact de conception appelé le persona. Par conséquent, ici, vous pouvez voir que j'ai quelques exemples, un personnage. Et certains de ces exemples sont des croquis que nous utilisons. J'ai l'exemple du cadre dans lequel j'aborderai un peu plus tard. Et j'en ai un rempli ici, et j'en ai un autre qui est dessiné. Vous pouvez donc voir que vous pouvez esquisser ces personnages à l'aide du framework. Une fois que vous vous sentez plus sûr des personnes que vous avez apprises, vous pouvez les créer ici. Et permettez-moi de me pencher un peu plus sur les raisons pour lesquelles ils sont importants. Un personnage est donc important car il introduit automatiquement sa conception centrée sur l'utilisateur dans notre processus. Encore une fois, l'étude UX porte sur la conception de l'expérience utilisateur, laquelle nous allons créer des objets et concevoir des choses à utiliser. Il est donc très important que nous comprenions qui sont ces personnes. Et avant de concevoir quelque chose pour eux, nous voulons utiliser ce personnage pour créer des conversations et garder des conversations les utilisateurs et non pas axées sur les solutions et les opinions. La persona nous rappelle également quotidiennement que nous ne sommes pas les utilisateurs de nos produits. Nous pouvons donc d'abord formuler des hypothèses concernant les utilisateurs. Donc, si je conçois quelque chose pour, disons, de la musique pop coréenne. Et je ne suis pas une pop star coréenne ou une poêle pop front coréenne, alors il est important pour moi de savoir que je ne suis pas l'utilisateur de mon produit. J'utilise donc la persona pour représenter ces utilisateurs. Cela m'aide également à les identifier lorsque je suis dans la nature, lorsque je suis en train de suivre mes routines quotidiennes où que je vis. Je vais peut-être rencontrer quelqu'un. Et alors que je leur parle, je me rendrai peut-être compte qu'il y a en fait le donneur que je cible pour mon produit. Je souhaiterais peut-être les utiliser pour la recherche ou le test de mon produit. Cela facilite la compréhension de l'utilisateur lors de réunions, démonstrations et lorsque les parties prenantes, les parties prenantes, j'ai parlé de la dernière vidéo. Ce sont les gens d'affaires ou les clients qui participent à mes réunions. Je peux donc facilement tirer cet artefact de design et le poser sur un mur. Et nous pouvons le pointer et l'utiliser à titre de référence. Parce que rappelez-vous que nous ne sommes pas les utilisateurs de nos produits. Il sert également de support pour résoudre les questions et les opinions en conflit et nous permet de rester concentré sur les utilisateurs. Il arrive souvent que nous ayons des opinions ensemble en équipe et que ces opinions entrent en conflit. Nous pouvons toujours demander, eh bien, pourquoi ne pas parler aux utilisateurs autour de ces opinions ? Et allons voir quelle est leur opinion. Parce que les utilisateurs ont toujours les opinions que nous allons utiliser pendant le processus et cela nous aide à résoudre et à résoudre les questions que nous avons. Parlons donc un peu du processus consistant à passer d'un personnage invalidé à un personnage validé. Donc, la première chose que nous faisons, que vous apprendrez à l'étape suivante, après que j'en parlerai. C'est comment créer un personnage invalidé. Nous faisons donc des hypothèses sur les personnes que nous ciblons. Et la prochaine vidéo, je parlerai des objectifs d'apprentissage et des questions. Mais ce que vous voulez faire ensuite, c'est de créer des objectifs d'apprentissage. Créez des questions pour atteindre les objectifs d'apprentissage. Et tu feras des recherches, tu sortiras et tu parleras aux gens. Ensuite, vous allez synthétiser et regrouper ces thèmes en motifs. Après cela, vous allez valider ou invalider les problèmes que vous avez eus. Vous allez valider ou invalider les objectifs, les besoins et les comportements de ces personnes avec qui nous avons parlé. Ensuite, vous revisiterez et mettrez à jour la persona avec les validations. C'est à peu près le processus ici. Allons donc apprendre à créer un personnage, et je parlerai un peu du cadre que nous utilisons pour les persona. Voici donc le document joint à la vidéo que vous pouvez télécharger et utiliser. Et le cadre de persona est divisé en quatre quadrants. Nous voyons ici le premier, le second, le troisième, le 1, le quatrième 1. Donc le premier dont je parlerai ici est le quadrant supérieur gauche, c'est la personne dans les contextes réels. C'est une photo d'eux et vous pouvez voir, je vais vous montrer, j'ai également ici un exemple de la persona ouverte. Il est rempli. Mais avant de passer en revue celle-ci, allons simplement parler des quadrants et du cadre d'un personnage. Vous pouvez donc également l'utiliser pour esquisser. Vous pouvez créer une feuille de papier dessinée en quatre carrés. Apportez la personne dans les contextes réels et écrivez ses comportements, ses besoins et ses objectifs. Mais avant que je ne vous montre quoi que ce soit, avant de le faire, il est préférable d'apprendre à quoi servent tous ces quadrants. Celui en haut à gauche est donc une personne dans les contextes réels. Et il est toujours bon de faire une citation autour d'eux. Et vous pouvez dessiner une petite bulle de citation ici. Et vous voulez avoir le problème que vous avez l'intention de résoudre et l'objectif soit écrit du point de vue et du contexte de l'utilisateur. Ok, donc une fois la personne dans le contexte réel, vous avez ici la bulle de discussion avec le problème que vous avez l'intention de résoudre et l'objectif écrit du point de vue de l'utilisateur. Vous tous, vous pouvez avoir le petit cercle ici, être la zone où vous indiquez leur nom. Il peut s'agir de leur prénom, qui peut être n'importe quel nom que vous souhaitez. Mais la couture LastName doit représenter cet utilisateur. Permettez-moi donc de vous montrer l'exemple que j'ai ici. C'est donc notre robot mais T persona. Et nous avons Franny, et Franny s'identifie comme un gourmand. et le nom de famille de cette personne sont Frannie Foodie. Ce que j'aimerais faire, c'est que j'aimerais avoir le prénom et que le nom de famille porte la même lettre au départ. Dans cet exemple, nous avons f. Et pourquoi c'est important, c'est que cela m' aide à parler de la personnalité lorsque j'ai des conversations autour du design. Dans ce cas, je peux parler autour de Franny Foodie. Et c'est aussi utile lorsque j'ai plusieurs personnages. Voyons donc, j'ai un autre personnage d'une personne qui aime vraiment les vélos. Je peux nommer ces vélos Billy. Alors maintenant, lorsque j'utilise les deux personnages dans une conversation, je peux dire Franny foodie, et je peux dire Billy bike. Et cela facilite vraiment la création de philosophies de conception centrées sur l' utilisateur dans ma conversation. D'accord, le prochain quadrant dont je parlerai est d'eux. Vous pouvez donc vous demander quelles informations pensez-vous être importantes à capturer à leur sujet ? Et je n'ai pas de données démographiques ici parce que peu importe l'âge ou le sexe. Dans 90 % des cas de travail personnel que nous effectuons. Tant que la personne a le même problème et les mêmes objectifs. Je pourrais avoir 21 ans, je pourrais avoir 31 ans, je pourrais être melon ou femelle. Et si j'ai les mêmes problèmes et les mêmes objectifs, cela n'a pas d'importance. Je résout des problèmes et des objectifs pour les gens. Donc, dans ma situation, je cherche à créer une application qui fournit Bobo à la demande aux gens. Donc pensez-vous qu'il est important pour moi de savoir si une personne est un homme ou une femme dans ce cas, si je fais un arc mais T pour elle, mon opinion ne l'est probablement pas. Donc, certaines des choses que vous pouvez vous poser lorsque vous les remplissez dans le quadrant Persona sont les exemples que j'ai ici. Quels sont donc les niveaux de scolarité qu'ils ont ? Où pensez-vous ? Où vivent-ils ? Travaillent-ils à temps plein ? Ont-ils une famille ? Quelle est leur tranche d'âge ? Et peu importe s'ils sont hommes ou femmes. Dans certains cas, cela peut avoir de l'importance. Disons que je suis en train de créer un maquillage. Application qui vous permet de vous faire livrer du maquillage à la demande, il peut alors être important de signaler que plupart des femmes vont utiliser notre application. Dans le quadrant supérieur droit, j'ai des comportements et des activités. Ce sont donc des questions que vous pouvez vous poser lorsque vous remplissez ce dossier Quelles sont les activités quotidiennes de ces personnes ? Quels comportements ont-ils en rapport avec l'espace dans lequel vous travaillez ? Donc, dans ce cas, vous pouvez dire nourriture, boissons ou Bhabha. Avec qui partagent-ils ces activités ? Et où en sont-ils lorsqu'ils réalisent ces activités ? Celui qui se trouve en bas ici, c'est là les besoins et les objectifs. Quels problèmes ont-ils et pourquoi ont-ils eu ces problèmes ? Est-ce qu'ils contournent leurs problèmes ? Est-ce qu'ils résolvent leurs problèmes actuellement ? Quels sont leurs objectifs ? De quoi ont-ils besoin pour atteindre leurs objectifs ? Quelles sont leurs motivations et qu'est-ce qui les incite à avoir ces besoins ? Allons donc voir la persona remplie. Vous pouvez donc utiliser ce framework que je vous ai donné plus tôt et vous pouvez le remplir. Nous avons donc Frannie Foodie. Frannie est au travail en ce moment. Elle travaille sur quelque chose dans son ordinateur portable. Elle est très occupée. Et vous pouvez voir le problème ici et l'objectif encadré dans son monde. Nous ne faisons pas de contextes ni de perspective utilisateur. ce moment, elle dit que je suis tellement occupée et que je veux partir et avoir un bokeh t quand je devrais rester ici et faire mon travail. Donc son objectif, comme elle veut faire son travail, elle aimerait aussi avoir une ampoule, un T. Mais notre problème est et elle ne peut pas parce qu'elle a demandé à faire notre travail. Apprenons donc un peu sur Franny Foodie. Elle s'identifie comme une gourmande. Elle est âgée de 21 à 35 ans. Elle a fait ses études universitaires. Elle vit à San Francisco. Elle travaille dans une entreprise technologique à San Francisco. Elle a peut-être une famille QUI n'a pas vraiment d'importance. Dans ce cas. Franny est représenté en tant que femme, mais dans notre cas, cela n'a pas vraiment d'importance. Je n'appelle nulle part qu'il y a des femmes ou des hommes. La raison en est que cela n'a pas d'importance avec ces besoins, ces objectifs, ces comportements et activités. Ils ne sont pas vraiment représentatifs d'un genre spécifique. Permettez-moi donc de lire les comportements et les activités de Frannie. Elle est donc beaucoup sur leur téléphone. Elle a un emploi du temps chargé, adore aller manger avec des amis le week-end. Il est toujours à la recherche de nouveaux restaurants où aller manger au restaurant. Elle suit les foodies et les blogs alimentaires sur Instagram. Elle prend des photos de nourriture et partage avec des amis et les réseaux sociaux. Elle va dans des magasins de café et de boissons, et elle utilise les services à la demande une fois par semaine. En bas à droite se trouvent les besoins et les objectifs. Elle aimerait donc plus de temps dans sa journée ou leur journée. Plus de possibilités pour de meilleures boissons alimentaires à livrer à la maison ou au travail. Il ne veut pas attendre trop longtemps les choses dont ils ont besoin pour le moment. Il veut montrer de bonnes boissons alimentaires à des amis. aime être au courant des nouvelles possibilités alimentaires afin qu'ils puissent partager ces expériences avec des amis. D'accord, et c'est là que tu l'as. Nous venons d'apprendre un peu ce qu'est un personnage, pourquoi il est important. Quand les construire, quand les utiliser. Vous avez appris le cadre, et je vous ai donné un exemple. Vous pouvez également télécharger ce fichier que je vous ai montré ici avec cette vidéo. Et vous pouvez l'utiliser pour votre projet. Ok, donc ça explique comment créer un personnage. Allons de l'avant et avançons. Vous pouvez ouvrir la vidéo suivante sur la création d'un script d'entretien utilisateur. Et cela vous incitera à faire des recherches. Ok, j'espère que je vous verrai dans la prochaine vidéo. Merci encore. Au revoir. 4. Créer un script d'entrevue avec utilisateurs et des bonnes pratiques de recherche: Très bien, Bienvenue dans la prochaine série de vidéos sur la création d' une étude de cas de conception UX et de conception d'expérience utilisateur 101. Ainsi, dans les deux dernières vidéos, nous avons abordé comment fixer des objectifs et comment créer un personnage. Et dans cette vidéo, vous apprendrez comment créer un script d'entrevue utilisateur et les meilleures pratiques lors de la recherche. Commençons donc par créer un script d'entretien utilisateur. Qu'est-ce qu'un script d'entretien utilisateur ? C'est un guide de questions que vous aborderez avec vous pendant que vous effectuez des recherches et que vous entretiendrez des entretiens avec des personnes. Il s'agit généralement d'environ trois à quatre feuilles de papier. Vous allez l'imprimer et vous quitterez votre bureau ou votre maison et vous allez parler aux gens. Il peut même amener des gens dans votre bureau et à la maison, mais vous utiliserez le même script chaque fois que vous sortez et que vous parlez à quelqu'un. Quel est donc l'objectif de la recherche ? Et la plupart des recherches, c'est que nous sortons et apprenons autour des personnes que nous avons ciblées. Donc les objectifs que nous voulons atteindre, vous êtes un explorateur, les réactions des autres. Nous voulons identifier et explorer leurs comportements. Nous voulons faire la lumière sur l'inconnu. Donc, vraiment, nous aurons des réponses à de nombreuses questions dont nous n'étions pas sûrs au début lorsque nous aurons mis fin à la recherche. Alors, que faites-vous ? Vous sortez, vous rassemblez des informations et vous apprenez sur les personnes que nous avons mises en place vers Target. Et pendant ce temps, nous recherchons des modèles d'informations qui nous aident à valider ou à invalider nos problèmes et nos hypothèses de solution. Donc, lorsque vous développez le script, c'est une bonne idée. Persona à côté de vous. C'est celui que nous avons abordé dans la dernière vidéo. Parce qu'il y a beaucoup d'informations que vous voulez voir sont vraies ou non vraies. Ou une autre façon de le dire est que vous souhaitez soit valider les informations que nous avons sur cette personne, soit invalider ces informations. Vous pouvez donc l'imprimer lorsque vous développez des questions pour votre script d'entretien utilisateur. J'ai donc ici un fichier et ce fichier que vous pouvez télécharger avec la vidéo. Et il a des directives pour un script d'entretien d'utilisateur approprié. D'accord, la première chose que vous voulez faire, c'est de préciser votre nom et la date, puis de définir vos questions de recrutement. Ces questions, voulez-vous identifier quelqu'un qui est votre personnalité ? Ils vous aideront à indiquer si vous devez interviewer quelqu'un ou non. Tout dépend donc de la façon dont ces personnes répondent à ces questions qui vous aideront à identifier si la personne que vous ciblez est réellement cette personne ici que nous avons discutée, nous avons entrepris de cibler. Ainsi, dans l'exemple Bokeh T, j'ai ici une série de questions qui m'aideraient à identifier si cette personne est mon personnage ou non. Donc, trois questions ici. La première question est de savoir si vous recevez souvent de la nourriture ? Est-ce que vous buvez 0 mais pas souvent ? Et vous considérez-vous comme un gourmand ou vous aimez la bonne nourriture et les boissons ? S'ils répondent à l'affirmative, aux trois questions, je voudrais peut-être les interroger et les interviewer. Ok, la prochaine chose que nous avons est de vouloir identifier nos objectifs d'apprentissage, quels sont nos objectifs d'apprentissage, nos objectifs d'apprentissage sont des domaines de haut niveau sur lesquels nous voulons en savoir plus. Et toute cette section ici est juste à titre de référence. Il est donc bon de l'avoir sur votre script, mais vous ne partagez pas la section des objectifs d'apprentissage avec vos personnes que vous prévoyez d'interviewer. C'est la prochaine série de pages que j'ai exposées ici à droite. Quels sont donc nos objectifs d'apprentissage dans le bol ? Mais T exemple. Le premier est ce qu'ils apportent un comportement à la demande. Parce que rappelez-vous que nous construisons un bot mais une application T qui permettra à quelqu'un de commander un robot, mais où qu'il se trouve. Et dans les 10 ou 15 minutes, la mobilité leur sera livrée. Ce ne sera donc nulle part dans le monde. Ce sera réservé aux habitants de San Francisco. Encore une fois, l'idée est qu'ils sortent leur téléphone portable. Ils vivent à San Francisco, ils sont actuellement à San Francisco. San Francisco est à 11 km sur 11 km. Nous sommes donc beaucoup que nous pouvons livrer en 15 minutes n'importe où dans la ville. Et ils commandent du Mobitz II et nous leur livrons sur place dans les 10 ou 15 minutes. Vous souhaitez donc en savoir plus sur le comportement actuel de livraison et de livraison des personnes. Nous voulons savoir ce qu'ils aiment et qu'ils trouvent douloureux dans la livraison actuelle et les services à la demande et la prochaine chose que nous voulons apprendre, c'est quel est leur arc ? Mais pas de comportement. Saw vous montre comment vous utilisez ces objectifs d'apprentissage pour développer toute une série de questions qui se rapportent à chaque objectif d'apprentissage. Avant de le faire, je vais vous montrer l'introduction que vous utilisez lors d'une entrevue. Ainsi, chaque fois que vous entretenez, avant de poser ces questions aux gens, vous souhaitez partager avec eux. Cette introduction. Les neuf premières choses de cette introduction que vous demanderez peuvent dire à votre personne interrogée. numéro dix consiste à les prendre en photo pour votre étude de cas. Ne prenez pas de photos d'eux au cours des cinq premières minutes de leur rencontre. Vous voulez attendre la fin ? Je lui ai demandé s'il pouvait en prendre une photo. Donc numéro un, la première chose que vous voulez faire est de vous présenter. Et si vous avez un preneur de notes avec vous, présentez votre preneur de notes. Et vous pouvez dire des choses comme je suis concepteur et chercheur travaillant dans l'espace de la nourriture et des boissons. avons donc présenté l'espace dans lequel vous travaillez. Dans notre cas, je vous donne l'exemple de livraison Bobo T. Nous allons donc appeler ça le numéro de l'espace pour la nourriture et les boissons pour demander s'il est acceptable d'enregistrer. Juste à des fins de prise de notes. Ce que vous allez faire, c'est retirer votre téléphone et l'enregistrer avec l'application audio de votre téléphone. Restez combien de temps l'entretien prendra, sera d'environ une heure. Parfois, je dis que c'est encore le bon moment. L'entrevue durera environ 10. numéro 4 indique l'objectif de l'entretien. C'est des choses que je dis. Vous pouvez le dire aussi. Disons simplement que je veux simplement discuter de vos expériences avec la livraison et les services à la demande. De plus, je travaille sur un bateau qui verrait une application. Et j'aimerais en savoir plus sur vos expériences oméga t. Vous pouvez donc rester là où il est dit que je veux juste avoir une discussion sur vos expériences avec et ensuite accéder aux objectifs d'apprentissage que vous avez ici pour votre espace. Et la même chose que vous pouvez leur donner les mêmes contextes, leur dire dans quoi vous travaillez. Vous voulez également apprendre un peu autour de cet espace et comment leurs comportements sont liés à cet espace. Numéro 5, la loi, lui le sait, il n'y a rien qu'ils disent qu'ils vont vous offenser. Disons qu'il n'y a pas de bonnes ou de mauvaises réponses aux questions que j'ai à vous poser. La seule bonne réponse est votre numéro 6. Faites-leur savoir qu'ils peuvent vous poser des questions à tout moment. Numéro 7, indiquez-leur qu'ils disposeront également de cinq minutes à la fin pour toute question. Numéro 8, demandez-leur Avez-vous des questions avant de commencer ? Et le numéro neuf, indiquez-leur que vous allez commencer à enregistrer et appuyez sur le bouton d'enregistrement de votre application audio sur votre téléphone. D'accord ? Et puis, ce que nous allons faire, c'est que nous allons entrer dans les questions. La première question que nous posons est donc appelée « la question brise-glace ». Cela n'a vraiment rien à voir avec ce que vous essayez d'apprendre, c'est simplement apprendre à les connaître. Je demande donc généralement que faites-vous pour vous amuser lorsque vous ne travaillez pas ? Et ça ne fait que briser la glace. Cela les amène à parler. Ça me fait parler. Après ça. Nous allons faire les choses à leur sujet. Vous pouvez donc poser des questions qui ressemblent aux quatre que nous avons ici. Et vous pouvez dire : Parlez-moi un peu de vous. Quel âge avez-vous ? Que faites-vous pour le travail ? Où vivez-vous ? Et à quoi ressemble votre vie familiale ? Ensuite, une fois ces questions posées, vous pouvez passer aux objectifs d'apprentissage. Vous pouvez donc voir ici que j'ai le sujet des objectifs d'apprentissage ici et un temps passé par section ici. Et je vais vous donner un exemple de ce à quoi cela ressemble dans l'écran suivant à droite. Et nous allons utiliser l'exemple Bokeh T. Les questions que vous avez sous chaque objectif d'apprentissage doivent donc se rapporter à cet objectif d'apprentissage et vous aider à en apprendre davantage autour de celui-ci. Donc, en fonction des objectifs d'apprentissage dont nous avons parlé plus tôt dans la section Objectifs d'apprentissage. J'ai un objectif d'apprentissage qui est la livraison et le comportement à la demande. Je vais donc passer une dizaine de minutes à discuter avec cette personne de son comportement en ce qui concerne la prestation de services à la demande. La première question que je me pose est donc quelle fréquence utilisez-vous les services de livraison ? Question suivante. Pourquoi et quand les utilisez-vous ? À quoi les utilisez-vous ? Comment avez-vous entendu parler de ces services ? Avez-vous déjà eu une mauvaise expérience lorsque vous les utilisez ? Si c'est le cas, veuillez décrire en détail ce qui a été douloureux à ce sujet. Avez-vous déjà vécu de très bonnes expériences ? Mais les services, dans l'affirmative, veuillez décrire en détail ce qui était génial. Avez-vous un service préféré ? Si c'est le cas, veuillez décrire pourquoi c'est votre surface préférée. Quand avez-vous commandé quelque chose à la livraison pour la dernière fois ? Bon, maintenant je vais passer à la section Objectifs d'apprentissage du comportement Bobo t du script et passer dix minutes à poser des questions concernant l'équipe de bulbe AT. Donc, la première est, à quelle fréquence buvez-vous Baba t ? Quand le bois-tu ? Où allez-vous pour vous remettre Avez-vous déjà eu une mauvaise expérience avec Bokeh t ? Si c'est le cas, veuillez décrire en détail ce qui était mauvais à ce sujet. Avez-vous déjà eu plus que jamais une expérience plus qu'une grande expérience avec un arc, mais une compagnie de thé ? Si c'est le cas, veuillez décrire en détail ce qui était génial à ce sujet. Vous pouvez donc avoir trois à cinq sections de ces domaines que nous appellerions nos domaines d'objectifs d'apprentissage avec des questions en dessous. Et c'est la viande de l'entretien. La plupart de votre temps devrait être passé. Poser des questions et entendre ces personnes vous raconter histoires sur leurs opinions ou leurs expériences à ces questions. Lorsque vous en avez assez appris pour la fin de votre entretien, passez à l'outro. Et nous devons poser la dernière question. C'est ma question préférée. Vous apprendrez tellement de choses de cette dernière question que nous avons. Et vous pouvez demander quelque chose qui ressemble à ça. Vous pouvez dire, en se basant sur tout ce que je vous ai demandé , voyons que je vais vous apporter une solution pour résoudre tous les problèmes que vous rencontrez. Et vous avez une baguette magique. Vous pouvez obtenir n'importe quoi. Quel est votre souhait ? Et vous apprendrez beaucoup. C'est une question amusante. L'un de mes favoris. Après cela, vous pouvez venir, vous pouvez enfin procéder à l'outro. Donc, la première chose que vous voulez faire est de les remercier pour votre temps. Faites-leur savoir que toutes les notes et enregistrements sont confidentiels et ne seront utilisés que pour la prise de notes. Et aussi les seules personnes qui verront et entendront cet enregistrement sont vous-même et l'équipe. Si le paiement est impliqué, effectuez-vous la transaction ? Parfois, nous payons les gens pour leur temps avec nous. Dites-leur que vous pouvez les contacter à nouveau lorsque vous proposez une solution afin de pouvoir la tester avec eux. Et puis dites simplement merci et adieu. D'accord, donc vous avez ce dossier. Il est attaché à la vidéo. Vous pouvez le télécharger et vous pouvez l'utiliser pour le remplir. Vous pouvez créer votre propre script d'entretien utilisateur. Alors, allons maintenant en apprendre davantage sur les meilleures pratiques lorsque vous sortez et interrogez des gens. Revenons donc à UX Honey.com. La première chose que je vais faire, c'est que je parlerai d'un brun, ce sont les questions comme la meilleure façon de poser vos questions. Nous voudrons donc généralement commencer par des questions de haut niveau et ouvertes. Supposons que je souhaite savoir comment quelqu'un utilise un iPad. Si je commence par commencer, quoi utilisez-vous votre iPad ? Je suis en fait trop précis au tout début. Je préfère commencer plus haut niveau, plus ouvert. Il serait donc préférable d'avoir une série de questions qui sonnent comme ça. Comment interagissez-vous avec la technologie ? Et quelqu'un peut répondre, dire : Eh bien, j'utilise mon iPhone, j'utilise un ordinateur portable, j'utilise un réveil futuriste. J'utilise également un iPad. Ensuite, vous pouvez leur demander ce que vous utilisez le plus ? Et ils diront peut-être que j'utiliserai le plus mon iPad. Et puis vous pouvez dire y. et laissez-les vous raconter le paragraphe ou l'histoire des raisons pour lesquelles ils utilisent leur iPhone et iPad. Mais voyez combien d'informations supplémentaires j'ai obtenu. Lorsque j'ai posé une question ouverte de haut niveau. Il y a des domaines où je voudrais peut-être revenir, c'est-à-dire pourquoi ont-ils eu un réveil avancé ou un réveil futuriste ? Qu'est-ce qu'ils utilisent ? Leur iPhone 4 également. Est-ce que leurs iPhones se connectent à leur iPad ? Y a-t-il une relation là-bas ? Commencez très haut niveau, très ouvert. Ensuite, vous pouvez déclencher des conversations autour de scénarios et d'activités. Cela concerne les objectifs d'apprentissage liés à l'apprentissage des comportements des gens. Vous voulez connaître leur monde, contextes ruraux qu'ils font une activité. Où font-ils ça ? Vous voulez apprendre autour de leurs douleurs et de leur joie. Vous voulez savoir la première fois qu'ils ont fait quelque chose la dernière fois qu'ils ont fait quelque chose comme auparavant. Et le script que nous avions eu cette question ressemblait quand avez-vous utilisé un service de livraison ou à la demande pour la dernière fois ? Vous voulez connaître le meilleur moment dans les pires moments. Tellement de mauvaises expériences et de bonnes expériences. Et vous voulez leur poser la question de la liste de souhaits dont nous avons parlé lors de cette dernière. D'accord. Ce sont des messages de conversation. Donc parfois, si vous ne savez pas quoi demander, vous pouvez simplement leur donner des invites de conversation et sonner comme ça. Vous pouvez dire si vous avez déjà eu une expérience où et pour décrire le scénario que vous pensez, vous voulez en savoir plus. Et c'est bon s'ils l'ont. Si c'est le cas, vous pouvez dire : Pouvez-vous me raconter l'histoire du début à la fin ? Et puis, dans le magasin, vous pouvez poser des questions qui sonnent comme la suivante qui est et ensuite ce qui s'est passé. Ils vous disent plus d'informations et vous Pourquoi avez-vous fait cela ? Ou comment avez-vous fait cela ? Qu'est-ce que tu as aimé ou détesté à ce sujet ? Et si vous pouviez avoir une baguette magique, que feriez-vous, à quoi ressemblerait-il ? Quel serait votre souhait ? Ensuite, lors de l'entrevue, il est préférable de simplement sourire. Posez des questions ouvertes, obtenez leurs histoires, restez silencieux et écoutez. Vous ne devriez pas parler la plupart du temps. Ils devraient se demander comment, pourquoi, quoi, quand. Pendant l'entretien, ce que vous ne voulez pas faire, c'est parler de votre produit. Vous êtes en train d'apprendre sur l'humain, pas sur le produit. Parlez tout le temps. Y a-t-il le temps de parler, pas le vôtre. Demandez à un leader. Et des questions et on nous pose juste des questions très ouvertes. Ne les menez pas dans un sujet autour d'un iPad. Laissez-les entrer dedans. Renseignez-vous sur les comportements futurs. Vous pouvez me demander si j'aime les chevaux ? Et je vais vous dire oui. Mais dans ma sortie dans le futur ou dans mon laissez-passer pour trouver des chevaux ou monter à cheval ? Non, je ne le sais pas. Mais je vais vous dire que j'aime bien les chevaux. comportement futur n'est donc pas quelque chose sur lequel vous devriez vous concentrer parce que les gens ne savent pas ce qu'ils feront à l'avenir. Ils savent ce qu'ils ont fait dans le passé. Concentrez-vous donc sur le comportement actuel et le comportement passé. Ne demandez pas, est-ce que ça vous plaît ? Utiliseriez-vous mon produit ? Ce n'est pas pour eux. Ils vous le diront encore, j'aime bien les chevaux. Oui. Mais c'est dans leur comportement. Ce que vous trouverez dans leur comportement devrait allusion à ces questions, est-ce que vous l'aimez et l'utiliseriez-vous ? Donc ils ne font rien autour des chevaux, alors ils pourraient ne pas utiliser votre produit, mais je vais vous dire que j'aime bien votre produit pour chevaux et peut-être que je l'utiliserai. Mais rien dans mon comportement ne vous dit que je vais aller chercher à monter à cheval ou à m'intéresser aux chevaux. Ne vendez pas. Ce n'est pas le moment de la cellule, c'est le moment pour vous d'apprendre de ces personnes. Et vous ne voulez pas beaucoup de questions oui et non. Vous voulez beaucoup de questions axées sur l'histoire. Permettez-moi donc de vous montrer comment poser vos questions afin de ne pas obtenir de réponse oui ou non. Donc, si vous posez vos questions en commençant par le début du comment et du pourquoi, cela équivaut à des histoires. Si vous cadrez vos questions, ferais et vous finirez par des questions oui et non. D'accord. Tout comme je voulais savoir sur l'iPad et j'ai demandé à quelqu'un, comment interagissez-vous avec la technologie ? Vous pouvez commencer par comprendre l'histoire et plonger en profondeur. Disons donc que je demande à quelqu'un comment il s'engage avec la technologie comme je l'ai fait auparavant. Et j'ai eu leur histoire. Ils m'ont dit, ils m'ont dit : J'utilise mon téléphone. J'ai ce réveil futuriste. J'ai un ordinateur portable. J'utilise un iPad. Yada, Yada, Yada. Laissez-les continuer. Ne plongez pas encore dans l'iPad. Retrouvez leur histoire, puis faites le temps profond. Ils vont tout ce que vous utiliserez, vous êtes comme Lequel utilisez-vous le plus ? Mon iPad y , puis entrez dans l'iPad et vous avez tout un tas de questions sur le pourquoi et leurs comportements autour d'un iPad. Mais je n'ai pas commencé par savoir comment utilisez-vous votre iPad ou que l'utilisez-vous ? Quatrièmement, j'ai commencé par la question axée sur l'histoire qui était très ouverte. J'ai eu leur histoire complète. Et je peux approfondir chaque partie de leur histoire et y apprendre un peu plus. Ok, donc voici quelques-unes des meilleures pratiques lorsque vous cadrez des questions, entrevue, permettez-moi de vous montrer à quoi ressemblera une entrevue et la meilleure. Nous sommes donc de retour chez UX Honey.com. Ce sont vos meilleures pratiques basées sur la dynamique d'entrevue. Donc, si vous avez une dynamique à deux personnes, ce qui signifie qu'il y a un intervieweur et qu'il y a vous, il n'y a que deux personnes. Assurez-vous d'enregistrer avec de l'audio. Vous ne pouvez pas prendre de notes et poser des questions à la personne interrogée en même temps. Donc, ce que vous allez faire, c'est simplement poser des questions. Vous allez écouter, vous allez apprendre. Vous allez enregistrer cette session. Et après l'entrevue, vous allez revenir et vous allez écouter ces enregistrements. Vous allez revenir en arrière, aller de l'avant ou rembobiner, écouter l'audio. Et voici la vraie astuce pour faire des recherches. Vous allez écrire vos idées, vos citations dans vos apprentissages ou quelque chose d'utile sur les notes autocollantes ? Oui, Sticky Notes. Allez chercher un tas de notes autocollantes avec différentes couleurs, notes autocollantes, vous allez en avoir besoin. Je vais vous montrer un peu ici. Et nous apprendrons également comment faire avec ces notes adhésives dans la vidéo suivante. Vous voulez donc en faire un à l'intérieur ou un apprentissage par note adhésive écrite avec un Sharpie noir. Il est donc très facile de lire à distance. Assurez-vous d'écrire le nom de la personne interviewée sur la note adhésive afin de savoir à quelle couleur cela se rapporte ? J'ai interviewé cette personne ici, je veux écrire son nom en jaune. Plus tard, lorsque j'interviewerai plus de gens, je saurai qui a dit quoi sur les notes autocollantes jaunes. Et vous verrez que vous vous retrouverez avec ce que nous appelons « bucket utilisateur ». Toute une série d'informations relatives à un entretien. Après de nombreux entretiens, ce que vous aurez est quelque chose comme ça. Disons que j'ai interviewé Tom, Joe et Jane. Ensuite, j'aurai trois couleurs. Et dans chaque section, nous présenterons des informations, des citations et des enseignements pour chaque personne. Et je vais vous montrer ce que vous allez en faire dans la prochaine vidéo. Disons que vous avez un preneur de notes avec vous. Nous avons besoin de chercheurs. La dynamique est donc de trois personnes. C'est comme la dynamique à deux personnes. Vous voulez toujours que notre enregistrement audio soit lancé. Mais cette fois, vous allez avoir un preneur de notes. Le preneur de notes va juste prendre des notes. Ils vont juste écrire des informations qu'ils entendent de la personne interrogée. Le travail des preneurs de notes n'est pas de parler. C'est votre travail d'intervieweur. Ils prennent simplement des notes avec un stylo sur papier. Après l'entretien. Vous allez tous les deux vous asseoir ensemble et vous lirez ensemble les notes. Et vous écouterez l'audio ensemble. Vous écrirez ensemble l'intérieur des citations et des apprentissages ou tout ce qui est utile sur les notes autocollantes. Et vous écrirez un aperçu par note autocollante écrite avec le Sharpie noir. Et vous finirez par l'entrevue ou vous serez capturé comme ça. Voici Tom, représenté en orange. Après vos entretiens, vous voyez que nous avons la même chose dont je viens de parler. Ok, et laissez-moi vous donner un exemple avant de terminer la vidéo de ce à quoi cela ressemble. Voici un outil que j'utilise. C'est ce qu'on appelle le tableau en temps réel Il imite simplement un tableau blanc réel et vous permet de créer des notes autocollantes. J'ai des notes autocollantes ici. Je peux écrire tout ce que je veux ici. Et je peux copier des notes autocollantes, les créer tellement imitant le monde physique. Mais il est préférable de le faire d'abord sur de vraies notes adhésives physiques. Posez-les sur le mur. Donc, votre mur devrait ressembler à ceci. Et vous pouvez voir ici que j'ai interviewé trois personnes et toutes leurs informations sont capturées sur des notes autocollantes, un aperçu par note. Et c'est là que vous finirez par des recherches. Et si vous voulez savoir quoi faire ensuite, nous pouvons passer à la vidéo suivante de la série, qui explique comment synthétiser les résultats de la recherche et comment rédiger un énoncé de problème. Ok, donc vous l'avez. C'est ainsi que vous créez un script d'entretien utilisateur et les meilleures pratiques lors de la recherche. J'espère que je vous verrai dans la prochaine vidéo. Et encore, comme toujours, merci et adieu. 5. Comment faire des to de UX et rédiger une déclaration de problèmes: Très bien, Bienvenue dans la prochaine série de vidéos sur la création d' une étude de cas UX et d'une conception d'expérience utilisateur 1, 0, 1. Dans la dernière série de vidéos, nous avons expliqué jusqu'à présent comment fixer des objectifs, comment créer un personnage, comment créer un entretien utilisateur, un script et des bonnes pratiques lors de la recherche. J'espère que vous avez eu l'occasion de faire des recherches et de parler à certaines personnes, faire des entrevues avec des utilisateurs. Si ce n'est pas le cas, c'est bon. Vous pouvez apprendre ce processus et toujours revenir en arrière et faire ce type de travail. Je suis tellement dans cette série de vidéos que nous allons examiner, c'est comment synthétiser vos résultats de recherche et comment rédiger un énoncé de problème. Qu'est-ce que la synthèse ou la synthèse ? Il s'agit en réalité d'organiser vos informations et d'adopter une approche systématique. Donc, ce que je vais faire, c'est aller sur le site UX.com ou désolé, UX Honey.com. C'est le site que j'enseigne à l'université. Et si vous cliquez sur l'UX 2 ici, nous rentrerons chez nous. Nous trouverons la synthèse et le regroupement. Vous cliquez sur ce bouton et il vous amènera du côté de la synthèse. Et encore une fois, comme je l'ai déjà dit, c'est la définition de la synthèse. Il s'agit d'organiser et de préparer des informations. Ainsi, dans la dernière vidéo, je vous ai appris à mener des recherches. Et ce que vous allez faire, c'est que vous avez pris les informations que vous avez trouvées lors chaque session de recherche ou session utilisateur, session d'entrevue utilisateur. Et vous avez pris ces idées et vous les avez écrites sur des notes autocollantes. Un aperçu par note autocollante. Vous avez créé ici à droite, mais nous l' appelons « compartiment d'informations utilisateur ». Dans cet exemple, nous avons Tom, et Tom est représenté par orange et nous avons toutes les informations que nous avons trouvées perspicaces, capturées sur des notes autocollantes. Et c'est le processus que nous appelons la synthèse. Donc, une fois que vous avez interviewé, disons, cinq à sept personnes, il est généralement préférable de s'arrêter et de faire le travail de regroupement. Le clustering est lorsque vous trouvez des modèles et des thèmes aux informations dont nous disposons. Et ces schémas nous aident à identifier les points d'intérêt, les points de priorité. Et cela nous aide à valider les objectifs d'apprentissage et les hypothèses que nous avons formulées dans le personnage qu'au début. Vous voyez donc un exemple que j'ai ici. Nous pouvons supposer que nous avons interviewé trois personnes jusqu'à présent. Tom est représenté en orange, Joe est représenté en rose, et Jane est représentée en jaune. La première chose que vous faites lorsque vous agrégez est donc de commencer par une catégorie très large. Et dans cette catégorie, nous avons la technologie. Et rappelez-vous, lorsque j'ai parlé dans la dernière vidéo de la façon dont nous posons nos questions. Nous commençons donc généralement des questions de haut niveau non détaillées, mais très grandes et ouvertes. Dans le dernier exemple, j'avais une question : je voulais apprendre le comportement de quelqu'un sur iPad, mais je n'ai pas commencé par une question qui ressemblait à ça. Comment utilisez-vous votre iPad ? En fait, j'ai commencé par une question beaucoup plus large , à savoir comment interagissez-vous avec la technologie ? Et les entrées que j'ai obtenues des gens étaient partout. Ils ont donc parlé de la façon dont ils utilisent leur, ils utilisent leurs appareils mobiles. Ils utilisent un ordinateur portable, ils utilisent un iPad, ils utilisent un réveil vraiment futuriste. Certains utilisent des technologies vraiment intéressantes dans la cuisine. Mais je fais une déclaration générale de l'information autour de la technologie. Ce que je fais en premier, c'est que je crée un thème large. Nous appellerons donc cette technologie. Et je vais en faire une note adhésive, une feuille de papier ou une catégorie. Imaginez qu'il s'agisse d'un espace physique et que c'est la technologie. Habituellement, j'utilise une note autocollante C'est une couleur différente de toutes les notes autocollantes que j'ai utilisées qui représentent les utilisateurs. Donc, dans ce cas, vous pouvez, il s'agit d'une note autocollante plus grande appelée technologie. Et maintenant, je vais m'arrêter et je vais lire tout ce que j'ai à l'intérieur, fonction des recherches que j'ai faites et de tous les utilisateurs que j'ai effectués ici. Et je vais en tirer un aperçu sous ce sujet qui se rapporte à la technologie. Vous pouvez voir que je tire de chaque trois entrevues que j'ai faites avec Tom, Joe et Jane. Et j'insère leurs notes adhésives dans ce sujet appelé technologie et je mets leurs notes autocollantes sous la note autocollante qui dit technologie. D'accord ? La deuxième chose que je fais, c'est une fois que j'ai ces grandes catégories pleines d'idées, je peux aller et devenir granulaire avec elle. Donc, graine. Maintenant, j'ai entendu parler de cette question sur la façon dont vous engagez avec la technologie ? Les gens m'ont parlé d'informations sur la façon dont ils utilisent leur iPhone ou iPad et, dans ce cas, comment ils utilisent le Web également. J'ai donc retiré des notes collantes qui se rapportent à chaque sujet du sujet technologique. Et j'ai créé des sujets plus précis, iPad, iPhone et Web. Et cet acte consistant à faire tout ce travail est en train de se regrouper. C'est ainsi que je trouve des motifs et des thèmes élevés. Cela m'a aidé à suivre le travail que je vais faire. Donc, ce que vous voulez faire, c'est que vous voulez passer par toutes vos entrevues et vous voulez commencer à assembler tous vos thèmes. Et je vais faire défiler vers le haut et vous montrer à quoi cela ressemble. Vous pouvez donc voir ici que j'ai un tas de personnes que j'ai interviewées représentées dans ce que nous avons quatre couleurs différentes sur celle-ci. Nous avons du bleu, du vert, du gris et du jaune. Et j'ai la note adhésive rose qui représente le sujet actuel ici. Donc, le rose et toutes les personnes qu'ils ont dit qui se rapportent à ce sujet en dessous. Je vais donc vous montrer, voici un autre exemple. Voici tout un mur. Voici donc à quoi cela devrait ressembler dans votre espace physique. Vous devriez avoir un tas de notes autocollantes écrites avec Sharpie. Et vous avez tout un mur d'informations que vous pouvez en extraire deux et en cartographier deux pour vous aider à prendre des décisions concernant votre travail UX à l'avenir. Voici une autre photo de cela. Et regardez tout ce travail que nous avons effectué tous les entretiens que nous avons réalisés là-bas. Et vous pouvez également voir notre personnage que nous avons créé sur le mur. Et voici le processus que nous faisons. Voici quelques uns d'entre nous dans une pièce qui se réunissent. Et nous avons des sujets sur ces tableaux ici. Et nous rassemblons ici les informations pertinentes que nous avons entendues de nos utilisateurs sur ces sujets. Donc, ça ressemble à ça. Voici moi avec un client et ils s'amusent. Nous lisons ce que je fais en ce moment alors que je lis un sujet, un aperçu, désolé, de la part de toutes les personnes à qui nous avons parlé, un aperçu précis et je le lis à haute voix. Et je demande à l'équipe, où cela convient-il ? Dans quelle catégorie de scène ou quel sujet ce site s'insère-t-il ? Et ensuite, je vais le placer seul sur ce sujet. Donc, tout cet acte que je viens de vous montrer était ce que nous appelons la synthèse et le regroupement de connaissances. Laissez-moi vous montrer ceci, juste vous montrer en temps réel comment cela fonctionne réellement. J'ai donc ouvert mon tableau en temps réel que je vous ai montré dans la dernière vidéo. Il s'agit d'un tableau blanc numérique. Et voici mes trois personnes que j'ai interviewées, et voici toutes les idées que j'ai. J'ai donc interviewé Naomi, Jo Han et Anna ici. Et maintenant, je suis prêt à commencer à aborder quelques sujets ici. Certains vont commencer assez large. Et je vais utiliser l'exemple dont nous avons parlé dans la dernière vidéo, Baba T et un nœud papillon à la demande. J'étais donc curieuse d'entendre quand je suis sorti et interviewé. quelle fréquence les gens commandent-ils Baba t et quand obtiennent-ils tous les deux un T ? Donc, en ce moment, je vais choisir, disons le jaune pour ma catégorie. Et je vais appeler ça « collant ». Comme quand les gens obtiennent-ils Omega T ? Okay, tu l'as là. Nous allons donc appeler celui-ci. Quand les gens boivent , beau, mais nous sommes occupés 0. Et je vais passer en revue chacune de mes catégories. Ici, mes utilisateurs sont-ils ici et voient où ils ont dit, quand vont-ils passer ? J'ai donc une personne ici, il dit que je reçois de l'oméga t surtout les week-ends. Donc, Laplace, c'est ici. Et j'ai un autre aperçu ici. Cela fait parfois que je reçois de l'oméga t deux fois par semaine. Mettez-ça ici aussi. Encore une fois, il a été transféré à John. J'ai aussi une note collante qui dit qu'en moyenne une semaine, je saturerais le bokeh T trois fois par semaine. Je vais donc aller le placer ici. Et sur cette note collante ici, je reçois 0 mais presque tous les deux jours. J'adore ce genre de choses. C'est intéressant. Je vais m'en occuper ici. Et celui-ci dit que je me promène habituellement à San Francisco le week-end. Et si je vois un bobo à la place, j'arrête généralement d'en chercher un. Maintenant, il y a un comportement intéressant et intéressant. Allons donc les ramener à cette catégorie. C'est plutôt sympa. Allons voir Anna ici. Le Père Noël en a un qui dit que je reçois 0, mais pas seulement le week-end et j'essaie d'être en bonne santé pendant la semaine. Et elle a dit que je dirais que je boirais probablement Bobo t deux fois par mois. Ce sont donc des idées intéressantes que nous devrions aborder notre sujet ici. Alors maintenant, j'ai ce sujet, qui est quand les gens boivent au-dessus de t ? Mais maintenant, j'ai un aperçu de la fréquence à laquelle ils en boivent. Allons donc en faire un autre ici et en tirer quelques-uns de cette catégorie. Fais-le celui-là. À quelle fréquence les gens boivent-ils du thé ? Donc cette personne l'a dit ici, j'en reçois 0 mais surtout le week-end. Celle-ci dit parfois que je reçois de l'oméga t deux fois par semaine. Ok, allons faire ça là-bas. Sur le sud ici, il est dit que je fais généralement plus de marche autour de San Francisco le week-end et si je vois un bateau mais un endroit T, je m'arrête habituellement et j'en prends un. D'accord. Laissons-y qu'ils sont en moyenne une semaine. Je dirais un verre trois fois par semaine. Passons à ce sujet. Et je reçois le noeud papillon presque tous les deux jours. J'adore ce genre de choses. Allons mettre ça ici. D'accord. Je ne reçois Bogota que le week-end et j'essaie d'être en bonne santé pendant la semaine. Je pense que ça surgit là-bas. Et écoutez, nous commençons à voir un schéma ici, les gens qui reçoivent Baba T le week-end. Très intéressant. Je dirais que je boirais probablement du beau, mais deux fois par mois. D'accord. façon très intéressante de traiter vos informations que vous possédez. Et cet acte consistant à mettre des thèmes et à mettre des notes autocollantes sous les thèmes. Et c'est ce qu'on appelle la cartographie des affinités. Mais nous sommes vraiment à la recherche des modèles ici. Et maintenant, je peux revenir interviewer un tas d'autres personnes. J'ai également appris au cours de cette entrevue que les gens veulent Mobitz II non seulement le week-end, mais qu'ils voulaient aussi travailler. Ils partent pendant la journée de la semaine au travail et aux heures et l'obtiennent. Et vous devrez éventuellement avoir quelque chose où vous aurez beaucoup plus de gens sur l'un de ces sujets avec des couleurs différentes. Vous avez donc interviewé plus de gens, disons, je vais en faire une orange, nous en ferons un vert, vert clair, nous en ferons une autre, c'est violet. Et finalement, j'espère que vous en aurez beaucoup plus. Supposons que vous ayez un sujet ici, nous appellerons cela comme sujet 1. Et bien plus d'informations sur ce sujet. Ensuite, nous aurons un autre sujet sur ce sujet 2. Et j'espère que c'est ce que vous allez finir, quelque chose comme ça avec beaucoup plus de sujets que vous pourrez parcourir et lire toutes les informations que vous avez appris. Donc, à ce moment-là, si nous revenions en arrière et apprenons quel était l'objectif, une recherche était explorer et de capturer les réactions, explorer et de capturer les comportements, et d'obtenir de nombreuses réponses aux questions que vous aviez posées. Donc, à ce stade, vous pouvez arrêter de faire des recherches lorsque vous avez toujours compris et validé les comportements des gens, que vous avez leurs réactions et que vous avez beaucoup de réponses aux questions que vous avez envisagées d'apprendre lorsque vous avez j'ai d'abord fait des recherches. Donc, avant de partir à court et de commencer à concevoir et à créer des solutions, il est préférable de commencer à définir vos problèmes. La prochaine chose que nous allons faire maintenant , c'est que nous allons apprendre à rédiger une déclaration de problème. J'ai donc ici ce document joint à la vidéo que vous pouvez télécharger. Et c'est ce que nous appelons cela un cadre de déclaration de problèmes. Et le cadre décrit ici quelques points. Et ce qu'il fait, c'est qu'il nous aide à comprendre et articuler le problème auquel nous sommes confrontés et que nous allons résoudre. Et au sein d'un problème, il est important de comprendre qui est la personne, avoir ce problème, quel est son objectif et quelle est la solution qu'elle aimerait avoir qui l'aidera à résoudre ce problème. problème. Donc, le cadre est comme vous le voyez ici, c'est que vous commencez par la messagerie instantanée, vous posez le personnage et ensuite vous mettez, j'essaie de savoir quel est le but de cette personne. Mais je ne peux pas parce que vous définissez le problème. Et seulement si j'avais quel est le soluté, la solution prévue, que nous aimerions. Ok, donc allons utiliser l'exemple d'énoncé de problème Bow mais T. Nous avons donc couru avec ce bot mais T thème pendant tout ce temps comme exemples pour vous. Voici donc l'énoncé du problème du point de vue bokeh. Après nos recherches, nous avons appris que beaucoup de gens voulaient commander par 0, mais pas du travail. Mais ils n'ont pas pu quitter le travail parce qu'ils ajoutent beaucoup de travail à accomplir. Donc leur problème était le R Cette personne que nous visions, elle s'appelait Franny Shruti, c'était la persona. Encore une fois, leur objectif était qu'ils essayaient d'obtenir de la mobilité sur leur lieu de travail. Mais ils ne peuvent pas parce qu'ils ont trop de travail à faire et qu'ils ne peuvent pas quitter le bureau. Notre problème. Si seulement ils avaient un moyen de commander Baba t et leur faire livrer dans les 15 minutes suivantes. Voyez donc comment vous utilisez cette déclaration de problème pour cadrer correctement le contexte du problème. Et c'est à peu près tout. C'est assez simple. Il faut beaucoup de travail et beaucoup de temps pour arriver ici. Mais une fois que vous en êtes à ce stade, vous pouvez maintenant commencer à passer du côté de la solution, le chalutage, l'esquisse, la conception, la fabrication, la conception des filaires, les prototypes, et sortir et faire de l'utilisateur tests. Donc, dans la prochaine série de vidéos, je vais le couvrir. Je vais vous expliquer comment créer une carte de parcours client, qui vous aidera à raconter l'histoire pour laquelle vous allez concevoir. Vous allez utiliser des modèles d'esquisse et des frameworks utilisés pour créer ces conceptions filaires. Je vais vous apprendre comment créer un prototype cliquable, comment effectuer les tests utilisateur. Et une fois que tout cela sera fait, vous ferez cette base d'un système de conception, qui crée tous les éléments de conception. Comment appliquer la conception visuelle à votre filaire. Meilleures pratiques lorsqu'il s'agit de concevoir vos CV et les grandes lignes de l'étude de cas. Cool, donc nous ne l'avons pas fait. Je vous verrai dans la prochaine série de vidéos et je vous remercie toujours et au revoir. 6. Créer une carte de voyage client: Très bien, revenez à la conception d'une étude de cas UX et de conception d'expérience utilisateur en tête-à-tête. Nous venons de terminer toute une série de vidéos. Nous avons déjà appris comment créer et fixer des objectifs. Comment créer un personnage de conception, comment créer un script d'entretien utilisateur, bonnes pratiques lors de la recherche. Comment prendre toutes vos informations de recherche et synthétiser les résultats. Comment rédiger une déclaration de problème. Aujourd'hui, nous allons nous concentrer sur la création d'une carte de parcours client. Je vais donc me rendre sur le programme du site Web, un site Web que j'utilise pour mon enseignement universitaire. J'ai deux cours. J'enseigne les sérotypes à y2, x2, et j'enseigne la conception avancée de l'expérience utilisateur, que nous appelons UX S3. La carte du parcours client est quelque chose que j'enseigne aux étudiants avancés. Je vais donc cliquer sur Y2, X3. Et voici toutes les méthodes que j'enseigne pour ce cours. Et nous allons faire défiler ici pour trouver les cartes du parcours client ici. Donc, là où il est dit cartes, je vais cliquer là-dessus. C'est ici que nous commençons nos informations sur la carte du parcours client. Bon, alors qu'est-ce qu'une carte de parcours client ? Il s'agit d'un cadre qui nous aide à comprendre le parcours actuel ou futur que poursuit notre client. Donc, généralement, lorsque vous modélisez l'état actuel, vous modélisez le problème actuel. Et c'est généralement un scénario auquel est confronté le personnage ou l'utilisateur ciblé. Et lorsque vous modélisez l'état futur, vous utilisez généralement le parcours client pour modéliser la future solution dans laquelle vous allez concevoir. Alors, quand l'utilisez-vous dans l'état actuel ? Au début, si vous avez un expert en domaine ou vous en savez beaucoup sur votre utilisateur, vous pouvez le faire. Vous pouvez le faire vers la fin de votre recherche une fois que vous avez suffisamment d'informations sur l'utilisateur et son problème lors de la modélisation habituelle du problème. Quand l'utiliser dans le futur voyage est après vos recherches, vous avez appris beaucoup de choses sur la personne que vous ciblez ses comportements. Vous pouvez également utiliser ce modèle, la carte du parcours client pour modéliser un concept ou une solution validée. Encore une fois, vous modélisez généralement le scénario de la solution. J'ai donc l'exemple ici. J'ai donc un exemple sur le site Web et un exemple qui est également rempli. Je vais donc parler d'Illustrator. Et j'ai déjà joint à cette vidéo un document qui décrit le framework que vous pouvez télécharger et utiliser. Laissez-moi parcourir ce document. Ici, au sommet, nous avons le parcours client. Habituellement, vous pouvez écrire votre état actuel ou futur ici. Je vais vous montrer l'exemple que nous avons ici à droite. Ici dans une seconde. Et ce que nous appelons ces rangées ici, nous appelons ces voies de baignade. Le premier premier que nous ayons est donc un environnement physique. Nous nous demandons donc où se trouve l'utilisateur lors de chaque action qu'il entreprend pendant son voyage ? Il s'agit donc de l'environnement physique. C'est peut-être comme s'ils étaient dans le bus. C'est peut-être au bureau. La prochaine voie de baignade sous les environnements physiques est l'action de l'utilisateur. La clé. Il s'agit des actions des utilisateurs. Et celui en dessous qui s'appelle le devant de la scène. Il s'agit des interactions que l'utilisateur peut voir. Pensez donc à ce que lorsque vous regardez une représentation théâtrale, il y a beaucoup de choses que vous voyez sur scène qui se produisent. Mais vous pouvez voir la prochaine étape, la phase de sauvegarde, c'est derrière le rideau. Donc, lorsque vous regardez une représentation théâtrale, il y a beaucoup de travail en cours derrière la scène pour s'assurer que l'avant de la scène se déroule comme prévu. Cette voie de baignade de la scène de secours ici est appelée l'intérieur est appelée l'arrière de la scène, et ce sont les interactions que vous ne pouvez pas voir. L'utilisateur ne peut pas les voir. Et le dernier ici, celui de soutien en bas s'appelle la voie de baignade de soutien. Et ce sont des interactions de support pouvant être des e-mails, des messages texte, des notifications, d'accord, ainsi de suite, toutes ces séries de vidéos que nous avons réalisées, nous avons examiné l'exemple étant le service de livraison en ligne de commande Mobitz II. C'est une application que nous allons développer ici lors de quelques vidéos supplémentaires. Et j'ai utilisé ce cadre de parcours client pour modéliser tout le parcours que le client va poursuivre lors de la commande d'un bobo t en ligne. Et c'est le parcours que nous allons également concevoir dans les prochaines vidéos. Ok, donc je vais zoomer assez serré et faire défiler pour que vous puissiez voir. Ce que j'ai fait ici, c'est que j'ai commencé avec l'objectif actuel qui est ordonné à Bogan de voir en ligne pour être livré au bureau. En fait, ce n'est pas l'état actuel. J'espère que tu as compris ça. Allons le changer. C'est l'objectif futur de l'État ici, car nous concevons la solution en ce moment. L'objectif futur de l'État est donc de commander BY Bowtie en ligne pour être livré au bureau. OK. Nous avons donc notre nom d'utilisateur ou notre utilisateur était Franny Foodie. Elle veut commander un Mobitz II au bureau. Et puis l'état actuel qu'elle ne peut pas. Parce qu'elle a trop de travail à faire et qu'elle ne peut pas quitter le bureau. Elle cherchait donc un moyen de commander le bouton Bot et de le faire livrer à son bureau. C'est donc l'application que nous allons créer. Et voici le parcours client que Franny Foodie va faire du mannequinat ici, pour que vous puissiez voir. OK. Frannie Foodie est donc au bureau. Elle est sur un ordinateur. Elle va sur le site ici, quel que soit le site, le nom est, on peut dire que c'est peu sucré. Elle voit une page marketing avec des messages promotionnels. Il y a des emplacements de livraisons, des vues sous forme de carte pour qu'elle puisse voir les heures de service et où ils livreront Bobo. Seulement à San Francisco, les heures de service sont de 8 à 9 heures. Et elle voit un bouton qui dit, voir le menu. Dans les coulisses, nous avons une base de données backend. Cela donnera les heures de service et les zones de livraison à jour des heures de service et des zones de lieux les plus récents. Laissez-moi y ajouter un. Donc la prochaine chose qu'elle va faire ici sur cette action utilisateur, en regardant le bot, le menu de l'équipe bot, elle est sur notre site Web sur un ordinateur en ce moment sur son bureau au bureau. Elle peut choisir parmi différents types de noeuds papillons. Quelques boissons, photos de garnitures, prix et bouton Ajouter au panier. La base de données back-end derrière le sage. Sage mettra à jour les garnitures en rupture de stock et les types T afin que nous n'ayons pas de garniture spécifique. Ou T va jeter un symbole en rupture de stock sur le devant de la scène. La prochaine chose que Franny foodie fait, c'est qu'elle sélectionne l'arc mais T et ses garnitures. Encore une fois, elle est sur le site Web à son bureau. Elle sélectionne et ajoute au panier du thé au lait avec un grand Baba, moyen, sucré, et ajoute un nom à l'étiquette de la tasse. Ainsi, vous pouvez commander la quantité de douceur que vous souhaitez sur votre propriété. Nous effectuons donc plusieurs commandes. Il est important que vous mettiez le nom sur la tasse. Donc, si nous avons quatre commandes, Abeba T, il désignera les personnes que vous pourrez mettre les noms des gens pour chaque spécialité de saveur et de commande. Elle voit le bouton Ajouter au panier et continue à ajouter au panier. À ce stade, nous avons la base de données back-end qui stocke les informations sur les boissons et stocke le nom des étiquettes des gobelets. La prochaine étape que Franny foodie fait, c'est qu'elle passe en revue la commande. Elle voit les sélections de thé au lait, le prix total, les taxes et les frais de livraison. Et elle voit un bouton qui dit caisse. À ce stade, le backend, vous êtes en retard, calcule la taxe de vente et calcule les frais de livraison est une estimation. Vous pensez que vous avez déjà quelque chose dans la jambe de soutien ici ? OK. Maintenant, elle doit se connecter. Elle voit donc ce formulaire de courriel, un formulaire de mot de passe. Elle peut se connecter via Facebook, elle peut se connecter via Google. Elle voit un bouton qui dit se connecter. À ce stade, la base de données principale confirmera que les informations de connexion sont correctes. Extrayez les informations client telles que le nom et l'adresse de livraison saisis dans le dernier écran et enregistrez-les dans le profil de cette personne dans le profil de vendredi. Ok, la prochaine chose qu'on va faire ici pour Frannie, c'est qu'elle va confirmer sa robe de livraison et ses détails de paiement inter. Donc dans l'environnement physique, elle est toujours entrée das a un ordinateur, mais maintenant elle sort une carte de crédit. Quand elle voit l'adresse de livraison, elle voit la carte de crédit, en Floride, elle voit un délai de livraison estimé. Elle voit un coût total, une ventilation fiscale et des frais de livraison. Elle voit un bouton qui dit Placer la commande. Et encore une fois sur le backend, nous allons calculer la taxe de vente. Nous allons calculer les frais de livraison réels car nous connaissons maintenant les fiducies immobilières auxquelles nous allons les livrer. OK. Ensuite, le paiement sera confirmé, c'est la prochaine étape que l'ami va passer. Elle a donc saisi toutes ces informations, elle passe la commande. Elle voit que le paiement a été couronné de succès. Elle voit que le délai de livraison va prendre pour obtenir son bureau au professeur de bokeh. Elle voit l'adresse de livraison. La base de données back-end ici confirme l'ordre des informations de paiement pour l'entreprise stocke la commande de l'utilisateur dans une section de profil utilisateur. Donc ceux phréniques et retournent voir le journal historique de ses commandes et ça envoie un reçu à l'e-mail. Alors rappelez-vous que cette dernière piste était la piste de support. Vendredi va donc recevoir un e-mail du reçu de son achat. Et cela créera également les commandes et les détails pour l'entreprise afin que l'entreprise puisse commencer à travailler sur son oméga t. La prochaine étape est donc que Franny attend à notre bureau que Bobo t soit livré à son bureau. Donc, la dernière étape, rien ne se passe vraiment. Elle attend juste. Mais derrière la scène, il y a beaucoup de travail sur Billy le messager à vélo. Il doit emballer le Bobo t. Il informe le système que le t est livré et il imprime jamais. Il demande également au système d'envoyer un SMS, d' envoyer une notification par e-mail de l'ETA, l'heure d'arrivée estimée. que ETA se présente sous forme d'un texto et d'un courriel à Franny que nous sommes en route et lui donne un temps estimé de quand son arc mais t sera livré à elle. Billy part au coucher du soleil et il va livrer ce Bobo T sur son vélo. Bon, donc maintenant, nous allons passer à la prochaine action, c'est que le Bobo t est livré. Donc l'environnement physique est que vous pouvez voir le bureau frénétique et voir Billy, elle peut voir l'ampoule, un T un reçu aussi. Et je suis derrière la scène, le messager à vélo, Billy, et je forme le système de réalisation de la transaction. Alors maintenant Franny reçoit une taxe et un courriel la remerciant pour son service. Et ce serait un bon endroit aussi pour lui donner un coupon pour un combat, peut-être un rabais de 5$ sur la prochaine commande. OK. Il y a donc une carte de parcours client. Je vais vous montrer une autre version d'une carte de parcours client. Et vous pouvez réellement l'utiliser lorsque vous effectuez des tests utilisateur ou lorsque vous êtes avec votre personnage ciblé ou votre client. Je vais donc revenir ici à l'UX, chérie. Et nous allons parler un peu de la carte du voyage émotionnel. D'accord, alors qu'est-ce qu'une carte de parcours client émotionnelle ? Il s'agit d'un cadre qui vous aide à comprendre le parcours actuel que traverse votre client d'un point de vue émotionnel. Nous le faisons généralement plus souvent, pas vers cet état futur. Vous pouvez également le faire pendant un état actuel. Et j'ai tendance à le faire une fois que nous avons conçu, déjà construit dans un flux de travail de nos conceptions construit. Voici donc l'exemple ici sur le site Web que vous pouvez trouver. Mais je vous ai également donné l'exemple dans le même fichier que vous pouvez télécharger avec la vidéo. C'est donc assez similaire à la carte du parcours client. Nous avons les mêmes voies de baignade. Nous avons l'environnement physique ici en haut, si l'utilisateur agit ici. Mais à ce stade, Delaney que nous avons ci-dessous est décrit par des émotions. Vous pouvez donc voir cette voie ici est décrite par l'excitation. Nous avons un état normal. Vous avez un peu d'hésitation. Nous avons un état confus. Vous avez un état frontalier et nous en avons un qui est ouvert. Vous pouvez donc imprimer ce document. Vous pouvez tester votre application, et vous pouvez demander à la personne de remplir toutes les informations qu'elle a ressenties ici à ce stade, elle peut la dessiner avec un crayon et un Sharpie. Permettez-moi donc de vous donner l'exemple de ce à quoi cela ressemble dans le service bokeh t à la demande que nous avons. Alors rappelez-vous à ce stade que j'ai déjà conçu quelque chose. Je suis allé voir mon client. Je teste cette conception par un utilisateur avec eux. Ou le design est déjà vivant dans la nature. Et j'ai trouvé quelqu'un qui l'a utilisé. Et je suis allé leur parler et je voulais savoir quels étaient leurs états émotionnels pendant toute cette expérience utilisateur. Et ce que j'essaie vraiment de savoir, c'est quelle est la joie pour certaines parties de l'application et quelles sont les parties de la douleur. Je peux donc me concentrer sur l'amélioration non seulement des choses qui paient pour l'application, mais aussi des choses joyeuses et assurent continuellement le plaisir de nos clients. C'est donc le même voyage que celui que nous avons décrit précédemment. brin connu va sur le site Web ou l'application, eh bien, il regarde un menu ci-dessus. Elle sélectionne à la fois a t, et cetera, et cetera. Mais ce point, vous pouvez simplement demander à l'utilisateur de tracer une ligne qu'il ressentait pendant toute cette expérience après l'avoir traversée. Donc on peut voir que Franny ici, elle a commencé le Japon assez normal sur le site. Recherchez les menus, vous êtes vraiment enthousiastes et nous avons demandé pourquoi. Elle s'est excitée et elle a vraiment aimé voir toutes les options de mobilité. Vous devez sélectionner des options de mobilité et des garnitures. Encore très excité là-bas. Passons en revue la commande. Le Sénat était plutôt normal. Boom, je dois me connecter. Elle n'était pas cliente existante. Elle est vraiment frustrée ici parce qu'elle a oublié son mot de passe. Elle a donc dû passer par un flux de mots de passe oublié, finissant par devenir de plus en plus une fois qu'elle y a obtenu ses informations. OK. Elle a confirmé sa robe de livraison et entré les détails de paiement, donc c'était assez normal. Une fois qu'elle est allée confirmer le paiement, elle a dit qu'elle était vraiment excitée parce que ça allait arriver. Et puis elle a dit ici qu'elle s' ennuyait assez parce qu'elle devait attendre plus longtemps que ce qui était prévu. La demande lui a dit que je serais à son bureau dans dix minutes et que je finirais par prendre environ 15 minutes. Hum, donc elle a dit qu'elle s'ennuyait assez là. Mais là encore, ce qu'elle a obtenu son arc, mais elle aime vraiment 0, mais c'est vraiment bon. Elle s'est vraiment excitée ici. C'est ainsi que vous pouvez utiliser cette méthode pendant une session de test utilisateur ou après une application dans la nature. Je vais vous montrer une autre chose que vous pouvez voir. Je vais donc aller sur mon site Web ici et je vais vous montrer une étude de cas que j'ai élaborée ou des critiques. Cela permettra de garantir ce site Web. Je vais aller sur ma page de travail. Cliquez sur l'étude de cas ANOVA. Et nous allons trop comprendre ce qu'est l'application ANOVA. Que vous pouvez faire défiler ici et vous pouvez voir quand nous sommes allés tester ou tester un flux de travail dans l'application doute jusqu'à une cuisinière VUS. C'est un appareil qui cuisine dans votre cuisine qui donne des coups de pied. Vous utilisez de l'eau, comme vous pouvez le voir ici. Et c'est le voyage que traversent les gens. Ils vont sur l'écran d'accueil, ils font beaucoup d'activités. Ils entrent dans l'appareil et ils commencent à préparer les aliments et à cuisiner leurs aliments. Et nous voulions simplement savoir ce qu'ils ont ressenti pendant ce voyage. Vous pouvez donc voir comment je l'ai utilisé dans des études de cas. Ok, vous avez donc ce fichier ici joint à la vidéo, et vous pouvez le télécharger et l'utiliser à votre avantage. Et c'est là que tu l'as. Voici comment créer une carte de parcours client. Cool comme toujours, merci d'avoir regardé et de rester là pour la prochaine vidéo, qui consiste à esquisser des modèles et des cadres. Merci encore. Au revoir. 7. Ébaucher des concepts et des cadres d'ébauche UI: Très bien, Bienvenue dans la prochaine vidéo et comment concevoir une étude de cas UX et une conception d'expérience utilisateur en tête-à-tête. Nous avons donc couvert beaucoup de terrain jusqu'à présent. Nous avons appris à fixer des objectifs, à créer un personnage, à créer un script d'entrevue utilisateur, meilleures pratiques lors de la recherche, à synthétiser les résultats de recherche, à rédiger un problème déclaration. Dans la dernière vidéo, nous avons décrit comment créer une carte de parcours client. Et maintenant, nous allons examiner les modèles d'esquisse et les cadres. À ce stade, au stade où nous avons fait des recherches, nous avons validé un problème, nous avons compris un peu comment cette solution et tend à résoudre le problème. Et maintenant, nous allons esquisser des idées et des concepts sur la façon de résoudre ce problème. Je vais donc aller sur l'UX Honey.com. Je vais aller au X3. C'est la classe avancée que j'enseigne à l'université. Et faites défiler vers le bas, voici tout le contenu que nous avons pour la classe. Et je vais entrer ici en jaune les concepts et les cadres d'esquisse. Et quand j'appuie sur ce bouton, et vous pouvez voir que j'ai un peu d'informations utiles. Lorsque vous faites des esquisses en groupe. Rappelez-vous simplement qu'il s'agit de s'amuser. Il s'agit d'encourager des idées folles. Nous ne nous jugeons pas mutuellement. Nous sommes différents du jugement. Nous aimerions nous appuyer sur les idées des autres. Nous allons rester concentrés sur le sujet. Nous voulons être visuels et conceptuels lorsque nous parlons du travail de l'autre, ou que nous faisons une critique ou que nous partageons un travail. Une conversation à la fois est préférable et optez pour la quantité. Il s'agit d'aller très loin et d'essayer d'obtenir autant d'idées que possible. Ok, permettez-moi de parler du premier concept que nous avons, ou du cadre d'esquisse et du modèle que nous avons, qui s'appelle l'invite de valeur. Et ce que vous avez ici, c'est que vous dessinez une personne dans l'espace problématique ici. Et à côté de cela, vous avez une personne dans l'espace solution ici. On dirait donc quelque chose comme ça. Je l'ai également dans un document joint au dossier que je vais examiner et examiner avec vous dans une seconde. Je vais vous donner les raisons pour lesquelles ils utilisent ces modèles et à quoi ils sont bons. L'accessoire de valeur est donc un moyen rapide de placer votre personnage ici à gauche dans l'espace problématique. Ensuite, faites la solution conceptuelle proposée ici à droite. Et la solution proposée doit être conceptuelle et ne comprend pas de flux de travail d'interface utilisateur. Il s'agit donc de générer autant de concepts que possible. Donc, si nous passons au document qui se trouve dans le fichier ici, vous pouvez voir que je vais utiliser le même scénario et la même application Bobo que nous avons transportés dans toutes les vidéos. Et j'ai ici le modèle pour l'accessoire de valeur. Encore une fois, nous avons la personne dans l'espace problématique à gauche, et nous avons l'espace de solution ici à droite. Et je vais vous donner l'exemple qui se rapporte à l'expérience Bobo T que nous avons exposée plus tôt. Bon, donc nous avons Franny Foodie. C'est la personne que nous ciblons dans leur espace problématique en ce moment si vous vous rappelez que le problème était au travail, je voulais obtenir un Mobitz II, mais j'ai eu trop de travail pour quitter le bureau et aller prendre un bateau avec t. Elle est sur son ordinateur et ton travail de dépisteur de cabine. Et vous voulez utiliser une bulle de pensée ou une bulle de haut-parleur ici pour résoudre le problème. Donc voici le problème tel qu'elle était, elle avait un arc mais là où elle ne peut pas quitter le bureau. Donc, lorsque vous faites la persona ou la solution ici à droite, il est préférable de commencer. Et avec le nom du concept. Vous pouvez le voir ici avec ouvert maintenant. Ensuite, écrivez ce que l'utilisateur peut faire avec ce concept. C peut voir ici en bas. Au fond, Franny peut commander de l'oméga t à la demande. Vous pouvez donc voir ici maintenant qu'elle a un téléphone à la main et elle peut voir une carte, et elle peut voir le thé Bobo arriver à son emplacement. Donc, le nom du concept que nous avons écrit ici s'appelait Bobo maintenant. Et que peut-il faire de Bobo maintenant ? Elle peut commander de la mobilité sur demande. Des trucs assez simples. Ce que vous pouvez faire, c'est que vous pouvez imprimer ce document comme je l'ai fait ici. Vous pouvez le faire en session de groupe et vous pouvez la donner à vos coéquipiers. Ou vous pouvez simplement utiliser ce croquis autant de concepts que vous pouvez trouver et ensuite choisir votre dessin préféré. Si vous faites cela en tant que paramètre de groupe, ce que vous pouvez faire, c'est que vous pouvez avoir les croquis de chacun, plus grand nombre de concepts possibles, les placer sur le mur et ensuite revoir les concepts ensemble. Et chacun peut voter trois voix et il peut voter sur ses concepts préférés. Et j'espère que vous aurez un gagnant clair avec lequel vous pourrez aller de l'avant. Bon, allons voir un autre cadre d'esquisse dans le modèle. Un modèle qui implique un peu plus de conception d'interface utilisateur. Celui-ci s'appelle donc une flore, et c'est un moyen rapide d'esquisser différentes conceptions d'écrans ou scénarios sans être pris dans les mauvaises herbes sont les détails de la solution ou la solution Alice fonctionnera. Vous pouvez parler des détails ici si vous ne pouvez pas les adapter. Ce que nous avons donc, c'est que nous avons le croquis ici où il y a quatre quadrants et chaque quadrant ici, le haut à gauche est le début. Vous mettez donc l'utilisateur et les contextes à l'esprit. Vous avez l'action de l'utilisateur sur la droite. Vous avez une autre action utilisateur ici en bas à gauche. Et ensuite, vous obtenez le résultat lorsque l'objectif est atteint. Nous allons donc examiner cela dans les mêmes contextes que l'application à la demande Bobo t. Ici, j'ai le document que l'on appelle les quatre. Il est joint à la vidéo que vous possédez. Vous pouvez le télécharger, vous pouvez l'imprimer. Et vous pouvez faire le même type d'esquisse que pour l'accessoire de valeur. Je vais vous montrer l'exemple de comment l'utiliser dans le scénario Bokeh T. Vous pouvez voir ici que nous avons Franny Foodie. Elle est de nouveau au bureau. Et son objectif en tête ici est qu'elle souhaite avoir un T en ce moment, mais elle est vers l'extérieur, ne peut pas quitter le bureau. Ainsi, l'action utilisateur est, vous pouvez voir un peu d'interface utilisateur. Maintenant, je sélectionne à la fois à t qu'elle aimerait et ensuite l'action de l'utilisateur ici, vous pouvez voir comme elle peut voir en temps réel quand Bobo arrivera à la livraison. Elle a donc une petite carte. Vous pouvez le voir au fil du temps ici. Et ensuite, vous pouvez voir que l'objectif atteint le résultat. Elle est en fait dans le même domaine de travail qu'elle a commencé et elle travaille toujours. Mais des liquides dans sa main ? Oui, c'est vrai. Elle est basse, mais T et elle est heureuse maintenant. Des trucs assez simples pour le croquis ici. Et encore une fois, vous pouvez trouver ces deux fichiers joints à la vidéo. Disons que nous allons de l'avant et utilisez-les, utilisez-les en groupe. Si vous faites les quatre dans le cadre du groupe, faites la même chose dont nous avons parlé plus tôt. Demandez à tout le monde d'imprimer ça, de les esquisser. Je vais les mettre sur un mur. Votez sur le meilleur. J'espère qu'il y a un gagnant et que vous pourrez aller de l'avant dans cette direction. D'accord, c'est assez simple. n'est pas le cas, il existe des modèles d'esquisse et cadres pour vous aider à esquisser la solution. Ensuite, nous allons apprendre comment créer une conception filaire et comment créer un prototype cliquable à partir de ce filaire. Vous pouvez donc faire des tests utilisateur. Bon, comme toujours, merci d'avoir regardé et je vous verrai sur la prochaine vidéo. Au revoir. 8. Créer un design Wireframe avec Adobe XD: Très bien, revenez à la prochaine série de vidéos sur la création d' une étude de cas de conception UX et la conception de l'expérience utilisateur ne fonctionnera pas. Ainsi, jusqu'à présent, nous avons abordé tout un tas de vidéos sur la façon de fixer des objectifs, créer un script, de créer un script, bonnes pratiques lors de la recherche lors d'un énoncé de problème synthétisé des résultats de recherche, comment créer un carte du parcours client. Nous avons regardé la dernière vidéo, nous avons réalisé des esquisses, des modèles et des cadres pour les concepts. Et maintenant, nous allons prendre ces concepts et nous allons passer à une image filaire déshonorée. Allons voir ce que sont des filaires. Une image filaire est une conception de faible fidélité qui vise à valider le contenu, convivialité et le flux de travail d'un logiciel. Il est généralement de couleur en niveaux de gris. Et la raison en est que, comme vous voulez que les utilisateurs réagissent au contenu et au flux de travail, pas aux couleurs et aux illustrations, aux cloches et aux entreprises. Cela permet aux utilisateurs de vous donner facilement des commentaires honnêtes, car il ne semble pas que vous y ayez investi beaucoup de temps. Il n'a pas trop de temps et toutes les cloches et sifflets y sont investis parce que vous avez peut-être tort. Alors pourquoi investir beaucoup de vernis et illustrations et du bon travail si vous savez que vous allez être quelque chose. Il n'est donc pas encore validé. Une fois validé, vous pouvez ajouter toutes les cloches et les sifflets et faciliter l'itération lorsque le design est peu fidélité. Bon, voyons ici quelques exemples de ce qui fait un bon filaire et non un bon filaire. Et je vais parler un peu de la colonne à gauche et de la colonne de droite. Et ensuite, je vais également vous montrer des exemples de ce qui en fait une bonne. D'accord ? Une bonne image filaire a donc la bonne fidélité. Et sur le côté suivant, il ne ressemble pas à un produit final. Commencez à vous plier. Un bon filaire n'a pas de copie officielle, ce que nous appelons la loi Loren Ipsum. Donc bon utilise une fausse copie. Une bonne image filaire utilise de vraies photos et des icônes rapides, nous le laisserons. C'est pas bon. On utilise simplement des carrés gris qui indiquent les sodiums. Une bonne image filaire met en valeur le contenu. Pas si bon filaire a l'air bâclé et pas structuré. Une bonne image filaire valide le flux de travail et le modèle d'interaction. Ce n'est pas si bon filaire, c'est tout un. Et ils ne réutilisent pas les composants du modèle. Et le matériau a un bon emplacement pour l'emplacement de l'utilisateur. C'est de la pagination, nous l'appelons. L'utilisateur ne sait pas où il se trouve. Aucune idée de l'emplacement. Utilise de bons modèles de conception et un bon appareil. paradigmes des appareils sont des interactions différentes créées pour différents appareils. Ainsi, la taille en tant que logiciel peut agir sur le Web. Il peut agir différemment sur mobile en raison du plus petit. Voilà donc ce que nous appelons le paradigme des appareils. Et pas si bien On a des détails d'interaction qui ne sont pas satisfaits avec la logique. Il pourrait être filaire. C'est dans les détails et valide les micro-interactions. Et aussi un bon niveau tout aussi élevé et ne tient pas compte des détails comme les états. Bon, allons voir quelques exemples maintenant. Qu'est-ce qui rend un bon exemple visuel et non un bon exemple ? Ainsi, dans le bon exemple de gauche, il existe un flux de travail clair de localisation et de contenu et il met en surbrillance le contenu afin que vous puissiez voir où les utilisateurs ici, bouton actif ici. Il voit le voyage que je vais faire. mettre en valeur le contenu, mettre le contenu et regarder ceux qui sont corrects. Je ne sais pas ce que je regarde, regarde toutes les boîtes. Les barres carrées sont déroutantes comme à quoi servent ces carrés ? Des lignes à travers elle ? Habituellement, en tant que concepteurs, nous dessinons cela comme un croquis rapide pour montrer qu'il s'agit d'un soda, mais qui ne transmet pas de contenu. Vous pouvez voir ces petits carrés gris, ces petites lignes ici. C'est une représentation du café. Mais ce n'est pas, je ne sais pas, quelqu'un d'utilisateur quand je le regarde peut ne pas me ressembler. On dirait des boîtes grises. Je ne peux pas aller au prochain. L'exposant est un bon exemple de mélange du répétitif tout en donnant des contextes Soto. Et ils ont beaucoup de photos à vous montrer. Voici quelques vraies photos que nous allons utiliser. Et ensuite, ils réutilisent le même Soto à l'avenir. Il montre donc une répétition. Mais il n'y a pas que toutes les photos clignotantes qui vous montrent de vraies photos ici. Je pense que c'est bien. Ensuite, le contenu n'est pas clair. Voyez toutes les répétitions ici. Je ne sais pas ce que je regarde autour des genoux. Je sais que je regarde des photos ici. On dirait encore des boîtes avec une ligne. Ils ne sont donc pas distinctifs. Un autre. Il entre dans les détails et les micro-interactions. Vous pouvez voir que j'ai vérifié ce que nous appelons un accordéon et beaucoup d'informations dans l'une de ces petites coordonnées ici, cette case à cocher avec laquelle je peux interagir. Celui de droite ne figure pas dans nos détails. Encore une fois, je ne sais pas ce qu'est le dernier. Une bonne utilisation de l'alignement, grille et de l'espace négatif. Vous voyez ici. C'est un alignement qui se produit. L'un ou l'autre, il n'y a pas de bon usage de l'espace négatif, tout est rempli et la symétrie du gendre. C'est partout là-bas. On dirait ici une ligne vers les grilles de colonnes. Et ce n'est tout simplement pas vraiment bien assemblé. D'accord ? Avant de sauter dans le filaire, je vais vous montrer le croquis que nous avons fait dans la dernière vidéo. Donc, si vous vous souvenez de votre application, et c'est un service à la demande qui permet à cette personne de l'utiliser via une application mobile. En secouant, ouvrez l'application, vous pouvez voir plus de deux saveurs, vous pouvez en sélectionner une. Elle peut faire l'achat, le voir en temps réel lui être livré. Et maintenant, elle est de retour au travail. Elle a parlé. Elle est donc excitée. Le logiciel que nous allons utiliser pour créer cela est ce qu'on appelle Adobe XD. Donc, ça ressemble à ça. Vous pouvez le télécharger. Ils ont trois épreuves là-dessus. C'est un outil très simple et facile à utiliser pour créer des écrans. Et il a également construit des prototypes, que nous allons entrer dans la prochaine vidéo. Mais d'abord, je vais vous montrer comment construire quelques écrans ici, ajouter quelques symboles, comment le faire, et juste vous donner une vue d'ensemble du problème. Donc, la première chose que vous pouvez faire est de créer un nouveau fichier en effectuant simplement Command new. Si vous êtes sur un clavier ou un PC, c'est le contrôle pour max, c'est la commande et le contrôle et possède différents appareils que je peux utiliser. Je peux utiliser un iPhone 6, 7, 8. J'ai un iPad ici. Je peux bien faire, et je peux aussi faire une taille personnalisée. Si vous ne savez pas comment l'utiliser, j'ai déjà des tutoriels. Dormir. La science suggère. Si vous n'avez pas déjà utilisé cet outil pour consulter certains tutoriels, il est vraiment facile à utiliser. Vous pouvez voir ici que j'ai déjà construit le filaire pour l'application. Et laissez-moi vous montrer une vidéo très rapide pour ça. Ok, donc mon discours pendant que nous parcourons tout ce flux de travail ici, et je vous apprendrai à créer un écran. Donc, on se connecte à peu près. Nous voyons le premier écran, la connexion de l'application pour mon mot de passe e-mail. Stan va s'inscrire. Ils pouvaient voir toutes les sélections de Bogota ici. Je peux faire défiler, remarquez que la barre d'onglets inférieure reste fixe, ce qui signifie qu'elle ne bouge pas en bas. J'appuie sur Ajouter. Maintenant, je peux entrer dans un peu plus de complexité. Je peux ouvrir le menu déroulant, sélectionner Bobo semi-sucré. Je vais cliquer sur le gros robinet, un bouton en haut et ajouter une barre d'onglets et le bas à mon panier, C1, je peux la quantité ici. J'aimerais y aller ensuite. Détails de l'adresse. Et ils ont maintenant vu mon équipe mondiale en livraison et San Francisco. Et il va me manger et je vais fermer ça. Nous allons donc entrer dans le prototype dans la prochaine vidéo. Vous pouvez voir ici, voici tous les écrans qui ont permis de serrer, moquer et de sortir et de les tester. Ok, donc je vais faire une commande moins pour zoomer et une commande plus pour zoomer. Comme un anémomètre, je suis sur Mac. Je peux également utiliser l'icône Zoom ici pour zoomer. Et si je maintiens Option ou Alt sur un PC, je peux également effectuer un zoom arrière. Les fonctionnalités de base suivantes, si je tiens la barre d'espace, vous pouvez voir que j'ai la main. Ce que je peux faire, c'est que je peux facilement naviguer, naviguer en faisant Command Plus Command Moins. Il s'agit d'outils de navigation de base que vous utilisez. Oui. Bon, allons-y et commençons par créer un nouvel écran. Je vais donc appuyer sur ce bouton ici. C'est juste un tableau d'art. Et je vais faire un tableau d'art ici et regarder quand j'appuie sur ce bouton, il sait déjà que je veux un iPhone à six côtés, donc il imite la même taille que moi. Ça a l'air bien. Je peux copier ces plans de travail en cliquant et en maintenant la touche Option enfoncée, puis cliquez et faites glisser. Et je peux voir ici que je les ai tous copiés. Commençons par créer une page assez simple ici. Il s'agit de cet écran de chargement. Qu'en est-il de quelqu'un ? Ici, côte à côte. Vous voyez donc ici sur le tableau d'art que j'ai la possibilité le remplir d'une couleur différente que je peux choisir. Mais comme vous le voyez dans cet exemple, nous avons des tongs noires Cisco. C'est très facile. Ensuite, je veux avoir un type ici, alors je vais copier cette commande C, et je vais récupérer l'outil de type ici. D'accord ? Vous avez donc l'outil de type, tapez box. Je vais prendre le type que je viens d'avoir. Vous pouvez voir ici que ça n'a pas eu le même goût qu'ici. C'est très bien. Je vais donc scanner vers la droite ici pour que vous puissiez voir. Et ce que vous trouverez ici, c'est que j'ai les outils dont j'ai besoin pour l'objet sur lequel je suis, sélectionné le type d'appétit chargé. Je vais cliquer et saisir tout ce type. Et vous pouvez voir ici que j'ai cette taille. Alors, allons-y un peu. Mais oui, c'est difficile à lire. C'est ce que nous appelons laisser l'espace entre les serrés. Nous avons donc ici la possibilité de le laisser par double interligne, sélection est un terme que nous utilisons dans interligne de Trent est un terme que nous utilisons lorsque tous ont la même apparence exacte. Cela signifie simplement l'espacement entre ces lignes. Nous pouvons voir cet exemple ici. Vous avez un texte un peu plus petit. Je vais donc faire apparaître ça un peu. Donnons-lui une formule. Donnons environ 20 pixels à tous les pixels. Je vois ça. D'accord ? Nous avons donc ici les pertes de paragraphe. Donc je peux faire un paragraphe central, je peux faire ce que nous appelons barre oblique, centrée. C'est moins giflé. Cisco affleurant, affleurant, gauche, plus mince. Je souhaite modifier la couleur de ce texte. Vous pouvez voir que je peux revenir à l'outil de sélection directe. Ici. Je peux également appuyer sur Escape pour obtenir cet outil. Et je peux changer la couleur du texte en n'importe quelle couleur. Mais faisons-le léger. C'est assez facile. Il y a donc votre outil de texte. Nous avons appris un peu comment créer différentes tailles. Quel était le lettrage dans l'interligne, comment y accéder. Et un peu de paramètres de paragraphe, donc peu centré sur le paragraphe. Copions ce paragraphe. Allons faire le chargement. C'est donc un peu plus petit ici. Nous allons donc dire pixels. Nous le voulons. Voyez donc où il est dit « régulier ». La vieille école. Ça a l'air bien. Je vais donc passer à Illustrator maintenant. Il s'agit d'une lettre W2. Et vous pouvez voir que j'ai déjà tous mes atouts ici dans ce que nous appelons des vecteurs. Un. Le format vectoriel signifie que je peux zoomer sur les genoux et voir comment il ne devient jamais pixélisé. J'ai cette image de carte sur la gauche. Je zoome sur la carte pixélisée. C'est donc ce que nous appelons le vecteur, son œuvre d'art réelle. Et si je clique dessus, vous pouvez voir ces petites lignes. Je peux réaliser cette œuvre d'art. Donc, ce que j'ai ici, j'ai une illustration trop T. Je vais le copier à partir d'Illustrator, vais aller directement à XD. Et je suis un endroit où il ne peut pas le voir maintenant parce qu'il est noir. ai affalé, je le vois ici. Et je peux changer la couleur. Je peux faire sauter ça de haut en bas. Je peux en faire une taille différente. Et en ce moment, c'est la représentativité, psyché blanche ici jusqu'au bout. Et je peux faire du blanc ici. Il prend cet écran. Allons le rendre un peu plus grand. Juste 16 ans. C'est ainsi que cela fonctionne. Je peux faire cette seconde, je peux y ajouter d'autres couleurs si je voulais le faire. Bon, maintenant, gardons ça blanc. Faites un zoom arrière un peu. Ok, donc je vais vous montrer comment créer la page d'inscription. Et lorsque je créerai ce bouton, je vais vous montrer comment créer un symbole, ce qui est vraiment très important à apprendre. Et un symbole est un élément d'interface utilisateur que vous pouvez utiliser sur une série d'écrans. Vous pouvez voir ici que j'ai le bouton d'inscription. Sur cet écran d'inscription, c'est un symbole. Cela signifie que j'ai également un bouton d'inscription, le même bouton sur cet écran. Mais quand c'est un symbole, je peux changer la couleur de cet arrière-plan. Disons deux. Allons voir comment cela s'applique à tous les flux d'inscription. C'est donc ce qu'est un symbole. Cela signifie que ce composant peut être utilisé sur bon nombre de vos conceptions filaires. Et vous pouvez le changer avec un seul. Et il changera dans tous les autres domaines ainsi qu'à côté. Permettez-moi de vous le montrer encore une fois. Nous allons juste créer cet écran. Je vais copier cette option d'écran, cliquer et faire glisser. J'ai donc la même taille d'écran. Je peux également passer à l'outil de tableau d'art. Une fois cette école. Ce qui est construit ce bouton, le bouton d'inscription. Et nous allons en faire un carré ici. l'ordre de suivre avec moi aussi. peut que vous deviez parfois mettre cette vidéo en pause. Ils feront revenir le bouton en jouant une vidéo. C'est très bien aussi. Ce sont des hormones. Eh bien, je vais saisir l'outil de texte qui limite le texte ici. Nous appellerons cela un lien ténu vers l'outil de sélection d'outils ici. Et disons que je souhaite placer ce bouton d'inscription en haut de ce texte, en haut du bouton comme il est maintenant. Je peux arranger cela de différentes manières. Donc, si vous cliquez avec le bouton droit de la souris et que vous voyez le subtil apporter la tranche, amenez la parole du Sénat. C'est ainsi que vous pouvez organiser ces objets dans un ordre différent. Certains vont prendre le bouton, renvoyer lentement. Donc, le bouton d'inscription que nous avons. Il est donc composé d'un rectangle et il est sélectionné. Vous pouvez également faire des cercles si vous le souhaitez. Voyez comment je vais m'inscrire et assurez-vous que ce texte est de la même largeur que le vecteur. C'est une bonne pratique. Et tout va bien. Maintenant, je vais cliquer sur le texte de tout le bouton d'inscription, ce rectangle derrière. Je vais venir ici dans la zone des symboles. Et je vais appuyer sur le petit plus ici et le symbole bleu, donc c'est calme. La nouvelle inscription. Apprends à nommer ces choses. Et voici mon moyen de pouvoir changer cette zone usée. Et cela change dans toutes les instances telles que, disons que je copie ce bouton va se lancer. Apple ici, de petits changements ici. Et je peux changer le texte, ce qui est vraiment génial. Voyons voir. Je peux dire ceci, le bouton Retour, le bouton Annuler, et le manuel, le symbole principal. Je peux donc avoir différentes instances ici. Disons cette connexion spécifique. Dis celui-là. Disons que celui-ci l'est, disons celui-ci ici. Dis ça en regardant cette vidéo. Ok, donc maintenant je dois faire ici, je peux changer le remplissage de ce rectangle d'arrière-plan par n'importe quelle couleur que je veux, je veux et regarder ce qui arrive à tout le reste. Ils changent. Vraiment doux. Vous permet de gagner beaucoup de temps lorsque vous devez apporter des modifications à votre application, créer des symboles. C'est vraiment une partie très importante de notre travail. Cela étant dit, j'ai déjà des symboles de forme que j'ai créés ici. Allons donc, car je suis Alice, prenons juste une partie de cette mise en page. Exemple de loi active de l'essaim. C'est ce que vous faites, c'est de cliquer et de faire glisser ce poumon ici, ce symbole noir par défaut sur le canevas vers l'espace de travail. Et maintenant, je peux voir que j'ai celui-là. Allons de l'avant et copions ce symbole. Option. Maj, cliquez et faites glisser. Allons faire un nom de famille. Mais nous avions aussi un e-mail et un mot de passe, je vais donc les copier maintenant. Soyons sûrs de l'espacement. Voyez quelques zones rurales. Retournez à mon fichier Illustrator. Maintenant, j'ai ce logo quelque part comme ici. Eh bien, octets D OPEX d case, cette illustration. Ok, super. Donc, ça a l'air plutôt bien. Avez-vous une copie ici et connectez-vous ici ? Je sais déjà comment faire des textos. Vous pouvez donc les créer si vous souhaitez apprendre à apporter un soda. C'est juste une réflexion sur cette page ici. Ce que je vais copier cette page. Et je n'ai pas non plus été actif, c' est-à-dire lorsque je clique également dans ce formulaire en tant que symbole. Donc je vais le faire, c'est que je vais supprimer ces trois. Actif. Lorsque vous cliquez ou appuyez sur ce formulaire ici, je vais m'assurer qu'il est aligné sur les États et qu'il revienne en arrière. Je veux m'assurer que toutes mes formes sont pareilles. Je vais donc les garder ici. Maintenant, je vais faire glisser ce formulaire actif sur le canevas, sur la liste, les lignes ici, je vais le copier. Commande C, ce prénom, étranger, appuyez sur Commande, Victor, et qui colle directement en place. Je vais donc copier le même. Faisons en sorte que ça soit sûr jeudi. Je suis une copie de ce formulaire jusqu'au dernier état, et la commande supprimera la dernière chose. J'ai envie de nous faire. Même chose. Je vais passer à l'e-mail, supprimer ça, et ensuite ils verront des choses qui fument ça se trouve à la maison. Et cela fera la même chose. Oh, il est supprimé. L'e-mail des puces est envoyé au mot de passe. Je vais juste faire un petit nombre, 8, c. Donc vous avez des versions actives de ce formulaire, donc nous avons besoin du clavier ici. Donc, si vous allez dans mon dossier, toutes les images, c'est comme ça. Donc je peux le faire, c'est juste des agonistes. N'importe quelle image souhaitée, il suffit de la faire glisser sur la sortie. Je peux prototyper, ce que nous ferons dans la prochaine vidéo, des écrans ensemble. Et j'aurai l'impression de puiser dans ce champ de forme en luttant contre l'inflammation. C'est pour tous un outil génial qui me permet de tester comment les bidonvilles et le cadrage filaire testent les personnes qui le tapent dans le formulaire. Qu'est-ce qu'une convivialité générale ? Par défaut, c'est ce que nous faisons tous ? Vous ne faites que tester ce contenu comme quelqu'un peut le dire ici, j'ai l'habitude de faire ressentir ça à leurs spermatozoïdes. Supposons que nous saisissons votre emplacement secret de mot de passe. La prochaine chose que je veux vous montrer, c'est un peu plus de complexité. Il s'agit de sélectionner les deux à t. Je vais vous montrer à quoi cela ressemble. Je tiens donc à souligner que je viens d'appuyer le bouton Plus en haut à droite. Je peux voir cela et comment je le ferais sur mon téléphone. Donc, quand je fais défiler les sélections, mais regardez, cette marque de tabulation, elle pue, colle à la bouteille, qui signifie qu'elle ne perd pas. Découvrez comment les groupes. Je vais donc vous montrer comment créer ce robinet et comment le fixer en bas et continuer votre conception. Ainsi, nous jouons et vous pouvez faire défiler différentes options que certaines sont plus mobiles. Allons donc de l'avant et commençons par un solide. Nous allons copier celui-ci. Je vais sélectionner le modèle B. Allons créer le rectangle. Habituellement, il s'agit d'environ 10025072 phrases. Je vais tricher un peu. Je vous verrai quand j'ai testé qu'il était trop petit. Faisons le noir. Très bien, passons à Illustrator et prenons mes icônes et faisons le top ball. Je vais vous donner un site Web sur lequel vous pouvez accéder à un site Web appelé objet nul. Nous vérifions cela. Vous pouvez avoir l'icône souhaitée. Disons que vous voulez comme un beignet. Cliquez sur ce beignet. Je peux obtenir cette icône maintenant. C'est gratuit. Je peux dire téléchargement basique. Téléchargez-le ici. Alors qu'il est en cours de téléchargement. Étendez et faites-le glisser dans mon fichier Illustrator et récupérez-le. Il y a mon vecteur, les impulsions électriques s'éteignent. Et je peux poser un problème avec l'islam et coller ce projet ainsi que le top. Allez-y et créez un compte. Et revenons à Illustrator. Je vais continuer ici. Revenons à XD. Les bidonvilles noirs montent au Y. Pour notre profil. C'est juste un petit n. C'est les écrans. Très bien, donc nous avons trois icônes, elles sont toutes de la même couleur. Nous avons ce que nous appelons un état par défaut et cet état. L'état actif est donc une représentation de l'endroit où je suis actuellement. C'est mon emplacement. Donc, pour l'instant, pas avant le dossier et pas sur le cœur. Ce que je veux faire, c'est que je veux les amener ici à 60 % de gens sûrs. Allons de l'avant et disons également l'icône 1650. Et nous garderons cela à 0 %. Joli. Barre d'onglets en bas. Allons-y et graphions ici, bureau ici. C'est tout pour cet automne. Jusqu'à présent. Je peux donc créer un autre rectangle, connecter et faire ce texte noir. Je vais donc simplement copier ce texte ici car je ne pourrai pas créer de dettes. Je vais donner ce bouton. Créez un bouton. Donc, chaque fois que tu crées un nouveau bouton, disons que je vais faire ça. Mais c'est la meilleure pratique une fois que j'y suis arrivé. L'outil de type qui bloque que vous voyez. Il y a des ajouts. Je vais saisir ces deux philosophie Shift, Shift pour sélectionner ces deux images. Je vais faire le Commandement G, qui est un groupe. également avec le bouton droit ici. Fais-en un symbole. Plus la marque ici en haut. Eh bien, maintenant j'ai eu mon symbole de bouton Ajouter, symbole 17. Disons que c'est beau. Nous allons donc copier cette section. Ici. Vous montrez ce qui va se passer et le ramener à la couche suivante ici. vois que c'est heureux, bien. Étendez ce tableau artistique. Eh bien, ce tableau d'art est en bas. Et voici un élément clé. Voyez cette petite ligne pointillée ici C'est une représentation de ce que nous appellerions caché ce ballon vendu. Donc, en dessous de cette ligne pointillée, l'utilisateur ne verra pas le jarret pour faire défiler vers le bas pour voir ces informations. Vous pouvez donc voir les barres d'onglets Démarrer tomber. Je vais donc cliquer avec le bouton droit de la souris sur ce renvoi. Et maintenant, nous avons notre barre d'onglets. Je vais donc ajouter une section supplémentaire pour cette image est échantillonnée un peu de restes. Notre, Oups, je prends juste les articles ici en haut. Il est écrit iPhone 6, 7, 8. Puis déplacez-le légèrement. Ça a l'air bien. Jetons un coup d'œil à cela et regardons ce qui arrive à la barre d' onglets que j'ai vue et je fais défiler vers le bas, je balaie vers le bas, je vois comment la barre d'onglets se déplace avec moi. Nous ne voulons pas cela. Nous voulons que cela reste dans ce que nous appelons une position fixe ici. Il vous montrera comment le faire maintenant. Vous souhaitez donc sélectionner cette boule de frappe, tous les éléments qu'elle contient. Parfois, je le supprime et je fais une commande Z. Revenez en arrière et voyez cette petite case à cocher ici. Il est dit médecin. Lorsque j'ai défilé en haut à droite, j'ai vérifié qu'il resterait fixe en position. Allons maintenant regarder et appuyer sur le bouton Lecture en haut. Et maintenant, regardez ce qui se passe. Allons faire défiler. Bar affirme que c'est beau. Vous pouvez voir l'image du bas. Je ne peux pas aller jusqu'au bas que toute la sélection pour appuyer sur le bouton. Ce que nous voulons faire ici, c'est que vous voulez aller étendre cet art. C'est comme si tu y arrivais. Il y a beaucoup de fois que vous concevez et que vous venez voir comment cela fonctionne. Mais nous revenons à vos notes et ajustements. Presque la plupart des outils de synthèse. Et il y a beaucoup d'autres choses que vous pouvez entrer ici. Mais je voulais vraiment vous montrer le symbole, comment utiliser l'outil de type, créer les boutons, les photos, car la plupart de notre interface utilisateur est une combinaison d'un carré ou d'un rectangle avec un bord arrondi, voir ici le mur, et ce seront des idées subtiles, des photos et des typographies. Donc, la plupart des filaires, nous parlerons comme ça. Vous pouvez également accéder aux icônes sinusoïdales Noun Project 2. Donc, si nous voulons l'enregistrer dans votre conception, vous pouvez commencer à construire la diapositive ici. C'est sur la vidéo suivante. Je vais vous montrer cette vidéo. Je vais vous montrer comment réaliser un prototype. C'est donc quelque chose qui relie tous ces écrans ensemble pour donner l'impression d'être une vraie application. Vous pouvez donc sortir et vous pouvez le tester. Ce prototype, ce que nous appelons le test d'utilisabilité. Maintenant, vous le montrez dans la vidéo suivante. Allez-y et allez créer tous vos écrans ou vos créations. Je vais m'assurer qu'ils paraissent bien dans la section précédente. Et ensuite, j'aborderai le prototypage et les transitions que vous voyez ici dans la prochaine vidéo. Encore une fois, comme toujours, merci d'avoir regardé et j'espère que je vous verrai sur la prochaine vidéo. Au revoir. 9. Créer un prototype cliquement avec Adobe XD: Bienvenue dans la vidéo suivante sur la création d' une étude de cas de conception UX et de conception d'expérience utilisateur en tête-à-tête. Très bien, nous avons donc couvert beaucoup de terrain ici. Nous avons commencé par définir des objectifs, et nous avons travaillé jusqu'à la création d'une conception filaire. Et nous l'avons abordé dans la dernière vidéo. Dans cette vidéo, je vais vous apprendre à prendre cette conception filaire et créer un prototype cliquable avec les designs que vous avez. Vous pouvez donc faire des tests utilisateur. Dans la dernière vidéo, je vous ai montré que nous utilisions Adobe XD. Et c'est là que nous avons réalisé toutes ces conceptions d'écrans. Je vais maintenant utiliser Adobe XD. Nous allons créer un prototype cliquable avec les écrans que nous avons créés. Voici donc ce que nous allons faire. J'ai la vidéo ici et elle a commencé depuis le début. Nous avons un écran de chargement qui expire votre écran d'inscription. Vous pouvez voir le clavier car le mot de passe de l'e-mail, vous devez faire. Inscrivez-vous. Peut faire défiler vers le bas. Rappelez-vous que nous avons appris comment maintenir cette barre d'onglets dans la dernière vidéo fixe, ce qui signifie rester allumé et en bas, je clique sur une rondelle SlideUp. Vous, comment faire ça. Vous avez un menu déroulant ici. Sélectionnez semi-sucré. Je vais appuyer sur le grand bouton de tapioca. Ajoutez-le au panier. Retournez à la page normale. Cliquez sur le panier. Nous avons le glissement vers le haut. Laisse tomber mon adresse Intuit va appuyer sur Suivant. J'ai mis des informations aussi difficiles dans cette paye de presse faite et LA LA J'ai eu peu de T me livrée. Et dix minutes. Oui. OK, cool. Je vais donc ouvrir XD et je vais vous montrer quelques astuces de prototypage ici et comment créer un site Web. C'est assez simple ici le lendemain. Tout d'abord, vous avez besoin de deux autres modes ici, ce mode de conception et un mode prototype. Et voyez les informations ici à droite, cette barre ici, je perds cette barre quand je vais au prototypage. C'est ainsi que je sais que je suis en mode prototype pour que vous puissiez basculer entre les deux ici. Regardez le prototype de conception en haut à gauche, le prototype de conception. OK, cool. Revenons donc en mode design, je vais prendre un nouveau tableau artistique. Je placerai ce tableau d'art sous le tableau d'inscription. Je vais prendre ce bouton d'inscription ici. J'ai fait un symbole 11, je le fais glisser dans ce plan de travail Puma, attrape ce logo. Ici, nous allons commencer ici. Je veux vous montrer toutes les fonctionnalités que vous pouvez réaliser dans Adobe XD en matière de prototypage. Je vais donc copier cet écran ici. Je vais supprimer ces éléments. Et je vais prendre un rectangle, et je vais faire un écran noir. Comme vous le voyez ici, cela facilite la tâche afin que nous sachions sur quel écran nous travaillons. Je vais aussi mettre un x ici en haut. Et la copie de l'écran aussi. Et je vais faire une flèche arrière ici. Et je vais copier ce bouton sur ce plan de travail. Appelez-le ensuite ici. Ok, donc maintenant nous avons assez pour aller de l'avant et commencer le prototypage. Je veux commencer à vous montrer avant de mettre en prototypage toute l'application de l'expérience Bobo T, je veux simplement passer au prototypage et vous montrer les capacités de la fonctionnalité prototype. Tout d'abord, je suis passé du design ici et maintenant je suis en prototype. Je vais donc cliquer sur le bouton. Vous pouvez donc voir ici que je peux cliquer sur le bouton et voir ce petit cercle bleu avec la flèche dessus. Je peux faire glisser ça sur n'importe quel écran que je voudrais. Et il va connecter ce bouton à cet écran. C'est donc assez simple. J'ai donc voulu aller à l'écran à droite. Et quand je clique et que je défais mon clic, une petite fenêtre contextuelle s'affiche. Et c'est le déclencheur. Cela permet donc de taper, de glisser ou de faire des commandes vocales dans le prototype. Donc, pour la plupart de nos cas, nous allons faire des claquettes. Je vais donc passer par le robinet et je vais vous montrer des états de transition différents que vous pouvez utiliser en ce moment. instant, je peux définir la transition. Je peux également faire une animation automatique et je peux faire la superposition. La plupart du temps, vous n'avez besoin que de connaître la transition et de superposer 99 % du temps. C'est ce que j'utilise, la transition et la superposition. Et pour les animations que vous avez dissoutes et vous devez faire glisser la diapositive vers la gauche ou la glisser vers la droite vers le haut, glisser vers le bas. Commençons donc d'abord par aucun style. Ce que j'ai ici, c'est que le bouton d'inscription passe au prochain tableau d'art lorsque je clique dessus en tant que transition ici. Et nous n'avons aucune animation. Allons donc voir à quoi ça ressemble. Donc, lorsque j'appuie sur Play ici en haut à droite, je reçois mon petit dialogue de jeu. Et maintenant, si j'appuie sur l'inscription, vous verrez que ça m'amène juste à l'écran suivant. Mais allons y faire quelques transitions et nous pourrons en explorer quelques-unes. Les transitions ici, c'est là que ça devient vraiment amusant. Allons de l'avant et disons que nous le dissolvons. J'ai donc la durée de la dissolution ici à 0,1 seconde. Oh non, allons-y et disons cinq secondes. D'accord, j'appuie sur Play. Voyez comment cela s'est maintenant dissous en elle pour le ralentir. Vous pouvez donc voir un peu plus ce qui se passe ici. Faisons ça comme une très longue durée, disons 30 secondes. Maintenant, remarquez comment police, Allons comme huit secondes et voyons qu'elle est dissoute ici un peu appuyer sur Play et voir le lent se dissoudre pour ralentir. Vous pouvez donc garder cette petite fenêtre d'aperçu ici. Il restera sur votre écran et vous pourrez effectuer des modifications en temps réel. Je vais donc revenir à, disons, 0,3 seconde ici à la dissolution. Et vous pouvez voir maintenant que lorsque je clique dessus, c'est plus rapide. Il fait donc des mises à jour en temps réel sur ce petit aperçu. Mais pour notre bien, je reviendrai et je m' ouvrirai avant que vous puissiez voir ce qui se passe. Très bien, donc la prochaine chose que nous pouvons faire ici est de faire une diapositive à gauche. Cela va créer un mur de bordure d'art ou se glissera de la droite de l'écran, vers la gauche jusqu'à la position de visualisation. Laissez-moi vous montrer à quoi cela ressemble. Donc vous devez voir le T ici, j'appuie sur l'inscription, vois comment il s'est déplacé vers la gauche. Très simple. Bon, passons à la prochaine. Allons faire un toboggan, non ? C'est la même chose. Je vais juste glisser, non ? Allons appuyer sur Lecture et voir comment s'est fendu par la droite. Le plus courant, nous faisons glisser vers la gauche ou vers le bas. Allons donc voir la suivante qui est la diapositive, ou, désolée, glisser vers le haut et glisser vers la gauche sont les plus courants. Nous allons donc faire le toboggan ici. Et ce à quoi cela ressemble, c'est que lorsque vous appuyez sur le bouton d'inscription, cette chose glisse vers le haut. Maintenant, nous allons faire un glissement vers le bas maintenant, et nous allons faire un « x ». Donc, ce x doit fermer ce petit curseur vers le haut. Et nous avons la même transition Tap, mais maintenant nous voulons glisser vers le bas. Et maintenant, nous sommes en train de créer une interaction. Ainsi, vous pouvez le constater, c'est le plus courant dans le travail que nous effectuons dans les applications mobiles, c'est que vous vous inscrivez, vous allez glisser vers le haut. Je l'ai fermé. Vous allez glisser vers le bas, voir comment cela a fonctionné. C'était plutôt sympa. Une autre chose que je peux voir sur cet écran est de voir cette petite icône d'accueil ici en gris. Si je clique dessus et que je le rends bleu, je reçois une transition supplémentaire ici. Donc, si je l'ai connecté à ce tableau d'art d'écran, au tableau d'art suivant, j'en reçois un temps quand c'est la page d'accueil. Et cela me permet de taper quelque chose. Je peux donc dire ici dans cinq secondes ça passera à l'écran suivant. C'est donc courant pour les écrans de charge. Et c'est ainsi que j'ai créé cet écran de chargement ici. Accédez directement à l'écran d'inscription. Donc, si vous voyez ce qui se passe ici lorsque j'appuie sur le bouton Lecture, je n'ai rien appuyé. Je n'ai cliqué sur rien et il passera directement à l'écran suivant. Vous voyez qu'il s'agit d'une fonction temporelle, mais vous ne l'obtiendrez que lorsque c'est l'écran d'accueil. Je vais donc retourner ici et je vais passer à l'écran d'accueil. Cela fait donc partie de l'application. Ok, super. Une autre chose que je veux vous montrer ici est de supprimer cette transition ici. Ok, ce que nous allons faire ici, c'est que nous allons créer le bouton d'inscription. Ce qu'on va faire une superposition ici. Donc, si je clique sur la fenêtre contextuelle ici, ce que j'obtiendrai ici, c'est l'occasion de ne pas faire une transition, mais une superposition. Et ensuite, superpose notre chagrin lorsque vous exécutez un menu déroulant mobile. Donc je vais le faire, je vais retourner dans mon mode design. Je vais changer un peu cet écran. Je vais donc ressembler à un menu déroulant ici. Et ce que j'ai fait ici, c'est l'apparition de ce tableau d'art. Je peux le faire remplir de blanc. Je peux aussi le faire remplir avec aucune couleur. Et ce qui me permet de faire, c'est quand je vais sur mon prototype et que je le vois, et que j'appuie sur inscription, juste ce petit morceau de l'écran suivant glissera vers le haut. Et c'est ce qu'on appelle la superposition. Donc, il suffit de superposer l'écran initial sur lequel j'étais. Eh bien, revenons en arrière. Faisons quelques autres prototypes à trois écrans ici. Donc, en ce moment, j'ai le bouton d'inscription qui va à l'écran à droite ici. Et nous voulons faire glisser cette glissade. J'ai le x qui me ramène à l'écran d'origine. Et il y a eu un petit peu ici. Mais j'ai ici ce bouton Suivant que je veux passer à l'écran suivant. Et ce que cela va faire, c'est que nous voulons faire la transition. Et nous voulons que cette glissade soit à gauche. Allons donc regarder. Très bien, donc je m' inscris, j'appuie sur le bouton Suivant et vous verrez qu'il glisse vers la gauche pour vous rendre encore plus facile à voir. Faisons en sorte que cette couleur soit différente. Amusez-vous un peu ici. Rendons-le rose comme ça. Bon, revenons donc au prototype de ça. Jetez un coup d'œil. Voici donc glisser vers le haut et il me reste une diapositive suivante. Et la raison pour laquelle c'est une diapositive à gauche, c'est parce que j'ai un bouton Précédent et qu'ils veulent revenir à cette page. Alors, nous allons aller de l'avant et saisir ce bouton, le connecter à ce tableau artistique. Et nous voulons faire une diapositive à droite. Maintenant, je vais me permettre de revenir au modèle mental du milieu de l'écran. Nous avons maintenant un ensemble complet de prototypes. Encore une pièce, je vais vous montrer ce que je vais faire avec ce bouton. Alors, à l'inscription, les diapositives, je peux le fermer, retourner m'inscrire. Je peux passer à la diapositive suivante à gauche. Et je peux faire le bouton droit ici ou le bouton gauche pour revenir en arrière, et il revient à l'écran dessus, retour au bouton d'accueil. Ainsi, une grande partie de votre conception d'interaction et de prototypage devraient permettre aux utilisateurs d'aller de l'avant sur les écrans et de revenir sur les écrans. C'est ainsi que nous l'avons fait ici. Ok, et la même chose à la fin ici, nous voulons fermer. Ce bouton doit agir comme le bouton de fermeture ici. Il me ramène à l'ensemble d'écran d'origine. Celui-ci est légèrement en baisse. Maintenant, vous pouvez voir comment je peux revenir en arrière si je le veux. Disons donc qu'il y avait beaucoup de ces pages ici. Allons copier celui-ci. Faisons ça ici. Et nous dirons ensuite. Est-ce qu'une autre diapositive est restée ici. Celui-là, ce bouton retour ici ira sur l'écran rose ici. Faites glisser vers la droite. Le X rentrera chez lui, X rentrera chez lui. Faisons de l'art, le tableau d'art ici, à l'extrême droite. Faisons le bleu. Donc, vous savez, comme ça, ils vont bien. Et regardons ce prototype maintenant, vous pouvez voir les actes sur ces trois écrans. Je vais revenir à l'écran d'accueil. Ensuite, passe à l'écran à droite, et le bouton suivant passe toujours à l'écran suivant à droite. Et le bouton Précédent retournera toujours à l'écran de gauche. Vous pouvez voir que j'ai mon inscription ici. Suivant. Voici l'écran rose. J'en fais un autre ensuite. Voici l'écran bleu. J'y retourne, je me ramène à l'écran rose. Je reviens en arrière, me ramène au premier écran, puis je suis de retour à l'écran d'accueil. Eh bien, disons que je suis jusqu'à l'écran bleu et que j'en ai fini avec ce flux de travail x, retournez à l'écran d'accueil. C'est tellement simple. Vous venez d'apprendre une interaction assez détaillée et complexe de manière très simple. Et la meilleure façon d'apprendre cela et d'aller simplement jouer. Il suffit d'entrer là-dedans, jouer avec ces interactions. Allez appuyer sur Play et voir ce qu'ils font et amusez-vous avec ça. Nous les supprimons donc. Et comme promis, je vais vous montrer le prototypage et demi pour chaque écran ici. Cela rend cette application complète de Baba t. Donc, en ce moment, j'ai cet écran d'accueil réglé avec le délai de quatre secondes. Et puis vous pouvez voir ici, chaque fois que je clique sur l'un de ces formulaires, il m'amène directement à l'écran suivant, c' est-à-dire le clavier. Lorsque je clique sur l'e-mail et le mot de passe, je passe à l'écran suivant où je remplis mon e-mail et mon mot de passe. Et puis vous pouvez voir ce bouton Terminé ici. Je viens de dire « carré transparent ». n'y a pas de couleur et c'est invisible. Il m'amène à l'écran suivant ici, sans transitions. Ce que nous pouvons voir, c'est cette commande ici. Nous avons donc la charge à certains moments en une seconde. aime m'inscrire, je clique sur mon prénom, je clique sur Email, une touche Terminé, et c'est à peu près tout J'aime m'inscrire, je clique sur mon prénom, je clique sur Email, une touche Terminé, et c'est à peu près tout pour le début de l'inscription. Une fois que j'ai appuyé sur l'inscription, nous pouvons voir que j'ai une transition qui passe à l'écran suivant qui s'appelle dissolve. Il s'agit donc d'une dissolution rapide. Et vous pouvez le voir directement sur l'écran principal où je peux commander par 0 mais t. La prochaine chose que j'ai ici est quand vous arrivez au bouton Ajouter, il s'agit d'un glissement vers le haut parce qu'il a le x et le x me ramène à cet écran pour le fermer. Vous pouvez donc voir ici, comme je l'ajoute, nous avons le balayage de près, revenons à cet écran d'accueil ici, appuyez à nouveau sur Ajouter. Et puis une fois que nous sommes sur cet écran, nous voulions faire ici la superposition du prototype. Quand je commande ce que je veux changer le sucré régulier en demi-sucré. Ce que nous avons choisi ici, c'était la superposition et il s'agit d'un glissement vers le haut, afin que je puisse sélectionner les différentes options de douceur. côté, appuyez sur le bouton Lecture, cliquez sur le bonbon normal. Regardez la superposition, entrez. Et puis, à partir de la superposition ici, j'ai sélectionné le semi-doux. Cela m'amène à l'écran suivant où j'ai changé le texte ici de sucré régulier à semi-sucré. Donc, à ce stade, je suis ici. En fait, je suis ici, presse beaucoup pour semi doux. La page suivante. OK, à ce stade, je veux cliquer sur le bouton tapioca. Cela va passer à l'écran suivant où j'ai sélectionné l'état actif pour qu'ils puissent voir à quoi cela ressemble. Oui, il passe à l'écran suivant. Ensuite, nous avons le bouton Ajouter, qui m'amène à cet écran ici où je peux voir il y a une notification sur le panier indiquant que j'ai une commande. Regardons cela et nous appuyons sur Add Bu. La prochaine chose que nous avons ici est que j'ai le bouton Ajouter qui m'amène à la caisse. L'icône du bouton de paiement qui m'amène à l'écran de paiement, glisse vers le haut. Parce que rappelez-vous que nous avons le X. Le X va me ramener ici. Ce que nous avons ici ressemble donc à ceci. Allez-y et regardez ça. Faites glisser vers le haut. Super. air bien. Ok, donc la prochaine chose que nous faisons ici, c'est que nous avons le bouton Suivant qui passe à l'écran suivant des événements, à savoir saisir votre adresse. accord, et à partir de là, nous n'avons pas le clic droit sur l'adresse, qui m'amène au clavier. Et puis je fais le Dunn qui m'emmène à l'écran suivant ici. Nous pouvons donc examiner cela. Ensuite, je vais m'emmener à la carte de crédit. Voyons donc cela comme une seule interaction. Ici. J'y vais. Suivant. Cliquez sur l'adresse, obtenez le clavier, ça va bien. Clavier de retour sur l'écran de paiement. Et encore une fois, je peux revenir ici à l'écran. Retournez ici à l'écran, devrais me ramener ici. Et ça devrait être une diapositive à gauche. Super. Examinons donc ça très rapidement. Et si j'y retourne, voyez comment ça me ramène. C'était bizarre. Allons voir ce qui s'est passé là-bas. ai donc fini. Je vais appuyer sur Suivant. Faites glisser la gauche pour qu'elle ressemble. Très bien. Cela devrait donc me ramener à l'écran et glisser légèrement vers la gauche. C'est ce que nous voulons à l'extérieur, à gauche, excusez-moi. Très bien, alors allons de l'avant et regardons cela parmi l'écran des centres d'intérêt et j'appuie sur le bouton suivant. Je vais sur l'écran de paiement inter et je fais ce bouton de retour. Malgré, c'est ça ? Parce que de retour à l'écran d'adresse, je peux apporter des modifications si je le veux. Merci de revenir au paiement. air bien. OK. Cliquez n'importe où dans les écrans de paiement, il remonte le clavier, y fait entrer mes informations, appuyez sur le clavier, m' amène à cet écran, puis je paie. Et payez, il m'emmène à l'écran. C'est fini , donc vous l'avez. Allons de l'avant et regardons la finale ici, c' est-à-dire que j'ai saisi les informations de ma carte de crédit. Allez-y et allez payer. Et boum, ici. Ok, la prochaine chose que vous devez savoir, c'est que nous avons ce prototype complet. Maintenant, je peux cliquer dessus. Je veux emballer ce prototype et je veux sortir, aller dans la rue et le tester avec des gens. La première chose que vous devez savoir est qu' Adobe XD dispose d'une application que vous pouvez télécharger sur votre téléphone. Et lorsque vous le téléchargez sur votre téléphone et vous permet d'enregistrer les prototypes que vous créez afin de pouvoir partir et partir tester vos prototypes hors du bureau. Si vous accédez à votre téléphone, vous allez sur l'App Store et vous exécutez Adobe XD. Vous pouvez le télécharger pour iPad, cette application pour iPad ou iPhone. Il est gratuit et il se connectera à votre prototype pour vous sur votre dossier. Ok, si vous faites un site Web et que vous devez le tester sur le Web, c'est assez facile ici. Ce que vous pouvez faire, c'est que vous pouvez accéder au lien Partager ici. Publiez un prototype. Et vous pouvez voir que j'ai déjà été publié. Je peux copier le lien ici. Et je peux également appuyer sur le bouton Partager. Et ça m'amènera au prototype ici. Il va le charger. Voila, voilà. Et maintenant, je peux aller de l'avant et obtenir mon prototype Web pour quelqu'un. Et les tests utilisateur peuvent également simplement envoyer ce lien par e-mail ici. Je peux aimer le mettre dans l'e-mail de quelqu'un. Ils peuvent l'ouvrir. N'importe qui dans le monde peut venir à ce prototype. Je peux tester avec eux. OK, cool. Donc, vous l'avez là. Je vais vous montrer un peu ce que j'ai fait avec ce fichier que nous allons couvrir dans la prochaine série de vidéos. Et l'un d'eux est de savoir comment appliquer, appliquer la conception visuelle à ce fichier, à ce design ici. Vous pouvez donc voir ici que j'ai un design visuel. Ajoutez-le à cette expérience ici, mais je vais vous montrer comment amener le filaire à la conception visuelle. Mais d'abord, dans l'ordre des vidéos, nous allons apprendre à tester les utilisateurs et à mettre en place un système de conception. Comme toujours, merci d'avoir regardé et j'espère que vous vous êtes amusé avec les prototypes cliquables. Joignez-vous à moi sur la prochaine vidéo et je vous donnerai des conseils, des orientations et des bonnes pratiques sur la façon de tester les utilisateurs. Sortez tester un prototype cliquable que nous avons créé aujourd'hui. Très bien, merci. Au revoir. 10. Créer un script de test utilisateur et des bonnes pratiques de test utilisateurs: Bienvenue dans la vidéo suivante sur la conception de l'UX, étude de cas de conception et la conception de l'expérience utilisateur en tête-à-tête. Jusqu'à présent, nous avons couvert beaucoup de terrains. Nous avons réalisé des objectifs, des persona, nous avons réalisé des entretiens, des scripts, des recherches et des énoncés de problèmes, des cartes de parcours client, des modèles d'esquisse et des conceptions filaires. Dans la dernière vidéo, je vous ai appris à réaliser un prototype cliquable pour que vous puissiez faire des tests utilisateur. Je vous ai montré comment créer un lien. C peut sortir de la nature, faire le tour des rues. Et il s'agit de tests effectués avec des personnes disposant de votre appareil mobile. Si c'est à partir d'un ordinateur portable, comment le faire à partir d'un ordinateur portable. Et dans cette vidéo, je vais vous montrer comment tester les utilisateurs. Donc, vous ne pouvez tout simplement pas avoir un prototype cliquable n'est pas suffisant. Vous aurez également besoin d'un script de test utilisateur. Je vais donc vous apprendre un script et je vais vous montrer les meilleures pratiques lorsque vous effectuez un test utilisateur. Ok, donc ce que je vais faire ici, c'est que j'ai un script préfabriqué dans nos fichiers qui sont attachés à la classe pour que vous puissiez télécharger ce fichier. Cela passera par le modèle de script de test utilisateur activé. Mais avant d'entrer dans ce domaine, permettez-moi de vous expliquer pourquoi j'ai fait le script et quelques leçons sur les meilleures pratiques en matière de test utilisateur et pourquoi nous le faisons. Je vais donc aller en UX, chérie. Et c'est le site que j'enseigne à l'université ici à San Francisco. Si vous cliquez sur la zone 2x2, vous arriverez à la maison. Faites défiler l'écran vers le bas pour trouver le test utilisateur. Cliquez sur le test utilisateur. Et tu arriveras à quelque chose comme ça. Une page qui ressemble à ceci. s'agit donc de tests, il s'agit vraiment de tâches. Vous allez demander à votre utilisateur d'effectuer une action dans l'application. Ensuite, vous allez regarder et observer. Et la plupart des cas, vous ne les aidez pas à moins qu'ils ne soient vraiment, vraiment, vraiment coincés. Parce que si vous lancez l'application dans la nature, vous ne serez pas là pour aider tous ceux qui l'utilisent. Vous voulez donc les étiqueter et les observer comme si vous n'étiez même pas vraiment là comme une mouche sur le mur. Mais vous aurez des questions en cours de route pour vous aider. Alors pourquoi avons-nous effectué des tests d'utilisabilité ? C'est parce que la conception de l'expérience utilisateur ou Lean UX consiste à tester tout le temps à chaque étape de votre conception, vous ne connaissez pas l'impact de vos décisions de conception à moins de les tester. Les tests sont la façon dont vous saurez que votre conception fonctionne ou non. N'oubliez pas de penser comme un scientifique qui mène des expériences et que vous décidez comme un avocat, vous avez des faits, de la logique et de la raison. Si vous ne faites pas de tests, vous accumulez des risques chaque fois que vous apportez des modifications de conception et des décisions de conception. Assurez-vous donc de tester ces applications que vous concevez. Quand le faites-vous ? Tout le temps possible dans l'industrie, il est préférable de définir les tests une fois par semaine ou toutes les deux semaines. Nous appelons un ABT toujours être testé. Votre design n'a pas besoin d'être parfait ou complet pour le tester. N'attendez pas qu'il soit trop tard, sortez et testez. Vous pouvez effectuer des tests au niveau du concept avec des prototypes papier et vos croquis. Vous pouvez effectuer des tonnes de tests au niveau filaire et vous souhaitez également tester la phase de conception visuelle. Si vous ajoutez un tas de nouveaux écrans ou que vous modifiez les interactions existantes, vous devez tester les nouvelles modifications que vous avez créées. Très bien, donc la première chose que vous pouvez vous demander est de savoir comment. Vous pouvez donc dire quels sont les scénarios que vous souhaitez demander aux utilisateurs de faire dans votre application. Et vous pouvez trouver les scénarios. Je vais en parler un peu avec l'exemple Bobo T ici dans une seconde. Ok, alors vous pouvez jeter un coup d'œil chaque scénario et regarder les écrans que vous allez afficher par scénario. Écrivez ensuite des questions qui guident l'utilisateur dans ce workflow ou ce scénario spécifique. Troisièmement, à droite, un guide de test ou un script de test utilisateur dans chaque scénario de votre application. Et guidez l'utilisateur à travers les écrans avec des questions relatives à chaque écran et section que vous affichez. C'est ce que nous allons faire maintenant, c'est que nous allons passer au fichier que j'ai créé que vous pouvez télécharger et vous pouvez l'utiliser comme modèle de test. N'oubliez donc pas que l'objectif des tests utilisateur est de valider la décision de conception ou les solutions de conception que nous avons réalisées et créées. Nous voulons nous assurer que notre contenu soit logique pour l'utilisateur. Et nous voulons vérifier que notre flux de travail est utilisable. Et nous allons également recueillir des informations. confusions, de la joie, des douleurs et de la demande ont été testés avec les gens. Et je vais vous montrer comment prendre toutes ces idées et les mettre en synthèse de manière systématique pour mettre des informations liées à chaque écran. Et ce n'est pas différent de ce que je vous ai montré dans la vidéo de recherche où nous prenons les idées des personnes que nous testons, nous les avons mises sur des notes autocollantes. Ce n'est que cette fois que nous allons faire, c'est que nous allons mettre les notes autocollantes en fonction chaque thème qui se rapporte à chaque scénario ou écran. Je vais donc entrer dans une seconde, mais passons d'abord par le modèle de test d'utilisabilité et vous donner une idée de ce à quoi cela ressemble et comment le remplir. Ensuite, je vais vous montrer, après avoir effectué tout un tas de tests utilisateur, comment synthétiser ces informations sur des thèmes et des modèles afin que vous puissiez les itérer. OK ? une fois encore, avant de faire des recherches ou de faire des tests d'utilisabilité, nous avons une introduction. Présentez-vous donc, le preneur de notes, pour dire que je suis concepteur ou chercheur dans ce cas pour travailler sur l'application Bobo t. Vous dites que vous travaillez dans l'espace de la nourriture et des boissons. Quel que soit le domaine dans lequel se trouve votre domaine, présentez-vous simplement dans le domaine dans lequel vous travaillez. On me demande que c'est correct d'enregistrer la séance. Beaucoup de notes uniquement à des fins précisent combien de temps l'entretien aura lieu. Quand la session aura lieu. Vous pouvez dire une heure. C'est vraiment important dans cette section ici, cette section des objectifs ici. Alors indiquez l'objectif lorsque nous effectuons un prototypage, il est très important qu'ils connaissent ces informations. Voici donc ce que je dis. On peut dire que je travaille dans l'espace de la nourriture et des boissons. Et nous avons un et C, les choses en gras. Nous avons un stade précoce. Le type que j'aimerais partager avec vous pour obtenir vos commentaires. Lorsque vous montrez ce prototype. Sachez qu'il ne s'agit pas d'un test. Soyez honnête. Et dites-moi s'il y a quelque chose de déroutant, bizarre ou de manque dans le prototype, puis réitérez-le. Dans l'ensemble, je veux juste savoir ce qui est déroutant. Et je suis également curieux de savoir quelles sont les choses que vous aimez. Faites-leur savoir pendant la session, disons et pendant cette session, parlez à haute voix. Une fois encore. Numéro 5 ici, faites-leur savoir. Rien de ce qu'ils disent ne vous offensera. voyez, encore une fois, vous ne verrez rien qui me fera la guerre. Soyez honnête. N'hésitez pas à poser des questions à tout moment. Il y aura cinq minutes à la fin pour toutes les questions, puis posez-leur s'il y a des questions avant de commencer ? Allumez l'appareil d'enregistrement, commencez et n'oubliez pas de les prendre en photo, pas maintenant, mais vers la fin pour votre étude de cas, c'est toujours important, j'oublie toujours de le faire. Je suis tellement impliqué dans les tests ou la mémoire pour me lever, prendre une photo d'eux. Ok, à ce stade, vous voulez les étiqueter pour faire quelque chose dans l'application. Donc, ce que vous allez faire, c'est que vous allez les tester. Ensuite, vous allez les regarder et les faire parler à voix haute. Et les questions que nous nous posons sont une série de questions de sécurité rapides que vous pouvez utiliser pour en savoir plus sur votre conception. Mais vous espérez que si l'utilisateur parle à voix haute, vous n'aurez besoin d'aucune de ces questions que vous avez posées. L'utilisateur va juste vous dire ce que les choses sont déroutantes, Qu'est-ce qui est bien d'avoir quelque chose de manquant quelque chose qu'il aime ? Et je vais vous montrer un petit tour. Quand je fais des tests, j'aime bien, je vais passer au prototype Adobe XD que nous avons créé plus tôt. En fait, j'aime mettre un écran au début qui encadre le scénario réel ou les tâches que je demande à un utilisateur de faire ici. Avant d'entrer dans l'application. Commencez par une lecture à haute voix qui a capté leur mission. Cela rend les choses plus amusantes. Je dis donc lire votre mission à haute voix. Donc, comme je l'ai fait dans le script ici, j'ai l'exemple de tâche Bobo, qui est de m'inscrire à l'application. Commandez un bot avec T était semi-sucré, niveau de douceur avec un grand tapioca. Placez votre adresse dans l'application et payez pour Bobo t. Great. Je l'ai donc également ici même dans l'application. Je les ai donc lus à voix haute. Mettez à jour cela. Super. Je leur ai donc demandé de lire à haute voix l'application ou la tâche. Et j'ai un bouton Démarrer qui indique Démarrer votre mission. Et ils appuient sur le bouton Démarrer. Boom, ils sont dans l'application. Nous commençons l'entretien. Ok, donc vous espérez que l'utilisateur commence à parler à haute voix. Je vais revenir à notre scénario ici. Et c'est ici que vous devriez poser vos questions ici. Nous leur avons donc simplement tâche de faire l'ampoule à la tâche et de voir que vos questions devraient être la même que celle des scripts d'entretien des utilisateurs. Vous devriez avoir cet écran ou le scénario ici est le titre. Vous devriez également poser une série de questions relatives à l'écran ou au scénario que vous demandez. Voici donc notre exemple. Nous avons une page d'inscription. Et c'est la meilleure question qui est de dire à chaque fois qu'un nouvel écran dans la zone visible pour l'utilisateur, dites simplement quelque chose comme ça. Parlez à voix haute. Dites-moi ce que tout ce qui est à l'écran signifie pour vous qui commence à les inciter à parler à haute voix. Les prochaines questions que j'ai ici sont les sélections de bokeh t. C'est donc le domaine du design. Quand ils arrivent après s'être connectés et s'inscrivent tout. Cet écran ici où il y a plus de sélections ici. Alors n'oubliez pas de regarder ces icônes ici pour ajouter des boutons, des photos. C'est donc ici que j'ai une série de questions ici, mais je ferai la même chose lorsque cette section s'ouvrira à l'utilisateur, je dirai parler à voix haute. Dites-moi ce que tout sur cet écran représente pour vous. Ensuite, j'aurai quelques questions en cours de route. Je dirai qu'il nous manque des travaux de chef de bobo que vous commandez beaucoup. Et puis je dirai : Que pensez-vous que font les petites icônes en bas ? En fait référence à ces petites icônes pour les voir parler à haute voix, pas pour interagir avec les icônes. Allez, dites-moi ce que vous croyez qu'ils font ? Que pensez-vous que le bouton Ajouter va faire ? Y a-t-il des informations manquantes ? Très bien, donc vous voulez avoir deux de ces sections, chacune pour un scénario ou un écran. Et puis vous avez l'outro. Donc, après l'année, les tests des utilisateurs sont terminés, ils ont, espérons-le, beaucoup appris. Ils ont passé en revue l'application. Vous pouvez les faire passer par l'application plus d'une fois. Et une fois qu'ils l'ont traversé d'un point de vue initial, vous pouvez leur demander de revenir en arrière et de signaler tout ce qui était déroutant ou des choses qu'ils aimaient. Et je reçois ma question préférée à la fin, c'est la question de la liste de souhaits. C'est donc ici que vous pouvez dire, basant sur tout ce que vous avez vu. Disons que nous devions vous donner une baguette magique et que vous puissiez obtenir n'importe quoi dans l'application. Quel est votre souhait ? Et vous y entendrez beaucoup de bons commentaires et de choses sympas. Alors, vous pouvez frapper l'outro, vous avez un temps ou vous aurez le temps de poser des questions pour eux, tout ce qu'ils doivent vous retourner. Parfois, ils disent simplement : « Hé, l'endroit qui arrive, j'aimerais commander Bobo t C'est ce que vous espérez. L'outro est un merci pour votre temps. Toutes les notes et l'enregistrement sont confidentiels et ne vus par moi-même dans l'équipe que parce que le paiement est impliqué. Effectuez la transaction. Dites-leur si vous souhaitez faire des commentaires, s'il est possible de les contacter à nouveau pour d'autres tests sur la solution. Vous pouvez même demander s'ils ont des amis intéressés par les tests. C'est une bonne approche là-bas. Et puis vous dites simplement merci et adieu. Ok, donc maintenant je vais passer en revue ce à quoi devrait réellement ressembler ces tests et vous donner quelques bonnes pratiques là-bas. Encore une fois, vous êtes le chef d'orchestre, vous avez le candidat au test, vous avez le preneur de notes. Il est préférable d'enregistrer l'audio avec votre téléphone ici. Tests avec le téléphone d'une autre personne. N'oubliez pas que les preneurs de notes observent et prennent des notes. Ils ne parlent pas. Vous faites la plupart des discussions et des observations avec ce candidat au test. Si vous êtes sur place, vous enregistrez. Cela signifie donc que quelqu'un est sur place avec vous et que vous dites que vous avez un ordinateur portable sur lequel vous testez. Vous pouvez tester l'enregistrement à l'écran avec Zoom. Zoom est un outil qui vous permet de réaliser des vidéos FaceTime et de partager. Vous pouvez également partager l' enregistrement d'écran avec QuickTime. C'est ce que je fais en ce moment pour enregistrer ces discussions. Et vous souhaitez toujours avoir votre appareil audio pour l'audio. Zoom fera l'audio avec vous. Quicktime le fera aussi. Mais je vous recommande également de le faire depuis votre téléphone. Si vous effectuez un test sur votre téléphone, vous pouvez télécharger une application appelée Look-back Participat. Et cela vous permettra d'enregistrer l'écran à partir de votre téléphone et d'enregistrer l'audio en un seul cliché. L'application fonctionne plutôt bien. Il y a quelques bogues ici et là à chaque fois que je l'ai utilisé, mais c'est une application vraiment solide et la capacité qu'elle fait. Ils font donc référence à tous les sites où vous pouvez voir quelqu' un physiquement dans la pièce avec vous. Pour l'enregistrement à distance et à distance. Si vous exécutez une application de bureau, vous pouvez effectuer un enregistrement à distance. Vous pouvez partager un lien Zoom. Il s'agit de l'application Zoom. Si vous souhaitez en savoir plus, accédez simplement à Zoom point IO et vous trouverez des informations sur l'utilisation de Zoom. Vous pouvez appuyer sur le bouton d'enregistrement et zoomer. Vous pouvez partager votre écran. Vous pouvez donner des commandes à la souris et vous pouvez demander à quelqu'un de tester le prototype. Vous pouvez également appuyer sur le bouton d'enregistrement dans Zoom pour effectuer tout votre travail à votre place au même endroit. Si vous effectuez un partage d'écran lors du test d'un mobile, ne faites pas cela. Il est recommandé de ne pas le faire. Les appareils mobiles sont destinés à être utilisés dans la nature, et non à travers un écran. Ne testez donc pas le mobile à distance. Ce n'est pas concluant à 100 %. Et si vous deviez le faire, vous ne faites que tester le contenu, pas la convivialité de l'application. Très bien, il s'agit donc des meilleures pratiques lorsque vous effectuez des tests utilisateur. Je vais passer au tableau en temps réel ici, c'est mon tableau blanc numérique et vous montrer comment synthétiser vos informations et vos résultats après avoir effectué des tests utilisateur. Vous pouvez voir que je continue de faire défiler ici. En fait, avant de me lancer là-dedans, permettez-moi de partager avec vous quelques choses intéressantes que j'ai apprises en cours de route lors de tests utilisateur. Il y a donc des choses intéressantes autour du verbage. Donc, si vous constatez après un tas de tests que vos utilisateurs appellent quelque chose dans l'interface utilisateur un nom différent, l'interface utilisateur, un nom différent de celui qui s'affiche à l'écran. Revenez et modifiez le verbiage dans les filaires ou les conceptions et modifiez un verbe par les mots que vous entendez et que les utilisateurs le décrivent comme. Regardez et observez le langage corporel des gens. Parfois pas tout le temps, mais parfois et les gens s'appuient sur quelque chose. Cela signifie qu'ils peuvent l'aimer. Parfois, lorsqu'ils se penchent en arrière, ils peuvent ne pas l'aimer. Penchez-vous dans leurs bras pliés pour qu'ils n'aiment probablement pas ça. Teste la pièce, cependant, s'il fait froid, les gens ont tendance à se plier les bras aussi. Ok, c'est tellement étroit cette question. C'est une bonne question autour de l'attente. Donc, si un utilisateur clique ou appuie sur un bouton avant d'interagir avec lui, dites simplement, qu'est-ce que c'est ? Que pensez-vous que cela va faire ? Et avoir leurs attentes ? Et puis laissez-les aller de l'avant pour dire : OK, super, allez-y et continuez. Ensuite, ils vont donner un pourboire et appuyer ou cliquer sur le bouton. Le passage, encore une fois, je vous ai déjà donné ça. C'est la meilleure ligne d'ouverture de tous les temps lorsque votre utilisateur voit un nouvel écran, il suffit de me guider à travers l'écran et de me dire ce que tout signifie pour vous. L'une des meilleures choses là-bas. Nous allons entrer dans l'autre un peu plus avancé. voici un qui est génial. Donc, sans test, il est normal de commettre des erreurs. Il suffit de ne pas courir et de réagir immédiatement après avoir reçu un point de données négatif lors de la validation de ce point de données négatif vers. Donc, si c'est vraiment douloureux ou déroutant pour une personne, ne vous arrêtez pas et ne changez pas tout le design. Validez que c'est douloureux et déroutant pour plus de trois personnes, trois à cinq personnes, puis vous pouvez modifier le design. OK ? Donc, cela étant dit, allons dire que vous avez manqué, fait un tas d'entrevues. Dans ce cas, vous avez interviewé trois personnes, faites la même synthèse que celle que je vous ai enseignée dans les vidéos de recherche ou réutilisez des notes autocollantes. Vous avez donc trois personnes. Nous n'avons pas Naomi, Joe Hahn et nous avons ici. Et jusqu'à présent, nous avons testé trois personnes. Et ce sont tous leurs points de vue, une par note adhésive ici. Et ce que vous voulez faire, c'est finalement aller chercher ces idées et vous pouvez imaginer qu'il s'agit d'un tableau physique, mais cela ressemble en fait à ceci. Ici. Vous avez enregistré les écrans sur un tableau. Vous avez ces notes autocollantes ici en dessous. Voici moi, Designer ici qui fait ça avec le client. Nous avons l'écran. Je serai Insights sous les écrans, toutes les personnes ici que nous avons interviewées à gauche. Je vais donc vous montrer comment nous y parvenons, de manière numérique avec une carte en temps réel en ce moment. Mais vous pouvez le faire dans le monde physique avec de vraies notes autocollantes. Certains en temps réel, j'ai Naomi. Ce que je pourrais faire, c'est que je peux saisir les informations qui se rapportent à chaque écran. Disons donc que ma Naomi a dit qu'il nous manque certaines de ses saveurs préférées ici sur cet écran. Nous pouvons donc aller chercher ce point de vue, le mettre ici. Et disons qu'elle a dit qu'elle aimait numéro de téléphone ou un moyen de contacter cette personne à la livraison au cas où elle bougerait un peu, elle pourrait être à l'avant ou à un pâté de maisons de là. Elle peut faire envoyer des textos à cette personne qui va livrer le Bobo de t. Et nous avons entendu la même chose de Joe Hahn ici. Je vais donc mettre ça à côté de cet écran. Et Anna a dit la même chose autour de l'arc, mais les saveurs T, nous manque quelques saveurs ici. Et vous pouvez en voir l'essentiel. Vous espérez donc avoir beaucoup d'informations par écran. points de confusion, des points de joie. Mais finalement, vous avez ce que j'aime ici, qui est un tas d'idées liées à chaque écran. OK, c'est cool. Je pense donc que cela couvre la plupart des tests des utilisateurs. Donc, la meilleure façon de le faire et d'y parvenir est simplement une bonne pratique. Ça sort dans la nature. Allez tester vos utilisateurs. Sur. Dans la vidéo suivante, je vais vous montrer la base d'un système de conception. Je vais vous expliquer ce qu'est un système de conception. Ensuite, nous prendrons ces connaissances et appliquerons la conception visuelle à l'image filaire que nous avons créée dans la deuxième et dernière vidéo avant celle-ci. Comme toujours, merci d'avoir regardé et je vous verrai, espérons-le, la prochaine vidéo. Au revoir. 11. Apprenez comment créer un système de conception: C'est une vidéo qui explique comment construire une étude de cas de conception UX et une conception d'expérience utilisateur 101. Et la dernière série de vidéos. Nous avons couvert beaucoup de terrain ici, mais nous avons continué avec les objectifs, les persona et la recherche. Déclarations de problèmes aux filaires, nous réalisons des prototypes cliquables. Et la dernière vidéo, j'ai parlé de la façon de tester les utilisateurs et de bonnes pratiques lors de tests utilisateur et comment synthétiser vos informations et vos modèles que vous apprenez des tests utilisateur. Donc, la prochaine vidéo que j'aurai portera sur l'application de la conception visuelle à votre filaire. Mais avant d'entrer dans cette affaire, je voulais parler un peu d'un système de conception et de ce qui constitue un système de conception. Et nous aborderons également un peu les guides de style et les bibliothèques de composants. Ok, donc si vous venez sur UX Honey.com, c'est le site que j'enseigne à l'université. Et si vous cliquez sur ce lien, il vous amènera à une page comme celle-ci. Faites défiler vers le bas et vous trouverez ici le lien appelé système de conception. Allez-y et cliquez sur ce lien et il arrivera à une page comme celle-ci. OK, cool. Par conséquent, les systèmes de conception sont en train de décomposer les conceptions pour ingénierie et nous utilisons également un système de conception comme un ensemble de règles de conception, composants et de styles qui peuvent être adoptés par d'autres produits au sein d'une organisation ou d'autres entreprises dans l'industrie. C'est donc la définition d'un système de conception. Lorsque vous concevez, rappelez-vous qu'il est bon de réutiliser et de ne pas créer d'éléments d'interface utilisateur uniques. Encore une fois, il s'agit d'un ensemble de règles de conception, composants qui peuvent être adoptés par votre produit ou d'autres produits peuvent être au sein de votre organisation ou au sein d'entreprises de l'image. conséquent, Google Material Design en est un bon exemple. C'est un très bon système de conception que d'autres organisations et entreprises du secteur utilisent et reprennent. OK ? N'oubliez donc pas que vos décisions de conception se transforment en artefacts d'interface utilisateur, des artefacts d'interface utilisateur qui se transforment en composants de conception réutilisables vivants. Je vais vous montrer quelques exemples de composants de conception viables. À partir de là, un langage de conception interne et itératif se développera et sera utilisé pour combler le fossé entre la conception et l'ingénierie. Vous voulez donc tous avoir le même vocabulaire lorsque vous parlez des composants et des éléments de l'interface utilisateur. Et pensez-y. J'aime penser à ces composants et à ces éléments d'interface utilisateur comme si vous faisiez un gâteau. Et disons que Kc est un logiciel dans cette analogie, ce qui constitue un gâteau, c'est une série d'ingrédients. Et vous remettez cette recette d'ingrédients à n'importe qui dans le monde. Et ils peuvent faire exactement le même gâteau que vous pouvez en faire votre maison. Pensez donc à cela comme un gâteau comme un produit et ce qui constitue un produit. Il y a beaucoup d'éléments d'interface utilisateur. Et tous ces éléments d'interface utilisateur ont des visuels, des conceptions et des styles pour eux. Dans ces styles, il y a les recettes qui composent ce logiciel. C'est une analogie assez simple là. Bon, alors quand devriez-vous utiliser et commencer à penser à un système de conception ? Vous pouvez donc avoir un design à partir de zéro auquel vous commencez à penser. Et lorsque vous accédez à un outil de conception, vous pouvez commencer par concevoir quelques écrans. Une fois que vous avez quelques écrans, les conceptions s'exécutent et vous commencez à réutiliser un élément. Il a commencé à copier et coller des éléments. Vous vous arrêtez à ce moment-là. Vous devez également créer une bibliothèque de composants globale que vous pouvez extraire lorsque vous concevez de nouveaux écrans. Rappelez-vous donc dans les dernières vidéos, lorsque dans les vidéos filaires sur la conception d'une image filaire, je vous ai montré comment créer un symbole et comment cela facilitait le changement de couleur et de style de ce symbole sur une zone. Et cela changerait sur des centaines d'écrans que vous avez obtenu ceci et c'est de cela que nous parlons ici. Vous créez une bibliothèque de symboles globale. Et réfléchissez-y. C'est ainsi que les ingénieurs ont créé des logiciels. Vous devez donc refléter leur processus dans vos outils de conception. C'est une bonne pratique de le faire. Alors, qu'est-ce qui constitue un système de conception ? Nous avons à peu près quelques éléments que nous pouvons parler ici. Le premier ici, à gauche, c'est que nous avons la voix et le ton. Alors, comment voulez-vous sonner ? Quel est le ton de la voix ? Qu'est-ce qu'un message de réussite, quels sont nos messages d'erreur. Qu'en est-il des pages marketing ? Un domaine d'un système de conception. L'autre est un guide de marque. Alors, comment votre logiciel se connecte-t-il au marché ? Avez-vous des règles sur la couleur, règles sur les logos, pour avoir des règles sur les icônes ? Et avez-vous des règles sur le type ? La prochaine est une bibliothèque de composants. C'est à ce moment que je parle beaucoup. Comment faites-vous, comment ne pas créer d'éléments uniques d'interface utilisateur ? Nous avons donc des boutons et des champs, des listes déroulantes et des modaux. Quel est votre langage visuel ? Comment votre visuel suscite-t-il des émotions ? Quel est votre ton visuel ? Quelles émotions viens-tu de ton visuel ? Quelles sont les définitions linguistiques et quelles sont vos règles visuelles ? Alors, les définitions linguistiques, comment parlez-vous en équipe ? Parlez de choses que nous concevons ici. Quelles sont vos règles visuelles ? Cela a donc beaucoup à voir avec votre guide de marque. Et ensuite, votre guide de style. Il s'agit de la composition des éléments de l'interface utilisateur. Ainsi, vos nuances de couleurs, la décomposition d'Eli, la cohérence de l'espace, le système de typographie. Et ensuite, vous avez le langage de conception, qui est vraiment les règles des conceptions d'interaction. Et ces règles peuvent être adaptables. Vous avez donc des règles interinteractions, cohérences de transition, modèles d'utilisation et des modèles de conception et d'interface utilisateur. Ainsi, chaque fois que vous parlez de l'un de ces éléments ici, vous parlez d'un système de conception. Il s'agit donc de l'approche systématique du design qui réunit ces six éléments ici. Permettez-moi donc de vous montrer un bon exemple de guide de style ou de bibliothèque de composants. Alors cliquez ici, voici l'entreprise que j'ai travaillé pour Pivotal. Vous pouvez accéder au guide de style point pivotal dot io. Vous pouvez accéder aux composants et voir tous les boutons qu'ils possèdent ici. Vous pouvez faire défiler vers le bas et voir leurs boutons. Beaucoup de choses et c'est un guide de style de vie. Donc, si je le veux, je peux obtenir le code. Vous voyez donc ce show HTML. Je peux maintenant copier ce code HTML. Si vous voyez ce React, React est également un cadre visuel. Je peux copier ce code dans mon application, assez solide chez moi. Et nous avons ici à gauche tous les composants. Vous avez donc des alertes ici, voici un tas d'alertes. Je peux voir le code de chacun. Vous avez des formulaires ici. Je peux donc voir ici un formulaire utilisateur. Et ça continue et continue. C'est un bon système d'interface utilisateur. Lorsque vous pensez à un langage de conception comme règles d'interaction et des cohérences de transition. Celui-là, le point IO matériel est vraiment solide. Google a donc fait ça et il est devenu ici. Voici leurs règles. J'aime ça parce qu'ils vous donnent de bons exemples et de mauvais exemples, n'est-ce pas ? Voici donc comment révéler une carte et révéler plus d'informations. Il grandit un peu. Ici, il se retourne. Il est donc trop lourd de transition. Le glissement sur le je regarde beaucoup ça. C'est cool, mais c'est beaucoup là où c'est très doux et agréable et c'est très brusque, ce système ici. Vous pouvez donc passer en revue tout le single, par des gestes ici et vous dire qu'ils ont des règles à ce sujet. Et tous les types de trucs sympas que vous pouvez voir. C'est plutôt cool ici. Ok, la prochaine chose que je vais couvrir, c'est le guide de style. Il s'agit donc d'une composition d'échantillons de couleurs et de styles de typographie. Et il va aussi entrer dans certaines bibliothèques de composants. Vous pouvez donc voir ici que c'est la meilleure pratique lorsque vous étudiez conception visuelle dans une application. Et rappelez-vous cela lorsque j'arrive à la vidéo suivante, car lorsque nous appliquons un design visuel à notre application que nous avons créée précédemment dans les vidéos précédentes, l'application OPT, je parlerai de la couleur de l'action. La couleur qui est l'action la plus importante que l'utilisateur doit entreprendre dans chaque écran ou chaque section. Et cela devrait être cohérent. Celui-ci est donc notre couleur d'action. C'est ce qu'on appelle le bleu froid. Nous avons ici ce qu'on appelle l'échantillon de couleur hexagonale. Et nous pouvons le remettre à l'ingénierie et ils sauront exactement de quelle couleur il s'agit par ce code, nous avons les boutons d'action secondaires. Il s'agit de l'action secondaire, par exemple Annuler, d'un bouton d'annulation par rapport à une couleur d'action étant un bouton d'enregistrement. Il s'agit donc de l'action secondaire que nous souhaitons que les utilisateurs fassent. Et nous avons toutes nos couleurs ici, toutes nommées. Vous avez une couleur d'erreur, vous avez la couleur de succès ici. Ils ont tous des noms. De cette façon, nous pouvons discuter en équipe autour de ces couleurs. Donc, lorsque nous parlons de couleur d'erreur de flèche, nous ne parlons pas seulement du rouge. On peut l'appeler rouge corail, ou on peut appeler ça la couleur d'erreur. On peut aussi dire que le vert va vert. Et puis nous faisons référence à cette couleur de succès, ces gris, nous pouvons utiliser le gris dauphin, nous pouvons utiliser le gris trait, nous pouvons utiliser le bleu hubbard, l'orange chaud, la pluie violette. J'aime bien celui-là. Je vais être bleu, non ? Il s'agit donc d'un langage que nous avons créé à partir de la couleur. Et vous pouvez voir ici que nos couleurs primaires les plus utilisées pour la plupart des applications. Les couleurs secondaires ici en bas que nous utilisons pour d'autres parties de l'application. Bon, donc maintenant, nous allons entrer dans les règles de topographie. Nous avons donc ici une série de ce que nous appelons H1, H2, H3, H4, H5, A1, A2. Et ainsi de suite. Et ce que c'est, ce sont des titres, donc ces 21 vont être la police la plus importante, pas nécessairement un titre dans votre interface utilisateur, mais celle qui est la plus grande taille de police de l'application. H2 est secondaire par rapport à la plus grande taille de police utilisée par H1. Parfois, vous aurez un H2A, c' est-à-dire que nous utilisons régulièrement dans ce cas, nous utilisons de la lumière. Dans ce cas, h3 n'est pas aussi gros que H2, peu plus petit et un peu plus intelligent que h3, h4, puis un peu plus intelligent que H4, H5. Ensuite, nous avons A1 pour les paragraphes. texte si petit. Donc, vous avez a1, a2, a3 ici devrait être, c'est une copie dupliquée. Vous pouvez donc voir ici à droite, nous avons mis en place ce système. Nous allons utiliser Roboto Open Sans pour BAD Open Sans. Et nous avons ici des exemples lorsque nous les utilisons également à droite. Vous pouvez donc voir les exemples dans l'application de l'endroit où ils vivent. Si vous souhaitez en savoir plus sur la topographie, vous pouvez passer à des moments avec la typographie. C'est un site Web que j'ai créé et c'est une conférence que j'ai faite pour Adobe lors d'une conférence appelée Adobe MAX. Et cela passe par toute une série de dernières conceptions systématiques de type. Ce qui est le mieux utilisé pour les paragraphes et la toxine sur H1 et comment utiliser un H1 et H2 pour les ordinateurs de bureau, tablettes et les appareils mobiles et les meilleures pratiques, le résume. Je suis tombé en panne, le blog web le plus populaire au monde et leurs systèmes de type. Et il couvre beaucoup de terrain ici. Je vais probablement faire une autre discussion sur Skillshare pour casser ça juste sur la typographie ici. Mais si vous voulez avoir la chance d'aller jeter un coup d'œil à tout cela, passez à quelques instants avec typography.com. Vous pouvez voir ici l'URL. Et vous trouverez tout un tas d'informations à ce sujet. Et donc ils ne l'ont pas fait, il y a des couleurs qui reflètent le guide de style. Et nous avons ici le système de typographie. Ensuite, nous allons aller plus loin dans la bibliothèque de composants. Nous avons donc des boutons, nous avons des états de survol pour les boutons. Et nous décomposons ici les types, la couleur, la couleur, la couleur, la couleur, la réutilisation, la couleur hexadécimale. Et c'est un vrai code. Vous pouvez entrer là-dedans, vous pouvez copier cela. Vous pouvez ouvrir le navigateur ici. Vous pouvez voir le code ici si vous le souhaitez. Et nous avons toutes nos formes ici. Nous parlons donc des états stationnaires et des états actifs de nos formulaires. Et les états d'erreur comportent des cases à cocher. Ensuite, nous allons trop entrer dans le monde de la conception axée sur les composants. Vous trouverez une grande partie de ce qui est abordé ici dans les exemples de conception de matériaux pivots. Mais une chose dont je veux parler, c'est que vous pouvez utiliser l'espace comme composant. J'ai donc ces petits carrés rouges. Et lorsque vous avez deux carrés rouges, il y a 30 pixels, sorte que chacun représente un incrément de 15 pixels. Chaque fois que j'utilise mes créations, j'aime aussi penser à l'espacement comme attribut. Vous pouvez donc voir cette carte ici à droite. Il a une icône, il contient des textes, mais ils sont tous de l'espace en conséquence, comme l'icône en haut de cette carte mesure 16 pixels. Et le texte ici, destinataire ciblé est à 120 pixels du bas. Et vous pouvez voir comment j'utilise cet attribut d'espace tout au long de ma conception. Ok, donc vous l'avez. C'est à peu près le fondement et l'exemple du système de conception et de ce qu'est un système de conception. Encore une fois, merci encore d'avoir regardé, et j'espère que je vous verrai dans la prochaine vidéo, qui appliquera la conception visuelle à votre filaire. Laissez-moi vous donner un petit aperçu de ce à quoi cela ressemblera. Des hommes qu'il y aura XD ici. Je vais aller à ce bokeh t design que nous avons fait tout ce temps et vous donner un peu de résumé, je vais prendre quelques écrans et Watson Visual Design ici aussi. Des trucs assez amusants. Très bien, si peu d'aperçu là-bas, à quoi s'attendre. Et j'espère que je vous verrai dans la prochaine vidéo sur la façon d'appliquer la conception visuelle à votre filaire. Comme toujours, merci encore et à bientôt. Au revoir. 12. Comment appliquer le design visuel à votre prototype: Très bien, bienvenue sur la façon de créer une étude de cas sur la conception d'une expérience utilisateur et sur la conception d'une expérience utilisateur individuelle. Très bien, nous avons donc parcouru beaucoup de terrain, depuis le début, en apprenant à définir des objectifs, en passant par la création de personnages et de scripts d' entretien avec des utilisateurs en passant par la réalisation de recherches et la synthèse. vos recherches aussi, comment rédiger un énoncé de problème. Nous avons appris quelques cartes du parcours client. Nous avons dessiné des modèles et des cadres. Dans la dernière série de vidéos, j'ai expliqué comment créer un design filaire. Comment créer un prototype cliquable, comment utiliser ce prototype cliquable et effectuer des tests sur les utilisateurs et meilleures pratiques lors de la synthèse vos informations et informations sur les tests utilisateur. Nous avons appris dans la dernière vidéo comment créer un système de conception et les bases d'un système de conception. Maintenant, je vais vous apprendre à utiliser cette conception filaire originale et à y appliquer un design visuel. Parlons donc un peu de ce qu'est le design visuel ? conception visuelle est l' étude de la création et positionnement d' éléments graphiques à des fins visuelles. Il s'agit d'une étude continue des compositions de mise en page, des couleurs, de la typographie et de l'ambiance visuelle. Il faut beaucoup de pratique pour réussir dans ce domaine. N'oubliez donc pas que si vous débutez et que l'apprentissage prend du temps. Ne soyez donc pas trop dur envers vous-même, continuez simplement à pratiquer et à explorer les humeurs visuelles et les traitements. Trouvez l'inspiration ou aidez-vous. Et je vais vous donner un petit conseil ici avant de vous lancer dans la création d' un design visuel pour votre wireframe, je vais vous montrer quelques méthodes que j'utilise. Donc, quelques conseils ici avant de sortir et de faire du design visuel sont décrits ici. Design visuel avec adjectifs. Cela vous aidera à en savoir un peu plus sur l'objectif de votre conception visuelle. Donc, certains adjectifs auxquels vous pouvez penser sont que vous pouvez dire : « Je veux quelque chose de visuel qui soit amusant et ludique mais moderne ». Ensuite, vous pouvez prendre ces adjectifs et aller chercher des moodboards. Ce sont des exemples visuels qui s'appliquent à ces adjectifs. Il est également préférable de créer un dossier pour y puiser votre inspiration visuelle. Donc, où que vous trouviez des choses intéressantes ou intéressantes, ou lorsque vous êtes dans la nature et vous voyez quelque chose dans votre propre vie, prenez-en une photo avec votre appareil photo sur votre téléphone et placez-la dans ces dossiers. Et il est également bon de s'entraîner à explorer de nombreux traitements visuels différents. Permettez-moi de vous montrer une petite technique pour trouver des adjectifs et comment appliquer un mood board à certains de ces adjectifs ici. D'accord, vous pouvez donc considérer la composition visuelle au début comme de simples mots, comme décrire l'humeur que vous attendez de votre design visuel. Dans cet exemple, nous avons parlé un peu quelque chose d'instructeur moderne, structuré, crédible et ambitieux. Nous décrivons ces adjectifs, nous les transformons en noms en faisant du mood board. Voici donc un exemple de certains modèles qui remplissent le moniteur. Palette de couleurs moderne. Ils sont très propres, bien agencés. Regardez cette petite application pour iPhone ici. C'est un vrai travail. C'est un vrai travail que j'ai fait pour un client. Voici quelques exemples qui lui ont donné l'impression d'être crédible, comme une banque, mais vraiment digne de confiance. Il y a donc beaucoup de bleu ici. Le bleu est une couleur fiable, c'est donc une couleur que les hôpitaux utilisent et que les banques utilisent. C'est une couleur très apaisante. Ces petits exemples d'éléments visuels s'appliquent au crédible. Donc, la prochaine étape, une certaine structure, je peux voir que tout est en quelque sorte encadré sous forme de grilles. Elles sont très structurées. Vous pouvez y voir quelques aspirations, juste les photos, les traitements du soleil, les rayons du soleil, quelques photos prises le soir et quelques couchers de soleil. C'est tout simplement très inspirant. Nous essayions de capturer cela de manière visuelle. Alors, où allez-vous pour retrouver une grande partie de ces humeurs ? Quelques endroits où j'aime aller. Tout d'abord, j'aime bien dribbler. Vous pouvez le voir triplé ici. Il dispose de trois B et d'un DRI BB. C'est juste un endroit où les designers se rendent pour publier des choses intéressantes qu'ils ont faites. Vous pouvez faire une recherche ici. Allons regarder quelques écrans. Et vous pouvez simplement voir de nombreuses façons différentes de concevoir un écran ici. Assez intéressant. Vous pouvez vous inspirer simplement en regardant ce type d'œuvre. Il contient des gifs animés, vous pouvez donc voir de petits détails d'interaction ici. Un endroit intéressant pour se mettre en valeur et y faire un iPhone. Regardons. Celle-là. Plutôt cool. Ce ne sont que des tas de choses à vous inspirer, à examiner et à perfectionner dans votre art visuel. OK, une autre façon de trouver des exemples de mood boards est que je n'ai pas de dossier d'inspiration. Encore une fois, c'est un dossier que j'avais sur mon bureau sur mon ordinateur et je le remplissais que je voyais quelque chose d'aussi inspirant, soit cela vient de Dribble, moi et de ma part dans le monde. Si je vois un site Web sur quoi que ce soit, je le place simplement dans ce dossier. Et passons en revue quelques-unes d'entre elles. Ils regorgent de mises en page et d'ambiances différentes, même de styles d'illustration et de logos. Et chaque fois que je suis bloqué sur quelque chose, j'ai tendance à ouvrir ce dossier en premier, je le lis et ça m'inspire. Et il regorge de tonnes de beaux exemples de design réalisés d'autres personnes et j'aimerais pouvoir en faire deux. Oui, ça continue encore et encore et encore. J'ai commencé ce dossier, je crois, en 2009. Et il contient de nombreuses informations à ce sujet. Je suis juste en train de cliquer sur certaines zones en ce moment. Passons en revue quelques-unes de celles que j'ai trouvées en 2015. Beaucoup de cool, intéresse juste la mise en page, quelques façons de faire des designs différents. Continuez et je vais peut-être vous montrer quelques autres exemples ici. Oui, il peut s'agir d' applications et de sites Web pour iPhone, de logos et d'applications iPad, gifs animés, de mises en page éditoriales, toutes sortes de bonnes choses. Donc, la meilleure pratique consiste à mettre tout votre matériel d' inspiration dans un dossier le développer au fil du temps et à y revenir lorsque vous êtes bloqué sur la conception visuelle ou l'aide. vous avez juste pour vous débloquer et vous inspirer. Quelques bonnes pratiques lors du développement de votre design visuel. Regardons ce que nous allons fabriquer aujourd'hui. J'ai ici une vidéo de l'application Final Bow Betsy que nous utilisons depuis le début. Et encore une fois, il s'agit d'une application qui a été un thème à travers toutes les vidéos que nous pouvons voir ici. Je vais commander du thé baba. J'aime bien ce thé au lait ordinaire. Et optez pour les semi-suites. Grand tapioca. Cliquez sur le bouton Ajouter ici. Passez à l'écran suivant. Mais dans mon adresse. Ensuite, mettez les informations de ma carte de crédit et boum, je suis là et Bobo vient me voir cinq minutes, 2 minutes, et j'ai un t bulbaire. Donc vraiment génial. Nous allons donc apprendre à prendre votre wireframe et nous allons apprendre à appliquer le design visuel d'une manière qui ressemblerait à ceci, allons même peut-être nous amuser et nous utiliserons un autre couleur en plus du rose. Peut-être que nous utiliserons du bleu ici. Alors sans plus attendre, allons-y et ouvrons Adobe XD. Vous pouvez voir que c'est ce filaire que nous avons créé dans la dernière vidéo. Donc, si vous voulez en savoir plus sur la construction ce wireframe et sur la façon de fabriquer le prototype, voici ce que vous pouvez voir. Vous pouvez revenir à la vidéo. Vous pouvez apprendre à réaliser ce design. J'ai appris certaines des techniques de prototypage ici. Ce que je fais en ce moment, c'est que j'ai tous ces wireframes et prototypes. Mais voyons comment prendre un écran ici et y appliquer un peu de design visuel. Donc, la première chose que je vais faire ici est de commencer par un écran d'introduction côte à côte. Et nous allons y appliquer de la couleur. Je vais garder le fond noir. Je vais garder le texte un peu ici. Je vais le garder blanc, mais je vais le retirer un peu, peu de transparence. Et ça a l'air sympa. Mais je ne pense pas que je vais faire ici, c'est de mettre une ligne en haut. Cela a un style visuel. Je vais faire cette phrase, pourquoi ? Mais je ne veux pas qu'il soit trop fort. Voici donc un élément clé lorsque vous effectuez un travail de conception visuelle : vous souhaitez généralement que votre communication soit le point fort de la page. C'est ce que doit faire votre design. Il s'agit de servir les intentions visuelles et la communication visuelle. Alors voyez maintenant que le texte est un peu gris cette ligne est blanche et qu'elle est plus forte que le texte. Nous ne voulons pas que cela figure dans la hiérarchie de notre visuel. Je vais donc réduire l'opacité de ces lignes juste pour que vous puissiez à peine les voir. Joli. Ça a l'air bien. OK, donc je vais aller de l'avant et repousser peut-être aussi ce baba en cours de chargement. Je pense que la taille du texte est correcte. Je vais également repousser cela. Cool. Et j'ai cette icône d'un probit, mais je l'ai ici dans Illustrator. Je vais donc ouvrir Illustrator et accéder à mes ressources. Et vous pouvez voir que j' ai ici tous les atouts pour fabriquer cette ampoule conçue par T, même celle-ci, la chaire T elle-même. Donc, ce que je vais faire, c'est placer ce faux t sur du noir dans Illustrator. Et je vais commencer par le faire blanc, pour que tu puisses le voir en blanc. Ensuite, je vais ajouter la couleur. Je sais que dans l'exemple que je vous ai montré, nous utilisons du rose. Amusons-nous un peu. Utilisons le bleu. Et je vais aussi rendre la paille bleue. Nous allons le modifier un peu. Merci. OK, maintenant je l' ai dans mon Illustrator. Je vais continuer et revenir à OPM, Adobe XD. Avant cela, je vais copier cette ampoule de t. Je vais aller XD et je vais placer cette ampoule en T sur l'écran. Ça a l'air très amusant. Cela le réduit un peu. Cool. D'accord, cool, ça a l'air plutôt bien. La prochaine chose que je vais faire ici est que nous allons accéder à cette page étrangère après l'écran de chargement. Et nous allons passer à celui-ci ici. Il dit le Bobo, pas la copie de l'écran. Supprimez une partie de cela ici, gardez-le en vue. Et je vais d' abord faire en sorte que ce soit un fond sombre pour pouvoir le remplir ici sur la droite. Faites de cette pièce une pièce sombre comme ça. Je vais saisir ce texte ici, le nom de famille, je vais créer ce texte. Faisons en sorte que ça soit blanc. Et créons les textes que je suis en train d'ajouter ici. Je vais en faire les textes bleus. J'aime bien cette couleur, donc je vais l'ajouter à ma palette d'échantillons. Et je vais simplement continuer à faire ces changements. Allons-y et faisons de même en bleu avec l'e-mail ici. Allumez et allez-y, prenez mon e-mail. Rends ça bleu. Pareil pour le mot de passe et faites-le blanc. Et allez-y, créez celui-ci ici. Ce bleu. Il y a quelques lignes ici. Alors laisse-moi saisir toutes ces lignes et faire en sorte que cette ligne soit blanche. Et j'ai une très légère opacité dessus. Vous pouvez donc voir qu'ils sont blancs comme ça, mais c'est trop fort. Je tiens à souligner cette communication visuelle ici. OK, et j'avais un vieux logo en haut. Mais avant cela, permettez-moi de mettre le texte de l'appel à l'action ici, Texas vous disant quoi faire. J'ai ce login. Je vais commencer et rendre la connexion bleue. Et je vais faire en sorte que ça s' inscrive ici aussi. Nous y arrivons. Je vais récupérer l' ancien logo d'Illustrator. Je vais donc passer à Illustrator ici. J'ai ce logo et je le copie, le colle dans son sac. Deuxièmement, inversez une partie de cela. Je vais donc faire en sorte que le texte soit blanc, et je vais faire en sorte que le discours soit une bulle blanche. Et je vais faire en noir les textes sur les genoux. Quand je le copierai. Je vais coller ce logo. Ici. Ça a l'air bien On dirait que je ne devrais pas toucher à la bulle de pensée. Ensuite, regardez, je peux apporter des modifications directement dans Adobe XD, ce qui est bien. Allons chercher ce logo. Allons le remettre dans l'écran de chargement. Que diriez-vous de ça ? Nous allons explorer un peu les points dont j'ai parlé plus tôt. Il s'agit d'explorer des choses. Oui, allons-y. Ça a l'air sympa. Amusons-nous un peu avec le logo ici. Faisons ça, faisons en sorte que cette couleur soit encore une seule couleur. Pic. Oui, c'est plutôt cool. Avec un design un peu plus officiel sur cet écran, juste pour les fantaisies, nous allons choisir ce rose ici. Je vais en faire une palette de couleurs. Ajoutez-le à ma palette de couleurs ici. Alors maintenant j'ai du rose, non ? Nous allons sélectionner les textes à charger. Faites en sorte que P augmente l'opacité. Oui, tu y vas. Ça a l'air marrant. J'aime bien où ça va. Qu'en est-il de toi ? Cool ? Très bien, mettons-le, essayons quelque chose. Mettons l'opacité ici et la coupe ici. Ça a l'air cool. Très bien, donc ce que nous avons à faire ici, c'est que j'ai deux ou trois choses. Nous utilisons la couleur bleue. Et nous avons du bleu pour les formulaires, du bleu pour les boutons et du bleu pour l'inscription. Mais créons une couleur d'action forte pour les éléments sur lesquels vous pouvez cliquer. Allons donc les faire roses. Nous allons conserver ce thème tout au long des designs que nous créons. Nous voulons qu'une couleur d'action représente tous les éléments sur lesquels vous pouvez cliquer. Pas toutes, mais la plupart des éléments sur lesquels vous pouvez cliquer sur les actions principales par écran. Passons donc à l'écran suivant, qui est le grand écran. C'est ici que vous avez tout le maquillage de la page d'accueil de l'application bulb of t. Et comme je l'ai fait pour la page de connexion ou d'inscription, je vais le copier ici. Et je vais vous montrer un peu comment construire cela. Je vais supprimer certains de ces éléments ici. Nous allons repartir de zéro. pouvez voir cette petite ligne pointillée ici. Cela indique le dessous du pli. Il s'agit du contenu que vous ne pourrez pas voir lorsque vous le chargerez sur un écran. Donc je peux y aller. Ici, en haut à droite, où il est écrit Play. Je peux regarder ce prototype. Et vous pouvez le voir, je peux voir la barre d'onglets ici, elle est visible, mais si je la déplace en dessous du pli, verrez comment elle se passe sur la visionneuse de gauche ici. C'est donc ce que cette petite ligne pointillée m'indique. Alors allons-y et commençons par créer un petit bout de cette barre d' onglets d'application OPT ici. Vous pouvez donc voir que je vais supprimer ces icônes et que je vais les récupérer dans Illustrator juste pour les reconstruire. J'ai la barre noire ici. C'est juste un rectangle noir. Ici, en haut à droite. Si vous voyez où pointe ma souris, indique une position fixe lors du défilement, regardez ce qui se passe lorsque je ne coche pas cette case et que j' appuie sur Play, pour voir le Mach. Et jette un coup d'œil. Lorsque je fais défiler cette barre noire se déplace vers le haut. n'est pas ce que je veux. Je veux que ça soit réparé. Je vais continuer et appuyer sur la case à cocher ici, position fixe lors du défilement, appuyer sur Play et regarder, elle reste en bas. Ce que je suis en train de tabuler ou de balayer, de défiler vers le bas. Revenons à Illustrator. Je vais prendre cette petite icône ici, l'icône l'ampoule Etsy avec de la couleur dedans. Je vais revenir à l'application XD. Je vais le coller. La mauvaise chose. Laisse-moi revenir ici. Laissez-moi juste prendre l'ampoule de l'icône T et je vais la coller ici. Laisse-moi me débarrasser du spectateur. Collez-le juste au centre de cette barre ici et vous pourrez voir qu'il aide à guider les guides m' a aidé à savoir s'il est centré. D'accord, ça a l'air bien. Passons à mon fichier Illustrator. Ce sont toutes mes icônes dont j'ai besoin en direct. Allons chercher cette petite icône de profil. Je vais le rendre blanc dans Illustrator. Je vais le copier. Accédez à XD. Je vais le placer, le réduire un peu. Très bien, je vais y aller et me regrouper. Cela permet de sélectionner facilement le groupe. Je vais le réduire un peu. Placez-le ici. Laissez-moi aller chercher l'autre icône dans Illustrator. Je vais aller chercher le panier, placer à l'arrière, en noir ici et le rendre blanc. Pour que je puisse le voir. Revenez à XD. Je vais le placer ici sur l'onglet. Le mélange en barres est dans la même position dimensionnelle par rapport à tous les autres éléments. Et visiblement. Maintenant, quelle reconstruction d'écran est l'écran d'accueil, c'est l'écran bulbaire en forme de T. Donc, quand tu n'es pas sur cet écran, je vais sortir ces sections un peu. Je vais faire l' opacité à environ 50, 45 pour cent ça devrait être bien. OK, allons-y et assurons-nous ils ont l'élément fixe. Je vais donc les récupérer et cocher la case ici position fixe du poing lors du défilement, je vais la regrouper par la commande G pour m'assurer qu'elle est groupée. Vous pouvez également le faire en groupant ici, cliquant avec le bouton droit de la souris et en faisant un groupe. Prévisualisons-le très rapidement. Assurez-vous qu'il reste en bas. Il ne voit pas ce qui s'est passé. Je pense qu'il l'a retiré lorsque je l'ai regroupé. Alors faisons-le encore une fois. Position fixe lors du défilement, prévisualisons-la. Et il reste en bas. Joli. OK, pour gagner du temps, j'ai ces photos et l' exemple que je vous ai montré, je les ai en photo. Vous pouvez donc voir que je vais passer au prototype haute fidélité d'un prototype déjà construit qui utilise P ou qui s'amuse un peu plus que celui que nous construisons, nous allons utiliser du bleu ici. Je vais juste prendre ces photos juste pour qu'on les ait ici et les placer sur le côté. Très bien, donc la première chose que nous voulons faire ici, alors allons mettre le squelette sur l'autre tableau d'art ici. Donc, l'argent. Juste pour l'instant. Voici les photos. Génial. Allons mettre ce faux normal. Il est né ici. Et vous pouvez voir que j' ai le texte ici. Allons juste copier ça. Et ça a l'air juste. C'est plutôt bien. Ajoutons un peu de style de couleur à ce noir. Donc, chaque fois que j'utilise Grace, j'aime ajouter un peu plus de gris bleuté avec un peu de bleu à votre grâce. Ça aide toujours un peu. D'accord, ça a l'air sympa. Allons appliquer ce bouton Ajouter ici. Alex. C'est un peu bon. C'est un peu fort. Je me demande donc si nous avons même besoin de cette place. Peut-être que nous ne faisons que les textes là-bas. Nous allons l'agrandir un peu afin que je puisse accéder à la zone de texte d'Adobe XD. Allons-y peut-être 25, faisons 27 tailles de police. Ok, allons-y bien, grands et gentils. OK, cool. Ajoutons le suivant. Je vais ajouter la photo suivante ici. Je vais utiliser le même texte juste pour gagner du temps, je vais le copier. Une chose que je vais faire, c'est pousser ça vers le haut. Alors voyez où il est écrit Bring to Front. Je vais mettre ça au premier plan. Et je vais le copier et le déplacer ici comme ça. Ça a l'air bien. Je vais déplacer ces boutons d'ajout un peu plus bas. OK, mettons la photo suivante. Et nous voulons que cela se trouve sous la barre d'onglets. Donc, lorsque tout défile en dessous de la barre d'onglets. Et encore une fois, je vais copier la superposition ici, mais elle fonctionnera. Ensuite, allons mettre le thé au lait ici. J'espère que vous avez faim ou soif d' une ampoule . Je vais m' assurer que cet élément est au top. Alors amenez-le à l'avant, abaissez-le. OK, et maintenant je vais prendre cette barre d'onglets, pour m'assurer qu'elle se trouve au début de tout. Ils ont encore un peu de place ici. Pour nous amuser, nous voulons montrer au spectateur que nous allons avoir encore du fromage à venir. Nous n'avons pas toutes les saveurs que nous pourrions avoir en ce moment. Je vais donc faire une petite section noire ici. Je vais le ramener à l'arrière. Et c'est en fait un peu noir bleuté ici. Donc, revenons en quelque sorte à notre thème. Une icône bleue ici qui aime, oui, tu y vas. Allons chercher celui-ci ici. Collons-le juste au centre ici. Regardez ceci plus de saveurs. C'est copier ça. Faisons en sorte que cela ait plus de saveurs. Faisons en sorte que ce soit bleu. Et faisons celui-ci, gardons-le blanc. Nous utilisons donc principalement cette couleur rose ici pour les couleurs d'action. Alors ne faisons rien. truc, c'est de garder ce bleu. Je vais tout remettre en place. Support gauche Control Shift. Ou si vous utilisez un PC, le support gauche de Control Shift. Si vous utilisez un Mac, il s'agit du crochet gauche Command Shift. Mais je vais aussi le faire dans l'autre sens. Renvoyez-le ici. Allons-y et regardons maintenant, je vais passer à la section d'aperçu de XD pour voir cette vidéo et l'avoir belle. Je vais faire défiler ma fovéa jusqu'à Ici. J'ai des saveurs à venir bientôt. Cela semble un peu trop étroit par rapport à la barre d'onglets. Revenons donc ici. Je vais fermer la visionneuse d'aperçu. Déplaçons un peu ce tableau d'art vers le bas et donnons-nous un peu plus d'espace. Prends ça, il y a plus de saveurs et de thé à bulles ici. Centrez-le dans l'espace. Et allez-y et revenez au mode de prévisualisation. Assurez-vous que je suis sur le bon tableau. Et super. Je suis en train de prévisualiser. Joli, ça a l'air d'un beau visuel pour l'instant. Cool. Passons à une autre page qui montre ce se passe lorsque j'appuie sur le bouton Ajouter ici. À ce stade, nous allons regarder cette page dans la section wireframe. Donc ça ressemble à ça. Je vais le copier. De cette façon, nous pouvons appliquer le design visuel à côté. Vous pouvez donc le voir sur ce nouvel écran, ce que je vais faire c'est me débarrasser de l'ancienne photo que j'ai ici. Et je vais prendre cette nouvelle photo mais au-dessus T. Et je vais faire un rectangle par-dessus. Pour créer ce rectangle ici. Où j'ai pu voir un petit bout de cette ampoule, un T. Basé sur cette ligne , sur le tableau suivant. Je vais sélectionner ces deux éléments. Je vais monter en haut, juste ici. Et je vais faire les zones d'intersection, les deux petits carrés qui se croisent. Et boum, je peux recadrer cette ampoule T et je peux la faire descendre un peu. Génial. Envoyez-le au dos de la page dès maintenant. Ça a l'air bien Allons-y et supprimons la marque X blanche. Je vais en chercher une couleur que nous pourrions utiliser. Bon, revenons donc à notre réflexion initiale, à savoir que les zones cliquables sont des zones sur lesquelles nous allons créer cette couleur rose. Alors allons-y et rendons tous ces petits rectangles roses, juste pour indiquer que ce sont les zones cliquables. Ce petit blanc est assez fort ici, alors revenons en arrière et faisons juste un contour blanc ici, le carré. Faisons ça, faisons 30 %. Je vais prendre l' autre ici aussi, faire une réduction de 30 %. Vous pouvez voir qu'ils se chevauchent. Nous ne voulons donc pas y faire d'opacité. En fait, nous voulons juste le rendre gris. Allons donc trouver un, un beau gris que nous pouvons utiliser et qui contient un peu de bleu. Plus fort. Tu y vas. Allons chercher ça. Je vais y aller et en faire un échantillon de couleur afin de pouvoir facilement refaire cette couleur également. Nous allons sélectionner le gris suivant. Nous mettons maintenant en évidence le contenu, qui est le lait, le T normal avec de la glace. bon, ça a l'air bien. L'autre design que je vous ai montré, nous avions ces boutons ici. Ils ont été décrits. Alors allons-y et établissons ces grandes lignes. dirait qu'ils sont remplis en ce moment, comme si ce sont des états actifs. Je vais donc cliquer dessus et supprimer le remplissage. Et tu peux voir que je l'ai. Des symboles, donc ils vont tous faire la même chose que je veux qu' ils fassent, ce qui est génial. Je t'ai appris à créer des symboles dans la vidéo de wireframing. Donc, si vous êtes curieux de savoir comment créer un symbole, vous pouvez regarder cette vidéo. Mais j'ai cette bibliothèque de symboles ici à gauche de tous les boutons et tout ce que j'ai créé dans ce design. Je vais donc agrandir un peu le trait quand ils verront que les deux sont superbes. Et regardez ces textes sur le tapioca de Bobo. Faisons en sorte qu'il soit blanc. Mettez en valeur ce contenu. Génial. D'accord, et vous pouvez voir que ça change sur l'écran à côté. C'est parce que j'ai tout cela comme symbole, ce qui permet aux symboles de noter, c'est de regarder ces trois boutons d'ajout. Ils changent de couleur à mesure que je les change en temps réel. C'est ce que fait un symbole. C'est donc vraiment très pratique de créer des symboles ici. Alors allons-y et supprimons certains des boutons de l'application que j'ai ici. Allons chercher le bouton d' inscription. Restons assez simples ici. Le bouton Rythme pour m'inscrire, puis avant de le faire, je vais créer un symbole. Je vais vous montrer très rapidement comment créer un symbole de l'inscription. Ajoutez simplement le bouton plus ici au symbole. Laisse-moi juste prendre les textos. Et je vais l'appeler le bouton principal sur la gauche. Mais chaque fois que je veux l'utiliser, je peux simplement le faire glisser vers l'écran. Alors allons-y et revenons à ce que nous concevons ici. Je vais récupérer le symbole et nous le placerons sur ce tableau d'art ici. Je vais mettre des SMS par bouton d'inscription ici. Oui, ça a l'air bien. OK, nous avons donc une icône de fermeture ici. Laissez-moi d'abord récupérer l'icône que j'ai dans Illustrator. Je l'ai donc en noir ici. Je vais revenir à Adobe XD. Je vais le placer. a l'air plutôt grand en ce moment. Réduisons cela. Faisons en sorte que ce soit un rose aussi. Et maintenant, vous pouvez voir sur cette page que tout ce qui est tapotable est rose. J'utilise donc la couleur principale la plus claire pour indiquer à l'utilisateur ce qui est tapotable et ce qui ne l'est pas. Et c'est un aspect clé lors de la conception de l'interface utilisateur. Utilisez votre couleur principale. Utilisez une couleur vive, renforcez-la, et ce sont les principales actions que vous souhaitez effectuer pour votre utilisateur. Je vais donc supprimer l'écran à côté. Oh, nous avons oublié ce texte ici. Allons-y et créons ce bloc de texte. Cool. C'est plutôt bon. OK, donc je vais supprimer cette page ici et créer un autre bouton pour afficher l' état plein de ce tapioca. Supposons que l'utilisateur tape sur ce tapioca de mauvais goût ici. Ce que je vais faire, c'est d' abord le détacher des symboles parce que je ne veux pas changer tous les symboles. Je vais sélectionner uniquement l'arrière-plan. Je vais le remplir. Je vais le remplir de rose. Cool. Ça a l'air bien C'est presque comme si l'utilisateur avait appuyé sur ce bouton. Très bien, alors on s'entend bien. Vous pouvez donc voir comment nous avons créé une page de formulaire assez unique ici, inscrivez-vous. Nous avons créé la page d'accueil ici et ajouté des styles à nos photos et aux superpositions. Une barre d'onglets que je vous ai montrée dans Illustrator, c'est mieux. Toutes vos icônes dans un seul endroit. Si je le voulais, je peux copier toutes ces icônes ici. Et je peux les placer dans XD sur un tableau d'art ici pour pouvoir les prendre en charge, ils sont fournis au format vectoriel. Je peux changer les couleurs. Si je veux voir, je pourrais changer cette flèche. Continuons ici. Je vais en faire une de plus pour toi. Est-ce un écran cartographique. Je trouve que ce match green est vraiment cool. Passons donc à l'écran. Ajoutons un peu d'amour ici. Encore une fois, la communication la plus efficace à ce stade est que nous avons l'image de la carte, mais aussi l'heure d'arrivée estimée. Allons-y et prenons un gris pour mon nom ici. Cool. Je connais mon nom. Inutile de me rappeler mon nom et nous garderons ce texte en blanc pour qu' il soit vraiment fort. Je n'ai pas l'image de la carte ici. Donc si je passe à Adobe XD, voici mon export, mon illustrateur. J'ai mon fichier cartographique ici. Je peux copier et coller. Il. peux aller directement dans Adobe XD, le coller dans mon écran ici, comme je l'ai fait ici. Allons ajouter des motifs de couleurs froides à cette gamme ici. Je vais donc augmenter l'opacité et la rendre bleue. Allons-y et faisons apparaître un peu cette icône de logo. Nous allons le garder large. Allons récupérer notre icône bobo T depuis le haut. Mais je vais ajouter quelques éléments à ces propriétés ici. Ces petites sections bulbeuses, je vais les faire ressortir pour m'amuser. C'est un peu petit. Nous pourrions probablement l'obtenir. Choisissons cette lumière de sécheresse ou cette bleue comme ça. Amuse-toi bien avec celui-ci. Je vais le récupérer. Je vais revenir, revenir à mes marques ici. Et je vais me débarrasser de la pauvreté qui règne dans mon centre. Collez celui-ci dedans. Celui-ci est un peu plus cool. Très bien, là où ils vont tout faire exploser un peu. Oui, tu y vas. Cool. Allons faire en sorte que cette icône, la petite icône de la carte, soit bleue. Et ce qui est tapable sur l'écran, c'est la coque annulée que j'avais besoin d'annuler et toutes annulent en blanc. Mais allons nous asseoir avec un peu de gris ici. Oui, tu y vas. Ça a l'air bien. Très bien. Regardons la finale. J'ai prévu l'autre design visuel final ici. Vous pouvez voir que j'ai tous les écrans vraiment jolis. J'ai défini tous les boutons sous forme de symboles. Supposons que je change le bouton suivant pour une autre couleur comme le bleu. Regarde ce qui se passe. Tous les boutons suivants changent de bulle. C'est plutôt sympa. Je dois y ajouter des boutons sous forme de symboles. Donc, si je change un bouton Ajouter par une autre couleur, disons jaune, ils deviennent tous jaunes. Pareil pour ce tapioca. Donc, si je change l'une des bordures pour qu'elle dise orange, vous pouvez voir qu'elles changent toutes en orange. Pareil pour le x. J'ai changé le x2. Disons bleu. Regarde comment ils deviennent tous bleus, couleur que je veux vraiment ici. Ce sont tous des symboles, ce qui me permet de travailler très facilement. Allons donc jeter un coup d' œil au prototype ici. Dans la dernière vidéo, j'ai expliqué comment concevoir un prototype afin que vous puissiez en apprendre un peu sur ce que je vais vous montrer à ce stade. Et voici l' écran final, le design final. Et je peux continuer et faire en sorte que mon prénom et mon nom de famille, mon mot de passe, inscription, mes graphiques et en dessous du T, soient réguliers, doux. Maintenant, quel semi-sucré ? Puis je suis devenue à moitié douce ici. On peut faire le gros tapioca, presser, ajouter. Joli. pouvez voir cette notification sur mon panier. Revenez en arrière. On dirait que je suis bon avec mon bulbaire t. Je peux appuyer sur Suivant, mettre mon adresse. Je vais mettre les informations de ma carte de crédit et boum, j'ai dépassé T à la livraison. Une chose sur laquelle vous pouvez accéder J'ai parlé de ce site Web sur la façon de créer une vidéo filaire, c'est que vous pouvez accéder à un site appelé Noun Project C ici. Et regarde ça. Je peux obtenir n'importe quelle icône. Disons de la crème glacée. De la crème glacée. Centre. Regardez ce qui se passe. Je reçois tout un tas d'icônes de glaces. Allons donc récupérer l'une de ces icônes ici. Lequel voulons-nous obtenir ? Prenons celui-ci. Il s'agit d'une jolie photo. vais obtenir cette icône, télécharger de base et faire à partir de mon site Web, SVG, qui s'appelle graphique vectoriel évolutif. Maintenant, je peux le prendre, glisser dans Illustrator. J'ai cette icône et je peux en changer un peu les couleurs. Supposons que je veuille rendre cette icône bleue. Je peux le rendre bleu, le copier. Et je peux le coller dans Adobe XD, comme ça. Pas non plus des icônes de glaces. Des trucs plutôt cool. Hein ? J'espère donc que vous en apprendrez encore un peu plus sur le design visuel, cela demande beaucoup de pratique, alors allez-y. Ce n'est pas grave si vos créations ne ressemblent pas aux miennes. Il faut beaucoup de temps pour arriver à certains points où vous pouvez appliquer un design visuel très simple. Mais j'espère que c'est un bon guide de départ pour vous. Très bien, alors allons-y et regardons la prochaine série de vidéos ici. Alors rejoignez-moi pour la prochaine vidéo, dont je parlerai un peu. Ce qui fait un bon CV de design. Vous pouvez donc emporter certains de ces objets visuels que vous êtes en train d'apprendre. Vous pouvez aller voir ce que notre beau design reprend dans la nature. Je vais vous donner les meilleurs exemples et aussi vous donner des exemples qui ne sont pas si bons. Et j'espère que cela vous donnera quelques indications sur la marche à suivre lorsque vous créez un CV de conception. Comme toujours, merci de m'avoir écouté. J'espère que tu as appris quelque chose et au revoir. 13. Faites et ne faites pas avec des CV de conception: Très bien. On dirait que nous avons terminé beaucoup de cours. Encore une fois, nous avons réalisé des objectifs et des scénarios de persona et d'entretiens. La recherche. Comment synthétiser vos recherches. Énoncés de problèmes, ventilation d'un parcours client, carte, esquisse, cadrage filaire, prototypes cliquables, base de test utilisateur du système de conception et application de la conception à vos filaires. Cool, alors examinons les meilleures pratiques quand il s'agit de votre CV de conception. Et ce que je dois vous montrer ici, c'est ce que j'ai fait pour l'équipe de recrutement de mon entreprise. Et j'ai créé cela pour eux afin qu'ils puissent voir à quoi ressemble un bon CV de design et à quoi ressemble un CV de conception pas si bon. Allons-y et jetons un coup d'œil. Cela m'aide donc à trouver un bon designer. Je n'ai pas de système d'évaluation que j'utilise. Et si vous faites défiler un peu ici, j'ai une liste de questions qui devraient m'aider à évaluer un curriculum vitae. Avant de passer à l'étape suivante, qui consiste à examiner son portefeuille. Ensuite, je regarde une étude de cas. J'espère qu'ils ont quelques études de cas. Ensuite, cela mène à un appel téléphonique. Cet appel téléphonique mène à un entretien d'une journée avec l'équipe et moi-même. Ensuite, nous prenons un jugement sur l'entretien AllDay et j'espère que le concepteur pourra rejoindre notre équipe et que nous travaillerons ensemble. Examinons donc la liste des éléments que votre CV devrait avoir pour s'assurer qu'il s'agit d'un curriculum vitae bien conçu. Tout d'abord, le TextField a-t-il un alignement et ne sont-ils pas partout ? C'est le cas. Vous pouvez cocher cette case. L'espacement entre les paragraphes et les titres est-il cohérent ? Cochez cette case. La mise en page et la typographie sont personnalisées et ne semblent pas avoir été faites dans Microsoft Word. Encore une fois, vous devriez utiliser des outils personnalisés ici. Le noir n'est pas la seule couleur utilisée. Il existe plusieurs tailles de police. n'y a pas d'orthographe erronée de mots et il se lit bien. On a parlé de conception centrée sur l'utilisateur, de la pensée conceptuelle, de la recherche et des tests. On parle de collaborations avec d'autres équipes, chefs de produits et clients. Et il y a un lien vers un portefeuille pour voir le reste de l'œuvre. Bon, allons maintenant regarder des exemples. Bon, voici un bon exemple de Franklin Jam Heart. Et voici quelques exemples à droite et quelques explications expliquant pourquoi. C'est un bon CV. Il a donc l'air personnalisé et il a de belles mises en page, propres. Il a un espacement constant se fait partout. Il a une belle hiérarchie topographique, l'orthographe est bonne. A un bon alignement, utilise plus d'une grille de colonnes. A un lien avec le portefeuille. Vous pouvez voir comme lien de portefeuille juste là. Allons y jeter un coup d'œil. Un autre bon exemple. Voici une marque familière d'Evelyn elle-même. C'est une mise en page agréable et facile à lire. Il y a une bonne utilisation du type. Type. La hiérarchie des types a un bel alignement, espacement propre qui semble vraiment organisé. Bon, allons voir à quoi ressemble un bon CV de design. Alors pourquoi n'est-ce pas si bon ? La mise en page n'est pas propre et il est difficile de lire beaucoup de choses en cours. L'espacement n'est pas cohérent. Hiérarchie topographique bâclée. L'alignement pourrait être meilleur. Vous pouvez voir que les choses sont souvent alignées sur les balles. Et il utilise une grille à une colonne, une grille géante. Allons en voir un autre qui n'est pas si bon. Pourquoi est-ce que c'est ça ? Il semble qu'il ait été fabriqué dans Microsoft Word et non pas un outil de conception. noir est la seule couleur utilisée. La hiérarchie des types, la hiérarchie n'est pas très bonne. C'est un peu mieux que le dernier, mais ce n'est toujours pas si bon. L'espacement n'est pas cohérent. On voit beaucoup d'espacement étrange entre les deux ici. La mise en page ne semble pas personnalisée. Pour obtenir d'autres bons exemples ici. Beaucoup d'autres bons exemples. Très propre. Et voyez cette grille à deux colonnes ici, la colonne de droite. Et regardez, il y a toujours du noir pour tous les textes, mais le traitement de la topographie est vraiment sympa ici. Un à gauche, Olivia est le même avec Bailey ici qui utilise tout noir, mais c'est beaucoup plus propre jusqu'à ce qu'ils prennent du temps dans leur conception et leur disposition typographique. Celui qui dit Bonjour, a une belle introduction à la personnalité. C'est une Jane Doe, c'est un modèle. C'est joli. C'est une mise en page agréable et propre. en va de même pour celui-ci ici. Celui-là est vraiment sympa ici. Par Justin. En voici un intéressant. Voici Molina d'un octet. Agréable et amusant, qui ne pouvait pas utiliser les couleurs et aime la couleur rougeâtre orangée avec le bleu sarcelle. Et voici un de mes amis, John. John Obey est vraiment un solide CV ici pour beaucoup de temps à fabriquer cela. Bon, allons en regarder un peu plus. Ce n'est pas si bon exemple. Voyez que nous avons juste des couleurs de mise en page sont un peu bizarres. Ce rouge et le bleu semblent vibrer un peu. Et la palette de couleurs, Cette Mary Cunningham, peu partout, pas vraiment, pourrait utiliser un peu plus de hiérarchie. Ce n'est pas si mal que ça. Celui-ci ici et l'espacement du texte bleu sarcelle sont un peu incohérents partout. Alignement difficile à lire, topographie, hiérarchie. C'est ce modèle ici, juste une colonne géante. Juste là, vous l'avez. Il y a donc la base de nombreux bons exemples de bons CV fabriqués et de curriculum vitae pas si bons. J'espère que cela vous donnera un peu de lignes directrices. Comme toujours. Merci encore. Et si vous voulez aller voir la dernière vidéo de cette série, qui est l'étude de cas. Je vais vous donner les grandes lignes. Je vais vous montrer des exemples d'études de cas. De cette façon, vous pouvez avoir une bonne vue du processus UX. Beaucoup de méthodes que nous utilisons pour rédiger un bon CV de conception et à quoi ressemble une bonne étude de cas. Très bien, j'espère que je vous y verrai. Au revoir. 14. Les études de cas conception UX: Très bien, bienvenue sur la création d' une étude de cas de conception UX et de conception d'expérience utilisateur 101 classes. Cool, on est en classe 13. Il s'agit de la classe de plan de l'étude de cas. J'espère que vous avez regardé toutes les vidéos depuis le début, comment définir des objectifs et réaliser des persona, puis créer des scripts d'entrevue utilisateur, mener des recherches, synthétiser vos résultats, rédiger un énoncé de problème, créer un carte du parcours client, faites des esquisses, créez un filaire, rendez le prototype cliquable, effectuez des tests utilisateur avec ce prototype. Il y a des informations sur les synthétiseurs provenant du test de la base d'un système de conception façon d'appliquer la conception visuelle à votre filaire. Et la dernière vidéo ici était les meilleures pratiques lors de la conception de votre CV. Et maintenant, nous allons examiner les grandes lignes de l'étude de cas. Cela décrit donc ce que vous devez faire pour en faire une très bonne étude de cas. Et tous les outils et techniques que vous avez appris dans les vidéos précédentes, ou comment créer tout le contenu dont vous avez besoin pour cette étude de cas. Et ce que vous allez faire, c'est que vous allez créer une histoire visuelle. C'est ce qu'est l'étude de cas. Il s'agit d'un aperçu d'une histoire de travail sur l'expérience utilisateur. Allons donc juste dedans. Permettez-moi d'ouvrir le site Web. Nous allons commencer ici avec UX honey et UX honey.com. C'est le site que j'enseigne à l'université. Et si vous cliquez sur l'UX pour ici, cela vous amènera à toutes les méthodes que nous enseignons. J'enseigne à l'université. Et nous allons le faire, le plan de l'étude de cas. Et nous allons appuyer sur le bouton Afficher ici. Et cela va nous amener aux grandes lignes d'une bonne étude de cas. Ensuite, je vais vous montrer un tas d'exemples. Vous pouvez voir ici que j'ai un exemple appelé presses de ce côté que j'ai fait pour Barnes et Noble, comment créer un livre il y a des années. Et une autre étude de cas pour ce qu'on appelle une cuisinière VUS pour une entreprise appelée ANOVA. Je vais donc vous montrer les exemples de ce à quoi cela ressemble. Mais d'abord, passons en revue les grandes lignes. Similaire à dire que les chapitres de ce qui fait une bonne étude de cas. Et puis je vais vous montrer à quoi cela ressemble visuellement. Comme vous l'avez vu dans les deux derniers exemples d'études de cas, je viens de vous montrer le top. La première chose que vous voulez faire, c'est que vous voulez montrer le wow, c'est l'écran du produit final, le plus bel écran que vous ayez. Et il peut être interactif, il peut s'agir d'une vidéo, mais montrer le produit. Donc, le produit final ici, mais ce que vous voulez faire n'est pas de finir avec le produit final. Vous voulez raconter comment vous êtes arrivé à ce produit final. Alors, je fais défiler vers le bas. La prochaine chose ici est que vous voulez donner quelques contextes, donner le nom du produit, la mission de l'entreprise, montrer le logo, montrer votre rôle à cet égard. Et vous pouvez le rendre visuel de conception utilisateur et le rendre visuel. Ensuite, montrez à la maison, parlez un peu de votre processus ou vous pouvez appeler cela les chapitres du travail d'expérience utilisateur que vous avez fait recherches, puis vous êtes allé valider des problèmes et esquisser quelques idées, vous prototypez quelques idées et testé, encrassé la fidélité, le design et est devenu visuel. Et vous pouvez appeler ces chapitres, vous pouvez les afficher visuellement, vous pouvez montrer votre processus. Et n'oubliez pas qu'au début des vidéos, nous avons parlé des objectifs commerciaux et des objectifs du produit. C'est ici que vous les montrez, montrez les couleurs professionnelles, montrez les objectifs du produit. Ensuite, parlez du problème que vous résolvez et pourquoi montrer que vous pouvez montrer un peu de l'énoncé du problème de certaines fois c'est le problème invalidé. Ensuite, vous allez apprendre un tas de recherches et faire un problème validé. Mais vous pouvez parler un peu du problème et de la mission que vous menez. Ok, la prochaine chose que vous voulez faire est de présenter vos utilisateurs. Montrez le personnage dont on a parlé plus tôt. Vous pouvez même afficher des photos des utilisateurs si vous le souhaitez. N'oubliez pas de souligner leurs problèmes, mettre en évidence leurs comportements actuels. Nous avions pilonné une petite bulle de citation que je vous ai appris dans la vidéo de persona. Ensuite, nous avons parlé des objectifs d'apprentissage et des scripts d'utilisabilité. Vous pouvez donc parler un peu de ce que vous prévoyez d'apprendre. Lorsque vous sortez et faites vos recherches. Vous pouvez montrer le script que vous avez créé. Vous pouvez montrer quelques questions que vous avez concernant les objectifs d'apprentissage, puis lancer vos recherches. Alors montrez des photos de vous menant des recherches. Ce sont des photos qui parlent à des gens dans la rue, au patron ou dans votre bureau, ou où que vous interviewez des personnes qui vous montrent, se montrent avec ces personnes. Montrez ces personnes avec vous, prenez beaucoup de photos et mettez beaucoup de photos dans cette zone de l'étude de cas. Et rappelez-vous que je vous ai montré comment prendre les notes autocollantes, faire votre synthèse de recherche et rechercher des motifs. Il devrait s'agir de photos de ces notes autocollantes. Il devrait y avoir ici tapé à l'intérieur que je peux lire. Il devrait y avoir des modèles que vous appelez dans cette section et ce que vous apprenez montrer les validations. Quels types de problèmes avez-vous validés ? Une des choses que vous avez appris de votre personnage ? Ensuite, vous pouvez afficher cette carte de parcours client. Vous pouvez faire l'état actuel de l'état futur. Dans ce cas, vous pouvez le faire. La solution que nous modélisons dans le parcours client. Vous pouvez ensuite montrer vos croquis, vos concepts de solution. Vous avez des storyboards, des prototypes de papier. Ensuite, montrez les conceptions filaires, montrez les écrans. Affichez ensuite les tests de l'utilisateur. Voici donc les photos de vous qui sortez et cela devrait être des utilisateurs avec vos créations entre les mains et ils l'utilisent. Vous devriez en avoir des photos. Vous pouvez afficher des citations en cours de route, puis afficher la synthèse. Ce sont les motifs par écran. Qu'avez-vous appris des tests utilisateurs ? C'est le domaine à dénoncer. Vous pouvez toujours mettre des devis d'utilisateurs ici également. Ce sont vos validations, sont vos apprentissages qui peuvent être mappés aux écrans, montrer le système de conception. Vous pouvez donc en montrer un peu plus sur votre processus de conception visuelle, votre mood board. Il peut afficher tous vos boutons, afficher vos champs de formulaire, montrer votre fidélité et votre conception finale ici. C'est donc la partie finale. C'est ici que vous montrez votre prototype final. Tout le métier visuel que vous avez fait. Les maquettes haute fidélité montrent les flux de travail. Si vous voulez me donner un lien sur lequel je peux cliquer pour aller voir le prototype que vous avez créé. Et c'est la finale. Cela représente donc à peu près la plupart des différents chapitres de votre étude de cas ou l'histoire que vous racontez au sujet du travail que vous avez effectué sur l'expérience utilisateur. Ce que l'on appelle, regardez quelques exemples de cela. Donc, si je retourne vers l'utilisateur sur UX honey.com, j'ai ici un lien appelé exemple d'étude de cas. Si je clique dessus, nous irons sur le site de presse. C'est une application de bookmaking que j'ai faite pour Barnes et Noble il y a quelques années. Et il passe en revue la plupart des mêmes grandes lignes dont j'ai parlé. Tout commence par parler un peu de l'entreprise, de la mission et de mon rôle. Nous commençons par une petite réunion de lancement ici où nous définissons les objectifs. Nous montrons donc les objectifs du produit, les objectifs commerciaux ici. Je souligne le problème. Je montre un peu le processus que nous avons traversé. Je présente les personnages dans ce cas, j'ai rendu plus amusant et illustratif et un appel à leurs comportements, à leurs besoins, à leurs objectifs, à leurs douleurs, à leur personnalité. Et j'avais des objectifs d'apprentissage, ce sont mes hypothèses que je veux en savoir plus. Et voici les objectifs d'apprentissage qui concernent chaque personne que je souhaite apprendre et quelques questions que j'ai à lui poser. Et puis je lance des recherches. Voici que je parle aux gens. Nous avons effectué des entrevues à distance. Nous avons interrogé sur place des gens avec des maisons de gens et nous leur avons parlé. Et voici quelques-unes des citations qu'ils ont. Depuis ce que nous avons appris à leur sujet. Voici notre synthèse, toutes les notes autocollantes, toutes les idées qui s'unissent. Thèmez-les dans des sujets ici et des modèles que nous avons trouvés en cours de route. Voici nos apprentissages et nos constatations, voici ce sur quoi nous avions raison, voici ce que nous avions tort ici, quelques nouveaux apprentissages intéressants. Nous avons pris des décisions à partir de ces enseignements sur ce que nous allons faire et ce que nous allons résoudre. Nous avons décidé de ne pas nous concentrer sur l'un des personnages parce que le problème pour eux n'était pas aussi convaincant. Notre mission était donc d'aller de l'avant et de créer une expérience de bookmaking qui permet aux artisans moyens créer un livre en ligne et de transformer ce livre en livre physique et de l'avoir pour eux. Ils commencent donc par un livre numérique et la plateforme qu'ils vont utiliser leur permettra de télécharger leur design intérieur, intérieur de leur livre, les dessins de couverture avant et arrière. Ensuite, faites en sorte que ce livre numérique un livre physique et ils peuvent l'expédier chez eux. Il a donc voulu fournir des étapes claires et un soutien utile pendant les moments d'erreur de la création de cette solution. Et nous voulons également guider l'utilisateur. J'espère qu'ils ont fait erreur. Nous nous sommes donc tous réunis, nous esquissons des concepts. Nous avons réalisé un design filaire. Certains concepts et certains filaires, nous l'avons modélisé. Voici comment prévisualiser le filaire si vous le souhaitez. Nous avions des questions et des hypothèses par écran que nous voulions en savoir plus sur lesquelles je vous montre ici. Et nous avons testé nos utilisateurs et nous n'avons pas été testés auprès d'un tas de personnes. Nous avons eu nos apprentissages basés sur les tests. Ils ont pris des décisions en fonction des tests et de ce que nous avons appris. Ensuite, nous avons composé la fidélité du design. Vous verriez quelques écrans ici et m'aideriez à résoudre ce processus complexe. Certains des cas d'erreur qui pourraient se produire ici. Et nous obtenons quelques pages marketing, puis nous les vérifions. Je peux prendre un lien. Je peux accéder au site Web ou au prototype cliquable ici. Nous avons donc la page marketing que nous avons créée ici. Nous allons maintenant entrer directement dans le produit. Il s'agit des conceptions visuelles finales. Donc, tout d'abord, je vais demander, à moi et à mon livre intérieur, quel type d'impression, ce que j'aime, je veux une impression couleur. Ça a l'air bien. J'aimerais avoir une couverture arrière en papier. J'aimerais avoir des pages blanches, couper la taille sept par dix, et il va y avoir environ 0 à 50 pages ici. Allons de l'avant et appelons ce livre de Leslie. Le nom du projet que j'ai. Ici, j'ai une calculatrice qui calcule. Cela coûtera environ 29$ par livre. Je peux effectuer différentes modifications et voir le changement de prix à la volée au fur et à mesure que j'apporte des modifications. Ça a l'air plutôt bien. Allons de l'avant et continuons. Il va me demander de créer un compte. Je vais donc créer un compte. Et c'est ici qu'il demande de télécharger l'intérieur de mon livre. Je peux passer de ce côté ici. C'est ainsi que nous avons couvert les cas d'erreur. Et je peux voir et en apprendre davantage sur les marges, les images et les polices intégrées et à quoi elles ressemblent. Je peux télécharger mon PDF. Vous pouvez voir qu'il est en cours de téléchargement, Disons que j'ai eu une erreur, mais ça me ramène en surbrillance l'erreur ici. C'est très intéressant là-bas. Revenons donc en arrière et téléchargeons mon livre. Passons à la route du succès. Je peux maintenant prévisualiser l'intérieur de mon livre. Tout a l'air bien. Maintenant, je peux passer à la partie couverture de ce design et c'est le même vol plané. Je peux voir à quoi ressemblerait mon intérieur de la couverture. Les marges par images se porteraient bien. Où ils vont être recadrés sur la façon d'incorporer les polices. Et je télécharge la couverture ici. Maintenant, je vais passer à la couverture arrière. Je peux planer sur la gauche ici pour obtenir les mêmes informations. Vous pouvez voir que nous avons mis un code à barres ici. Téléchargez le verso. Maintenant, je peux faire ma colonne vertébrale. Et regardez, voici mon livre avec le code-barres et tout. Il y a la couverture de mon livre. Ça a l'air plutôt bien. Et puis je peux payer ici, mettre mes coordonnées d'expédition, mettre mes coordonnées de paiement ici et je peux les acheter. Et nous allons faire la loi. C'est là. C'est le produit final. Il s'agit donc d'un exemple d'étude de cas qui clique sur le produit final. Laissez-moi vous en montrer un autre. Appelons la Nova. Il s'agit d'une cuisinière VUS. La cuisinière SUV est un appareil qui fait cuire vos viandes, légumes et poissons dans l'eau. En fait, vous mettez ce truc dans un, vous mettez votre morceau de viande dans un sac Ziploc et cet appareil va cuisiner. Je vais chauffer la température de l'eau juste assez pour faire cuire la viande pendant une heure ou deux. Et c'est la meilleure rencontre que vous ayez jamais eue. Ce que nous avons construit, c'est un appareil qui cuisine qui se connecte à cette cuisinière ici. Et il y a eu des hypothèses que nous avons apprises en cours de route. Mais en revenant aux grandes lignes de l'étude de cas, nous avons notre photo wow ici. Nous parlons du rôle, un peu de l'application que nous avons atteint des objectifs commerciaux et je roule. Et nous parlons de ce petit scénario autour planification d'un cuisinier dont nous voulions en apprendre davantage. s'agissait de placer votre viande dans un sac, mettre dans cet appareil, travailler et de programmer l'allumage de cet appareil. Peut-être cinq ou six heures après son départ au travail. Il cuisinera votre viande pour vous et vous rentrerez à la maison et celle-ci serait prête à être préparée pour vous. Ça a l'air plutôt doux. Eh bien, nous avons beaucoup appris lors de recherches qui ont invalidé cela. En fait, nous n'avons pas choisi cette solution à la fin parce que nous avons beaucoup appris. Donc, dans l'ensemble, voici tous, l'équipe qui se réunit. Nous allons présenter le personnage maintenant si peu sur chaque personnage. Nous allons parler des objectifs d'apprentissage que nous voulions connaître. Et nous sommes allés chercher à faire des recherches et tester l'hypothèse initiale dont nous sommes allés en apprendre davantage. Nous utilisons une carte de parcours émotionnelle du client que j'ai montré dans la série précédente sur la façon de le faire, pour décrire le processus qui a été aussi bizarre ou déroutant pour quelqu'un ou où il hésite. Vous pouvez donc voir ici qu'il y a des domaines dans lesquels les gens étaient confus dans ce processus. Voici ce que nous avons appris. Nous avons beaucoup appris sur cette application. Nous changeons de direction ici, et d'après certaines des citations ici, c'est assez intéressant. J'en ai lu un à voix haute. Une personne a dit : « Je suis parti depuis dix heures maintenant. Vous êtes sûr que la glace gardera la viande fraîche toute la journée et je ne tomberai pas malade si je mange cette viande. Beaucoup de gens hésitaient donc à le faire. Nous avons donc finalement décidé de faire pivoter pour faire quelque chose de différent, ce qui n'est qu'une belle expérience d'intégration à l'application. Et une façon d'apprendre quels types de viande que vous cuisinez et quels types de temps vous pouvez régler cet appareil pour cuisiner aussi bien. Et puis beaucoup de gens ont posé des questions à ce sujet. Ils nous demandent combien de temps il faut pour cuisiner un steak plutôt qu'un morceau de poulet contre un morceau de saumon. Nous avons donc décidé de s'en sortir. Nous avons donc ici un peu une carte du parcours client ou carte du plan de service qui décrit l'état futur de notre solution. Nous avons fait quelques croquis ici. Nous avons construit un filaire. Vous pouvez créer des conceptions filaires. Qui est sorti et a fait des tests d'utilisabilité ici avec des gens. Nous avons fait quelques synthèses. Voici ce que nous avons appris. Ensuite, nous avons fait plus d'itérations et la collaboration plus ensemble. Et voici le dernier laboratoire. Je vais donc m'asseoir et tu peux y jeter un coup d'oeil. Il va se connecter à Bluetooth. Connectez votre téléphone à l'application Bluetooth. Il se charge sur Bluetooth. Vous verrez ici que ce sera du succès, du succès. Et je vais sur l'écran d'accueil de l'application. Je peux commencer un cuisinier immédiatement ou aller voir le guide du cuisinier. Je clique donc sur le Guide. Disons ici que je veux cuisiner un morceau de steak. Site, allez au steak. Et disons ici que je voulais racheter. Je clique donc sur un œil côtelé. Et ici, j'ai la capacité de régler l'heure et la température en fonction de cette cuisson. Je veux que ce truc soit bien fait. Et regardez, j'appuie sur le bouton Démarrer la cuisson et la flèche, il commence à mettre en place la cuisinière VUS et vous cuisinez de la viande. C'est à peu près tout ça. J'ai donc montré la surprise au début de cette étude de cas et j'ai montré l'expérience finale à la fin de cette étude de cas. Très bien, ce sont tous des exemples de bonnes études de cas. Si vous voulez trouver celui-ci, c'est sur mon site Web à air et Lawrence design.com. J'irai sur la page d'accueil ici pour que vous puissiez le voir. Le site. Je suis là. Vous pouvez donc trouver ces études de cas ici sur ce site Web ou plus encore sur designed.com. Vous pouvez également simplement Google Me, Lawrence, designer, et vous trouverez également ce site Web. Ok, donc c'est tout à fait le voyage. Nous avons eu 13 cours ici, et voici l'étude de cas finale. J'espère que cela vous donnera un aperçu de la façon de prendre tout le travail que vous avez accompli ici et de le mettre dans une belle histoire qui décrit votre expérience utilisateur dans le travail. Et encore, comme toujours, merci d'avoir regardé les cours. J'apprécie vraiment que tu l'aies passé. Si vous avez regardé les 13 vidéos. C'est vraiment génial, vraiment génial. Je vous applaudis. Merci beaucoup. J'espère que vous avez beaucoup appris. Et j'espère que j'obtiendrai d'autres vidéos, irai bientôt ici et nous vous donnerons plus de contenu. Encore une fois, merci beaucoup et adieu.