Maîtrise de l'UX basée sur l'IA : des suggestions aux prototypes Figma

1. Introduction Aperçu du cours: Hé, ce sont des designers expérimentés ou ils viennent de démarrer ou veulent démarrer leur carrière ? Innovateurs et créateurs. Je m'appelle Kate et je suis designer de produits depuis dix ans. Bienvenue dans mon cours unique sur le design de l'expérience utilisateur. Dans ce cours, nous allons expérimenter et voir comment la créativité rencontre la technologie pour façonner les expériences numériques de demain. Je veux vous montrer comment créer rapidement des flux utilisateurs pour n'importe quelle application à partir de zéro et démarrer un nouveau projet, en 20 minutes seulement ? Je suis sûr que tu y es déjà allée. Vous avez une idée ou vous avez reçu les premières exigences d'un client. Vous êtes assis et vous regardez votre ordinateur ou votre papier et demandez par où commencer. Mais tu sais quoi ? Ce problème n' existe plus. Grâce aux technologies courantes et aux outils d'aide à l'IA, vous avez toujours quelque chose entre vos mains. Vous n'avez pas besoin d'expérience en matière d'expérience utilisateur ou d'interface utilisateur conçue pour ce cours. En même temps, je pense que ceux d'entre vous qui travaillent déjà dans l'industrie recevront également des conseils intéressants. OK, qu' allons-nous faire ensemble ? Nous explorerons comment l'intelligence artificielle et les grands modèles linguistiques peuvent contribuer à accélérer notre processus de conception, nous permettant de générer des flux d'utilisateurs et des structures filaires. En quelques instructions simples, nous allons vérifier plusieurs outils d' IA et des fonctionnalités gratuites de base Pour commencer tout de suite, vous allez apprendre à écrire de bons accessoires pour obtenir les résultats escomptés Une fois que nous avons créé nos flux d'utilisateurs sous forme écrite, il est temps de retrousser nos manches et de leur donner vie à l'aide du logiciel Figma Ne vous inquiétez pas si vous ne l'utiliserez jamais auparavant. Je vous guiderai à chaque étape. Vous maîtriserez la création de cadres filaires basse fidélité pour créer des flux d'utilisateurs basés sur les idées générées. La dernière étape de ce processus consiste à connecter les écrans au chemin. Le projet de concept de l' application est presque terminé. Un tout dernier conseil, je vais vous donner quelques conseils sur la façon de tester votre idée, car l'IA n' est pas un vrai humain. Pas encore. J'espère que nous devrons tester nos prototypes et les utiliser avec de vraies personnes pour comprendre les problèmes et ce que nous avons fait, bien ou mal, en tant que projet. À la fin du cours, vous créerez une idée ou une fonctionnalité pour une application mobile à l'aide outils d' intelligence artificielle et d'un ensemble de composants pour le câblage dans Figma Ces composants, je les offrirai en cadeau afin que vous puissiez les utiliser à l'avenir pour vos projets et votre portefeuille. Vous n'avez pas besoin de créer le vôtre. OK, les gars. J'ai hâte de le démarrer. Et je suis très curieuse de savoir quelles idées et applications vous allez créer à la fin du cours. Bonne conception et bienvenue dans ma classe. 2. Aperçu des outils et des plateformes d'IA gratuits: Bienvenue, concepteurs et innovateurs. Dans cette vidéo, nous abordons le monde existant des outils d'intelligence artificielle. Nous sommes sur le point d' explorer des plateformes révolutionnaires qui aideront nos processus de conception sous différents angles. Maintenant, vous vous demandez peut-être où commencer avec les outils d'IA ? Ne vous inquiétez pas, je suis là pour vous aujourd'hui. Je vais vous présenter trois plateformes d' IA disponibles et totalement gratuites. Vous pouvez créer un compte en trois clics à l'aide d'un compte Google ou le configurer par e-mail. Tout d'abord, nous avons Cha GPT, le premier et très populaire, je suis sûr que vous en avez entendu parler Avec char GPT, vous pouvez vous plonger dans le monde du traitement du langage naturel et générer des flux d'utilisateurs, des personnages, des scénarios, guides pour les entretiens avec les utilisateurs, des programmes d' ateliers et, en gros, tout ce dont vous avez besoin pour un bon processus UX en utilisant quelques problèmes simples C'est comme avoir une conversation avec votre assistant de travail. Le suivant sur notre liste est Gemini de Google. Il possède les mêmes fonctionnalités et vous pouvez l'utiliser pour la même tâche que celle que j'ai mentionnée précédemment. Il est puissant et j'ai trouvé qu'il produisait moins d' hallucinations inattendues liées à l'IA dans les résultats Enfin et surtout, nous sommes perplexes. Un joyau caché dans le monde des outils d'intelligence artificielle. J'aime beaucoup ce modèle car il vous donne également une liste de références et de ressources. Cela vous donne une idée de l' endroit où il a créé les résultats et où vous pouvez vous rendre lire plus d'informations sur les résultats. En fait, je pense que c'est génial et que cela devrait être fait par tous les outils d'interface utilisateur, à mon avis. Maintenant, il y a une partie intéressante. Pourquoi ne pas essayer la même invite sur les différentes plateformes que j'ai mentionnées et comparer les résultats. Vous pouvez utiliser tous les éléments mentionnés précédemment et voir où les résultats seront plus satisfaisants pour vos besoins. Que vous utilisiez un GPT, un Gémeaux ou une perplexité, il n'y a jamais eu de meilleur moment pour tirer parti de la puissance de l'IA dans votre processus de conception, mais ce n'est rien sans un tirer parti de la puissance de l'IA dans votre processus de conception, mais ce n'est rien sans Créons une invite significative dans la vidéo suivante. 3. Créer une invite enrichie: Maintenant, vous vous demandez peut-être ce qu' est exactement une invite et pourquoi est-ce important ? Quand je pense à l'écrire, j'imagine toujours la situation lorsque je parle à mon collègue, mari ou même à ma mère. J'explique la tâche à un outil d' IA de la même manière que je l'expliquerais à un être humain. L'invite doit contenir une bonne quantité de détails importants et répondre aux questions prévisibles. Une demande du type « veuillez créer et noter des flux d'utilisateurs pour une application de nœud » ne suffira certainement pas pour obtenir un bon résultat. quoi vous devez vous concentrer en premier et quelles sont ces exigences de haut niveau pour toute invite. C'est de la clarté, de la spécificité et de l'imagination. Tout d'abord, définissons clairement objectif et le public cible de nos applications, qu'il s'agisse d'un outil de productivité ou d'une plateforme sociale pour les amoureux des animaux de compagnie. Notre message doit refléter l'essence de notre application et répondre directement aux besoins de nos utilisateurs. Ensuite, réfléchissons dans un certain contexte. Réfléchissez au scénario dans lequel votre application sera utilisée. Sommes-nous en train de résoudre un problème, de satisfaire un désir ou d'ajouter simplement une touche de joie à la journée de quelqu'un ? Plus nous fournissons de contexte, mieux notre corps d'IA peut adapter sa réponse. Enfin, laissons place à la créativité. N'ayez pas peur de sortir des sentiers battus et d'insuffler un peu de personnalité à votre message. Après tout, nous ne nous contentons pas de concevoir une application, nous créons une expérience Essayons l'approche par questions pour le futur. Travaillez avec des instructions. J'ai préparé plusieurs questions en y répondant. Vous allez générer et rédiger une très bonne invite, qui pourra ensuite être transmise à l'outil d'IA. La première question, quelle est l'intrigue ou l' histoire principale de l'idée de votre candidature ? Quel en est le but ? Par exemple, j' aimerais concevoir une application mobile simple pour le suivi des dépenses. Il est utile de mentionner que la plate-forme le fait pour le Web ou le mobile. La question suivante, qui va utiliser l'application ? Par exemple, l'application sera utilisée par un large public. sont surtout des personnes jeunes et d'âge moyen qui travaillent et qui souhaitent suivre Ce sont surtout des personnes jeunes et d'âge moyen qui travaillent et qui souhaitent suivre leurs dépenses, planifier leur budget et voir comment elles peuvent économiser plus d'argent et s'améliorer. Question suivante. Quels types de fonctionnalités peuvent être présents dans la première version simple ? Simplifiez-vous la vie. Ne listez pas des centaines de fonctionnalités différentes. Soyez vraiment précis mais aussi efficace. Vous pouvez également poser des questions sur la monétisation, mais encore une fois, cela ajoute de la complexité Restons simples. Par exemple, les fonctionnalités principales seraient l'enregistrement, ajout et la suppression des dépenses récurrentes régulières par jour. Disposant de différentes catégories pour les dépenses, le calendrier, les paramètres du compte, le tableau de bord, certaines analyses où l'utilisateur peut voir un résumé de toutes les dépenses passées. Ensuite, la question suivante. Enfin, comment présenter le résultat des idées de l'IA. Sois précis. Par exemple, veuillez indiquer la tâche réelle pour l'IA. Veuillez créer des flux d'utilisateurs pour l'application que je viens de décrire, afin que je puisse les utiliser pour concevoir des cadres métalliques afin de tester l' application auprès de futurs utilisateurs. À la fin, comme je l'ai mentionné, nous avons trois ou quatre questions simples. Quoi, qui et comment. Résumez toutes les réponses à ces questions et divisez également un paragraphe. Cela aide à obtenir de meilleurs résultats lorsque vous recevez votre message, essayons-le. Dans la vidéo suivante, je vais vous montrer comment différentes plateformes génèrent trois résultats différents avec le même message. Ensuite, nous en choisirons un et l'utiliserons davantage. 4. Générer des flux utilisateurs avec l'IA: Dans cette leçon, nous allons utiliser l'exemple d' invite que je vous ai donné dans la vidéo précédente pour enfin voir les résultats générés par l'IA. Comme je l'ai dit, je vais utiliser les trois plateformes pour comparer les résultats et choisir le meilleur d'entre eux. Le premier est le char GPT. J'utilise un compte gratuit pour copier-coller mon invite et je souhaite générer des flux d'utilisateurs pour une application de saisie coûteuse Je fournis tous les détails, l'objectif, le public, mes fonctionnalités et la tâche elle-même. Comme je l'ai expliqué dans la leçon précédente, voyons les résultats. Ce que nous allons avoir ici. Nous avons un flux d'intégration court ainsi qu'un identifiant. C'est un bon tableau de bord avec un résumé sous forme flux d'écran d'accueil pour ajouter des dépenses avec quelques détails, consulter vos dépenses, les analyses, déconnexion du compte utilisateur En général, le résultat est bon, mais pour créer les designs, j'aurais besoin d'un peu plus de détails Nous pouvons toujours régénérer la réponse plus tard, mais j'aimerais également essayer d'autres outils Le suivant est Gemini. J'utilise la même invite et je la copiez-collez à nouveau. Voyons voir Je vois que nous avons un peu plus de détails pour la suite de notre travail, que Great Gemini divise tout en plusieurs flux principaux, tels que connexion et l'ajout d'une dépense, etc. Et j'ai même mentionné des messages d'erreur, ce qui est utile. C'est vrai. Ce que j'aime, c'est que nous voyons des descriptions d' écrans et même des boutons et des étiquettes de champs de texte C'est très bien. OK. Quoi d'autre ? L'application affiche les champs d'écran à frais permettant de saisir le montant, catégorie, la date et le nœud facultatif. C'est ce dont nous avons besoin pour notre prototypage. Parfait. OK. Le dernier que j'aimerais essayer est Perplexity L'outil est alimenté par Open Eye et vous donne également de nombreuses références supplémentaires sur Internet pour le sujet connexe. Comme je l'ai déjà mentionné, je fais la même action, en ajoutant mon invite préparée pour voir le résultat. OK, qu' allons-nous avoir ici ? Le résultat est moins détaillé que l'outil précédent. Ici, nous pouvons voir un haut niveau de défaut avec une brève description de chaque écran Je ne pense pas que cela suffira pour vraiment commencer la conception. Le compte utilisateur contient un peu plus d'informations, ainsi que la possibilité de gérer l'identification. J'aimerais maintenant revenir à l'outil précédent Gemini et demander d' ajouter plus de détails à la réponse J'ai besoin de plus d'informations pour construire I en utilisant des composants Fireframe préparés, tels que des boutons, des champs de texte, etc. OK, voyons voir. Le résultat donne l'impression qu'il réfléchit profondément. Oui, X n'est pas si simple, non ? Oh, ouah, ça a l'air prometteur et incroyable. Nous avons maintenant tout ce qu'il faut pour imiter ces idées dans l'interface utilisateur Copions les réponses et ajoutons-les simplement à figma. Rendez-vous dans la prochaine leçon, où nous allons commencer la conception proprement dite. 5. Créer des écrans dans Figma sur la base des flux utilisateurs IA fournis: Bienvenue dans la partie Figma du cours. Au cours des 10 prochaines minutes, vous apprendrez à créer des structures filaires basées sur des flux générés par l'IA. Si vous n' avez pas encore de compte, vous en aurez besoin pour utiliser le kit de câbles gratuit que j'ai préparé spécialement pour ce cours. Voici comment accéder au fichier, rendez-vous sur le site Web de la communauté Figma et recherchez un kit de plan filaire Vous pouvez également utiliser le lien fourni dans la description de la classe sur la page du fichier communautaire partagé. Cliquez sur le bouton Ouvrir dans Figma. Cela créera une copie du fichier dans vos brouillons prête à être utilisée Je vais déjà ouvrir le fichier pour la démonstration. Explorons ce qu'il y a à l'intérieur. La première page contient une brève description et quelques exemples d'écrans. Vous pouvez accéder au fichier à l'aide du panneau situé sur le côté gauche. Le fichier est organisé en trois pages principales  : description, composants et couverture. J'ai également créé une page supplémentaire intitulée Mon projet. N'hésitez pas à le nommer différemment. Dans cette page, nous allons développer nos défauts. Vous pouvez créer de nouvelles pages en cliquant sur l'icône plus ici. La page Composants contient tous les éléments de base dont vous avez besoin pour concevoir vos cadres métalliques. Certains composants comportent des espaces réservés, tandis que d'autres comportent des textes préremplis pour les titres et des boutons permettant d'y accéder. Naviguez rapidement vers le panneau de gauche et accédez à l'onglet Ressources, où vous verrez une liste des composants avec OK, c'est bien. Passons maintenant à notre nouvelle page, mon projet. J'ai déjà copié et collé la réponse générée par l'IA à partir de la vidéo précédente et je l'ai divisée en sections représentant différents écrans Cette structure a également été fournie par AI. Comme vous vous en souvenez, nous allons commencer par l'écran de connexion. Pour ajouter des éléments à l'écran, j'ouvre le panneau des ressources et recherche le composant d'écran approprié. N'oubliez pas que vous pouvez personnaliser cette expérience en nommant vos pages et en explorant les composants pour les adapter à votre projet. Commençons notre prototypage rapide et notre câblage. Je saisis l'écran depuis le côté gauche de l' interface Figma depuis les ressources Voyons rapidement ce que je nous ai fourni. L'écran de connexion comprendra un champ de texte, sous-titre et quelques boutons Le premier champ est le nom d'utilisateur, AI, également conseillé, et le mot de passe. Bien sûr, cherchons des boutons. Nous avons besoin du bouton principal de connexion. Nous avons également besoin d'un bouton d'inscription secondaire, comme d'habitude, vous pouvez trouver dans presque toutes les applications lorsque vous avez démarré. De plus, l'intelligence artificielle conseille d'avoir un bouton pour oublier le mot de passe, ce qui est compréhensible. Prenons l'en-tête de l'écran et utilisons-le pour fournir un titre. Je supprime l'arrière-plan, nous n'en avons pas besoin, et les icônes du haut montrent à quel point c'est facile de le faire dans le panneau de configuration du composant sur le côté droit Nous l'appelons connexion et peut-être pouvons-nous le personnaliser un peu plus et en ajouter. Maintenez le bouton en haut pour donner l'impression que c'est début du parcours utilisateur de l'application. Je suis en train de faire quelques ajustements de mise en page. Bien entendu, nous ne faisons pas de design parfait au pixel près. Nous ne faisons que collecter tous les objets à l'écran. Je ne mesure rien et je ne le fabrique pas vraiment. Même en mettant tout cela dans le cadre et en nommant le cadre dont nous aurions besoin pour le futur. Prototypage et connexion de tous les écrans. OK, le premier écran est terminé. Voyons ce que nous pouvons faire d'autre ici. Tableau de bord ? Oui, nous devons probablement continuer avec l'écran d'accueil appelé tableau de bord. Texte de l'IA. Encore une fois, nous recherchons un écran dans le panneau des ressources pour commencer à créer le flux utilisateur. De quoi d'autre avons-nous besoin ? Bien sûr, le header. Comme il s'agit d'un écran d'accueil, nous aurions besoin de quelque chose comme une icône pour ouvrir un menu avec d'autres options pour l'utilisateur. Sûrement un calendrier. Nous l'avons également vu dans les détails fournis par l' IA. Oui, appelons ça mes dépenses. Je crois que je l'appelais différemment, comme mes finances, mais je pense que les dépenses semblent meilleures. De plus, dans la description, j'ai mentionné que nous pouvons en ajouter quelques autres. Oui, nous avons besoin du bouton Ajouter, que j'ai également récupéré dans le panneau. Oui, utilisons un espace réservé pour simplement montrer qu'il peut y avoir plus de détails Il y avait également un résumé dans la description du flux d'IA. Montant du résumé que nous avons dépensé ou dépensé par l'utilisateur. Nous devons également montrer l'écran de. OK, allons-y voir. Hmm, les dépenses récentes viennent ensuite, mais plus en détail. OK. Nous pouvons l'ignorer pour le moment. Et voyons voir, comme nous avons déjà un élément de liste, vous pouvez cliquer sur la liste pour ouvrir la page détaillée. Je pense que ça a l'air bien. Apportons quelques petits ajustements à la mise en page. Je pense que cet écran est bon, car nous avons déjà cliqué sur le bouton Ajouter à mes dépenses. Créons cet écran à de nouveaux frais. N'oubliez pas d'appeler vos cadres afin que nous puissions les connecter ultérieurement l'écran des flux à frais. Je vais probablement utiliser un composant de toile de fond pour cela, mais il peut également s'agir d'un écran séparé. Nous devons regrouper l'arrière-plan car l'écran d'accueil est devenu un arrière-plan ici. Dans le panneau des ressources, recherchez un composant d'arrière-plan. Je suis sûr que vous l'avez vu plusieurs fois dans différentes applications. Maintenant, il est très populaire de l'utiliser et presque tous les systèmes l'ont. OK, changeons le titre et les dépenses. Je pense que nous pouvons supprimer ces éléments car nous ajouterons nos propres champs de texte. J'ai conseillé d'ajouter également une sélection de la catégorie pour les dépenses comme l'épicerie ou la maison ou quelque chose comme ça. Je vais commencer par cela et par les champs de texte. C'est bien, dans ces composants, dans ces composants, même s'il s'agit de wireframes, nous pouvons voir des étiquettes afin que nous puissions réellement les commercialiser pour de futurs tests avec de vrais utilisateurs Les utilisateurs comprendront ce que cela signifie, le modèle d'ajout principal. De plus, avec l'étiquette, je pense que nous devons ajouter le montant indiqué dans la suggestion de l'IA. Un titre, comme le nom de la liste déroulante des dépenses avec toutes les catégories de la liste. Il y a aussi un conseil pour en avoir, une note pour chaque dépense. Oui, nous pouvons ignorer ce qui est trop détaillé pour le moment. Et peut-être juste l'avoir comme texte d'espace réservé. Bien entendu, nous avons besoin du sélecteur de calendrier car nous devons définir les dépenses en fonction du jour, des mois et de l'année Comme nous avons déjà créé l'écran des dépenses publicitaires, je pense que nous pouvons également créer une page détaillée des dépenses. Vérifions rapidement si nous n'avons rien oublié. Je copie l'écran. Je pense que la page détaillée des dépenses sera essentiellement la même que celle des dépenses publicitaires en arrière-plan. Je change le titre. OK, vérifions rapidement ce que nous avons. En gros, tous ces champs que nous ajoutons simplement aux frais publicitaires. Nous devons les convertir en étiquettes. J'ai conseillé d'avoir deux boutons pour supprimer et ajouter, c'est logique. L'utilisateur peut supprimer la dépense ou ajouter des détails, puis il passera à l' écran précédent que nous avons créé. Nous copions simplement tous les champs de l'écran précédent. Pour ce qui est des dépenses publicitaires, nous avons besoin de la catégorie, mais elle est déjà sélectionnée par l'utilisateur. Nous avons besoin du montant de la dépense et d'un titre ou d'un nom. Appelons ça une fête d'anniversaire. Oui. Et quelle est la date de soumission ? C'est le 21 février. Oui. En gros, toutes les informations dont nous avons besoin pour la toute première ébauche de l'écran se trouvent ici. Faisons quelques petits ajustements, même si ce n'est pas nécessaire, car encore c'est une image par image et nous testons simplement le défaut. L'idée ne devrait pas être une idée de la mise en page en général, car nous pouvons la modifier plus tard OK, voyons ce que nous avons. Développez les détails, les catégories et les dates en conservant un nœud. Oui, ça a l'air bien. Passons au suivant. Je n'oublie pas de changer le titre des cadres. Il sera facile de naviguer plus tard , car nous aimerions créer une connexion supplémentaire entre les écrans. Ajoutons rapidement la fenêtre contextuelle et pour supprimer les dépenses, lorsque vous cliquez sur le bouton Supprimer, nous pouvons afficher cette fenêtre contextuelle, puis si vous cliquez dessus, nous pouvons afficher l'écran précédent. Je continuerais avec le menu. Comme je l'ai conseillé, il faut avoir plusieurs éléments dans l'application, tels que les analyses calendrier et le changement de catégorie. Nous avons vraiment besoin d'un menu. Il existe un composant pour cela. C'est un tiroir de navigation par dessin. Oui, changeons l'icône. Comme vous pouvez le constater, c'est très rapide et rapide avec paramètres d'un composant tels que suggérés dans le texte. Disons des catégories d'analyse domestique, du budget, de la connexion, des banques. Oui, cela pourrait être une fonctionnalité intéressante dans mon profil. Oui, les icônes ne correspondent pas un peu aux étiquettes, mais c'est bon, car, encore une fois, il s'agit de nos brouillons de wireframes Je pense que ce serait bien d' avoir également un écran de calendrier. Et nous l'avons également dans notre description, car nous avons cette icône en haut à droite. Vous cliquez ici et vous ouvrez un calendrier. Oui, ça pourrait aussi être en toile de fond. Je pense qu'il vaut mieux avoir un composant similaire, un comportement similaire pour des actions similaires. Dans l'application de cette page, un calendrier est simplement ajouté ici pour que vous puissiez passer d'un jour à l'autre et voir les dépenses de chaque jour. Le texte suggère également que nous allons créer des catégories et les ajouter, ce qui me semble également logique. En tant qu'utilisateur, vous aimeriez ajouter d' autres catégories, pas simplement comme une catégorie standard, ayant les vôtres, par exemple, pour partir, étudier ou autre chose. Disons-le aussi rapidement , nous utilisons le même titre de composant de liste et oui, changeons certaines étiquettes à cette fin. Nous avons toujours besoin du bouton plus, du bouton d'ajout. Eh bien, nous avons créé tous les écrans fournis par l'IA pour enrichir le flux. Je pense que ce sont les principaux écrans à avoir pour l'application des petites dépenses ou du suivi des dépenses. Bien sûr, cela peut être beaucoup plus détaillé, mais pour le premier, pour le premier dépôt, cela suffit certainement. Connectons tous les écrans aux flux de la vidéo suivante et essayons de le tester avec les utilisateurs et de voir comment cela fonctionne. Rendez-vous dans la prochaine vidéo. 6. Relier les écrans aux chemins: Les gars, c'est la dernière leçon de ce cours. Dans cette leçon, j'aimerais vous montrer comment connecter rapidement tous les écrans que Figma nous avons créés à l' aide de l' outil de prototypage de Il manquait un écran dans la leçon de la vidéo précédente. Cela représente une dépense supplémentaire et je copie simplement un écran de dépenses et je change le libellé du bouton, car il s'agit essentiellement du même écran. Je vais pouvoir connecter le bouton assisté depuis la page détaillée. L'outillage du prototype apparaît ici à droite. Vous cliquez ici, puis la fonction semble avoir sélectionné l'un des composants et vous connectez les écrans à l' aide de petites flèches. Comme ici, lors de la connexion, l'utilisateur apparaît sur l'écran d'accueil lorsqu'il se connecte à l'application et fournit ses informations d'identification Il peut immédiatement voir l' écran d'accueil que nous avons conçu. Nous n' oublierons pas le mot de passe car nous n'avons pas créé l'écran pour cela au prix d'un bouton. Nous nous connectons à l' écran à frais. Ensuite, en cliquant sur le bouton de collecte vous apparaissez à nouveau sur l'écran d'accueil. Que pouvons-nous connecter d'autre ? Faisons le menu en cliquant sur le menu Burger Camburger. L'utilisateur ouvre le tiroir du menu, et bien sûr il peut le fermer et revenir à l'écran d'accueil. Connectons également la vue du calendrier par le haut, afin que toute la navigation supérieure soit effectuée vers l'écran du calendrier. En cliquant dessus, en sélectionnant l' un des éléments de la liste, l'utilisateur ouvre la page détaillée telle que nous l'avons conçue dans la liste précédente. Bien entendu, il peut revenir à nouveau sur l'écran d'accueil. Presque tous nos écrans mènent à l'écran d'accueil. Après l'avoir utilisé, nous connectons régime à un écran à points, nous le supprimons. Nous connectons la suppression à l'écran de suppression. Supprimer la fenêtre contextuelle. À partir de là, vous pouvez essentiellement supprimer la dépense. Ensuite, l'utilisateur accède à l'écran d'accueil et au bouton d'annulation. Nous allons simplement fermer la fenêtre contextuelle et vous afficher l'écran précédent qui est la page de détails. Quoi d'autre que nous puissions avoir dans le menu, nous pouvons à nouveau connecter l'écran d'accueil à notre écran mes dépenses. Et à partir de ce menu, nous avons également créé un écran de catégories dans lequel vous pouvez modifier les catégories ou les supprimer de l'écran des catégories. Encore une fois, vous pouvez revenir à l'écran principal avec la vue d'ensemble. Oui, j'ai oublié de connecter l'affichage du calendrier à l'écran d'accueil pour que l'utilisateur puisse revenir et fermer le calendrier. Je pense que ce sera plus facile si nous ajoutons simplement ce bouton croisé à chacun des composants de la toile de fond lorsque nous le testerons à chacun des composants de la toile pour l'utilisateur. Il sera plus facile de comprendre comment fermer cet écran et revenir à l'état précédent. Je pense que ces éléments de liste sont également assez trompeurs. Fournissons au moins un texte montrant que les utilisateurs soumettent certaines dépenses pour une fête d' anniversaire, mais sinon nous pouvons taper de la nourriture pour chats. Peut-être certains livres que j'ai achetés récemment, la crème pour les mains, qui semblent un peu plus naturels. Oui, lorsque vous sélectionnez l'outil de prototype, toutes ces flèches semblent surchargées et surchargées. Mais en fait, une fois que vous aurez commencé à le faire, vous verrez et constaterez que c'est super facile. Il vous suffit de connecter tous les composants interactifs à certains écrans, puis de tester d'abord votre prototype , bien sûr, vous préférez le tester vous-même. Je vais vous montrer comment faire cela dans Figma. Il est possible de l'ouvrir dans une fenêtre séparée, qui ressemble à un petit téléphone. Ici, vous cliquez sur le bouton Play, vous l'essayez, vous cliquez sur tous les boutons que nous connectons et vous voyez comment cela fonctionne. Si nécessaire, l'écran apparaît, s'il fonctionne comme prévu. Que pouvez-vous faire d'autre avec Figma ? Vous pouvez télécharger l' application Figma sur votre téléphone portable et ouvrir ce prototype très facilement sur votre téléphone portable, qui ressemblera presque à une vraie application Et donnez-le à certains de vos amis pour qu'ils testent votre prototype et voient ce qu'il faut faire en confiant une tâche à vos participants. Créez une dépense ou modifiez à nouveau la catégorie dans l'application. Et puis vous voyez immédiatement ce qui manque ou ce qui n'est pas vraiment clair pour l'utilisateur. Vous observez le comportement de l'utilisateur , ce sur quoi il veut cliquer ou ce qu'il ne trouve pas Et puis vous constatez immédiatement les points faibles de votre application. C'était la dernière étape de cette leçon, le cours. Passons maintenant au projet et créons des flux utilisateurs et une expérience utilisateur pour les applications mobiles. Avec l'aide de l'IA, plongeons-nous dans la vidéo de description du projet. 7. PROJET: Nous avons parcouru un long chemin notre parcours de conception UX et il est maintenant temps de mettre nos nouvelles compétences d'un projet pour notre projet final. Je vous confie une mission qui permettra de libérer l'innovateur qui sommeille en vous et de mettre en valeur tout ce que vous avez appris jusqu'à présent dans ce cours. Es-tu prêt ? C'est ici. Vous allez créer un flux d'utilisateurs pour une application mobile ou une fonctionnalité au sein d'une application en utilisant la puissance des flux d'utilisateurs générés. Pensez à n'importe quelle application, vous avez peut-être une nouvelle idée géniale ou vous pouvez simplement utiliser n'importe quelle fonctionnalité ou application mobile bien connue que vous utilisez déjà. Peu importe, car nous nous entraînons ici. Ensuite, vous devrez trouver une bonne invite qui résume l' essence de l'idée Une fois que vous avez votre Pront, il est temps de l'intégrer à l'IA et générer des flux d'utilisateurs pour votre application mobile ou une fonctionnalité Ensuite, prenez vos résultats, ajoutez-les à Figma Utilisez les composants que j'ai partagés avec vous pour créer des écrans. N'oubliez pas qu'il ne s'agit pas seulement de créer jolis écrans ou des cadres métalliques parfaits. Il s'agit de créer un simulus d'expériences utilisateur intuitives. N'ayez pas peur d'itérer et peaufiner après le premier ou le deuxième résultat Si vous le souhaitez, vous pouvez aller plus loin en connectant les écrans à la fonction de prototypage de Figma et en la testant avec votre famille ou vos Vous avez déjà reçu mon conseil sur la façon d'effectuer des tests utilisateurs efficaces. Veuillez ajouter vos projets sous forme de capture d'écran dans ce cours. Je suis très heureuse de commenter et de vous donner un conseil. Merci d'être là jusqu'au bout. Bonne conception et je vous verrai de l'autre côté. Au revoir.