Prototyper dans Figma en 60 minutes | Projet réel

1. Protot: Bon retour. Prototyper Figma signifie simplement rendre le design interactif C'est comme si le projet avait déjà été codé et que nous pouvions l'utiliser. Alors allons-y et nous en parlerons plus en détail dans une minute. Voici donc deux écrans d'applications mobiles. Nous pouvons nous inscrire ou nous connecter. Fantastique Passons en mode prototype en cliquant ici. Peu de choses ont changé, mais c'est bon. Maintenant, sélectionnons la connexion sur l'écran de gauche. Au fur et à mesure que vous le survolez, vous verrez ce symbole plus. Cliquez et maintenez une connexion et faites-la glisser vers l'autre écran. Immédiatement, nous allons faire apparaître cette fenêtre contextuelle, qui nous permet d' affiner l'interaction. Bref, nous voulons ce qui suit. Lorsque nous cliquons sur Login, c'est donc le déclencheur, nous voulons naviguer. C'est l'action, et la destination est déjà définie car nous faisons glisser cette flèche vers cet écran spécifique. Nous allons donc tous bien. Et en termes d'animation, Smart Animate convient parfaitement. Le reste n'a pas vraiment d'importance. OK, recommençons, mais sur l'autre écran. Cliquez donc sur Enregistrer et trouvez le symbole plus. Maintenant, faites glisser une connexion vers l'écran initial. Remarquez qu'il y a une bordure bleue. C'est génial Mêmes réglages qu'avant, très bien. Et oui, félicitations. Nous avons notre premier prototype. N'hésitez donc pas à fermer cette fenêtre. D'accord. Et pour le tester, nous allons utiliser ce bouton de lecture ici. Maintenant, le chargement de prototypes plus volumineux peut prendre une seconde, mais celui-ci est assez rapide. Et nous pouvons cliquer et nous pouvons le voir en action. C'est comme si l'application avait été codée comme si elle était en ligne. Regardez le curseur, lorsqu'une action est disponible, nous allons obtenir l' icône en forme de main au lieu de la flèche. s'agit d'un prototypage en un mot, et il n'y a que quelques autres fonctionnalités que vous devez réellement connaître, et je vais vous les expliquer. Mais voici le point essentiel. Le prototypage n'est pas une question de design. Il ne s'agit pas de le rendre élégant et interactif, il s'agit donc de le rendre plus beau sur les réseaux sociaux pour obtenir plus de likes. Non, fermez l'onglet et revenons à notre projet. Maintenant, cliquez sur une flèche pour ouvrir les paramètres d'animation, vous voyez donc ce que je veux dire. Et si nous le remplacions par Smart Animate pour passer à autre chose ? Nous avons maintenant quelques options supplémentaires ici. Disons qu'il entre par le côté droit. Essayons-le. Maintenant, bien sûr, c' est intéressant, un effet sympa, mais l'autre onglet reste sur Smart Animate. Alors revenons en arrière. Si cette fois-ci, nous le changeons pour dire slide in. C'est donc autre chose. Cela peut donc paraître encore plus cool. Et puis peut-être modifions-nous la durée pour dire 600. Et un dernier changement, changeons la courbe en quelque chose d'autre. Modifions-le pour faciliter l'entrée et la sortie. Fantastique Maintenant, appuyons sur Play et testons les choses. Maintenant, je suis en train de le parcourir à la hâte, mais j'espère que vous commencez à remarquer un problème Oui, cela semble intéressant. Ça fait du bien. Mais peut-être que nous pouvons le rendre encore plus agréable. Peut-être que cela doit être réglé à 4 h 50, peut-être un autre type de courbe, non ? Et c'est en fait le plus gros problème du prototypage. Ça t'embête. Cela prend tellement de temps. Cela prend beaucoup de temps comme rien d'autre. Et le problème, c'est que vous avez l' impression de faire des progrès, n'est-ce pas ? Comme si tu travaillais sur quelque chose de noble. Tu es en train de peaufiner l'application. Vous faites en sorte que cela se sente spécial, n'est-ce pas ? Mais en tant que fondateur d' un studio de conception d'applications que j'ai dirigé pendant plus de cinq ans, je peux vous le dire sans hésitation, sans aucun doute. Tout ce que vous allez faire, tout ce que nous avons fait ici ne sera pas codé, comme nous l'avons conçu. Donc, 450 ou 600 millisecondes, ce n'est pas le cas. Emménagez, glissez dedans, ce n'est pas le cas. Animation intelligente et ainsi de suite. Je vais maintenant expliquer pourquoi c'est le cas plus en détail dans la prochaine leçon. Mais pour l'instant, veuillez télécharger le projet. Vous l'avez attaché et reliez ces deux écrans ensemble, comme je vous l'ai montré il y a une minute. La raison pour laquelle nous utilisons des écrans de conception d'applications par rapport à un site Web classique est due à leur taille. Ils sont plus petits, il est donc moins facile de se déplacer. Nous n'avons pas à nous déplacer dans le cadre du grand projet. Imaginez 20 écrans de bureau. Cela demande beaucoup de zoom et de panoramique, c'est pourquoi j'ai choisi les écrans Lapa mobiles Mais oui, allez-y, essayez-le, voyez comment vous vous en sortez, puis assurez-vous de continuer à regarder la leçon suivante, car elle est très importante. Amuse-toi bien 2. Le prototypage est essentiel, mais il a un défaut majeur: Bon retour. Le prototypage est passionnant Vous avez vu le nombre de choix qui s'offrent à nous dans nos paramètres, et ce n'est que la partie visible de l'iceberg Maintenant, imaginez à quel point nous pouvons donner à nos designs une apparence et une sensation de complexité et de raffinement et Et cela va sûrement bien fonctionner sur les réseaux sociaux. Cela va recevoir beaucoup de likes, de commentaires et de nombreuses demandes de travail, n'est-ce pas ? Mes projets, non ? Euh, non, en fait, non, pas vraiment. N'oubliez pas que j'étais le PDG de mon entreprise de conception d'applications Je pouvais donc simplement demander à mes codeurs de faire correspondre mon prototypage un à un. Mais voilà le truc. Je ne l'ai pas fait Et pourquoi est-ce le cas ? Parce que le codage coûte très cher. Pensez-y de cette façon. Disons qu'une heure de codage, codage IOS coûte 100 dollars, un nombre aléatoire, d'accord ? 100 dollars de l'heure. Maintenant, le développeur affirme que le fonctionnement de ce formulaire d'inscription du point de vue des fonctionnalités prend environ 15 heures, juste un nombre aléatoire. Donc c'est 1 500$, d'accord ? 500 dollars. C'est une pure fonctionnalité, pas d'animations, n'est-ce pas ? Vous posez ensuite des questions sur les animations, et il répond que c'est 10 à 30 heures supplémentaires Cela représente donc entre 1 000 et 3 000 dollars de plus. Il n'en est pas sûr parce que c'est beaucoup de peaufinage, beaucoup de va-et-vient. Cela pourrait prendre plus de temps, mais certainement pas moins. Maintenant, dites-vous oui ? Acceptez-vous ce coût énorme ? Et gardez à l'esprit que les autres parties du projet nécessitent un codage. mieux est donc de rendre l'application fonctionnelle, puis si vous avez le temps, vous revenez en arrière et vous ajoutez quelques animations ici et là après le lancement de l'application. Alors, qu'est-ce que cela signifie pour le prototypage ? Il faut que ce soit basique. Il est là pour aider le client et le codeur à comprendre le flux. Jetez un coup d'œil ici. Supposons que c'est la première fois que vous voyez ce projet, d'accord ? Maintenant, connaissez-vous tous les moyens potentiels de commencer à utiliser cette application ? Permettez-moi de le décomposer très rapidement. Vous pouvez donc saisir votre localisation ici, votre adresse. C'est le numéro un. Vous pouvez également cliquer sur cette icône ici pour identifier automatiquement votre adresse Il s'agit donc d'un écran séparé, donc c'est l' action potentielle numéro deux. Vous pouvez simplement ignorer cette étape et simplement voir tous les restaurants répertoriés dans l'application, et c'est l' action potentielle numéro trois, accord, trois flux différents. Enfin, vous pouvez enregistrer quel identifiant, et c'est l'action numéro quatre. Vous ne pouvez pas partir du principe qu'un client ou plusieurs codeurs choisiront ces quatre choix Donc, au lieu de partir du principe que, au lieu de les faire réfléchir, vous allez leur montrer toutes les pistes potentielles, c'est fantastique car cela ne laisse aucune place à l'imagination, n'est-ce pas ? Cela signifie donc que les prototypes sont géniaux pour montrer comment un site Web, une application, tout ce qui se trouve entre les deux est censé fonctionner Et voici pourquoi. Les prototypes sont un outil essentiel lors de la recherche de codeurs. OK ? Ainsi, un client engage généralement un concepteur, puis avec un prototype complet, il commence à obtenir des devis de la part des développeurs Le prototype est là pour que l'équipe de développement puisse comprendre précisément le projet afin de tout savoir à son sujet. Grâce au lien FigMA, ils peuvent voir l'interface utilisateur, le design lui-même, mais ils peuvent également voir les nombreux flux contenus dans l' application, comment vous inscrire , comment payer une commande, comment ajouter ou supprimer des produits sur la carte, etc. Maintenant, par exemple, remarquez qu'il n'y a pas de connexion aux réseaux sociaux dans cet écran. C'est très important. Tous ces petits détails modifient la portée du projet. Supposons que nous ayons ajouté quelque chose comme se connecter avec Facebook ou Google ou autre. Cela peut donc prendre deux jours de développement supplémentaires, ce qui peut ajouter, disons, 1 500 dollars de coût supplémentaire. C'est pourquoi les prototypes sont absolument essentiels. Lorsque le client recherche des codeurs, le fait disposer d'un prototype interactif et design complet est inestimable C'est ainsi que vous obtenez des devis et des estimations précis car, encore une fois, la société de codage peut voir le tout. C'est ainsi qu'ils peuvent être précis. Mais revenons à notre travail, personne ne se soucie des animations sophistiquées. 400 millisecondes, 600 glissez, passez à l'action. Non, ils veulent voir toutes les options de l'application. C'est ainsi que vous devez aborder le prototypage. Ce n'est donc pas un outil de conception pour obtenir plus de likes. Non, du point de vue des fonctionnalités, vous souhaitez mettre en valeur les fonctionnalités de l'application. J'insiste beaucoup parce que vous allez voir de nombreuses animations fantaisistes sur Dribble et Be hands, et vous pensez peut-être que c'est ce que recherchent les clients, mais ce n'est pas le cas Et tu n'as pas à me faire confiance. suffit de consulter ces projets que vous voyez sur les réseaux sociaux. Ont-ils été mis en œuvre de cette façon ? Va télécharger ces applications. Pouvez-vous voir toutes ces animations sophistiquées et complexes que vous voyez sur Be hands or dribble ? Dans n'importe quelle application ou site Web, cela n'a pas d'importance. Neuf fois sur dix, le projet lui-même est très épuré. Pas d'animations ou très petites. Et c'est parce que cela coûte beaucoup de temps et d'argent. Très peu d'entreprises peuvent réellement se le permettre. Et voilà le truc. Sortez votre téléphone, regardez les plus grandes entreprises du marché. Regardez leurs applications, Netflix, Uber, Amazon, peu importe. Pourquoi n'ont-ils pas toutes ces animations fantaisistes ? Parce que c'est une distraction. Très peu d'entreprises bénéficient donc réellement de ce type de choses. Dans ce chapitre, je vais donc vous montrer comment créer un prototype, mais je ne vais pas vous faire perdre votre temps. 99 % de vos clients voudront un prototype fonctionnel, non un prototype très raffiné lorsque vous consacrez une demi-journée à quelques transitions. Ce n'est pas le problème. Nous allons nous assurer que les clients réels bénéficieront de votre travail. Alors allons-y. 3. Utiliser le prototypage pour trouver des erreurs et des défauts: Bon retour. Le prototypage est un excellent moyen de détecter les erreurs, les choses que vous avez oubliées ou que le client a peut-être oubliées Maintenant, voici un type de défaut. Supposons que l'utilisateur ne saisisse son adresse et qu'il veuille simplement voir les restaurants qui se trouvent dans l'application OK, à un certain niveau, c'est logique, non ? Il veut flâner. Ne mettons aucun obstacle pour que l'utilisateur puisse explorer l'application, et peut-être qu'il sera alors plus enclin à s'inscrire. C'est logique, non ? Mais que si cette application fonctionne dans un immense pays comme les États-Unis, à quoi sert-elle d'afficher des restaurants situés à des milliers de kilomètres ? C'est donc quelque chose que le client doit prendre en compte, et votre prototype mettra en évidence cette faille potentielle Ce n'est pas à vous de changer le comportement de l'application ou de la faire rechercher. Mais si vous pouvez présenter des problèmes potentiels, vous serez très apprécié. Pour en revenir à ces écrans, nous avons créé un prototype très simple. Nous pouvons passer d'un onglet à l'autre. Mais que se passe-t-il lorsque vous passez sur ce bouton ? Rien ne se passe, et ce n'est pas l'idéal. Donc, en mode prototype, cliquons sur le bouton, et sur le côté droit, nous pouvons voir cette partie appelée interactions. Cliquez sur le symbole plus. Cela va nous montrer plusieurs options, mais je les recherche en survolant Supposons donc qu'il s'agisse d'un site Web non d'une application où vous n' avez généralement pas de survol sur le téléphone portable, n'est-ce Mais pendant le survol, nous voulons que le bouton passe à un état Pour le moment, il est activé, d'accord ? C'est orange, donc c'est logique. Le bouton est disponible, et tu peux appuyer dessus, d'accord ? Mais changeons l'état pour qu'il passe survol, et voilà le truc Nous n'en avons qu'un autre appelé handicapé. Ce n'est pas bon. Il nous manque donc l'état de survol, ce qui n'est pas acceptable. C'est une erreur de notre part. C'est exactement ainsi que vous êtes censé tirer parti des prototypes. C'est ainsi que vous allez détecter les erreurs en utilisant le mode prototype. Nous venons de découvrir qu'il nous manque un état, l'état de survol Revenons donc au mode design. Nos actifs se trouvent ici, il n'est donc pas nécessaire de les rechercher. Voici les deux boutons, mais il nous faut le troisième. Cliquez donc sur ce symbole plus, et nous allons créer une variante. Vous allez voir que le nom est déjà surligné ici. Et au lieu de définir l'état trois ou quoi que ce soit d'autre au hasard, écrivons hover. Et, bien sûr, nous devons changer le design, mais nous allons rester simples. Nous allons dissocier la couleur de l'action et choisir une teinte orange plus foncée , quelque chose comme ça OK, de bonnes choses. Maintenant, revenez au mode prototypage, et nous pouvons reprendre Sélectionnez donc le bouton, et sous interactions, nous voulons ce qui suit. Lorsque vous survolez, passez au survol. En ce qui concerne l'animation, j'opte généralement pour Smart Animate dans la plupart des cas Génial. Essayons-le maintenant. Et, bien sûr, cela fonctionnera sans aucun problème. C'est fantastique. C'est ainsi que vous pouvez vérifier vos projets avant de les confier. Ce n'est pas la fin du monde, cette erreur. Mais si vous additionnez cinq, dix ou 20 de ces erreurs, le développeur va s'énerver. Il va dire au client que le client n'est pas seulement content, alors il va vous envoyer un message peut-être dans quelques semaines, peut-être dans quelques mois. Vous êtes alors probablement occupé par un autre projet. Comme vous pouvez l'imaginer, tout le monde est bouleversé. Donc, s'il vous plaît, ne travaillez pas de cette façon. Si vous créez un prototype, vous pouvez rapidement identifier ces erreurs et les corriger en quelques minutes. Mais qu'en est-il des champs ? Eh bien, tout d'abord, il existe un moyen de pouvoir taper quelque chose à l' intérieur d'un prototype, n'est-ce pas ? Mais est-ce que cela aide vraiment ? Non, pas du tout. C'est pourquoi nous n'allons pas le faire. Nous allons plutôt penser à ces États. Voici donc l'état d'indication. Mon nom n'est pas vraiment renseigné. Ce n'est qu'un exemple, un indice, une façon dont nous indiquons à l'utilisateur ce qui est censé être saisi et de quelle manière Cela est très utile dans le champ du numéro de téléphone, par exemple, où dans mon pays spécifique, vous pouvez potentiellement l' écrire de différentes manières. Voici comment on peut écrire un chiffre dans mon pays. Cela peut être un peu déroutant, mais en ajoutant un indice, c'est un texte d'aide, non ? C'est fantastique. Maintenant, dans cette situation, est-il clair que ce texte n'est qu'un indice, un texte d'assistance qui disparaîtra lorsque vous cliquerez dessus ? Non, pas vraiment. Il fait trop sombre. C'est pourquoi nous devrions le remplacer par quelque chose d' un peu plus délavé. Vous pourriez même le mettre en italique. Ce qui compte, c'est que cela doit être considéré comme un indice. Cela doit clairement être un indice. Vous pouvez même écrire EG ou indice, puis le nom réel ou autre. C'est ainsi que vous parlez au développeur lors votre prototypage, de votre travail de conception Nous avons maintenant besoin d'un autre état où le texte est réellement rempli, où l'utilisateur a réellement tapé quelque chose, n'est-ce pas ? Et puis dans ce cas, cela doit être très différent de l'indice. Je parle de manière plus sombre, plus audacieuse, donc il n'y a aucune confusion à ce sujet Maintenant, je vais passer en revue les mouvements assez rapidement , mais j'espère que vous en comprenez le raisonnement. C'est le but de cette conférence. Vous concevez quelque chose, vous pensez que c'est bon. Mais lorsque vous approfondissez le sujet à travers un prototype, vous vous rendez compte qu' il n'est pas suffisant. Vous devez donc revenir et apporter tous ces changements. Les concepteurs qui ont déjà expédié des produits connaissent toutes ces situations et les gèrent dès le départ. Mais si vous n'avez pas cette expérience, pas de problème, utilisez le mode prototypage. Accédez ensuite à tous les champs, à tous les écrans, et voyez si vous avez oublié quelque chose, car vous ne les comprendrez peut-être pas dès le départ. Mais lorsque vous configurez tout de cette façon, voici le truc. Les développeurs vont vous adorer, et il y a plus de chances que vous obteniez plus de travail sur ce client ou que vous obteniez une bonne critique, ou les deux. Donc, en conclusion, mon conseil, ne perdez pas votre temps à rendre les champs modifiables, est-ce pas, en tapant quelque chose dans le prototype. Cela n'aide pas. Mais assurez-vous d'inclure des états distincts pour les boutons, pour les champs de la plupart de vos éléments, d'accord ? Tu dois t'assurer que tout est parfaitement clair. Si vous voulez le porter à 100 %, dans ce prototype, vous pourriez éventuellement créer un état dans lequel le champ est désactivé, où le bouton est désactivé, peut-être que le champ est également désactivé. Peut-être que quelque chose d'autre doit se produire avant que ce champ particulier ne soit disponible. C'est ainsi que vous pouvez passer au niveau supérieur. Maintenant, la façon dont vous prototypez ces états, que ce soit par le biais de clics, par le biais d'états de survol, l'animation que vous insérez, tout cela n'a pas vraiment d'importance De plus, vous n'êtes pas obligé de le faire pour chaque champ d'un projet de 100 écrans. Au lieu de cela, tu fais exactement ce que j'ai fait ici. Vous travaillez sur le composant principal. Donc, sur le côté gauche se trouve le champ d'origine. J'ai un état par défaut où l'indice apparaît et un autre état que nous avons créé ensemble, où l'utilisateur a tapé quelque chose et le texte devient gras et foncé De bonnes choses. Maintenant, une fois que vous avez obtenu ces états, passez en mode prototype et connectez un à trois et trois à un directement depuis le côté gauche, à partir des composants principaux d'origine. D'accord, en gros, maintenant, lorsque vous cliquez dessus, vous pourrez passer d'un état à l'autre. En travaillant sur les champs d'origine, toutes les copies sur le côté droit, elles vont toutes emboîter le pas. Donc, si le projet comporte 500 champs, ils agiront toujours comme ça. Il n'est pas nécessaire de les lier manuellement . Cela a-t-il du sens ? Encore une fois, en créant une interaction avec le composant d'origine et en utilisant des copies tout au long du projet, toutes réglées une seule fois, et cela fonctionnera pour l'ensemble du projet. Et juste au cas où vous seriez curieux, qu'est-ce qui se passe dans cet autre État ? C'est une option que j' ai choisie juste au cas où le fond serait blanc et que l'étiquette devrait être noire. Tu peux l'ignorer. Ce n'est pas important. C'est ainsi que vous préparez réellement un projet pour le codage, pour le développement. OK, maintenant, allez-y et réglez ces problèmes vous-même. Et lorsque vous serez prêt, veuillez continuer. Merci beaucoup. 4. Les superpositions dans vos prototypes (pop-ups) ): Bon retour. Les fenêtres contextuelles sont un excellent moyen de transmettre du sens et d'afficher un grand nombre d' informations sur un seul écran. C'est utile pour tout le monde, le client, le développeur, mais bien sûr aussi pour l'utilisateur final. L'utilisateur final désigne simplement le client du client. Donc, les personnes réelles qui vont utiliser l'application ou le site Web. Voici donc comment cela fonctionne. Je me suis rendu compte que nous n'avions pas d'écran contextuel, parfois appelé le modèle. Voici donc le truc. J'en ai fait un rapidement, non ? Donc, une fois que vous avez créé un compte, je veux que l'utilisateur soit automatiquement connecté. Donc, en mode prototype, nous allons faire glisser une flèche de ce bouton vers ce cadre. La différence est qu'au clic, nous n'utiliserons pas Navigate 2. Non, nous allons plutôt utiliser une superposition ouverte. maintenant à l'animation, Passons maintenant à l'animation, utilisons move in, même si cela n'a pas vraiment d'importance. Maintenant, pour l'instant, testons-le comme ça. Alors, cliquez sur Play prototype, et voyons-le en action. Maintenant, je veux que vous remarquiez le fond rouge ne couvre pas réellement l'écran initial, et c'est parce que la fenêtre contextuelle est en fait assez courte que tous les autres écrans. Le cadre lui-même est plus petit. Voyons donc ce qui se passe. J'aime utiliser Control W pour terminer mes prototypes et revenir rapidement au projet. Pour régler n'importe quel type de connexion, il vous suffit de cliquer ici et vous obtiendrez les mêmes paramètres qu'auparavant. Maintenant, voici le truc. Cette fois-ci, ajoutons un arrière-plan, quelque chose comme du bleu ou une autre couleur frappante. Maintenant, appuyons sur Play, et vous allez voir que cela fonctionne, mais voici le truc. Cela ne fonctionne qu'en haut et en bas. Le fond rouge est toujours là. Maintenant, la conclusion est la suivante pour les fenêtres contextuelles pour les modaux, n'ajoutez pas de frisson. Revenons donc en mode design et nous pouvons soit le masquer, soit le supprimer complètement. OK, super. Maintenant, un conseil. Si nous appuyons sur le bouton de lecture ici, le prototype nous montrera le modèle, pas l'écran initial. Pourquoi ? Parce que c'est sélectionné. Remarquez la bordure bleue. Donc, comme vous pouvez le voir, lorsque je clique sur Lay, cela n'est pas vraiment utile. N'oubliez donc pas de désélectionner, puis d'appuyer sur Lay. OK, voyons notre fond bleu. Et oui, cela fonctionne très bien. Maintenant, la position de la fenêtre contextuelle n' est pas pertinente dans la plupart des situations, mais je voudrais vous montrer une piste UX. Maintenant, dans la fenêtre contextuelle des paramètres, nous pouvons changer la position du centre vers à peu près n' importe quoi d'autre. Maintenant, la liste est assez longue. Vous pouvez les parcourir rapidement, et vous verrez que c'est assez simple. Rien de trop sophistiqué, mais cela peut parfois aider. Maintenant, la vraie astuce, l'astuce UX, est la suivante. Changez la position en position manuelle. Vous allez maintenant obtenir une superposition sur l'écran, et vous pouvez la repositionner à un endroit très précis Maintenant, dans cette situation, je veux que le bouton Continuer soit très proche du bouton original du compte Creighton. Et pourquoi est-ce le cas ? Parce que l'utilisateur a déjà son doigt ou son curseur dans cette région, car dans cette région, car en restant concentré sur cet endroit précis, l'application fonctionne bien. En termes compliqués, cela réduit la charge cognitive. Tu n'hésites pas. Vous savez que si vous voyez de l'orange, vous pouvez cliquer dessus et que la plupart des actions sont disponibles en bas de l'écran. Et si vous restez constant tout au long de l'application avec toutes ces choses, tout le monde sera beaucoup plus heureux. Maintenant, les utilisateurs ne réalisent peut-être pas pourquoi l'application est fluide, mais c'est l' une des principales raisons. OK, n'hésitez pas à le tester, et c'est parti. La prochaine chose dont je veux parler, ce sont les vêtements lorsque je clique à l'extérieur. Maintenant, dans certains cas, cela fonctionne à merveille. Vous voulez que les utilisateurs puissent naviguer rapidement dans votre prototype, n'est-ce pas ? Ne les forcez donc pas à cliquer sur minuscules icônes ou boutons, car cela leur semble fastidieux. Hein ? Maintenant, je le sais pertinemment : lorsque j' embauchais du personnel, les concepteurs fabriquaient des prototypes qui ne pouvaient pas aller de l'avant si je ne cochais pas une petite case. Maintenant, cette fraction n'est pas idéale, surtout lorsque vous devez voir de nombreux écrans, n'est-ce pas ? Donc, s'il vous plaît, ne bloquez pas vos prototypes. Ne forcez pas l'utilisateur à faire certaines choses. Maintenant, pour y revenir, l'activation cette fonctionnalité n'a aucun sens dans ce cas. Vous créez un compte , puis vous recevez un message de confirmation. Si vous le fermez simplement en cliquant quelque part au hasard dans le dos, vous allez revenir à l'écran d'enregistrement. Ce serait donc une boucle. n'est donc pas une bonne chose. Dans ce cas, ne l'utilisez pas. Dans d'autres situations, plus tard dans d'autres leçons, allez-y car cela accélère l' expérience de navigation. Récapitulons donc Ainsi, lorsque vous créez des fenêtres contextuelles, des modaux, vous pouvez garder la taille du cadre assez petite, mais ne pas ajouter de remplissage. N'ajoutez pas d'arrière-plan. Vous pouvez garder le modèle centré, mais vous pouvez également le positionner manuellement pour une expérience plus rapide. Et pour ce qui est de la rapidité, utilisez généralement l'option de fermeture lorsque vous cliquez à l'extérieur afin que les utilisateurs puissent naviguer rapidement dans votre projet. Mais ne le faites que dans les situations où cela a du sens. Ici, ce n'est pas le cas. OK, continuons. 5. Chronomètres dans les prototypes pes: Bon retour. J'aime enseigner les classiques en termes de techniques de prototypage qui sont réellement utiles dans presque tous les contextes, mais elles ne nécessitent pas beaucoup de compétences Les minuteries sont l'une de ces choses. Nous venons donc de créer un compte, accord, et nous obtenons cette fenêtre contextuelle. Maintenant, la question est de savoir si nous devons cliquer à 100% sur ce bouton pour pouvoir continuer et non. La réponse est non. Moins de clics signifie des clients plus satisfaits, des clients plus satisfaits. Nous devons afficher un message de réussite pour informer l'utilisateur afin qu' il sache que quelque chose s'est produit, bien sûr, mais nous ne voulons pas provoquer de friction. Nous voulons que l'utilisateur passe une commande le plus rapidement possible. Moins de clics, des clients plus satisfaits. Nous devons donc le faire. Nous relions le bouton Continuer à l'écran suivant comme suit. Les bases, rien de trop compliqué. Maintenant, dans la section d' interaction, nous allons en ajouter une autre. Cette fois, nous utiliserons le délai. Donc, le premier est sur le clic, puis celui-ci sur le retard car, oui, vous pouvez les empiler. Vous pouvez en avoir plusieurs. Et ça se passe comme ça. Après un temps de 2000 millisecondes, soit 2 secondes , soit 2 secondes , nous passerons à l'image X, celle-ci ici Alors allons-y et essayons-le. Donc, en créant un compte, puis nous appuyons sur le bouton et nous voyons maintenant la fenêtre contextuelle. Si nous sommes pressés, nous pouvons cliquer sur le bouton ou simplement attendre 2 secondes. Donc c'est génial. C'est une expérience formidable. Si vous en voulez un plus rapide, vous pouvez le réduire à 1 500 millisecondes Mais voilà le truc. Ne flashez pas les objets et ne les emportez pas. Je serais prudent à ce sujet. Certaines personnes peuvent commencer à lire le texte, et si vous le masquez en affichant un nouvel écran, cela peut ennuyer certaines personnes Il s'agit d'un jeu d'équilibre délicat entre, vous savez, la vitesse et le fait de donner aux utilisateurs contrôle total et de tout ralentir. Généralement, lorsque vous ralentissez les choses, les revenus diminuent. Maintenant, ce que je suggère, c'est que vous avez une interface utilisateur géniale. Si le design est parfait, si la typographie est bonne, vous allez faire beaucoup mieux Par exemple, un texte court et doux, donc la rédaction, c'est pertinent Vous êtes connecté, puis une coche verte fait des merveilles L'idée est donc de guider l'utilisateur de façon inconsciente. Il voit une coche verte, il sait qu'il va bien. Il voit qu'il est connecté, nous sommes prêts à partir. Maintenant, le texte secondaire n'a même plus d' importance à ce stade. OK, maintenant c'est l'heure de faire de l'exercice. Je veux que vous recréiez l'effet suivant. Il s'agit d'un compte à rebours une fois que vous avez créé un compte. Lancez un tout nouveau projet et découvrez comment vous pouvez le gérer. Rien n'est attaché à vous. Tu dois le faire à partir de zéro. Commencez avec une image 720 x 12 80, mais pour être honnête, cela n'a pas vraiment d'importance. Fais de ton mieux pour refaire quelque chose comme ça. Il n'est pas nécessaire que ce soit parfait, donc pas de pression. Amuse-toi bien avec. Et lorsque vous avez terminé, partagez le lien du prototype comme suit. Cliquez ici, et maintenant vous recherchez cette option. Si vous n'y arrivez pas, ne vous inquiétez pas, vous pouvez enregistrer la vidéo avec votre téléphone et la publier à la place. Quelles méthodes testez-vous avec cette fonction de temporisation avec cette minuterie ? C'est le seul exercice où nous allons simplement nous amuser avec les durées, les courbes, etc. Mais oui, le reste du temps, nous allons nous concentrer sur les fonctionnalités et les choses réellement utiles. C'est juste pour le fun, pour nous amuser. OK, allons-y. 6. Faire défiler les prototypes: Bon retour. Parlons du défilement dans nos prototypes C'est à des fins d'expérience utilisateur, mais les clients apprécient généralement ces détails. Supposons que nous soyons dans cet écran et que nous voulions faire défiler la page vers le bas pour voir plus d'entrées. Passez donc en mode prototype, et ici, nous avons un comportement de défilement. Passez de l'absence de défilement à la verticale, et cela a évidemment du sens Appuyez sur l'icône Play et jetez-y un coup d'œil. Maintenant, d'un point de vue fonctionnel, cela a du sens. Mais voici un UX. Le fait que le menu supérieur soit visible à tout moment aide vraiment les utilisateurs. Nous pouvons donc le faire. Sélectionnez la barre Verizon et jetez un œil ici. Plutôt que de faire défiler la page avec le parent, remplacez-le par fixed. Ensuite, faites de même pour la barre d'action où vous pouvez réellement sélectionner la ville. Alors réglez également ce paramètre sur Fixed. OK, génial. Maintenant, essayons-le. Ils conservent en effet leur position, sorte que l'utilisateur peut toujours utiliser la fonction de recherche, le système de filtrage, ouvrir la navigation, etc. C'est utile. Mais pour être honnête, la barre Verizon ne tient pas vraiment. Alors changeons-le à nouveau. Donc, plutôt que de le corriger, changeons-le à nouveau pour faire défiler la page avec le parent. OK, maintenant, voyons à quoi ça ressemble. Et le fait est que, oui, ce n'est plus réglé, mais maintenant nous avons énorme écart juste au-dessus de San Francisco. Mais c'est là que l'autre choix nous aide vraiment. Fermez donc le prototype, sélectionnez la barre d'action et changez-la en stick, ce qui ressemble à un correctif, mais si vous continuez à lire, il est écrit « Arrêtez-vous sur le bord supérieur ». Maintenant, jetons-y un coup d'œil. Et oui, c'est ce que nous recherchons. C'est parfait. Alors faites une pause maintenant et essayez-le. D'accord, lorsque vous serez prêt, passons à un site Web, en mode bureau. Encore une fois, nous sélectionnons d'abord le grand cadre et nous mettons le défilement à la verticale. Ensuite, sélectionnons le logo et changez-le en fixe. OK, des trucs amusants, la barre de logo, bien sûr. Procédez ensuite de même pour le cadre du menu principal. C'est l'approche la plus élémentaire, mais essayez-la et assurez-vous de la comprendre. Et, bien sûr, étant donné les mêmes problèmes qu'avant, le fait que le logo soit affiché à tout moment avec les icônes des réseaux sociaux, cela n'a pas vraiment de sens. Ce n'est pas très utile, vous savez, alors nous supprimons du contenu précieux, ce n'est pas une bonne chose. Revenons donc en arrière pour qu'il défile. Et pour le menu principal , arrêtez-le au bord. Et dans l'ensemble, oui, c'est une bien meilleure expérience. C'est de l'expérience utilisateur, de l'expérience utilisateur. Passons maintenant au défilement horizontal, qui va nous aider à comprendre Alors commencez par un cadre aléatoire, quelque chose comme ça, du blanc pur, portrait, rien d'extraordinaire, d'accord ? Maintenant, ajoutons un rectangle aléatoire comme raccourci R. Vous pouvez utiliser n'importe quoi d'autre. Cela ne fait vraiment aucune différence. Je fais en sorte que les choses soient aussi simples que possible. Utilisons maintenant Shift A. OK, changez-le en câlin dans la zone de redimensionnement sur le côté droit Et parce que nous sommes là, changeons le flux. Nous cherchons celui-ci ici. OK, à l'horizontale. Des trucs géniaux. Maintenant, sélectionnons le rectangle lui-même. OK, donc le rectangle et appuyez plusieurs fois sur Ctrl D pour avoir suffisamment de copies. Faites-en assez pour qu'ils sortent du cadre, comme ça. Maintenant, ce serait un étui parfait pour un parchemin horizontal, non ? Passons donc en mode prototype puis sélectionnons le cadre de mise en page automatique Celui-ci, ici. Donc pas le grand, mais celui-ci qui contient les rectangles, d'accord ? Et à partir de là, réglez le trop-plein en horizontal. Et vous pouvez vous attendre à ce que ce soit un fait accompli, n'est-ce pas ? Mais non, si nous appuyons sur Lay, vous verrez que cela ne fonctionne pas. Et pourquoi est-ce le cas ? Eh bien, cette icône nous indique la situation. Il indique que le contenu doit être plus grand que le cadre. Cela signifie donc ce qui suit. Revenez en mode design. C'est essentiel. Tu ne peux pas l'ignorer. Et maintenant, redimensionnez le cadre comme suit. Donc, à propos de la largeur de l'écran. Vous pouvez maintenant appuyer sur Play et le tour est joué. Cela fonctionne très bien. Pour récapituler, le contenu peut sortir du cadre, mais le cadre lui-même doit se trouver à l'intérieur de l'écran C'est la clé. Cette frontière nous indique la bonne façon de procéder. Bien, revenons au site Web pour ordinateur et réessayons. Prenons donc les trois premiers éléments, toute cette ligne, et passons maintenant à Shift A. Nous allons le faire doucement et doucement. Ensuite, sélectionnez une carte et faites plusieurs copies. Cela nécessiterait donc un défilement. Bon travail. De bonnes choses. Maintenant, sélectionnez le cadre de mise en page automatique et, en mode prototype, réglez le trop-plein en horizontal Si vous appuyez sur Play maintenant, cela ne fonctionnera pas. Allez-y et essayez-le. Cela n'arrive pas, n' est-ce pas ? C'est pas bon. Revenez maintenant en mode design et redimensionnez le cadre comme suit D'accord ? C'est donc à l'intérieur de l'écran lui-même. Faites une pause aussi souvent que nécessaire pour pouvoir continuer. OK, maintenant tu peux appuyer sur Play. Et voilà. Il s'agit là d'un progrès solide. C'est ainsi que vous procédez pour faire défiler la page. Cela s'applique évidemment également au défilement vertical. Maintenant, pour ton exercice, je veux que tu le fasses. Je souhaite que vous utilisiez cet écran et fassiez défiler horizontalement les adresses disponibles. Alors ajoutez-en trois ou quatre, donc un peu plus, et ajoutez un parchemin, un parchemin horizontal. Si vous n'y arrivez pas, utilisez mon approche rectangulaire. Donc, un tout nouvel écran , puis je reviens sur mes pas. Revenez ensuite à l'écran de mes adresses et réessayez. Voilà le truc. Dans ce cas, vous devrez peut-être modifier quelques éléments pour chaque carte. Vous pouvez modifier la largeur. Vous pouvez modifier la méthode de redimensionnement. Tu peux changer beaucoup de choses. Je vais donc vous laisser le soin de décider. L'idée est que vous jouissiez d'une liberté totale. Lorsque vous avez terminé, veuillez faire de même pour le défilement vertical Encore une fois, imaginez que vous avez cinq ou six, voire sept adresses au total, verticalement, et que vous devez faire défiler la page. Souvenez-vous simplement de ce que je vous ai enseigné à propos de l'horizontalité, car cela s'applique également à la verticale. Amusez-vous bien et faites les deux. Horizontal et vertical 7. Prototypez plus intelligemment avec cette méthode: Bon retour. Les prototypes sont utiles et les projets de plus grande envergure avec les flux peuvent être assez compliqués, mais les projets de plus grande envergure peuvent être difficiles à prototyper en raison du grand nombre d'écrans. Heureusement, nous pouvons travailler de manière plus intelligente. Lorsque nous associons des écrans, nous savons que nous sélectionnons un élément et que nous établissons ainsi une connexion, n'est-ce pas ? Pour vous inscrire et vous connecter, c'est assez simple. Ils sont juste à côté l'un de l'autre, et c'est logique, non ? Mais comment gérer la flèche arrière ? Où devons-nous le lier ? Le fait est que cela peut être assez compliqué car vous pourriez arriver sur un écran à partir de plusieurs endroits. Alors, comment savoir où renvoyer l'utilisateur ? Mais voilà le truc. Heureusement, il existe une fonctionnalité intégrée à Figma Vous sélectionnez donc l' instance comme suit, pas la flèche, mais l'instance. Ensuite, vous ajoutez une interaction cliquant sur Revenir en arrière. Et c'est tout. Figma sait d'où vous venez et vous serez prêt, automatiquement à ne rien faire d'autre Maintenant, un autre petit conseil. Dans le gros prototype, vous pouvez toujours le redémarrer en appuyant sur R. Cela vous amènera au début du flux. Mais comment définir le point de départ ? Comment définissez-vous le point de départ du flux ? Vous sélectionnez donc le cadre. Dans mon cas, c'est celui-ci ici, puis le mode prototype. Dans ce panneau, vous allez voir le point de départ du flux. Et c'est tout. Maintenant, lorsque vous jouez à un prototype, mais que vous êtes descendu trop loin et que vous ne savez pas ce qui se , il vous suffit d'appuyer sur R passe, il vous suffit d'appuyer sur R pour revenir à l'écran d'origine. De plus, vous pouvez toujours configurer des flux pour différentes situations. Nouveau client par rapport à un client fidèle , à titre d'exemple. Mais concentrons-nous à nouveau sur la flèche arrière. Nous avons beaucoup de flèches arrières ici. Appliquons-nous manuellement la même action sur chaque écran un par un, ou faisons-nous du copier-coller ? Non, vous pouvez réellement vous concentrer sur le composant principal ici sur le côté. Réglez celui-ci avec ce comportement, et c'est le truc. Nous sommes prêts à faire du rock and roll. Vous appliquez donc cette interaction au master du composant, et tous ces gars sont des clones de copies C'est pour cela qu'ils vont emboîter le pas. Encore une fois, étant donné que cette conception a été réalisée avec des instances contenant des clones de ce composant d'origine, cela signifie qu'elles fonctionneront comme prévu Vous pouvez donc définir certaines actions à l'aide de ces ressources. Par exemple, ajoutons un lien vers le logo. D'accord ? Sélectionnez-le donc et définissez les paramètres suivants. Au clic, ouvrez un lien. Je vais mettre mon site web, mais évidemment, cela n'a pas d'importance. Cela est utile au cas où nous voudrions montrer au client ou au développeur une page spécifique qui est peut-être déjà en ligne. Il s'agit peut-être d'un panneau d'administration ou d'un sous-domaine caché au public Et oui, ça marche exactement comme ça. Une dernière chose. Faisons en sorte que le menu latéral fonctionne. Cela devrait donc aider toutes les parties prenantes. Tout d'abord, identifiez ce cadre. OK, on dirait que c'est celui-ci ici. Notez que la largeur est la même que celle des autres écrans. Ce n'est pas l'idéal. Réparons donc rapidement à ce problème. Je vais donc réduire la largeur de 720 à 640 ou quelque chose comme ça. Le logo peut bouger, mais c'est une solution facile. Je veux montrer qu'il s'agit d'un menu latéral et non d'un écran complètement différent. Il est donc important que nous voyions quelque chose en dessous. C'est vrai. C'est le cadre que nous devons garder à l'esprit. Revenons maintenant au composant d'origine. Si vous avez suivi mes cours, vous savez que je vous recommande de placer tous vos actifs dans un cadre séparé, comme ceci, donc sur le côté. OK, ajoutez la connexion, mais il n'est pas nécessaire de tracer une ligne car nous connaissons le nom. Nous connaissons le nom de ce cadre. C'est ce que nous allons faire. Ouvrez la superposition, et voici le cadre que nous recherchons Position, allons en haut à gauche, et nous voulons que ces deux cases soient cochées. Pour ce qui est de l'animation, oui, emménage. C'est là que cela prend tout son sens. Et nous allons définir cette direction. OK, génial. Nous allons le tester. N'oubliez pas que lorsque vous souhaitez démarrer votre prototype à partir d'un écran spécifique, il vous suffit de sélectionner le cadre et le tour est joué. OK, oui, c'est génial. Peut-être que le With est un peu trop long. Peut-être que 580 ou quelque chose comme ça, Nada Ware fonctionnerait un peu mieux, mais c'est bon Cela fait passer le message. Mais oui, nous sommes prêts à partir. Allez-y et essayez-le. Alors, s'il vous plaît, continuez. 8. Créer un menu déroulant interactif: Bon retour. Créons une liste déroulante interactive en utilisant tout ce que nous avons appris jusqu'à présent. Mais n'oubliez pas qu'en revenant à l'essentiel, nous nous concentrons sur les fonctionnalités aider le client et le codeur à comprendre les choses, non pour rendre le design totalement interactif à 100 %. Maintenant, voici le scoop. Donc, lorsque vous cliquez sur San Francisco, vous obtenez une liste des CD disponibles dans l'application, d'accord ? Commençons donc par ce qui suit. Tapez deux, appuyez sur la touche T et écrivez quelque chose comme le nom de la ville. Restons simples. Changez le texte en noir ou quelque chose comme ça, puis ajoutez toute la mise en page avec Shift A, les classiques allant assez vite ici. Pour les réglages, Nonito dit semi-gras, 28, peu importe. Et pour ce qui est du rembourrage , on passe à 60 puis à dix Je suis pressé parce que je veux vous vous concentriez sur le prototype lui-même, et non sur le design. Mais bien sûr, il vaut mieux que vous vous en teniez au style que nous avons déjà défini dans l'application, vous savez, donc suivez le même langage de conception. Une simple bordure noire peut également convenir à cette liste déroulante. Encore une fois, je suis en train de zoomer. OK, maintenant transformons-en un composant comme celui-ci. De bonnes choses. Et pour le rendre un peu plus utile, nous allons inclure un état de survol , puis un état sélectionné OK ? Maintenant, la meilleure façon de le faire, rapidement et facilement, est d'utiliser la variance. Ajoutez donc le premier en cliquant ici et appelez-le hover ou quelque chose de similaire OK ? Des trucs géniaux. Et puis ajoutez-en un autre, nous en avons donc trois au total. Cette fois, appelez-le sélectionné ou inactif ou ce que vous voulez. Maintenant, pour une conception très rapide, l'état Hover doit avoir une couleur d' arrière-plan légèrement différente Je vais choisir n'importe quoi au hasard, mais vous devez vous en tenir au style du projet. Et pour l'état sélectionné, encore une fois, voici quelque chose de rapide, agréable et rapide. Passons à l'orange avec peut-être un texte blanc pur. OK ? Si vous voulez apprendre à concevoir Figma, bien sûr, j'ai d'autres chapitres à ce sujet Tout tourne autour du prototypage. OK, super. Maintenant, nous allons créer le menu déroulant proprement dit. Faites donc glisser une copie Alt et faites-la glisser. C'est Option Drag sur un Mac. Et ajoutons une mise en page automatique Shift A, mais nous devrons supprimer tout le rembourrage Donc c'est zéro, puis zéro. Mais voici le problème de l'écart, il sera nul également. Donc trois zéros au total. Au fait, dans la section flux, assurez-vous que vous avez sélectionné celui-ci , nous optons pour la verticale. OK. Maintenant, sélectionnons l'instance. Celui-ci est là, d'accord ? Faites une pause aussi souvent que nécessaire. Utilisez Control D plusieurs fois. Nous avons donc quatre ou cinq options au total. Maintenant, vous pouvez voir ici un message utile de Figma. Le programme veut nous aider à donner à l'application une apparence réelle. Cela nous offre donc le choix d'obtenir automatiquement certains noms de villes, ce qui est plutôt cool, alors utilisons-le. OK, pour l'instant, pas de prototypage. Ce n'était que des trucs de design que vous connaissez peut-être déjà. Passons maintenant au mode prototype. Faites donc glisser une ligne entre le premier bouton et le second. Elles sont assez proches les unes des autres, mais c'est bon. Pour le déclencheur, appuyez sur le bouton pendant survol, puis passez au survol En ce qui concerne l'animation, Smart Animate convient parfaitement. Et c'est chose faite. Maintenant, à partir du deuxième bouton, faites glisser une ligne vers le troisième. Rien de compliqué au clic, passez à sélectionné. Enfin, associez le troisième au premier, et vous verrez que les options sont déjà correctement configurées. Ce sont des trucs géniaux. Nous allons donc le tester, mais de manière complètement isolée. Sélectionnez donc ce cadre ici. C'est donc le cadre qui contient toutes ces instances. Appuyez maintenant sur le bouton Play. Alors, jetons-y un coup d'œil. OK, donc l'état de survol fonctionne très bien. OK ? Qu'en est-il du fait de cliquer ? Oui, c'est aussi solide. Félicitations. Nous avons terminé la première étape. Maintenant, revenons au projet, San Francisco. Pour être honnête, le menu des hamburgers doit être séparé de cet élément, mais nous allons nous concentrer sur le nom de la ville et sur la flèche déroulante Nous allons donc lier ces deux éléments au menu comme suit. Et pour les paramètres, nous voulons que le déclencheur soit un clic, bien que le survol puisse également fonctionner tout aussi bien Et pour l'action, nous voulons une superposition ouverte. C'est là que cette fonctionnalité prend tout son sens. Fermez lorsque vous cliquez à l'extérieur. C'est génial, utile ici. Aucun arrière-plan, mais nous voulons une position personnalisée. Alors cliquez et changez-le en manuel. Parfois, il se peut que vous ne voyiez pas l'aperçu, mais appuyez sur Escape ou fermez la fenêtre, puis cliquez sur la connexion, et vous devriez pouvoir la voir. OK, placez le menu déroulant quelque part sous le nom de la ville, écrivez une ligne si possible. De bonnes choses, oui. OK, nous sommes prêts pour le rock and roll. Cliquez donc sur cet écran spécifique sur celui-ci ici, et jouons au prototype. Ouais. OK, j'en suis très content. Revenons donc à ce par quoi j'ai commencé cette leçon. Devrions-nous également définir un État comme une situation dans laquelle San Francisco passe à autre chose, New York ou en fonction de ce que l'utilisateur sélectionne ? Et alors devrions-nous modifier la liste des restaurants pour chaque choix dans cette liste déroulante afin de la rendre 100 % interactive ? C'est donc là que les designers deviennent fous et passent des heures entières sans aucune raison valable. N'oubliez pas que nous avons créé cette liste déroulante afin que l'équipe de développement puisse voir l'état survol et l'état bas Ils peuvent voir qu' il n'y a pas de champ de saisie, qu'il n'y a pas de champ de texte dans lequel l'utilisateur pourrait taper quelque chose, etc. En gros, cela les aide à définir le projet. Et, bien sûr, peut-être que le client jette un coup d'œil et qu'il clarifie les choses, non ? Il s'agit peut-être simplement de la liste récente des citations que l'utilisateur a réellement utilisées précédemment. Peut-être que c'est uniquement là que l' application fonctionne réellement. Mais s'il s'agit de 100 villes, cette liste déroulante a-t-elle un sens ? Bien sûr que non ? Comme vous pouvez le constater, tous ces détails ne font pas partie de notre échelle salariale. Ce n'est pas notre travail, non ? Nous ne prenons pas ces décisions. Mais grâce à ce prototype, nous pouvons hisser un drapeau. Nous pouvons donner aux parties prenantes l'occasion de discuter et de décider de l' orientation de l'application. Ensuite, nous pourrons revenir et mettre en œuvre ces instructions. En l'état actuel des choses, nous ne le savons pas, alors nous avons fait de notre mieux. Si l'entreprise prévoit d'être installée dans 100 villes, une liste déroulante n'aurait aucun sens. Très probablement, il doit s' agir d'un champ en haut, dans lequel l'utilisateur peut taper quelque chose, ainsi qu'une liste des villes récentes ou peut-être une liste triée par ordre alphabétique ou parce que, par exemple, elle est peut-être limitée à une seule ville Encore une fois, cela n'a aucun sens d'afficher une liste déroulante, peut-être simplement d'afficher l' adresse actuelle de l'utilisateur. C'est pourquoi travailler sur ce type de projet nécessite beaucoup de communication. Mais tous ces efforts et réunions nécessitent absolument un prototype. Si vous ne l'avez pas à regarder pour l'utiliser, vous n'êtes pas vraiment sûr d'être sur la même longueur d'onde. OK, maintenant c'est ton tour. Allez-y et faites ce menu déroulant. Amuse-toi bien avec. 9. Exercice final - Réaliser un prototype complet: Bon retour. Vous savez maintenant comment créer un prototype interactif pour une raison précise afin d' aider le client et son équipe de codage. Vous ne prototypez pas pour des raisons similaires. Vous ne rendez pas absolument tous les éléments cliquables. Non, ce serait une perte de temps. présent, vous prototypez pour détecter les erreurs, agisse d'écrans que vous avez manqués, mais également d'erreurs de logique ou de flux que le client doit clarifier Maintenant, y a-t-il beaucoup d'autres choses que je pourrais te montrer ? Par exemple, comment modifier l'état d'une case à cocher, comment utiliser des variables, comment rendre le prototype encore plus interactif Bien sûr, mais je veux vous préparer à des projets concrets, et ce sont les compétences que vous allez utiliser 90 % du temps, ce que j'ai enseigné donc cela étant dit, ce sont vos devoirs. Ce fichier est joint, veuillez l'importer. Commencez ensuite le prototypage Chaque fois que vous trouvez une erreur ou qu'il manque un écran, associez cet élément à une superposition indiquant « Ceci est manquant Vous allez devoir le concevoir vous-même, cette superposition Maintenant, où cela s'appliquerait-il ? Par exemple, mot de passe oublié, nous n'avons pas d'écran pour cela. Maintenant, pourquoi est-ce important ? Peut-être qu'il nous demandera un e-mail, mais peut-être qu'il nous demandera le nom d'utilisateur et un e-mail. Peut-être un e-mail et un téléphone. Vous n'avez aucune idée de la façon dont le client va aborder sa sécurité. Il pourrait donc s'agir d'une vulnérabilité. C'est donc en fait très important. Mais comme ce n'est pas le cas, nous devons mettre en évidence cette erreur. Liez-le donc à un nouveau cadre que vous allez concevoir, configurez-le pour qu'il soit superposé et configurez-le pour qu'il se ferme lorsque vous cliquez à l'extérieur À la fin de cet exercice, vous devriez avoir un excellent prototype, et vous pourrez partager le lien sur la plateforme afin d'obtenir des commentaires. Idéalement, vous pouvez également regarder ce que les autres élèves ont fait et voir leurs erreurs. Il ne s'agit pas de mettre quelqu'un mal à l'aise. Il s'agit de comprendre comment le client et ses codeurs vont examiner votre travail, comment ils vont tout vérifier et identifier les et Au cours de ma carrière d'enseignant, c'est quelque chose que j'ai entendu un million de fois. Ah, Chris, je l' ai juste oublié. Bien sûr, mais en tant que designer, il faut être minutieux. Ne pas rendre le prototype 100% réaliste est tout à fait normal. Ne pas savoir qu'il vous manque écrans essentiels, ce n'est pas bien. Alors allez-y, lancez-vous et amusez-vous bien. J'espère que vous utiliserez ces compétences de prototypage dans tous vos projets afin d' améliorer vos prototypes et d'obtenir plus de travail Maintenant, n'oubliez pas que vous devez vous amuser avec ça. Si tu as besoin d'aide pour quoi que ce soit, il suffit de demander. Je suis là pour t'aider. C'est Chris Barron qui démissionne pour le moment. Profitez.