Conception UX : Créer un prototype

1. Introduction: Hé là, merci d'avoir rejoint UX design, créez un prototype. Dans ce cours, nous apprendrons à créer un prototype interactif cliquable à présenter à vos clients. Nous commencerons par nous lancer dans des recherches UX, explorer vos idées et les encadrer, créer votre prototype, puis présenter vos idées à vos clients. Mais d'abord, laissez-moi me présenter. m'appelle Ginny et je suis un designer UX et un directeur créatif. J' ai commencé en tant que spécialiste en graphisme à la School of Visual Arts de New York. J' ai travaillé en tant que directeur artistique dans la publicité pendant trois ans avant passer à la conception web parce que j'ai vraiment aimé HTML et CSS. J' ai pensé que je voulais être un développeur frontal pendant un certain temps, mais c'est à ce moment que j'ai commencé à travailler en étroite collaboration avec un concepteur de produits ou un designer UX et je suis vraiment tombé amoureux de ça. Il a satisfait le côté geeky de moi qui aime la recherche et les preuves et les données et j'ai trouvé que la recherche UX et la conception UX ont vraiment bien fonctionné avec ma personnalité. Dans ce cours, vous travaillerez sur une application fictive appelée Tutz musical collaboration application mobile qui nécessite quelques améliorations de convivialité. Tous les exemples de fichiers vous seront fournis de sorte que l'objectif principal de cette classe, nous allons vous apprendre à passer à travers un processus UX typique au lieu de tout concevoir vous-même à partir de zéro. Vous apprendrez à aborder un projet en tant que chercheur et concepteur de l'UX. Cette classe est ouverte à tous les niveaux, mais elle peut être plus facile pour ceux qui ont accès à des programmes graphiques, tels que sketch ou Illustrator même ou Photoshop, tout ce qui peut gérer des graphiques. À la fin de ce cours, vous aurez un projet UX complet à mettre en valeur dans votre portfolio et également à présenter dans la galerie de travaux de Skillshare. Je vous encourage à partager votre projet avec d'autres et surtout au fur et à mesure que vous progressez dans leur projet pour obtenir des commentaires. Il y a un canal incroyable dans notre jardin avec galerie de projets de Skillshare où vous pouvez partager votre travail. Quoi qu'il en soit, je pense que tu seras fière de ce que tu avec ça d'ici la fin de ce cours. Commençons. 2. Exigences du projet: Salut, bienvenue. Je suis excité de passer par ce voyage avec vous alors que vous créez votre prototype. Il peut y avoir une petite courbe d'apprentissage, surtout si c'est la première fois que vous travaillez dans Sketch ou un autre programme de conception graphique. Mais avec un peu de pratique, vous naviguerez à travers ces outils en un rien de temps. Sois patient avec toi-même. Retournez toutes les pensées décourageantes parce que nous devons tous commencer quelque part. Mais je suis excité de passer par ça avec toi. Voici nos exigences. Équipement. Vous aurez besoin d'un ordinateur portable ou de bureau, d'applications graphiques telles que Sketch, Adobe XD, Photoshop, Illustrator ou quelque chose de similaire. Les forces et les faiblesses de chacun de ces programmes dépendent de leur but. Je préfère Sketch parce que c'est vraiment pour le prototypage. Adobe XD, même si je n'ai aucune expérience avec cela, j'ai entendu des choses merveilleuses à ce sujet. Illustrator est correct parce que vous pouvez créer de bons filaires en cela, bien que ce ne soit pas vraiment un programme d'application Web. Photoshop, bien qu'il rend les composants Web mieux qu'Illustrator, il ne s'agit pas non plus d'un programme filaire ou d'application Web. Aperçu du projet. Nous apprendrons à analyser la recherche UX, les idées filaires, valider ces idées en effectuant notre propre recherche UX légère, créer un prototype et à présenter ce prototype. Ressources de classe. Nous aurons quelques exemples de recherche UX que je vais fournir pour le bien de cette classe. Nous disposerons également d'un exemple de conception TUTZ sous forme fichier Sketch ou PNG que vous pourrez importer dans n'importe quel programme graphique que vous choisissez d'utiliser, et nous aurons également un exemple de configuration requise et documentation contenant les besoins des parties prenantes et des entreprises. Une fois que tous ces éléments seront téléchargés, nous serons prêts à commencer le cours. 3. Analyse des recherches UX: Salut, bienvenue. Si vous visionnez cette vidéo, signifie probablement que vous avez vu la dernière vidéo avec les exigences du projet et que vous vous sentez prêt à démarrer le projet de classe. Super. En tant que rafraîchisseur, nous allons travailler sur une application mobile fictive appelée Tutz, qui est une application de collaboration musicale. Il permet aux utilisateurs de télécharger des fichiers audio qui contribueront finalement à une chanson originale. Dans ce cours, vous allez entrer dans l'esprit d' un designer UX engagé par votre client Matt, qui veut que vous amélioriez la convivialité de l'application Tutz et il a quelques documents pour le prouver. Matt vous donne de la documentation de travaux précédents et vous dit qu'il y a des commentaires des utilisateurs et de ses collègues que la page Upload, la page que les utilisateurs utilisent pour télécharger leurs fichiers audio, a été frustrante et déroutant à utiliser. Cela a causé la perte d'affaires de Tutz en raison de la mauvaise convivialité, et Matt a besoin de votre aide pour l'examiner et fournir des solutions le plus rapidement possible. Donc c'est le plus vite, n'est-ce pas ? Vous remerciez Matt et trouvez un endroit calme pour regarder la documentation du projet. Maintenant, regardons le document de Matt. Il est important de noter que toutes les entreprises gèrent leurs processus UX différemment et que l'ampleur des projets sur lesquels vous travaillerez variera. Pour le bien de ce cours, nous resterons simples afin que vous puissiez comprendre les bases. En lisant les documents, il est évident que l'objectif de Matt est d'améliorer la facilité d'utilisation de la page Charger, mais en particulier de rendre le processus de téléchargement et de collaboration plus intuitif. Cela signifie que les utilisateurs ne trouvent pas but et la fonctionnalité de cette page particulière très clairs. Nous savons maintenant que le document de Matt a des preuves montrant beaucoup de confusion vécue par les utilisateurs, mais c'est notre travail en tant que concepteur UX de comprendre pourquoi. Si nous regardons en arrière le document de Matt, il veut que nous nous en tenions au guide de style de couleur et à la police de caractères en minuscules. C' est important car beaucoup d'entreprises ont leur propre image de marque et vous voudrez y adhérer. Il veut également s'assurer que les graphismes sont hautement reconnaissables. Nous devons également nous assurer que le bouton Charger est plus visible, et il se peut que nous devions changer le CTA ou l'Appel à l'action pour être plus intuitif pour l'utilisateur final. Enfin, il veut maintenir une sensation de fraîcheur et de dynamisme pour attirer son public principal qui sont les jeunes utilisateurs, peut-être le collège à la fin de la trentaine ou de la quarantaine. Lors de l'analyse des notes de Matt, vous devrez écrire vos questions ou vos préoccupations concernant le produit pour d'autres tests, que nous aborderons dans cette classe. Certaines questions que vous voulez vous poser sont, quel était le but de l'utilisateur ? Quel était l'objectif du chef de produit ? Ils se sont alignés ? Pourquoi ou pourquoi pas ? Ont-ils atteint leurs objectifs ? Pourquoi ou pourquoi pas ? Une autre question pourrait être que se passe-t-il dans la vie des utilisateurs finaux qui pourrait avoir une incidence sur leur perception du produit ? Est-ce la solution à enlever ou à ajouter plus au produit ? Il est important de bien comprendre les objectifs du produit afin que vous puissiez comprendre ce qui l'empêche d'atteindre ses objectifs afin que vous puissiez fournir la meilleure solution possible. Dans la prochaine leçon, nous allons apprendre comment prendre vos recherches UX et les transformer en trames filaires. Alors avançons. 4. Wireframe: Hé, bienvenue. Dans cette leçon, vous allez prendre l'analyse de la dernière vidéo et trouver des moyens d'aborder les hypothèses et les solutions potentielles par le biais du filamage. À ce stade, vous pouvez commencer à utiliser une application graphique, telle que Sketch ou Balsamiq ou d'autres outils filaires pour commencer à esquisser certaines idées. Mais il est toujours correct d'utiliser du papier et du stylo pour cette partie aussi. Allons plonger dedans. Sur cet écran, nous regardons les écrans Tutz. Le premier écran est l'écran de lancement avec un appel proéminent à l'action dit commencer maintenant. Le second est la page de téléchargement, qui est la page problématique selon votre client, et les troisième et quatrième écrans nous montrent les flux de travail associés à la fonctionnalité de téléchargement. Maintenant, pour cette leçon, nous allons faire semblant que Matt, notre client, nous a donné accès aux fichiers de conception natifs originaux créés par un concepteur précédent. Étant donné que ce sont des maquettes en couleur et que nous voulons être en phase de filature en ce moment, nous allons vouloir faire en sorte que cela ressemble plus art conceptuel plutôt qu'à l'art final autant que possible. La raison en est que la plupart des clients ont du mal à regarder fils colorés et ne pas penser que c'est le produit final. Afin de contourner ce problème commun, nous allons vouloir convertir ces maquettes colorées en noir et blanc. Ce que j'ai fait est de créer une page séparée dans Sketch avec les dessins de couleur originaux et de convertir les tableaux d'art colorés en noir et blanc afin de transmettre le message, que nous examinons les concepts et l'architecture d'information, plutôt que des composants d'interface utilisateur brillants. Avant de commencer à filer, juste un mot de conseil. N' ayez pas peur de montrer des idées dès le début de la phase de filature. Parce que plus vous obtenez de l'adhésion de vos clients ou de votre responsable de produits tôt, moins vous passerez de temps à numériser et à renumériser des idées qui n'ont pas été approuvées. Comme vous pouvez le voir, nous regardons les écrans noir et blanc nouvellement convertis, et nous essayons d'envelopper notre tête sur les améliorations UX que nous devrions apporter. À ce stade, nous voudrons revenir au document des exigences de Matt, et au bas de la page, j'ai ajouté quelques hypothèses basées sur la recherche et ma propre intuition du comportement standard des utilisateurs pour les applications en ligne. Les hypothèses indiquent que, utilisateurs ne savaient pas où se trouvait le bouton de téléchargement parce que le bouton de texte se perdait et serait plus visible s'il s'agissait d'un bouton de texte graphique qui était affiché de façon plus visible sur l'écran. Les dernières contributions prennent également trop de place. Enfin, le bouton fléché violet est déroutant pour les utilisateurs en raison de son emplacement proéminent et devient confus pour une action de téléchargement. Cela a du sens. Comme il s'agit d'une page de téléchargement et que les utilisateurs devraient naturellement s'attendre à ce que le bouton actionnable soit une action de téléchargement, il serait logique de changer cette interface utilisateur et l'architecture d'informations pour être intuitive comme ça. Après avoir digéré ces hypothèses, nous pouvons naturellement arriver à quelques conclusions et recommander que, nous modifions le lien de téléchargement de texte en un bouton graphique. Nous allons déplacer le bouton de téléchargement graphique vers un emplacement bien en vue, ou simplement remplacer le bouton de lecture par celui-ci. Nous pouvons rendre le bouton de lecture plus connecté visuellement à la dernière section des contributions car ils sont liés dans l'information et une action. Nous pouvons également rendre la dernière section des contributions moins importante aussi. Passons maintenant au filage réel. Ce que je vais faire maintenant, c'est copier et coller ce tableau d'art en appuyant « Option Shift » sur mon MacBook et faire glisser une version du tableau d'art vers le bas. Maintenant que nous avons une copie de la page de téléchargement, je vais créer un nouveau bouton pour remplacer ce bouton de lecture qui invitera les utilisateurs à télécharger leur fichier audio plutôt que de lire la pièce de collaboration qui a été téléchargée par les utilisateurs. Je vais regrouper le bouton de lecture et l'audio graphique et le faire glisser pour l'utiliser plus tard. La prochaine chose que je veux faire est d'ajouter le bouton de téléchargement, et comme je sais qu'il y a un bouton existant utilisé dans l'interface utilisateur sur l'écran de lancement, je vais juste le copier et le coller dans mon nouveau tableau d'art. Comme il s'agit d'un fond blanc, je vais changer la couleur de remplissage en gris foncé et changer le texte en blanc. Rappelez-vous que c'est juste un filaire de sorte que les couleurs ne sont pas définitives. Je voudrais également changer le texte pour quelque chose de plus intuitif tel que, « Charger votre fichier » ou « Charger votre fichier audio ». Je vais également développer le bouton pour que le texte s'adapte, et centrer le bouton sur l'écran. regardant, je veux supprimer le point d'exclamation sur le bouton car il semble beaucoup plus propre de cette façon. Maintenant que nous avons le bouton de téléchargement avant et centre, nous pouvons nous débarrasser de l'ancien lien de texte pour le téléchargement. Déplaçons un peu le bouton de téléchargement, juste pour l'instant pendant que je joue avec l'espace. Maintenant, je veux ramener le bouton de lecture dans le mix et combiner visuellement avec la dernière section de contribution. Depuis le bouton de lecture et les dernières contributions sont liées. Quand je reviens aux notes de Matt, il mentionne que la dernière section de contribution prend beaucoup trop de place et est en concurrence avec le bouton de téléchargement. Bien que cela puisse être vrai. Je vais juste laisser ce commentaire seul pour cette leçon juste pour voir si Matt serait accord pour rendre la dernière section de contribution la même taille ou même un peu plus grande, puisque nous avons un bouton de téléchargement de votre fichier qui est très grand et bien en évidence affiché sur l'écran. Pour l'instant, je vais déplacer le titre des dernières contributions vers le haut afin que je puisse adapter le bouton de lecture dans cette zone. Je vais déplacer le graphique en arrière et modifier un peu la taille, puis je vais ramener le bouton de lecture et le rendre plus petit afin qu'il ne soit pas visuellement en concurrence avec le CTA principal, qui est pour le téléchargement. Maintenant, les autres pages sur lesquelles nous voulons nous concentrer sont les pages de téléchargement qui contiennent le flux de travail de téléchargement. Ce flux de travail commence lorsqu'un utilisateur clique sur le bouton Télécharger votre fichier, ce qui déclenche un gestionnaire de fichiers qui apparaît en bas de l'écran. L' utilisateur clique sur le fichier qu'il souhaite ou y navigue, puis une fois qu'il est téléchargé, le nom du fichier apparaît sur l'écran suivant en tant que contribution la plus récente. Je vais zoomer et faire la même chose qu'avant, qui est de copier et coller le tableau d'art original en cliquant sur « Option Shift » et en faisant glisser une copie vers le bas. Je vais zoomer dessus, et maintenant je vais m'attaquer aux raisons pour lesquelles l'utilisateur est confus par ce processus. Le flux de travail actuel de Tutz a un utilisateur atterrit sur ce gestionnaire de fichiers après avoir cliqué, téléchargez votre fichier, mais je suppose que l'utilisateur devient confus pendant cette étape car il n'y a pas d'appel évident à l'action sur ce gestionnaire de fichiers. Il y a une incohérence dans l'expérience utilisateur à cause de cela, parce que Tutz utilise des boutons proéminents partout ailleurs, sauf ici. Cette incohérence risque de confondre l'utilisateur final, car il s' attend à ce que les mêmes actions globales soient identiques dans l'application. Ce que je veux faire est de résoudre ce problème en ajoutant des boutons similaires au bouton de téléchargement de votre fichier que je viens de terminer plus tôt, et de le copier et de le coller sur ce tableau d'art. Je vais le placer au bon endroit en l'amenant au bas de l'écran, et ajuster la taille de la police et la taille du bouton pour donner à l'utilisateur l'impression qu'il s'agit d'une action importante mais secondaire sur la page. Maintenant que c'est fait, je vais faire un zoom arrière, et comme vous pouvez le voir, l'original est en haut et ma version révisée est en bas. C' est probablement là que je m'arrêterais et montrerais mes idées à mon client ou à mon chef de produit pour obtenir des commentaires anticipés. Il est important d'être prêt à répondre à leurs questions et à défendre vos décisions de conception. Maintenant que vous avez votre premier filaire sous votre ceinture, nous allons apprendre à valider vos idées en exécutant un test utilisateur simple. La rétroaction est très importante au cours de cette étape avant le prototypage, et elle peut être très itérative. Mais à la fin, vous serez beaucoup plus heureux avec le produit final. se voit dans la leçon suivante. 5. Validation des Wireframes: Salut, bienvenue. Dans la dernière leçon, nous avons appris sur le filage et quelques bonnes pratiques en matière de filature. Dans cette leçon, nous allons apprendre à valider les idées dans vos filaires en exécutant un test de convivialité. Un test d'utilisabilité est une méthode pour recueillir des commentaires sur la façon dont quelque chose est utilisable. C'est ça. Bien qu'il existe de nombreuses façons de faire des recherches UX et des tests de convivialité biais de tri de cartes ou de sondages ou de tests A/B, la méthode que nous allons aborder dans la leçon d'aujourd'hui est un test modéré en personne. C' est quand un modérateur tel que vous-même conduit un utilisateur à travers une série de questions et d'actions pour observer ses commentaires sur un produit. La plupart des problèmes auront de nombreuses solutions différentes possibles, mais l'avantage des tests de convivialité est que vous serez en mesure de réduire les meilleures solutions possibles pour votre application, pour votre audience. Maintenant, pour les tests de convivialité, vous voudrez garder certaines choses à l'esprit. Numéro un, en définissant la tonalité de l'utilisateur. Vous voudrez garder l'environnement propre, exempt de distractions et confortable pour l'utilisateur. L' utilisateur devrait également se sentir à l'aise et vous pouvez le faire en les réchauffant avec quelques questions au début. Vous pouvez leur poser des questions comme quel est leur nom, leur profession, que faites-ils de leur temps libre, quelle fréquence utilisent-ils leur ordinateur, leur appareil mobile, à quel point sont-ils techniquement avertis ? Cela va les habituer à parler à haute voix et à parler en général, pour les amener à vous donner leurs commentaires naturellement pendant que vous allez au test de convivialité. Les questions que vous devriez poser à l'utilisateur devraient être très neutres sans préjugé. Ils devraient être formulés de manière à vous aider à évaluer plus tard pourquoi l'utilisateur a réagi de cette façon. Par exemple, vous voudrez formuler votre question de manière ouverte, donc au lieu de leur demander  : « Avez-vous trouvé ce bouton déroutant ? » Vous pouvez leur demander  : « Qu'est-ce que vous ressentiez en regardant ce bouton ? » Ils vous répondent et vous pouvez leur demander : « Pourquoi ? » Pour vous aider, j'ai fourni un lien vers un très célèbre script de test d'utilisabilité trouvé sur ce lien. Numéro deux, recruter des utilisateurs. Pour l'amour de cette classe, nous allons vous demander de recruter un seul utilisateur alors qu'il est idéal d'avoir normalement cinq, sept, 12, 50 à 100 utilisateurs parfois. Mais pour des raisons de timing et juste pour vous apprendre les bases, nous nous en tiendrons à un seul utilisateur. Les critères que nous recherchons sont mentionnés dans le document de Matt. Ils sont, numéro un, entre 14 et 40 ans. Numéro deux, ils devraient posséder un smartphone. Numéro trois, utilise fréquemment les médias sociaux parce qu'il s'agit d'une application sociale, et numéro quatre, ils devraient aimer la musique. Certaines façons de recruter des participants sont peut-être par une annonce en ligne ou une annonce dans le journal, canaux en ligne comme testing.com ou même des tests de trottoir, où vous pouvez aller dans un espace public et simplement trouver des personnes qui sont prêt à vous parler. L' astuce est, comment pouvons-nous inciter les gens à participer à l'étude ? Dans mon expérience personnelle, les utilisateurs qui sont encouragés en se voyant offrir une carte-cadeau ou une sorte de récompense, ont donné beaucoup de meilleures réponses et sont également apparus pour l'étude des utilisateurs. Voici une liste des moyens que j'ai trouvés efficaces pour recruter des gens et les encourager. Numéro un, offrez une carte-cadeau, n'importe quoi de 25 à 100$ selon la durée de votre étude. Numéro deux, offrez de l'argent, comme 50 dollars pour une heure de leur temps. Numéro trois, offrez la chance de gagner un cadeau ou une carte-cadeau d'un montant plus élevé, comme 200$ par exemple, ou quelque chose comme un iPad même. Cela fonctionne bien si vous devez recruter beaucoup de gens et que vous n'avez tout simplement pas le budget pour les payer individuellement. Une fois que l'utilisateur est installé dans son environnement de test, il est temps de faire le test. Les méthodes de chacun vont être un peu différentes en raison de leur type de personnalité et de leur méthode de test préférée. Mais je vais vous montrer la méthode que je préfère qui a été la plus utile pour moi et la plus efficace pour moi. Plus important encore, je rappelle à l'utilisateur de penser à haute voix. Numéro un, affichez le produit dans son état actuel. Signification montrer la version du produit ou du design qui est sorti en ce moment. Numéro deux, demandez à l'utilisateur de donner des commentaires sur ce produit en l'observant sans cliquer d'abord, et en donnant des commentaires après avoir interagi avec le produit. Numéro trois, montrer à l'utilisateur la conception proposée. Doivent passer par le même processus de rétroaction par l'observation, puis leur demander de donner une rétroaction après avoir interagi avec elle. Numéro quatre, donnez-leur une tâche à effectuer, c'est une analyse de tâche. Bien qu'il ne soit pas idéal d'avoir un filaire papier non interactif pour effectuer une analyse de tâches, vous pouvez néanmoins recueillir beaucoup de commentaires utiles pour des tâches simples liées à la navigation et à la découverte des informations. Maintenant, ce que j'aimerais faire est pendant que je teste, j'aime enregistrer la session si l'utilisateur est à l'aise avec elle. Pendant le test, vous devriez noter les notes du mieux possible, mais c'est aussi pourquoi l'enregistrement est si important parce que vous ne pourrez pas tout attraper pendant que vous notez des notes, et que vous ne voulez pas continuer à demander pour répéter ce qu'ils font parce que ce ne sera pas un vrai comportement à ce stade, donc l'enregistrement plus la prise de notes est vraiment important pour l'analyse plus tard. Dans la leçon suivante, nous allons entrer dans les trucs amusants, le prototypage, alors restez à l'écoute. 6. Prototyping: Hé les gars, bienvenue. C' est l'heure de la partie amusante, du prototypage. Dans cette leçon, nous allons prendre les trames de la leçon précédente et les utiliser comme structure pour construire nos conceptions. Juste une tête haute, nous allons sauter à travers certains processus UX, tels que l'itération pour arriver au prototypage, dont je suis sûr que tout le monde est excité. Allons plonger dedans. Comme vous pouvez le voir, nous regardons les fils noirs et blancs de la leçon précédente, mais maintenant nous allons passer en revue ce qui s'est passé après qu'ils ont été validés par des tests utilisateur. Ce sont les originaux sur la rangée du haut ici. Ces notes en rouge sont mes notes de test utilisateur, sorte que je les ai toujours sous la main pour me référer, car je filature des idées. Dans la deuxième rangée, nous avons les nouveaux filaires que nous avons testés par l'utilisateur pour obtenir des commentaires, comme vous pouvez le voir ici. Mais parce que nous avons testé par l'utilisateur pour valider nos filaires et recueilli de nouveaux commentaires, cela m'a amené à repenser mon approche initiale de la refonte du téléchargement de Tutte, ce qui arrive beaucoup aux concepteurs UX lorsque nous testons. En raison des nouveaux commentaires, j'ai décidé de trouver un nouvel ensemble de filaires pour répondre aux commentaires de notre session de test utilisateur. Ces nouveaux filaires créés après validation sont ici dans cette troisième ligne, ici, marquée par le titre version 3. La page de téléchargement a changé et j'ai déplacé le bouton de lecture vers le haut, et j'ai déplacé mon bouton de téléchargement vers le bas. J' ai aussi changé le texte, comme vous l'avez remarqué. Les dernières contributions ont été changées en taille et en importance suite aux commentaires que j'ai reçus. J' ai également ajouté des écrans de flux de travail supplémentaires, que je reviendrai plus en détail un peu plus tard. Le nouveau flux implique, l'utilisateur débarquant sur la page de téléchargement, l'utilisateur clique sur le bouton de téléchargement de fichier audio, le gestionnaire de fichiers étant déclenché après que le bouton de téléchargement de fichier audio est cliqué, l'utilisateur étant en mesure de sélectionnez le fichier ou recherchez un fichier pendant que le téléchargement maintenant CTA est grisé et désactivé jusqu'à ce qu'un fichier soit choisi. L' utilisateur sélectionne un fichier qui est affiché par une bordure brillante en surbrillance autour du nom de fichier, et le bouton de téléchargement devient actif, ce qui est indiqué par une couleur active. Une fois qu'il a été téléchargé et que le téléchargement a réussi, un écran de réussite apparaît, qui disparaît après quelques secondes. Enfin, l'utilisateur atterrit sur l'écran final qui montre que l'utilisateur vient de télécharger un fichier audio dans la dernière section des contributions. Maintenant que nous avons tous les workflows approuvés et votre client est heureux et que vos utilisateurs sont généralement satisfaits, nous allons vouloir nous moquer de cela. Puisque cette classe ne couvre pas comment utiliser l'esquisse en profondeur, j'ai déjà créé les maquettes colorées pour vous, qui seront les maquettes que nous utilisons pour créer le prototype interactif. Nous pouvons voir comment les couleurs de la marque et l'interface utilisateur ont été ajoutées pour donner à cette application le look et le sentiment qu'il manquait lors du cadrage de fil. Tous ces composants d'interface utilisateur ont été tirés des notes de correspondance et des paradigmes de conception existants des produits actuels. Mettons ce prototype ensemble. Comme vous pouvez le voir, j'utilise sketch pour le prototypage. Pour ceux d'entre vous qui utilisent d'autres applications graphiques telles que Photoshop ou Illustrator, ne vous inquiétez pas. Je vais fournir des conseils à la fin de cette leçon pour expliquer comment faire un prototype de base avec Photoshop et avec Adobe Acrobat. Ce que j'aime dans l'esquisse, c'est que vous pouvez créer des hotspots ou des hotlinks qui connectent les écrans de sorte qu'il semble qu'un utilisateur se déplace dans un flux de travail. La première chose que je veux faire est, sélectionnez un point de départ pour mon prototype, allant dans le menu et en cliquant sur le prototypage, et sélectionnez Utiliser le plan de travail comme point de départ dans le menu déroulant. Cela garantit que notre prototype démarre toujours sur l'écran correct chaque fois que vous présentez aux clients. Comme vous pouvez le voir, ce plan de travail a maintenant un petit drapeau indiquant qu'il s'agit du point de départ. Maintenant, sélectionnons le point de départ Plan de travail, et cliquez sur la touche « H », qui est un raccourci vers l'action de lien de raccourci. Ceci est indiqué par la souris, qui a maintenant converti en flèche squiggly. Cela signifie que nous sommes maintenant prêts à commencer à relier certains éléments et à devenir interactifs. Si vous vous en souviendrez, l'utilisateur est censé cliquer sur le bouton Télécharger mon fichier audio afin de télécharger sa musique. Ce que je vais faire est, faire glisser une zone de hotlink autour de ce bouton, en commençant par le haut à gauche et en faisant glisser vers le bas à droite. La zone que vous venez de déplacer est mise en surbrillance en orange. Maintenant, vous pouvez voir une queue apparaitre, que nous allons utiliser pour lier à l'écran suivant du flux de travail. Si je passe la souris sur le plan de travail suivant, il le sélectionnera automatiquement pour moi comme indiqué par le surlignement orange. Lorsque quelqu'un clique sur le bouton Télécharger mon fichier audio, il est transféré à l'écran suivant, qui affiche le gestionnaire de fichiers. Maintenant, je vais choisir le plan de travail avec le Gestionnaire de fichiers. Puisque l'utilisateur est censé sélectionner le fichier ici, particulier le fichier en haut à gauche, je vais créer un hotlink en cliquant à nouveau sur H sur cette image de fichier, et faites glisser la queue sur l'écran suivant affichant le en surbrillance avec le bouton de téléchargement actif maintenant CTA. De là, je veux que l'utilisateur sache qu'il a sélectionné un fichier, ce que nous avons fait sur l'écran précédent. Je veux qu'ils cliquent sur le bouton Télécharger maintenant CTA pour télécharger officiellement le fichier à l'application. Je vais cliquer à nouveau sur H, faire glisser sur le bouton, puis je vais choisir l'écran suivant. Puisque l'écran suivant a un comportement qui ne nécessite aucune interaction comme un clic dessus, puisqu'il disparaît seul après quelques secondes, c'est le bon moment pour parler au client à travers le comportement. Je vais sélectionner l'ensemble du plan de travail comme hotlink. Comme je l'ai expliqué au client, que l'écran de succès s'estompe après quelques secondes et affiche finalement l'écran de flux de travail final des dernières contributions avec le fichier audio nouvellement ajouté. Avec le dernier écran, je n'ai pas besoin de créer de hotlink car c'est là que le flux de travail se termine, et nous avons fait notre travail d'amélioration de la fonctionnalité de téléchargement qui croise nos doigts. Nous voulons juste que le client voit le flux de travail à travers le prototype simple mais clair que nous venons de créer. Maintenant, voyons à quoi ressemble la vue de présentation du prototype, puisque c'est ce que vous allez présenter à votre client et c'est ce que le client verra réellement. Dans le croquis, nous avons une façon vraiment facile de le faire. En haut à droite, il y a un petit bouton orange qui indique l'aperçu, lequel nous allons cliquer. Comme vous pouvez le voir, il va directement au point de départ Plan de travail qui a été marqué avec le drapeau. C' est la fenêtre que nous allons utiliser pour présenter à notre client, nous en apprendrons plus dans la prochaine leçon. Essayons ça. Ce que l'utilisateur va faire est, atterrir sur cette page et télécharger son fichier audio. Vous pouvez voir les changements de souris lorsque je survole le bouton principal de téléchargement, et une fois que je clique dessus, cela nous amène au gestionnaire de fichiers. Le fichier que nous voulons télécharger est appelé Cowbell, donc nous sélectionnons cela, et voyons qu' il est mis en surbrillance et que le CT est actif. Nous allons cliquer dessus et voir que cela a été réussi, et nous n'oublierons pas d'expliquer au client que l'écran de réussite s'estompe seul après quelques secondes. Je vais cliquer n'importe où sur l'écran après avoir fini expliquer et enfin atterrir sur le dernier écran, qui est des dernières contributions où vous venez télécharger Cowbell5 Mp3 à la pièce de collaboration tout à l'heure. Bon boulot, toi. Pour les personnes qui utilisent d'autres applications pour construire vos prototypes tels que Photoshop ou Illustrator, mon conseil est d'avoir chaque écran similaire à ce que vous venez de voir dans le sketch comme sa propre page, qui peut ensuite être exporté en tant que PDF. À l'aide d'Adobe Acrobat, importez tous vos PDF dans un seul fichier avec toutes les pages dans le bon ordre, sorte que vous pouvez cliquer sur les boutons fléchés pour passer à travers chaque écran facilement, puis parlez simplement à votre client via le flux de travail, car il ne sera pas interactif. Dans la prochaine leçon, nous allons parler de présenter aux clients sans commettre des erreurs novices. Restez à l'écoute. 7. Présenter aux clients: Salut, bienvenue. Vous êtes dans le tronçon de la maison. Dans la leçon d'aujourd'hui, nous allons parler de présenter aux clients et d'éviter quelques erreurs novices. après mon expérience, j'ai appris que les clients soucient de quelques choses différentes plus que d'autres, et je vais les partager avec vous. Numéro un, le créatif. C' est le prototype que vous allez présenter à votre client avec les fonctionnalités améliorées qui devraient être passionnantes pour eux. Numéro deux, le rapport. Cela devrait contenir des informations de haut niveau et des données issues de vos résultats, et le numéro trois, les étapes suivantes. C' est là que vous proposez que le projet devrait aller. Lors de la présentation du prototype. Voici quelques éléments que vous voudrez peut-être garder à l'esprit pour votre présentation. Certains des Do. Expliquez le thème général du rapport et les objectifs que vous teniez d'atteindre. Numéro deux, expliquez comment vous avez obtenu des données. Numéro trois, expliquer la répartition des données en gros morceaux, pas trop granulaires. Cela peut être affiché à l'aide de graphiques, pourcentages et d'autres infographies. Numéro quatre, appelez des observations ou des données importantes, telles que des citations et une courte liste d'observations intéressantes que vous avez recueillies. Numéro cinq, terminez avec quelque chose de positif et encourageant pour les clients à s'enthousiasmer pour les prochaines étapes. Maintenant, pour certains des Don'ts. N' utilisez pas beaucoup de jargon de l'industrie. J' éviterais d'utiliser beaucoup d'acronymes aussi. Bien qu'elle nous soit familière, il pourrait être préférable de trouver d'autres façons de décrire cette liste, comme au-dessus du pli, événement de souris, FBO, ce qui signifie pour le placement seulement, l'analyse heuristique, l'hexadécimal, conformité 508, responsive, API, SVG, vecteur, PNG, et bien plus encore. Vous voudrez également expliquer vos décisions de conception lorsque vous parcourez un client à travers le prototype. Vous voudrez peut-être dire quelque chose comme, j'ai décidé d'utiliser ce bouton de couleur parce qu' il était cohérent avec l'interface utilisateur ou vous voudrez peut-être dire, j'ai décidé de rendre ce bouton plus petit parce que c'était une action secondaire et j'ai ne veulent pas distraire le CTA primaire. Maintenant, dans mon expérience personnelle lors de la présentation à des clients, j'ai constaté que les clients aiment certaines choses un peu plus que d'autres. Bien qu'ils aiment les données, souvent les gens n'aiment pas digérer les données elles-mêmes, donc ils veulent que d'autres personnes le fassent pour eux, donc ce que j'aime faire est de leur donner les données, mais j'aime aussi leur donner quelque chose sinon, les commentaires. Je trouve que les clients aiment les citations parce que c'est quelque chose auquel ils peuvent se rapporter. Ainsi, par exemple, vous pouvez leur donner un devis d'un client qui s'est vraiment distingué pour vous parce que très probablement il se démarquera pour eux. C' est ça, tu as bien fait. Dans la leçon suivante, qui est la dernière leçon, nous allons passer en revue quelques conclusions et quelques points à retenir. 8. Conclusion et prises de vues clés: ( CONTEXTE) Salut, tu l'as fait. Félicitations, pour avoir terminé ce cours. Vous avez accompli des choses étonnantes dans cette classe, telles que l'analyse de la recherche UX, réalisation de vos propres recherches, cadrage métallique, le prototypage et la présentation aux clients. J' espère que vous pourrez vous éloigner de cette classe, avec un sentiment d'accomplissement, et de confiance, que vous pourrez aborder, votre prochain projet UX, d'un point de vue bien équilibré. Voici quelques points à retenir, vous voudrez vous rappeler pour votre prochain projet UX étonnant. Avant de commencer un projet UX, assurez-vous de comprendre les exigences, objectifs et même les limites du projet. Essayez de lancer une nouvelle étude sur les utilisateurs pour acquérir de nouvelles connaissances sur le projet, surtout si la recherche précédente a plus de six mois. Le cadre métallique n'a pas besoin d'être fantaisie. Il est plus important, de trouver des cadres filaires de base, ou des croquis, et de répéter sur ces idées, plutôt que de passer beaucoup de temps, sur une trame filaire fastidieuse, présenter des informations de haut niveau, aux clients, et un langage non jargon, avec un prototype, qui est aussi proche, à fini que possible. Enfin, amusez-vous avec UX. N' oubliez pas de poster votre projet, en partage de compétences Galerie de projets, et n'oubliez pas de suivre, moi de rester informé de plus de cours UX. Bonne chance pour votre voyage vers UX Maîtrise.