Design d'interaction 101 : flux d'utilisateurs, wireframes, prototypes, et plus encore !

1. Bienvenue dans la conception d'interaction Conception 101: Bienvenue sur Interaction Design 101. Dans ce cours, je vais vous apprendre à cartographier les flux utilisateur, à esquisser les interfaces utilisateur et à les rassembler tous dans des filaires et des prototypes pour communiquer conception d' interaction aux développeurs et autres parties prenantes. Vous utiliserez ces compétences dans votre projet dans chaque leçon. Ce cours s'adresse aux étudiants qui ont au moins une idée de base de ce qu' est UX et qui veulent comprendre la conception d'interaction plus en détail. Il est idéal pour les freelancers ou les graphistes visuels qui veulent passer à la conception d'interaction. Une autre façon d'utiliser ces compétences est si vous êtes déjà un concepteur UX et que vous voulez simplement développer la conception d'interaction. Chaque leçon suivra la structure suivante. Tout d'abord, je vais expliquer une partie de la théorie. Ensuite, je vais vous guider à travers un exemple de l'étape en utilisant une application de commande de café comme mon exemple, vous donnant des conseils et des astuces le long du chemin. Ensuite, avant la leçon suivante, vous mettrez ces étapes en pratique vous-même en utilisant votre propre projet de classe. Mettez l'idée dans le conseil de la communauté et je vous donnerai des commentaires. À la fin de cette classe, vous aurez un flux utilisateur pour votre propre application ou idée de produit, quelques filaires et un prototype des écrans documentés. Pensez à l'idée que vous souhaitez utiliser pour votre projet. Il pourrait s'agir d'une idée existante que vous avez dans votre tête ou vous pourriez utiliser un exemple fictif, comme une application de livraison de commande d'alcool ou une application de covoiturage, tout ce que vous pouvez penser vraiment. Si vous n'en pensez pas, vous pouvez utiliser un produit existant et voir comment vous pouvez l'améliorer. Cela peut aller dans votre portefeuille. Pensez à l'exemple que vous souhaitez utiliser et placez-le dans le conseil d'administration de la communauté. Faites-le avant la prochaine classe et je m'assurerai de donner quelques commentaires. A bientôt. 2. Qu'est-ce que la conception d'interactions: Dans cette leçon, vous découvrirez ce qu'est la conception d'interaction. Alors qu'est-ce que c'est ? conception d'interaction va au-delà de ce à quoi ressemble l'interface ou la conception de l'interface utilisateur et pense à la façon dont les utilisateurs interagiront avec votre produit ou service. Le design visuel n'est que la pointe de l'iceberg UX. Sous la surface de ce que vous dites, la couche visuelle est ce qui constitue réellement l'ensemble de l'UX. Il s'agit de la conception de l'interaction, de l'architecture de l'information, de la façon dont l'information est présentée et organisée, de la conception de l'interaction, du contenu et de la conception conceptuelle de la façon dont l'ensemble du système se bloque. Dans la conception graphique, vous n'avez pas nécessairement à réfléchir à la façon dont les gens interagiraient avec votre produit ou l'utiliseraient au fil du temps. Mais dans la conception d'interaction, vous le faites. Regardons un exemple. Nous devons tenir compte des interactions. Donc, à la surface, cette image ressemble à un design assez bon. Mais si je suis développeur, j'ai des questions. Qu' advient-il du texte de l'espace réservé lorsqu'un utilisateur clique dans le champ ? S' il disparaît, l'utilisateur sait-il dans quel champ il est plus à saisir ? Que se passe-t-il si l'utilisateur entre quelque chose d'invalide ? Où le message d'erreur s'insète-t-il dans l'écran ? Est-ce que tout s'est déplacé ? Que dit le message d'erreur ? Quand apparaît-il ? Qu' est-ce qui est invalide ? Le champ d'adresse n'est qu'un seul champ. Quel format l'utilisateur est-il destiné et à entendre ? Comment savaient-ils ? Où est l'info-bulle ? Qu' est-ce qu'il utilise pour faire correspondre l'adresse ? S' agit-il d'une API Google Maps ? C' est juste du texte libre ? Quelle validation y a-t-il ? Répondre à toutes ces questions, et probablement plus que je n'ai pas mentionné est la conception d'interaction. Le processus que j'ai aimé prendre lors de la conception est d'abord comprendre le flux utilisateur et ce qu'ils essaient de réaliser. Puis esquissez l'interface pour explorer les solutions possibles. Ensuite, créez des filaires avec la conception la plus finale, puis prototypographiez une solution. En rendant les filaires interactifs, je suis venu au produit final et finalement documenter les interactions afin qu'il puisse être construit. Selon la nature du projet et le fonctionnement de votre équipe, il se peut que vous ne franchissiez pas toutes ces étapes. Par exemple, s'il s'agit d'une petite modification d'un écran existant, vous pouvez passer directement aux trames filaires. Vous pourriez même simplement prototyper dans le navigateur, vous pourriez avoir une conversation avec le développeur et si vous travaillez quelque part qui a une carte de style assez sophistiquée, vous n'aurez peut-être pas besoin de spécifier toutes ces interactions. Ils sauront déjà ce qui arrive au texte de l'espace réservé lorsque vous cliquez sur le champ, ce qui se passe avec les messages d'erreur, etc. N'oubliez pas de penser à l'exemple que vous voulez utiliser pour votre projet tout au long ce cours et de le faire apparaître dans la balle de la communauté. A bientôt. 3. Mapper les flux utilisateurs: Maintenant que vous savez ce qu'est Interaction Design, dans cette leçon, nous allons commencer à faire la première étape, à savoir comprendre le flux utilisateur. Alors, qu'est-ce qu'un flux utilisateur ? Eh bien, il s'agit d'une carte ou d'un diagramme des étapes ou écrans qu'un utilisateur passera lors de l'utilisation de votre produit. Cela peut également être une illustration de quelqu'un qui se déplace dans le système. Pourquoi ne pas faire cette étape ? Eh bien, cela vous aide à comprendre la logique du flux des étapes que l'utilisateur peut prendre. Il vous aide à travailler à travers ce qui doit aller où et ce qui se passera. Cela vous aide à réfléchir à ce qui se passe si les choses ne vont pas bien. Dans un système existant, cela vous aide à voir où les choses ne sont pas aussi efficaces qu'elles pourraient l'être, ou où il y a des problèmes avec le processus actuel afin que vous puissiez les améliorer. Il vous aide également à communiquer les flux à vos parties prenantes. Travaillons à travers un exemple. Je vais utiliser mon application fictive de commande de café. Vous pouvez le faire en utilisant de nombreux outils différents, par exemple, un stylo et du papier ou un tableau blanc. Vous pouvez également utiliser des logiciels spécialisés comme Visio, Lucidchart, Miro puce auparavant en temps réel ou simplement des symboles dans Sketch, PowerPoint, Word, etc, tout ce que vous êtes à l'aise avec. Aujourd'hui, je vais utiliser Sketch. Donc nous avons le début et je vais marcher à travers le chemin heureux. C' est ce qui se passe quand les choses vont bien ? C' est le chemin où la plupart choisissent de prendre la plupart du temps. Je suis plus conçu pour les aider de cette façon. Donc Catalans ou café, elle ouvre l'application parce qu'elle connaît déjà notre produit. Nous faisons le flux simplifié qui n'a pas besoin d'aller se connecter, inscrivez-vous nous regardons juste les points clés. Ensuite, l'étape suivante du processus est peut-être de sélectionner un café. Maintenant que je réfléchis à cela, peut-être choisir le type de lait est une étape différente du processus. Sélectionnez ce café que vous voulez puis le lait. Je vais ajouter ceci à ma commande. Réutilisez « Lignes » ou « Flèches » pour indiquer l'étape suivante. Ouverture de l'application, puis « sélection du café », « sélection du café », puis « sélection du type de lait », etc Nous avons une fin, la fin du processus, « succès ». C' est donc un chemin heureux simplifié, mais ce n'est pas toujours comme ça que les choses vont dans le monde réel, les choses vont mal, les gens doivent prendre des décisions. Un diamant est généralement utilisé pour représenter un point de décision. Le point de décision peut être une décision prise par l'utilisateur ou il peut être quelque chose que le système fait. Par exemple, le système recherche maintenant, avons-nous la carte de crédit dans les dossiers ? peux dire que je vais revenir en arrière et changer mon flux parce qu' à l'origine je n'avais pas pensé à toutes ces complexités supplémentaires. C' est là que l'utilisation de quelque chose de numérique peut être bénéfique. Je peux facilement réorganiser et renommer les boîtes. Alors que je suis dans cet ensemble, je pense à quelques choses qui ne fonctionnent pas et qui font des changements. Peut-être aller à la page de paiement si vous avez déjà fait a une carte de crédit, donc vous avez une confirmation de commande et puis il peut y avoir un écran supplémentaire pour entrer les détails de votre carte de crédit. Parfois, il y aura des erreurs, nous devons nous assurer que nous pensons à la récupération d'erreur ou chemins d'échec et comment les utilisateurs peuvent récupérer de cela. Par exemple, les cartes de crédit peuvent être refusées. Nous avons donc besoin d'une boucle pour revenir à la « Ajouter une carte de crédit » ou mettre à jour les cartes de crédit grain. Donc maintenant, nous connaissons au moins une partie du flux utilisateur et pouvons décider quels écrans quand ils ont besoin de concevoir pour. Ce processus vous aide à penser à travers les différents chemins ou écrans natifs. À l'origine, je ne pensais pas que même si vous n'aviez pas de carte de crédit dans les dossiers, la cartographie à travers ce processus m'a permis de trouver ça. Chaque étape du processus peut être un écran différent, ou il peut s'agir d'un champ différent qui est nécessaire. Vous pouvez avoir plusieurs étapes sur un seul écran. Vous pouvez partager dans ce format, ou vous pouvez transformer le flux en plus d'un story-board utilisateur avec illustrations en fonction de la façon dont les flux utilisateur sont compris dans votre équipe. Voici un exemple de bande dessinée de la façon dont ces produits pourraient fonctionner. Quelqu' un veut un café ? Pourquoi ne peuvent-ils pas aller en chercher un ? Peut-être qu'ils ont été blessés, peut-être que c'est notre modèle d'affaires. Ensuite, ils se souviennent de l'application ou de l'intellectuel qu'ils doivent faire, et puis ils sont heureux. C' est plus d'un utilisateur une histoire qu'un flux utilisateur. Nous pourrions également regarder les écrans abstraits et les dessiner avec des flèches entre. Donc, nous n'avons pas abordé trop de détails, nous regardons toujours le flux et la façon dont les gens se déplacent dans le système. Maintenant, essayez de créer un flux utilisateur pour votre propre application de produit ou idée, n'oubliez pas de le mettre dans le stand de la communauté pour obtenir des commentaires, à bientôt. 4. Croquez l'interface: Maintenant que vous avez votre flux utilisateur, il est temps de passer à l'étape suivante du processus. Esquisse l'interface. Comme je l'ai mentionné dans la dernière leçon, vous pouvez avoir plusieurs écrans différents pour chaque étape ou chaque étape peut être sur un écran, ou une combinaison des deux. Vous penserez probablement aussi à des choses et des étapes que vous avez manquées en cours de route alors que vous traversez ce processus aussi, et c'est tout à fait bien. Ça en fait partie. Il est vraiment important de savoir que le croquis n'est pas une question d'art, mais une question de communication, mais une réflexion à travers le processus. Comme vous le verrez d'après mes croquis, je ne suis pas un artiste à 100 %. Ils ne sont pas beaux, mais ils n'ont pas besoin de l'être. Le but de cette étape est de vous aider à réfléchir à travers le flux logique, quelles interfaces sont nécessaires, quelles interactions sont nécessaires, comment pouvons-nous amener l'utilisateur à faire cette interaction ? En regardant mon flux utilisateur de la dernière leçon, je vais commencer à esquisser. Je vais utiliser un stylo et du papier pour cette activité. Mais vous pouvez utiliser un modèle, par exemple, quelque chose qui a déjà, les tailles dessinées pour vous. Mais ce n'est pas nécessaire. Vraiment, juste un stylo, du papier, ou un tableau blanc, c'est tout à fait bien. J' ai tendance à ne pas utiliser le numérique à ce stade parce que je ne veux pas m'enliser trop, quelles sont les couleurs ? Quelle taille devrait être la police ? Je veux vraiment juste penser à quels éléments j'utilise et pourquoi. Je commence par un contour rugueux de l'écran avec une tête au-dessus. Peut-être que nous avons nos dernières commandes sur l'écran d'accueil, et un grand appel à l'action, que je souligne dans Sharpie et coloriage. Les flèches représentent le déplacement vers l'écran suivant, j'appuie sur New Order. Alors maintenant, je suis sur l'écran de commande. Que dois-je faire ? Sélectionnez Type de café. Peut-être qu'on utilise une liste déroulante pour ça. Une fois que j'ai fait cela, nous passons à l'écran suivant, et mon type de café est là, ce qui me permet de revenir en arrière et de le modifier. Maintenant, je dois sélectionner dans une liste déroulante pour le type de lait que je veux. Peut-être que le soja coûte plus cher. Maintenant, j'ai mon type de café et mon type de lait. Quel café va me le livrer ? Peut-être que c'est un seul choix parce que je ne peux en sélectionner qu'un, et cela me donne l'estimation du temps que prendra chaque café. Ensuite, j'ai frappé Checkout. Ici, je vais à différentes façons de payer. Peut-être une carte de crédit, peut-être PayPal. Pouvons-nous faire de l'argent à la livraison ? Pas sûr. Pouvez-vous donner un pourboire au chauffeur ? Ce sont des choses que nous allons réfléchir. Ensuite, j'ai rempli la carte de crédit, gros bouton Pay et j'ai fini. On n'a pas tout réfléchi. Que se passe-t-il de l'autre côté ? Que disent les chauffeurs ? Que dit le café ? Mais cela nous donne juste une idée d' une partie du flux à travers lequel nous allons travailler. Comme vous pouvez le voir, ils sont désordonnés. Mais c'est bien. Le fait est que j'ai pensé à travers le processus et le flux et j' ai trouvé quelques paradigmes d'interaction différents que je pourrais vouloir utiliser. Je suis maintenant prêt à passer au numérique. Maintenant, essayez de dessiner les écrans pour vous-même, pour votre propre projet. Comme toujours, mettez-les dans le conseil communautaire. A bientôt. 5. Créez des wireframes: Mes croquis de la dernière leçon sont essentiellement des filaires de faible fidélité. La prochaine étape du processus consiste à raffermir ces trames. Les trames filaires sont essentiellement un modèle de ce qui doit être construit. Il y a une célèbre citation de Frank Lloyd Wright, vous pouvez utiliser une gomme sur la table de rédaction ou un marteau sur le côté de la construction. Ce n'est pas dire avec le logiciel. Si nous allons de l'avant et écrire le code, nous allons juste devoir le refaire, jeter et ça va coûter plus cher. Nous devons avoir un plan directeur ou une idée de ce que nous allons faire avant de commencer à coder. Wireframes nous aident à réfléchir aux idées et à commencer à les tester avant construire et ils nous aident à communiquer l'idée afin que les autres sachent quoi construire. prototypes de faible fidélité ne ressemblent pas exactement au produit fini. Ils peuvent être faits dessin, ils peuvent sembler un peu croquis, ou peut-être que le design visuel est juste suffisant pour la prochaine. L' avantage d'utiliser un prototype de faible fidélité est que vous allez obtenir, disons de retour au bon niveau. Vous n'allez pas obtenir de commentaires comme, je n'aime pas la couleur, je n'aime pas la police. Ce que vous cherchez vraiment à ce stade, c'est une rétroaction sur le flux et les interactions proposées. Il gère également les attentes. Vous ne voulez pas qu'un client prenne quelque chose qui ressemble exactement au produit fini et alors ils ne comprennent pas pourquoi cela prend encore beaucoup plus de temps alors que j'ai déjà sauvegardé le design ? Il peut également empêcher les développeurs de ramasser et de construire accidentellement quelque chose. S' il est vraiment clair qu'il ne s'agit pas d'un plan ou d'un plan finalisé. prototypes de faible fidélité sont également rapides et faciles à fabriquer, et donc, vous savez, comme marié à eux et vous êtes plus prêt à les jeter et à recommencer, essayez à nouveau, essayez une autre idée. prototypes de haute fidélité ont leur place. Si vous deviez prendre les trames filaires de faible fidélité à des tests d'utilisabilité ou à des recherches sur les utilisateurs. Tu n'auras pas de réponses très strictes. prototypes haute fidélité sont les meilleurs pour cela. filaires peuvent à nouveau être fabriqués à l'aide de nombreux outils différents, les produits Adobe , Balsamic, qui est vraiment bon pour les croquis, et Jill ou sketch. Aujourd'hui, je vais utiliser sketch et vous direz que j'ai installé des bibliothèques qui ont beaucoup de composants que je vais utiliser pour m'aider à gagner du temps. J' ai pris environ une demi-heure pour faire cette activité et c'est loin d'être terminé, mais je vais juste vous parler de quelques choses différentes que j'ai faites et quelques trucs et astuces différents. Encore une fois, cela n'a pas trop d'importance sur les couleurs et la police et la taille est à ce stade, mais vous me verrez changer un peu juste pour montrer l'ordre, les choses qui sont plus grandes ou montrer des actions montrant des liens sont bleus et que chose. Mais à la fin, vous direz que c'est loin d'être fini. Vous verrez également que pendant que nous traversons, je change d'avis et je réalise qu'il y a différentes choses que nous devrions ajouter alors revenir en arrière et l'ajouter, c' est évidemment pourquoi nous ne devrions pas démarrer le code, avoir à aller enlever les choses, réorganiser les choses va coûter beaucoup de temps et d'argent. Je duplique mes tableaux d'art afin que je puisse avoir le même cadre de base pour chaque chose. J' ai cliqué sur une nouvelle commande, donc nous passons à l'écran suivant. Ceux que j'esquissais dans les leçons précédentes. Au fur et à mesure, vous me verrez sélectionner les éléments des bibliothèques que j'ai installées dans mon esquisse. Cela fait juste gagner du temps. Je pousse pour dessiner un rectangle et c'est juste un peu d' un raccourci et tapez pour obtenir du texte à l'écran. J' ai commencé avec le type de café donc je vais écrire un tas de différents types de café que je peux penser. Je suis juste en train d'inventer ça. Mais évidemment, dans la vraie vie, vous faites des analyses et vous comprendrez ce que les cafés offrent. Encore une fois, ce n'est pas une vraie application, donc je n'ai que du café, je n'ai pas à payer et d'autres choses que vous pourriez vouloir acheter. Je n'ai pas non plus mis de prix à ce stade. Tu dis aussi que je mets juste un tas de cafés différents que je peux penser au dessus de ma tête. Il faut aller vérifier l'orthographe pour certains d'entre eux. Mais je les place dans un ordre aléatoire afin qu'à la fin je puisse les placer dans l'ordre alphabétique. Il est logique d'être dans l'ordre alphabétique surtout [inaudible] ne savent pas ce qu'il y a dans la liste et ensuite peuvent savoir ce qu'ils ressentent afin qu'ils puissent faire défiler. Ici, je sélectionne tous les éléments de la liste, en cliquant avec le bouton droit de la souris et en sélectionnant distribuer verticalement. Cela espacera uniformément les éléments. J' ai sélectionné place sur les sous-pixels parce que encore une fois, je ne suis pas à la recherche d'un design parfait pixel. Mais je voulais juste avoir l'air un peu mesuré. À ce stade, j'ai réalisé que je n'ai pas demandé de taille et peut-être que c'est quelque chose que vous voulez faire à l'avance. Je me sens comme un grand café ou je me sens comme un petit café plutôt que de sélectionner ce que vous voulez et puis la taille. Eh bien, ils sont probablement [inaudibles]. Je vais juste réorganiser mes écrans et revenir en arrière et ajouter la même chose. Vous pouvez dire que la façon dont j'ai les tableaux d'art est de gauche à droite dans l'ordre de l'action qui se passe et que je montre à quoi ça ressemble quand il est fermé, quoi ça ressemble quand il est étendu et à quoi il ressemble quand il est sélectionné. Cela montre un peu de l'interaction si vous savez ce que vous cherchez. Pour la taille du café, peut-être que vous voulez savoir ce qu'est cette taille de café. Nous mettrons juste un porte-place pour combien de millilitres le café est. Bien que cela ne fonctionnera probablement pas dans le monde réel, parce que chaque petit café de chaque café a la même taille ? J' ai aussi des coûts d'intrants ici du tout et évidemment le café peut être des prix différents en fonction des différents cafés. C' est juste une complexité que je laisse hors de portée pour l'instant , mais dans la vraie vie, vous devriez penser à quoi ressemblerait cette interaction aussi. À ce stade, j'ai réalisé que mes boutons disent toujours nouvel ordre parce que je le copiais à travers. Maintenant, je vais revenir en arrière et le changer pour dire ajouter à l'ordre. Une fois que nous avons notre article ajouté à notre commande, sera en mesure de le dire dans une vue récapitulative avec la possibilité de revenir en arrière et de le modifier. Maintenant, nous devons l'utiliser pour sélectionner d'où ils veulent obtenir leur café. J' ai décidé dans ce modèle, nous regardons des cafés qui ont ce café que vous avez voté disponible. Parce que vous ne pouvez sélectionner votre commande que dans un café, je vais utiliser des boutons radio, qui suggèrent à l'utilisateur qu'un seul peut être sélectionné. Je n'ai pas pris la peine de regarder la quantité. Que se passe-t-il si vous voulez commander plusieurs cafés à la fois, ce qui, je suis sûr, serait dans la portée. Encore une fois, ces interactions que vous devez penser à travers. Encore une fois, par souci de simplicité, j'ai juste la possibilité de payer par carte de crédit et je suppose que je n'ai pas encore de carte de crédit enregistrée. Cette interaction est vraiment de haut niveau en fonction de la complexité du système réel, vous pourriez avoir besoin de cartographier beaucoup plus. Vous devrez peut-être cartographier tous les différents champs et cela prendrait beaucoup plus d'une demi-heure que j'ai passée sur celui-ci. Mais vous pouvez voir que nous avons déjà un peu de ce qui se passe ? Qu' est-ce qui se passe ? A quoi ça pourrait ressembler ? Quels types de contrôles où nous utilisons un menu déroulant, des boutons radio, un gros code action, gros boutons violets pour le charbon ? Ce que nous voulons que les utilisateurs fassent et éditent des liens pour des choses qui ne seront pas utilisées autant mais qui doivent encore être accessibles dans l'interface. Si je devais prendre ces filaires à des tests de convivialité, les utilisations devraient faire énormément sur la façon dont les interactions fonctionnent et vous pourriez ne pas obtenir de vrais résultats. De même, avoir cette idée aux développeurs à cette étape peut avoir besoin qu'ils prennent beaucoup de décisions sur ce que fait l'interaction, comme nous l'avons dit dans la deuxième leçon. Dans la leçon suivante, vous apprendrez comment prototyper pour passer à travers ces en-têtes. Maintenant, essayez de créer des trames filaires pour votre projet et souvenez-vous qu'elles n'ont pas besoin d'être parfaites en pixels. Il s'agit de la communication pour le moment encore et le fichier bas est meilleur comme nous avons parlé. N' oubliez pas de les télécharger sur le tableau de la communauté pour obtenir des commentaires. A bientôt. 6. Prototypage: prototypage résout certains des problèmes dont nous avons parlé à la fin de la dernière leçon. Montrez ne dites pas l'interaction. Si une image vaut mille mots, alors un prototype vaut un million. Un prototype est essentiellement un échantillon ou un modèle d'un système ou d'un procédé. Il existe deux types principaux de prototypes. Il y a un prototype cliquable ou tap-able et il y a un prototype interactif. Un prototype cliquable ou tap-able est un prototype où vous prenez simplement vos filaires et vous mettez hotspots sur certaines des actions principales , puis cliquez sur ce lien vers le grain suivant essentiellement. Vous pouvez le faire en vision ou en esquisse et je vais parcourir un exemple de la façon de le faire. Nous pouvons créer l'un de ces prototypes cliquables en croquis. Nous allons dans le menu de prototypage et cliquez sur « Ajouter un lien au plan de travail ». Vous sélectionnez ce que vous voulez cliquer, le bouton par exemple, puis ajoutez au plan de travail et cliquez sur le plan de travail auquel il est lié. Il laisse ces flèches sur l'écran afin que vous puissiez voir l'interaction. Le raccourci pour ce faire est d'appuyer sur le WK pendant que vous avez sélectionné quelque chose sur un plan de travail, puis d'appuyer sur le plan de travail suivant et il fera ce lien. Ensuite, vous pouvez lire les prototypes, donc cliquer à l'endroit où vous avez créé ces hotspots va passer à l'écran suivant. Mais vous pouvez dire que mon écran est d'une taille différente, l'image se déplace de haut en bas. Si vous passez un peu plus de temps, vous pouvez rendre cela un peu plus lisse, mais encore une fois, vous voyez que c'est juste passer à l'autre. Ce n'est pas vraiment comme ça que ça se passerait. Si vous cliquez sur le bouton, il ne se déplacera pas vers un nouvel écran. Il serait juste animer ou sélectionner d' une autre manière donc c'est la seule limitation de ces prototypes cliquables. Pour créer des prototypes plus interactifs où les utilisateurs peuvent réellement taper des choses, sélectionnez dans les zones déroulantes, dites à quoi ressemble le bouton quand il est cliqué, vous pouvez utiliser le code mais évidemment cela peut être trop long pour certains concepteurs. Ou vous pouvez utiliser des outils comme Ajua qui est ce que je vais utiliser aujourd'hui. Maintenant, cela aura l'air un peu plus vieux, les styles ne sont pas aussi modernes que vous le voyez dans le croquis mais cela vous donne l'interactivité. Vous avez juste à équilibrer montrant l'interaction entre montrer exactement à quoi cela ressemblera dans le navigateur dans le produit final. C' est Ajua ou Axia, je ne sais pas comment vous le prononcez et j'utilise juste un essai gratuit. Ce que je fais pour gagner du temps, c'est copier mes fils de croquis et écrire dessus. Je mets un bouton d'Ajua qui a des actions associées sur le bouton que j'ai juste à mon image. Pour faire des interactions dans Axia, vous utilisez des cas, donc j'ai sélectionné le bouton et je vais ajouter un cas sur clic. Lorsque le bouton est cliqué, il va faire tout ce que j'ai défini ici, c'est-à-dire ouvrir une autre page du prototype dans la même fenêtre. Maintenant, j'ajoute une zone déroulante et encore une fois, je le mets juste sur la liste déroulante de mon image au cadre y et ajoute quels éléments je veux apparaître dans cette liste. Je peux en ajouter beaucoup à la fois ce qui est utile lorsque vous écrivez plusieurs à la fois. Ce que je fais ici est de faire du deuxième élément un panneau dynamique et de le mettre à caché. C' est parce que je vais ajouter un boîtier interactif sur la taille du café que lorsqu'un article est sélectionné dans cette liste, la liste déroulante suivante apparaîtra. Cela évite simplement d'avoir à aller à plusieurs écrans différents parce que vous pouvez tout faire dans le prototype. Ajua a des interactions vraiment complexes que vous pouvez choisir et qui est plutôt hors de portée pour cette classe, mais vous pouvez avoir un jeu si vous êtes intéressé. Encore une fois, je travaille juste autour de mes filaires. Je vais ajouter un rectangle pour couvrir les choses de mon image et le remplacer par les boutons radio disponibles dans Ajua parce que ce sont boutons radio entièrement interactifs et montrer ce qu'ils devraient faire et comment ils interagissent. Vous pouvez prévisualiser le prototype. Cela l'ouvre dans le navigateur et vous montre comment fonctionnent les interactions. Lorsque je sélectionne à partir de cet élément, la liste déroulante suivante apparaît comme nous l'avons configuré pour le faire. Vous verrez que les boutons radio fonctionnent. Cela m'a pris environ 20 minutes, mais encore une fois, si je jouais et passais beaucoup plus longtemps, je pourrais avoir l'air plus comme le système final le ferait. Cela dépend juste du temps que vous voulez passer, si je suis juste de montrer l'interaction ou si elle a besoin de regarder exactement pixel parfait. Il y a des outils plus récents qui sortent. Nous pouvons réellement concevoir dans le code mais je ne vais pas regarder aucun de ces aujourd'hui. Si vous avez des interactions vraiment complexes que vous voulez montrer, une autre façon de le faire est de tricher en utilisant un GIF ou une animation PowerPoint et je vais vous montrer comment le faire aussi. Fusons une animation dans PowerPoint. Disons que vous avez une liste de choses que vous pouvez enregistrer et quand vous l'enregistrez, cela vous donne un petit indice et vous indique qu'il est entré dans votre menu. J' ai deux étoiles qui représentent l'état sauvé et je les fais apparaître toutes les deux en même temps. Ensuite, je fais une demi-animation pour que je puisse faire monter et sortir l'étoile où je veux que l'animation aille. Je veux que cela arrive avec précédent. Vous cliquez sur l'étoile ici et l'animation se produit. Ensuite, nous devons la faire sortir pour que vous n'ayez pas juste l'étoile flottant par le menu. Ce que je vais faire est de m'assurer que je sélectionne le bon et d'avoir un effet de sortie et de le faire après précédent. Quand tu joues, tu simules l'interaction. Cliquez sur « Animer Disparaissent ». En réalité, à cette étape, nous prenons probablement ce prototype pour utiliser des gommes à effacer ou des tests de convivialité. Ceci est de vérifier que les utilisateurs peuvent accomplir les tâches que nous attendons qu'ils puissent faire avec cette interface et cela nous montrera si quelque chose est déroutant, difficile ou difficile à utiliser. Maintenant, faites un prototype de votre propre projet et n'oubliez pas de le mettre dans le tableau de la communauté pour obtenir des commentaires. Encore une fois, il n'a pas besoin d'être incroyable, il s'agit juste de montrer les interactions. Donc, même si ça a l'air un peu démodé en termes de textes, de styles et de tout ça, c'est toujours bon. A bientôt. 7. Documenter l'interaction: Maintenant, vous avez à peu près terminé la conception de l'interaction, bien fait. Mon prototype est encore assez rude, donc dans la vraie vie, je travaillerais avec le design visuel pour finaliser ce à quoi il ressemble dans l'espacement avant de le remettre au développement. Selon l'endroit et la façon dont vous travaillez, dépend de la façon dont vous devez gérer la conception d'interaction. Si vous êtes une agence qui ne fait pas de développement, tout le développement est externalisé, alors peut-être que vous avez besoin d'un document d'exigences vraiment épais avec un champ vraiment spéculé, moqué en disant, « Quand vous cliquez sur ceci, cela arrive , cela se produit ensuite. C' est l'ordre du lecteur d'écran. » Tout ce détail vraiment grossier. Peut-être que vous travaillez quelque part qui a déjà un guide de style assez complexe, donc vous n'avez pas besoin de vous embêter à spécifier toutes ces petites minuties. Mais peu importe lequel c'est, avoir une documentation aidera. Vous pouvez ne pas être là quand ils le ramassent, ou il peut y avoir un certain décalage entre le moment où vous terminez le design et le moment où il est ramassé et les gens peuvent oublier l'interaction. Ce que j'aime faire, c'est partager le prototype, partager les images, et pour tout ce qui est complexe, le documenter. Cela pourrait être juste du texte, faire dans Sketch, l'annoter , le marquer, juste avec des images , des symboles, des mots, ou avec un plug-in, ou vous pouvez enregistrer une vidéo du prototype utilisé, et parlez-en ou ajoutez de petites boîtes pour entrer et s'envoler. Encore une fois, tout dépend du temps dont vous disposez, de la façon dont vous êtes occupé, et de la complexité des interactions. Cela vaut-il la peine de passer une demi-journée à se moquer de ça, ou est-ce juste une perte de temps que personne ne va regarder, quelqu'un va lire le menu ? Sinon, ne perdez pas votre temps. J' aimerais faire une combinaison. Je vais juste parcourir un exemple de la façon dont je documenterais cela si c'était un vrai produit. Ce que je ferais dans Word, ou Confluence, ou n'importe quel outil que vous utilisez, c'est d'avoir ce que le produit est un lien vers le prototype. Il suffit de copier l'URL réelle, dire à qui appartient le projet, donc à qui venir pour des questions, puis aussi avoir des liens vers l'endroit où j'ai mis les images individuelles avec les commentaires. C' est parce que tout le monde n'aura pas Sketch, donc ils ne pourront pas le télécharger. Je vais souvent les copier et les coller soit dans ce document, soit dans un endroit où ils sont visibles. En termes de documentation réelle, je vais juste bouger donc j'ai un peu d'espace entre les appboards, et entre les appboards je vais mettre du texte. Lorsqu' ils cliquent sur ce bouton, ils passent à la page suivante. Une fois qu'ils ont sélectionné le type de café qu'ils veulent, le film utilise la divulgation progressive, sorte qu'il montre le champ suivant qui doit être sélectionné. Il déplace ensuite ce qui a été sélectionné vers le haut dans ce mode d'édition, avec la possibilité de cliquer, modifier et de revenir en arrière. Maintenant, j'ai décidé d'ajouter un lien supplémentaire ici pour montrer ce processus. Je pourrais aussi me moquer d'où viennent différentes choses. Je me moque que les détails de la commande s'effondrent une fois que vous arrivez à l'écran suivant afin que tout soit sur une seule ligne. 8. Recap - Conception d'interaction: Maintenant, vous savez ce qu'est la conception d'interaction. Tout à voir avec la façon dont l'utilisateur interagit avec votre produit au fil du temps. Pas seulement le look et la sensation. Vous connaissez les étapes à suivre pour créer les flux utilisateur, un diagramme des étapes qu'un utilisateur prend ou les écrans qu'il traverse. Comment esquisser l'interface, réfléchir à la façon dont vous pourriez concevoir les écrans, comment faire des filaires. Encadrer ces conceptions et penser à travers quels composants interactifs utiliser, prototyper Next, faire un prototype interactif pour tester et mieux montrer les interactions. Enfin, documenter pour communiquer vos dessins. N' oubliez pas que vous n'avez pas besoin de suivre toutes ces étapes pour chaque projet. Cela dépend de la taille des pièces, si c'est juste un petit changement et vous pouvez juste marquer dans le navigateur vous-même, ou si c'est un grand projet Greenfields où vous allez vouloir faire toutes ces étapes. Au fur et à mesure que vous aurez plus d'expérience, vous apprendrez quand vous pourrez décider des étapes à suivre et celles à suivre. Cela nous amène à la fin de l'Interaction Design 101. Veuillez suivre mon profil et passer en revue la classe. Si vous l'avez aimé, faites passer le mot. Bonne chance pour vos carrières en design d'interaction. Je vais rendre toutes les diapositives disponibles et les télécharger afin que vous puissiez les consulter plus tard. Joyeux design.