Design iOS I : S'initier à l'UX | Kara Hodecker | Skillshare
Recherche

Vitesse de lecture


  • 0.5x
  • 1 x (normale)
  • 1.25x
  • 1.5x
  • 2x

Design iOS I : S'initier à l'UX

teacher avatar Kara Hodecker, Product Design Leader

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Leçons de ce cours

    • 1.

      Bande-annonce

      1:13

    • 2.

      Projet de cours

      4:55

    • 3.

      Aperçu de UX

      5:55

    • 4.

      Exemple de projet : Choisir une application

      10:40

    • 5.

      Définir des personnages d'utilisateur

      4:42

    • 6.

      Exemple de projet : Persona

      18:41

    • 7.

      Mappage du parcours des utilisateurs

      4:41

    • 8.

      Exemple du projet : Carte du voyage utilisateur

      24:55

    • 9.

      Commencez à faire l'ébauche

      3:59

    • 10.

      Exemple de projet : croquis

      13:20

    • 11.

      Prendre des croquis à Wireframes

      6:48

    • 12.

      Exemple de projet : Wireframes

      13:49

  • --
  • Niveau débutant
  • Niveau intermédiaire
  • Niveau avancé
  • Tous niveaux

Généré par la communauté

Le niveau est déterminé par l'opinion majoritaire des apprenants qui ont évalué ce cours. La recommandation de l'enseignant est affichée jusqu'à ce qu'au moins 5 réponses d'apprenants soient collectées.

5 805

apprenants

28

projets

À propos de ce cours

Bienvenue dans la première leçon de cette trois parties de cours de conception iOS. Tout au long de cette série, nous aborderons les bases de la conception d'expérience des utilisateurs, de l'interaction et de la conception visuelle, le prototypage et les tests d'utilisateurs, autant qu'ils ont à besoin de la conception pour mobile. Nous allons prendre particulièrement attention au parcours de l'utilisateur dans l'appli que vous concevez pour que vous puissiez obtenir une expérience claire et ciblée et que vous terminez avec des interactions et une belle et magnifique design intuitives. À la fin de la série, vous devriez vous sentir confiant vos compétences de conception iOS avec les outils et les techniques que vous avez apprises.

Ce cours est idéal pour les concepteurs de tous les niveaux. Nous allons commencer par les bases de UX et seulement quelques outils sont nécessaires. Les deuxième et troisième cours de la série nécessitent quelques connaissances de base de Photoshop.

Ce que vous apprendrez

Dans ce premier cours, je vous expliquerai les bases de la conception d'expérience des utilisateurs et de diverses techniques UX, notamment des voyages des utilisateurs, des esquisser et des wireframing. J'expliquerai pourquoi chaque étape du processus UX est importante et comment vous pouvez appliquer ces techniques à votre propre projet. Les sujets que nous allons aborder comprennent :

  • Un aperçu de la conception d'expérience d'utilisateur. Vous apprendrez à appliquer la pensée UX à la conception mobile et pourquoi la conception centrée sur l'utilisateur. Je vais partager des exemples d'applications qui font ce qui sont bien et d'autres qui ne sont pas aussi réussi.
  • Personnas d'utilisateurs. Je vous montrerai comment créer des personnas, pourquoi ils sont importants et comment les appliquer pendant le processus de conception.
  • Parcourues d'utilisateurs. Nous allons expliquer pourquoi ces sont si utiles et comment vous pouvez toujours tenir l'utilisateur pendant le design.
  • Croquis Ce n'est pas aussi simple que cela peut sembler ! Vous apprendrez quand commencer à dessiner, à quelle et comment les croquis détaillés doivent être.
  • Wireframes. Vous allez enfin vous poser sur l'ordinateur et faire un de la finalisation des détails bruts de votre application. Je vais partager mes outils et conseils préférés. Je vais partager les conseils préférés pour rendre le processus de wireframe rapide et efficace.


Ce que vous allez faire

Ce projet pour la totalité de la série sera de créer votre propre appli de voyage ou de repenser une applique. Pour le premier cours, vos livrables se concentreront sur UX. Vous partagerez les progrès à chaque étape du cours, avec un ensemble de fichiers de wireframes comme livrable final.

AUTRES COURS DE CETTE SÉRIE

Vérifiez rapidement pour savoir comment ces cours seront disponibles.

  • Conception iOS II : créer des interactions et des conceptions visuelles
  • iOS Design III : valider des conceptions avec des Prototypes et des tests d'utilisateurs

Rencontrez votre enseignant·e

Teacher Profile Image

Kara Hodecker

Product Design Leader

Enseignant·e

I'm currently designing at Panorama Education in Boston, MA. Previously, I spent five and half years at Evernote, where I led a team of product designers who were responsible for the core app experiences for both mobile and desktop. Prior to that, I had the opportunity to work with some incredibly talented designers at Yahoo!, Odopod, and Hunt & Gather.

Outside of work, my time is spent balancing between being with my two daughters and my patient husband, and pushing myself in CrossFit classes. I also love traveling whenever I get the chance, ice cream, and coffee way more than I probably should. You can also find me on dribbble, twitter, and linked in.

Voir le profil complet

Compétences associées

Design Design UI/UX Design pour mobile
Level: Beginner

Notes attribuées au cours

Les attentes sont-elles satisfaites ?
    Dépassées !
  • 0%
  • Oui
  • 0%
  • En partie
  • 0%
  • Pas vraiment
  • 0%

Pourquoi s'inscrire à Skillshare ?

Suivez des cours Skillshare Original primés

Chaque cours comprend de courtes leçons et des travaux pratiques

Votre abonnement soutient les enseignants Skillshare

Apprenez, où que vous soyez

Suivez des cours où que vous soyez avec l'application Skillshare. Suivez-les en streaming ou téléchargez-les pour les regarder dans l'avion, dans le métro ou tout autre endroit où vous aimez apprendre.

Transcription

1. Bande-annonce: Salut tout le monde. Je suis Kara Hodecker et je suis le concepteur de produit principal pour iOS chez Ever note. Je suis vraiment excité de partager ce que j'ai appris sur le design iOS. Que vous débutiez avec un design mobile ou que vous vouliez simplement un rafraîchissement. Cette prochaine série de cours est conçue pour vous aider à avoir une image complète du processus de conception. Nous allons couvrir bien plus que le design visuel. Dans cette première classe, je vous guiderai à travers les bases de la conception de l'expérience utilisateur et une variété de techniques UX, y compris les parcours utilisateur, l'esquisse et le filage. Je vais vous expliquer pourquoi chaque étape du processus UX est importante et comment vous pouvez appliquer ces techniques à votre propre projet. Votre projet de classe sera de créer votre propre application de voyage ou de repenser celle existante. Vous partagerez la progression de chaque étape tout au long de la classe avec un ensemble de filaires comme livrable final. Dans les classes suivantes de la série, nous choisirons ces projets de sauvegarde et passons à la conception visuelle, à la conception interaction, au prototypage et aux tests utilisateur. À la fin de cette série de cours, vous aurez conçu une belle et délicieuse application iOS. 2. Projet de cours: Salut. Bienvenue dans iOS Design 1, Mise en route avec UX. Dans cette première vidéo, nous commencerons avec votre mission de projet. Votre projet sera de concevoir une application iPhone en utilisant le thème du voyage. Vous pouvez trouver votre propre idée unique pour l'application, ou vous pouvez baser votre projet sur une application de voyage existante. Ce projet s'étendra sur les trois classes de cette série, sorte que vous allez terminer différentes étapes du projet dans chacune d'elles. Dans cette première classe, vous établirez les bases de votre application en choisissant ce qu'elle sera, quels sont les objectifs de l'utilisateur et comment votre interface prendra en charge ces objectifs. Pourquoi une application de voyage ? Les fonctionnalités des applications de voyage sont vraiment bien alignées avec les besoins des utilisateurs. Ces besoins sont assez faciles à identifier, donc cela aidera à éliminer une partie du travail de devinettes des premières étapes de la planification de votre application. Cela nous aidera aussi en tant que classe ensemble, puisque nous serons en mesure d'aborder des schémas et des problèmes similaires. Commençons par examiner certains besoins des utilisateurs qui sont pris en compte par différentes applications de voyage. Certaines de ces choses sont ; je veux réserver un vol aller-retour. Je veux rechercher des conseils, des visites et des points d'intérêt pour un endroit spécifique. Je veux comparer les hôtels par prix, emplacement et commodités. Je veux réserver un hôtel ou d'autres hébergements. Je veux un guide de voyage complet pour mes vacances. Prenez une minute pour réfléchir à ce qu'un utilisateur devrait faire pour chaque exemple. Ces étapes doivent être reflétées dans le flux de votre application et doivent être présentées à l'utilisateur de la manière la plus claire et la plus logique. Considérez ce qui est le plus important pour l'utilisateur à chaque étape et dans l'ensemble. Si un utilisateur souhaite réserver un vol, il se souciera probablement des prix, heures de vol, des escales et du transporteur aérien sur lequel il souhaite voler. Avant de commencer, jetez un oeil à plusieurs applications de voyage pour vous familiariser avec leurs flux et la façon dont les informations sont présentées à l'utilisateur. Décidez du type d'application de voyage que vous souhaitez créer ou de l'application que vous souhaitez réimaginer. Voici quelques exemples d'applications de voyage ; Tripadvisor, Kayak, Airbnb, Hotel Tonight, Expedia, Priceline, Hit Monk et City Guides par National Geographic. Toutes ces applications font des choses légèrement différentes, mais elles sont toutes centrées sur le voyage. Ceux-ci vous montrent l'étendue de l'application de voyage que vous pouvez essayer de créer. Voici un exemple de l'application Kayak. Ceci est un excellent exemple d'application de voyage multi-usage qui est toujours vraiment facile à utiliser. L' écran d'accueil présente à l'utilisateur toutes les options dont il dispose. De la recherche d'un hôtel ou d'un vol, au suivi et à la définition des alertes de prix. Une fois qu'un choix est fait, dans ce cas, de réserver un vol, l'étape suivante consisterait à affiner ce que vous cherchez. Les options sont simples et ce que l'utilisateur attend. Où vois-tu ? Quand ? Combien de voyageurs ? Lorsque les résultats de recherche sont retournés, vous verrez que les vols sont regroupés par compagnie aérienne et par prix. On y va. Vous pouvez ensuite effectuer une hiérarchisation vers le bas jusqu'à des heures spécifiques , des connexions et le nombre d'arrêts au sein d'un point de prix. Cela peut sembler un peu écrasant, mais je pense que Kayak fait un travail décent en vous permettant de comparer de nombreux vols sur un seul écran. Une fois que vous avez choisi un vol en particulier, vous verrez un autre écran qui détaille toutes les informations de vol et la possibilité de réserver. L' écran est un peu plus propre. C' est le dernier écran sur l'écran en ce moment. C' est un peu plus propre et organise l'information d'une manière beaucoup plus facile à analyser. Comment allez-vous commencer ? Vous allez d'abord faire quelques recherches initiales sur les applications de voyage et décider ce que vous souhaitez faire pour votre propre projet. Encore une fois, vous pouvez créer votre propre voyage tout ce que vous voulez faire, ou si vous vous sentez, je ne veux pas devenir aussi fou, juste prendre une application qui existe déjà et aller à partir de là, reconcevoir comme vous voulez. Ensuite, vous allez noter certaines fonctionnalités que vous souhaitez inclure dans votre application. Quels sont les besoins de l'utilisateur auxquels vous allez répondre ? Est-ce que la recherche va être un composant important de l'application ? Y aura-t-il beaucoup de contenu à organiser sur chaque écran ? Si vous recréez une application existante, vous devez toujours penser aux cas d'utilisation et aux besoins des utilisateurs, et comment votre reconception pourrait apporter des améliorations à l'expérience utilisateur globale. Dans la prochaine vidéo, je vais vous guider dans un aperçu de la conception de l'expérience utilisateur pour obtenir plus d'idées et vous préparer pour les leçons à venir. 3. Aperçu de UX: Bienvenue à l'unité 1, une vue d'ensemble de l'UX. Je voulais commencer aujourd'hui en partageant une citation de Steve Jobs, qui, je pense, capture assez bien le design [inaudible]. « Le design n'est pas seulement ce qu'il ressemble et se sent, design est la façon dont il fonctionne. » Pour commencer, il est vraiment important de comprendre ce que signifient la conception de l'expérience utilisateur et la conception centrée sur l'utilisateur. Pour définir la conception de l'expérience utilisateur, il se concentre sur la création d'un produit intuitif, facile à utiliser et agréable pour l'utilisateur. Avec une conception centrée sur l'utilisateur, les besoins, les objectifs désirs de l'utilisateur sont soigneusement pris en compte tout au long du processus de conception. Nous allons couvrir ces deux choses pendant que nous allons tout au long de ce cours. vous pensez à votre application et aux fonctionnalités que vous souhaitez inclure, assurez-vous de garder à l' esprit les considérations suivantes lorsque vous concevez spécifiquement pour mobile. Donc, certaines de ces choses sont contextuelles et la pertinence est essentielle. De nos jours, beaucoup d'applications emplacement utilisateur dans le contenu de surface et il est pertinent pour où vous êtes ou pour faciliter la recherche. Voici un exemple de l'essaim de l'application, qui vous permet de vérifier facilement quand il a votre emplacement. Le mobile est rapide, en déplacement et vous y avez un accès constant. C' est quelque chose qui est nouveau au cours des deux dernières années, mais c'est vraiment important de se souvenir. Ainsi, Twitter et d'autres applications d'actualités sont de superbes exemples de ce que les gens veulent utiliser lorsqu'ils sont en déplacement. Vous pouvez rapidement retirer votre téléphone, faire défiler certains contenus, puis passer à votre prochaine tâche. Tu remets ton téléphone dans ta poche, tu es en route. utilisation fréquente ou les enregistrements et les petites tailles d'appareils sont une autre chose que vous devez considérer avec les appareils mobiles. Si simples applications comme Yahoo météo vous montrent le contenu que vous voulez voir avant et centre sans que vous ayez à naviguer très loin. applications comme celle-ci sont conçues pour un enregistrement rapide quelques fois par jour. Enfin, vous devez vous rappeler que les distractions sont présentes pendant l'utilisation. Avec le mobile, il est particulièrement important de se rappeler que les utilisateurs ne vont pas vous accorder leur attention sans réserve. De courtes périodes d'attention ont conduit les gens à frustrés s'ils ne trouvent pas ce qu'ils veulent quand ils le veulent. Donc, en tant que concepteur, il est important de garder à l'esprit ces considérations de l'utilisateur à tout moment. Utilisez-les pour vous guider dans chaque partie du processus de conception. N' oubliez pas que votre application doit rester concentrée et présenter à l'utilisateur les informations les plus cruciales et pertinentes avec le moins d'effort possible. C' est pourquoi l'écran d'accueil ou l'écran principal de l'application est probablement le plus important. Cette vue doit fournir à l'utilisateur ce qui suit. Les informations qui intéressent le plus l'utilisateur. S' il s'agit d'une application plus complexe, sauter des points vers d'autres sections de l'application. Ainsi, certaines applications se concentrent sur une ou deux fonctions principales, ce qui permet de présenter ces informations à l'utilisateur tout de suite. Il s'agit notamment de parcourir et de consommer du contenu souvent mis à jour ou changeant, référencer des informations et de consigner des informations. Les applications les plus simples comportent souvent des flux ou des calendriers. C' est un moyen incroyablement efficace d'afficher du contenu pour les utilisateurs qui veulent consommer du contenu rapidement. Voici quelques exemples. J' ai Facebook, Twitter et Pinterest. Quelques autres sont Fitbit, Calendar, Weather apps, et même votre email. Toutes ces applications sont super simples. Vous les ouvrez, vous êtes sur le flux qui est probablement l'information que vous voulez voir et tout ce que vous avez besoin d'obtenir. Vous pouvez y accéder facilement si vous avez besoin de rechercher sur Pinterest. Si vous voulez voir vos notifications sur Facebook, vous pouvez sauter dessus. Mais probablement, tout ce dont vous avez besoin est juste sur cet écran principal. D' autres applications ont un ensemble de fonctionnalités plus complexe et permettent à l'utilisateur d'effectuer plusieurs types de tâches. Ainsi, quelques exemples d'applications avec une approche plus de navigation incluent Evernote, où vous pouvez lire des notes, rechercher, créer des notes. Airbnb, qui est cet exemple que je montre ici, où vous recherchez et naviguez, quelque chose comme Foursquare que vous enregistrez, votre recherche, la navigation, la lecture des commentaires, ainsi que des cartes. Vous obtenez des directions, en regardant le trafic. C' est un peu plus complexe. Donc, même si une application peut être plus complexe que d'autres, ne signifie pas nécessairement que ce sera une mauvaise expérience utilisateur. Airbnb en est un très bon exemple. Ici, vous pouvez voir qu'ils utilisent des photos et une grande topographie en conjonction avec un grand flux pour briser l'information pour des écrans visuellement attrayants. Donc, même s'il y a beaucoup d'informations présentées à l'utilisateur, cela ne semble pas si écrasant ou déroutant. Donc, dans cet exemple que je montre ici, un utilisateur cherche un endroit à South Lake, Tahoe. Ils ont toutes ces belles images qu'ils peuvent faire défiler. Ensuite, quand ils trouvent quelque chose qu'ils aiment, ils peuvent cliquer pour aller lire ça. Assez simple. Donc, en ayant une compréhension de ce que vous voulez que vos utilisateurs fassent avec votre application, vous êtes en bonne voie pour commencer à assembler des personnalités utilisateur, une carte de parcours utilisateur, des croquis et des cadres métalliques, tout ce que une carte de parcours utilisateur, des croquis et des cadres métalliques, nous allons couvrant dans les vidéos suivantes. 4. Exemple de projet : Choisir une application: À ce stade, vous avez été présenté au projet de classe et vous avez eu un aperçu de la conception de l'expérience utilisateur. Ensuite, je vais vous emmener à travers un exemple de projet pour vous donner, espérons-le une meilleure compréhension de chaque étape et de quoi vous pouvez vous attendre à ce que les produits livrables ressemblent. Pour mon exemple de projet, je voulais me concentrer sur la réservation d'un aspect de vol de voyage. À ces fins, je vais utiliser l'application Southwest Airlines comme exemple, et je vais vous montrer comment j'envisage de la reconcevoir du début à la fin. Jetons un coup d'oeil à l'application Southwest existante. J' ai ici un tas d'écrans de l'application que j'ai pris sur mon téléphone juste pour vous donner une idée de ce qu'il ressemble maintenant. Je suis sûr que comme vous pouvez le dire, le design visuel semble assez obsolète et maladroit. Ce n'est pas non plus super sympathique à première vue. J' ai donné l'impression que ça va être une expérience lente, franchement, à cause de son aspect désuet. Je ne sais pas. Ça ne me donne pas une bonne impression. Je ne me sens pas très bien à propos de, oh, ça va être génial. En termes de flux lui-même, j'ai l' impression que c'est un peu choquant de devoir être présenté avec cette option pour me connecter ou continuer en tant qu'invité tout de suite. Surtout si Southwest n'est pas une application que j'utilise beaucoup et je n'ai pas nom d'utilisateur et de mot de passe, c'est ennuyeux. Lorsque je clique sur « Continuer en tant qu'invité », la toute première chose que je vois en haut est de m'inscrire ou de me connecter et de m'inscrire, sorte qu'ils me vendent déjà sur quelque chose lorsque je veux juste entrer et commencer à réserver un vol. Ensuite, je vois aussi différentes options ci-dessous, afin que je puisse m'enregistrer, vérifier l'état d'un vol, réserver des voyages, gérer des voyages, et des offres spéciales, etc. Maintenant, quand je clique sur « Réserver un voyage », je viens ici, et rien est rempli. Une chose qui me rend vraiment fou, c'est qu'ils ne cherchaient pas l'endroit où je suis en ce moment. Ils ne savent pas que je suis en Californie. Ils ne vont pas repeupler San Francisco comme mon aéroport d'attache. C' est quelque chose dont beaucoup d'applications profitent. Ils n'ont même pas fait apparaître quelque chose, juste dire, « Southwest Airlines aimerait utiliser votre position. » Je leur aurais donné volontiers la permission d'utiliser mon emplacement s' ils m'évitaient d'avoir à ajouter cela. C' est juste un de ces petits gentils à avoir, ce qui donne l'impression que je fais moins de travail. Même quand je passe en revue et clique sur l'endroit où je peux choisir une ville, tout ce que je vois ici, pas même des suggestions. Encore une fois, ils n'utilisent tout simplement pas mon emplacement. Si c'était le cas, alors ils auraient peut-être dit Oakland, San Francisco et San José, par exemple, tous les aéroports qui sont à proximité. Mais au lieu de cela, je vois la liste des villes juste par ordre alphabétique. J' allais de l'avant et taperais dans chaque ville que je veux. Chaque fois que je retourne à l'écran, alors d'avant en arrière, d'avant en arrière, remplissez la date. Ici, choisissez le nombre de passagers. Je n'ai pas de code promotionnel ou quoi que ce soit, alors je vais cliquer sur « Rechercher ». Il faut un peu de temps pour remplir le ciel. Mais après avoir cliqué sur « Rechercher », je suis présenté avec mon écran de sélection des départs. Eh bien, il est assez clair que oui, c'est là que je vais choisir mon vol au départ, c'est super écrasant. Il se passe tellement de choses sur l'écran en ce moment. Il y a des boutons violets géants. Ils me parlent aussi de la façon dont les sacs volent librement. Personnellement, je sais ce truc de Southwest. Je le sais déjà. Je n'ai pas besoin de le voir ici. Même si je ne le savais pas, est-ce là le bon endroit pour me présenter cette information ? Je ne suis pas vraiment sûr. En outre, ce $ et points choses se sent juste vraiment, vraiment très important. Si je fais défiler vers le bas, une autre chose que je vais remarquer est que les boutons violets ne font qu'empirer. Ils ont cette texture de dégradé impressionnante sur eux. C' est juste qu'il se passe beaucoup. Ils ont ceci pour chacun des vols. Donc oui, je suppose, ils sont regroupés ensemble, mais ça me semble vraiment accablant. Une autre chose que je trouve vraiment bizarre, c'est que quand je clique sur l'un de ces, donc si je frappe, que je veux fuir, à tout moment, ou que je sélectionne, au lieu de simplement choisir ce vol et me précédant, ça va s'étendre, comme vous pouvez le voir ici. Qu' est-ce que ça élargit pour me montrer ? Que j'ai deux sacs à chèques gratuits. Attends, je le savais déjà parce qu'il me l'a dit il y a peu de temps. Ça va me dire combien de points de récompense rapides je pourrais obtenir. Peut-être que c'est une information utile, mais ai-je vraiment besoin de ça ici ? Encore une fois, pas vraiment sûr que ça en vaut la peine. Parce que maintenant, je dois encore dire oui, sélectionner ce vol, c'est celui que je veux. Après avoir passé et choisi mon vol de départ, je choisis mon vol de retour, je vais voir l'écran récapitulatif ici. Encore une fois, en avant, ils ont ces en-têtes qui disent, « Voici les différents vols. » Mais alors ce texte devient vraiment petit et écrasé ensemble. Il a tout décomposé, mais j'ai juste l'impression qu'il pourrait y avoir un meilleur moyen de montrer cette information qui est un peu plus facile à lire. Mon prix total est ici, super. Hey, les premiers sacs et enregistrés volent libres. C' est en fait un peu plus utile ici parce que je peux le voir juste à côté du prix que je paie et je sais que je n'ai pas à payer de plus pour les sacs. En fait, j'aime ça. Ensuite, j'ai frappé « Suivant » à partir de là, et puis je vais continuer à ajouter ma carte de crédit et autres choses. Je vais sauter cette partie du flux pour mes besoins parce que je pense que nous avons beaucoup de choses à travailler au début ici. Avant de créer mes persona, ce que je veux faire est en fait penser à certaines tâches utilisateur et à des cas d'utilisation pour lesquels mon utilisateur utiliserait l'application Southwest. Pour faire un remue-méninges, j'ai attrapé un post-it, j'ai attrapé un Sharpie, et j'ai juste commencé à noter ce que les gens feraient quand ils venaient utiliser l'application Southwest. Ce que j'ai écrit est de chercher un vol aller-retour par prix et horaire, réserver autour du vol de voyage. En fait, qu'ils soient simplement en train de naviguer pour avoir une idée des prix est parfois différent de quand vous êtes prêt à réserver. Beaucoup de fois, je le fais moi-même. Je vais continuer et je vais regarder juste pour voir combien de choses sont, mais je n'ai pas vraiment l'intention de réserver. De plus, je peux voir une réservation existante, donc voir quels sont les détails du vol. Ensuite, en plus de cela, je peux changer ou améliorer mon siège. Si j'ai un vol à venir, demain, par exemple, je peux vérifier ce vol, et je peux voir l'état du vol pour voir si je suis retardé, informations importantes comme ça. Lorsque vous venez avec votre propre liste de cas d'utilisation, essayez de réfléchir à ce qui va être vraiment important pour chaque tâche, et faites quelques recherches. Demandez à vos amis ou à votre famille de connaître leurs propres expériences de voyage mobile. Quelles applications utilisent-ils ? Quelles applications aimantent-ils ? Utilisent-ils même des applications, ou utiliseront-ils uniquement l'ordinateur parce qu'ils n'ont pas trouvé quelque chose qui fonctionne pour eux, ou ils ont juste peur de le faire ? Les tâches que j'ai répertoriées ici sont assez courantes pour les utilisateurs mobiles. Une fois mon personnage créé, je vais utiliser l'une de ces tâches pour guider le reste du projet. Une fois que j'ai déjà mes cas d'utilisation, et par prêt, établi sur Post-it Notes, je vais ensuite penser aux types de personnes qui utiliseraient l'application de Southwest. C' est un autre exercice de remue-méninges. Encore une fois, j'ai sorti mon carnet de croquis et j'ai sorti mes Post-it Notes. J' ai énuméré quelques utilisateurs potentiels. Ce que je fais est d'essayer d'éviter les stéréotypes ou les utilisateurs moyens. Avec personas, vous voulez créer un modèle qui se sent comme une vraie personne. Ce que j'ai trouvé ici, ils sont un peu généralisés, mais nous allons les transformer en quelque chose de beaucoup plus concret au fur et à mesure. Les six que j'ai inventés, et six, c'est un chiffre totalement arbitraire. Il s'adapte vraiment bien sur le carnet de croquis. J' ai commencé avec une étudiante, une mère de trois enfants qui travaille, un chef d'entreprise, disons un gars dans la quarantaine qui est vraiment soucieux de son budget, un jeune professionnel et une femme nouvellement mariée. Juste un large éventail de différents types d'utilisateurs. Par exemple, en commençant par un étudiant, c'est vraiment une généralisation. Mais si vous choisissez l'archétype, vous allez donner vie à cet étudiant en montrant sa personnalité, ses caractéristiques et ses objectifs. Parce que vous ne pouvez pas simplement regrouper tous les étudiants en un seul seau. Bien sûr, ils vont être complètement différents. Tout le monde a des personnalités différentes. Mais une fois que vous aurez plus de détails, cela vous aidera à comprendre le type d'utilisateur qu'ils sont. Vous finissez par choisir un étudiant, par exemple, vous allez identifier un étudiant en particulier, quelle est la personnalité de cette personne, quels sont ses traits, ce genre de choses. Vous serez vraiment capable de vous concentrer sur cette personne en particulier. Il se trouve que c'est un étudiant, donc ça vous donne un petit point de départ. Dans la prochaine vidéo, je vais vous guider à travers la personnalité que j'ai choisie. Je vais vraiment choisir un jeune professionnel pour l'utiliser comme guide le reste de ce projet. Mais nous allons le parcourir plus en détail dans la prochaine vidéo. 5. Définir des personnages d'utilisateur: Bienvenue de retour. Dans la dernière vidéo, je vous ai donné un aperçu de la conception de l'expérience utilisateur et de la manière dont elle se rapporte aux applications mobiles. Dans cette prochaine vidéo, nous traiterons de la première étape de notre processus UX, définissant les personnes d'utilisateur pour notre application. Il existe de nombreux outils et techniques UX différents que les concepteurs utilisent tous les jours pour lancer des projets. Certains designers se concentrent sur quelques techniques sélectionnées tandis que d'autres sont beaucoup plus étendues. Certaines des techniques UX que nous ne traiterons pas ici comprennent la réalisation d'entrevues avec les parties prenantes, collecte des exigences, l'analyse des concurrents, des sondages et des analyses. Ce n'est pas parce que ces techniques ne sont pas importantes du tout , mais parce qu'elles ne sont tout simplement pas pertinentes pour nous à ce stade. Parce qu'il y a tellement de techniques différentes que vous pouvez utiliser, beaucoup de ces choses sont utilisées dans un sens plus professionnel et donc il n'a tout simplement pas de sens pour nous de les couvrir pour commencer. Mais la technique UX que nous allons commencer par créer des personas utilisateur. Un personnage est un personnage qui est représentatif des besoins, des pensées et des objectifs de l'utilisateur cible. Personas sont conçus pour concevoir la meilleure expérience possible pour vos utilisateurs. Pensez à une personne comme votre utilisateur typique ou idéal, et qui voyez-vous utiliser votre application ? Personas peut vous aider à vous rappeler que vos utilisateurs peuvent ne pas être comme vous. Ils vous empêchent également de généraliser tous les utilisateurs dans un seul compartiment principal, pensant que tout le monde a les mêmes besoins et objectifs. Bien sûr, de nombreux utilisateurs auront probablement les mêmes objectifs ou similaires pour utiliser votre application, mais chaque personne vient d'un contexte différent. Par exemple, deux utilisateurs veulent tous les deux réserver un vol, mais un utilisateur peut être un dirigeant de haut niveau qui veut utiliser des miles pour un voyage de première classe alors qu'un autre peut-être une maman qui veut juste trouver le moyen le moins cher de l'obtenir trois enfants pour rendre visite à leurs grands-parents. Ces utilisateurs ont des besoins complètement différents et ont donc différentes façons de naviguer dans une application de voyage. Il y a probablement plusieurs types de personnes qui utiliseraient votre application pour essayer de trouver 2-3 personnes pour représenter vos utilisateurs. Chacun devrait avoir une histoire et un cas d'utilisation légèrement différents quant à la raison pour laquelle il souhaite utiliser votre application et aux étapes qu'il prendra pour répondre à ses besoins. Nous commencerons par écrire une description pour chacun de vos personnages. Considérez différents types de personnes pour représenter au mieux une variété d'utilisateurs. Pensez à l'exécutif par rapport à la mère qui sont clairement des utilisateurs très différents. Lorsque vous écrivez chaque description, vous devez inclure les éléments suivants : sexe, âge, état matrimonial, profession, situation économique, connaissance de la technologie, appareils qu'ils utilisent, passe-temps général, etc. vous devez inclure les éléments suivants : sexe, âge, état matrimonial, profession, situation économique, connaissance de la technologie, appareils qu'ils utilisent, passe-temps général, etc. ces choses aideront à déterminer qui est vraiment cette personne que vous essayez de représenter. Ensuite, une fois que vous avez capturé la description de la personne, créez un scénario pour lequel vous pouvez imaginer qu'un utilisateur voudrait utiliser votre application. Pensez à ce que les motivations, les objectifs et les besoins des utilisateurs seraient. Les personnes que vous créez doivent couvrir quelques scénarios et types d'utilisateurs pour lesquels vous souhaitez concevoir. Vous ne serez pas en mesure de compter pour chaque utilisateur, mais vous pouvez au moins en considérer quelques-uns. Commencez par écrire vos descriptions et scénarios. Vous n'avez pas besoin de passer beaucoup de temps à concevoir ou à les rendre vraiment superbes. C' est également à vous de décider si vous souhaitez inclure une photo représentative pour chaque utilisateur, il peut être utile d'imprimer vos personnages et de les faire fermer par référence lorsque vous pensez à votre application et plus de détails. Mais il n'y a vraiment pas besoin à ce stade de les rendre vraiment fantaisistes. Encore une fois, votre premier livrable sera de créer 2-3 personnes pour représenter au mieux vos utilisateurs cibles. Vous pouvez les télécharger dans votre projet dans n'importe quel format de votre choix. Je vais aussi inclure quelques références sur le web que vous pouvez regarder à travers si vous voulez plus d'informations sur personas, il y a beaucoup de choses vraiment géniales là-bas. Dans notre prochaine vidéo, nous expliquerons comment vous pouvez utiliser ces personnas pour vous aider à créer une carte de parcours utilisateur. 6. Exemple de projet : Persona: Nous venons de couvrir notre première étape UX de définition de la personnalité des utilisateurs. Maintenant, je vais vous guider dans mon exemple de projet pour définir des personas. L' archétype persona que je vais choisir pour mon exemple, est le jeune professionnel. J' ai commencé par décider que ça allait être une utilisatrice féminine et je l'ai nommée Kelly. Ce que j'ai fait ici, c'est en fait sorti mon carnet de croquis, et j'ai commencé à écrire un tas de trucs que je voulais couvrir sur Kelly. J' ai essayé d'imaginer quel type de personne Kelly serait, et quel type d'utilisateur qu'elle représenterait. Sur le croquis, j'ai noté les statistiques personnelles, les caractéristiques, son point de vue de la technologie et ce que j'imaginais ses objectifs et ses besoins. Dans la plupart de ce que j'ai écrit a quelque chose à voir avec les voyages d'une manière ou d'une autre. J' ai commencé ici comme vous pouvez le voir, alors j'ai décidé Kelly, elle a environ 27 ans, pour nos besoins, elle est designer UX, et j'ai commencé à écrire des choses personnelles sur elle, et à dire qu'elle n'est pas mariée, mais Elle est dans une relation engagée. Elle fait un salaire décent, elle vit à San Francisco, a deux colocataires mais pas d'animaux domestiques. Puis caractéristiques pour expliquer quel type de personne qu'elle est. Donc si vous la décriviez à un ami par exemple, que diriez-vous ? J' ai choisi de dire qu'elle est une personne assez active, qu'elle fait des cours de gym et du yoga, qu'elle aime vraiment voyager, facile à aller, et c'est important. Elle n'est pas super frugale, mais aussi pas une dépense scandaleuse. Elle est organisée, mais elle aime planifier. Donc pas trop TOC, mais elle aime que les choses vont à son chemin. Toutes ces choses sont des distinctions très importantes alors que nous affinons en elle notre personnalité. Ensuite, la technologie, c'est encore une fois important parce que nous faisons une application mobile ici. Parce qu'elle est designer UX, cela va contribuer à son utilisation de la technologie, donc elle l'embrasse vraiment. Encore une fois, elle est sur le dessus à cause de son travail. Cela l'amène à être frustrée par des expériences plus lentes et médiocres, elle a le dernier iPhone, toujours à jour sur ce genre de choses. Elle est vraiment à l'aise pour acheter en ligne, et c'est une internaute très active. Cela décrit ce qu'elle ressent avec la technologie, et comment je vais penser à elle alors que je conçois la version de l'application Southwest. Enfin, ses objectifs et ses besoins. Ce sont des choses que j'ai réfléchi, qu'est-ce que Kelly va avoir en tête quand elle utilise cette application ? Elle va vouloir être au courant des bons vols, c'est quelque chose qui est important pour elle. Elle veut pouvoir comparer les dates et les heures de voyage au meilleur prix, elle veut pouvoir utiliser des miles ou des points pour les réservations de voyage, et elle préfère rester avec une compagnie aérienne parce que c'est ainsi qu'elle va accumuler ces miles ou points pour l'aider. Encore une fois, comme je l'ai dit ici , elle n'est pas frugale, mais il n'est pas un débiteur scandaleux, donc elle est assez jeune, donc elle veut profiter de n'importe quel moyen d'économiser un peu d'argent. Maintenant que je l'ai fait, plongons un peu plus profondément dans certaines des choses que nous avons notées ici. J' ai dit qu'elle était dans une relation engagée et qu'elle aime voyager, alors imaginons qu'elle voyageait beaucoup avec son autre. En définissant qu'elle fait un salaire décent, et encore une fois, qu'elle n'est pas frugale et qu'elle ne dépense pas scandaleuse, toutes ces choses la mettent dans une certaine catégorie. On pourrait supposer qu'elle ne choisira pas le vol le moins cher, et sacrifiera tout le reste du voyage juste pour obtenir cette bonne affaire, mais qu'elle ferait probablement beaucoup de recherches pour trouver un vol qu'elle se sent bien à propos de. Maintenant, puisque vous n'allez pas présenter vos personnages à un client ou à un autre intervenant, un croquis comme j'ai fait ici est parfaitement acceptable pour ce cours. Totalement bien. Mais ce que je vais faire ensuite, c'est vous expliquer à quoi cela pourrait ressembler sous une forme numérique. Encore une fois, idéalement, vous allez vouloir créer 2-3 personnes pour votre projet. Je vais en couvrir un, mais c'est juste pour te donner une idée. Ensuite, c'est la démonstration. Maintenant, nous allons commencer avec la partie de démonstration réelle. Ce que je vais faire est d'ouvrir le croquis du programme, et je vais deux créer un nouveau fichier, ouops, il est allé là-bas. Je ne sais pas si vous êtes familiers avec le sketch ou pas. Mais c'est un excellent outil pour les choses super rapides. Beaucoup de gens l'utilisent réellement pour l'interface utilisateur réelle, je préfère Photoshop moi-même. Mais, j'adore cet outil pour mettre les choses en bas rapidement, faire n'importe quel filature. C' est ce que je vais utiliser pour mes personnages et mes voyages d'utilisateurs, donc c'est juste un excellent outil pour faire quelque chose de rapide et facile. C' est assez similaire à d'autres programmes comme Keno et soit vous avez des outils sur le côté ici, nous avons des outils en haut et toutes sortes de choses donc, beaucoup de choses que nous allons couvrir au fur et à mesure que nous avançons. La première chose que je veux faire, en ce moment, c'est comme une grande toile vierge comme vous pouvez le voir. Ce que je veux faire, c'est que je veux insérer un plan de travail. Ça va me donner comme une boîte de délimitation de l'endroit où je vais tout placer. Vous n'avez pas à faire ça, mais ça aide un peu, je pense. Cela aide également à exporter parce que de cette façon vous avez, comme ce que vous allez exporter exactement. De là, je peux en fait juste, tenir et glisser juste ici pour créer n'importe quel plan de travail, ou je peux aussi commencer avec toutes ces choses. Donc, cela va être vraiment pratique pour vous si vous utilisez ce programme pour vos wireframes plus tard, parce que vous pouvez choisir des écrans iPhone pour n'importe quelle taille, iPad aussi, beaucoup de choses ici. Mais à cet effet, je vais commencer par la taille de la lettre, et puis vous pouvez voir ici que j'ai ces petites frontières, donc je peux réellement mettre à l'échelle cette chose aussi grande que je veux. Puisque je ne suis pas en train d'imprimer ceci, je me fiche vraiment de la taille, et si je voulais l'imprimer, je reçois toujours, il serait juste à l'échelle vers le bas. Je sais que ma personnalité va être un peu plus grande, et je veux juste la rendre un peu plus large et plus grand. Donc je vais arbitrairement rendre ce gars un peu plus grand, et c'est quelque chose que je peux toujours changer. Donc si je clique, alors je n'ai plus ces petites boîtes limites, mais si je clique dessus, ils reviennent tout de suite. Super facile à changer à tout moment. C' est aussi le nom de ce que cette chose est donc, je peux soit aller ici et décider de le renommer, et je vais juste dire, Persona, et je vais mettre à jour ici. Encore une fois, pas grand-chose, mais cela vous aidera si vous aviez plus d'un de ces plans de travail l'un à côté de l'autre, de sorte que vous pouvez réellement faire toutes vos personas dans un seul fichier. Il va juste vous aider à garder des traces, donc cela pourrait être persona a. Si je le voulais, je pourrais aller insérer notre tableau, ou je peux en fait, je peux cliquer avec le bouton droit sur ce signe et dire Dupliquer, et puis il va mettre une seconde ici. Donc je pourrais faire les trois à la fois, et je peux vous montrer comment exporter ça à la fin. Mais pour l'instant, je vais juste aller de l'avant et supprimer ce gars parce qu'ils n'en ont pas besoin. La prochaine chose que je veux faire est en fait enregistrer ce fichier juste au cas où, je vais appeler cette persona et un croquis, vous pouvez simplement aller de l'avant et Enregistrer sur le bureau. Super. Prêt à partir. Maintenant j'ai cette personnalité avec laquelle travailler, donc j'ai Kelly. Une chose que beaucoup de gens font avec des personas est en fait d'utiliser une photo pour représenter cette personne, et ça donne juste un peu plus de vie à votre personnage, donc vous pouvez regarder cette personne et dire comme, oui, ce est Kelly pour mon exemple. J' ai parcouru un peu Internet et fait un peu de prise de photos stock, mais pour nos besoins ici, je vais juste coller ceci dans. C' est ma représentation de Kelly, 27 ans. Collez ça là-dedans. Super. La prochaine chose que je veux faire est en fait, je veux insérer du texte. Je veux garder à l'esprit ce que Kelly représente, et que pour moi c'était le jeune professionnel. Je vais insérer une boîte de texte, et je vais dire, Jeune Professionnel, cool. C' est ma personnalité, je vais juste décider de le mettre là. Alors je veux aussi mettre le nom de Kelly ici. Kelly, et puis j'ai tous mes outils ici pour mon texte, ce qui rend vraiment facile de faire des choses [inaudibles] quelque chose à faire. Cool, ça ressemble à une bonne taille. Voyez si je voulais faire comme un truc bleu vert, c' est tout à fait arbitraire, je décide de ça comme on va. Mais voici Kelly, et ils ont en fait ces petits guides intelligents qui alignent tout, donc c'est utile. Super. Ensuite, ce que je veux faire est juste d'apporter un peu plus de vie à ce document réel et de le rendre joli, assemblé, et juste le rendre agréable. Une chose que je veux faire est, je vais juste utiliser une boîte de couleur et le mettre écrire à propos ici. J' ai juste la taille en ce moment à la largeur de son image. Dans ce bloc, je vais mettre quelques choses sur les antécédents de Kelly. J' ai aussi oublié de mentionner, quand vous créez vos personnages, ce que j'ai fait est en fait juste regardé en ligne pour trouver de l'inspiration pour la façon dont ces choses sont disposées. Il est assez utile de juste avoir une idée de différentes façons que vous pouvez les exposer ou cela pourrait provoquer une idée de genre, je veux inclure ceci dans ma personnalité que je ne me suis pas couvert moi-même. Pour celui-ci, par exemple, je viens de trouver une belle personnalité et je me suis dit : « Ça a l'air génial, l'a trouvé sur [inaudible]. J' ai pensé utiliser cette structure pour la même chose pour la mienne. » J' ai déjà tapé une partie de ça juste pour nous faire gagner un peu de temps, mais j'ai ce que j'appelle les antécédents de Kelly ici et je me contentais de le faire. Donc ce que j'ai ici, c'est les petites statistiques sur Kelly, donc c'est son âge, son emplacement, son état matrimonial, ses enfants, sa profession, son salaire et ses études. Certains de ces trucs que je n'avais pas écrit dans mon croquis plus tôt, mais c'était juste quelque chose que je voulais ajouter à ce stade, et c'est tout à fait bien. Tout ce processus est vraiment flexible. Donc, nous venons de énumérer toutes ces choses, comme vous pouvez le voir. Alors ce que je veux aussi faire, c'est que je peux te montrer à nouveau. J' avais écrit quelques choses sur Kelly ici, donc j'ai des listes à puces et tout. Mais ce que j'ai aussi fait, c'est que j'ai pris du temps pour taper un petit paragraphe sur Kelly. Donc encore une fois, si je la décrivais à une amie ou que je faisais un écrit sur Kelly que je voulais couvrir une histoire, une ligne de base. J' ai ce gars aussi écrit déjà, va juste coller ici, on y va. Je vais décider de mettre ça ici. C'est un excellent point. Maintenant, vous pouvez voir que mon texte est un peu plus proche du bord et je ne veux pas vraiment que ce guide soit beaucoup plus grand. Je vais juste étirer ma boîte un peu, parfait. On y va. Donc, à propos de Kelly, ce n'est qu'un paragraphe pour expliquer un peu sur Kelly. Ça résume ce que j'ai couvert dans mes notes. Fondamentalement, Kelly est une personne active qui aime voyager vers de nouvelles destinations chaque fois qu'elle le peut. Elle essaie de planifier un voyage à l'étranger chaque année ainsi que des escapades plus courtes vers des endroits proches. Elle a trois semaines de vacances qu'elle va idéalement passer loin de chez elle. Elle voyage principalement avec son petit ami, mais occasionnellement avec un petit groupe d'amis. Kelly fait un salaire décent, donc elle n'est pas entièrement consciente du budget, mais elle n'est pas une dépense extravagante non plus. Elle pèse souvent les options pour voir si la qualité ou le prix sont plus attrayants. Donc ça résume tout ce qu'on a écrit jusqu'à présent. La prochaine chose que je veux ajouter sont ces caractéristiques. Nous avons recouvert ça avec nos points de balle. Je vais en fait ajouter quelques points de puces juste pour un peu plus de clarté ici. Cool. Super. Super simple. En fait, pas enfin, j'ai un trou là-haut. Mais j'ai ce qui est aussi très important, ses objectifs et ses besoins. Donc je vais essayer d'aligner ce gars avec les deux. Parfois, c'est pour ça que je ne peux pas être super pixel parfait avec sketch, parce que ça me rend un peu fou. Donc encore une fois, avec ses objectifs, je veux ajouter balles de somme et ce sont toutes les choses que nous avions couvertes plus tôt et je pourrais juste essayer de voir si je peux, non. Donc, ce n'est pas si génial pour aligner les choses, mais nous pouvons corriger cela plus tard. Très bien, donc la dernière chose que je voulais ajouter à cette personnalité était en fait, souvent, les gens utilisent de petits graphiques ou graphiques ou icônes pour représenter différentes choses juste pour rendre cela un peu plus intéressant visuellement. Donc ce que j'ai fait est un petit graphique à barres de trois aspects différents sur Kelly. Donc je vais essayer d'aligner ça. Ça a l'air plutôt bien. Donc, les connaissances technologiques, les habitudes de dépenses et les préférences de réservation. Ces trois choses que je voulais souligner parce qu'elles sont assez importantes pour moi car je vais poursuivre ce projet. Donc, avec des connaissances technologiques, a-t-elle peu de connaissances au niveau expert ? Alors j'ai dit, « assez proche de l'expert. » Bien sûr, elle n'est pas la meilleure experte, mais elle a un bon sens. habitudes de dépenses, frugales à somptueuses. Elle est au milieu, un peu plus vers le frugal, mais certainement pas loin ici. Ses préférences de réservation par rapport au tarif le plus bas dans le vol le plus idéal aussi au milieu, peut-être un peu plus vers le vol le plus idéal. Cela me donnera une très bonne idée de, je peux jeter un coup d'œil, je peux comparer pour vous les gars ce serait quelque chose de vraiment génial parce que vous allez avoir deux à trois de ces personnages. Vous serez en mesure de les regarder ensemble et de dire, « Kelly est l'utilisateur qui est comme ça. Disons, Sam, c'est l'utilisateur qui est comme ça. » Peut-être que Sam est le plus frugal non plus, le gars soucieux du budget. Ensuite, il y a peut-être quelqu'un d'autre qui a peut-être vraiment peu de connaissances en technologie et c'est quelque chose sur lequel vous allez vouloir vous concentrer tout au long de votre projet. Donc j'ai fini ici. La prochaine chose que je vais te montrer, c'est juste comment exporter ce gars. Parce que j'ai déjà mon tableau d'art comme je l'ai dit, il va juste exporter très facilement. Je monte ici, exporte, sélectionne, donc ça appelle ça une tranche. Ce que je veux faire deux maintenant, je ne veux pas de PNG. Vous pourriez si vous le vouliez ou vous pourriez faire JPG ou TIFF, mais je vais juste faire un PDF parce que c'est un peu plus simple et il garde également le texte vraiment sympa. Donc exportez et cela va dire, « persona.pdf ». Ça a l'air super. Appuyez sur l'exportation, décidez où l'enregistrer. Parfait. Fait. Je vais sauver ça et maintenant si on ouvre ce type, cool, j'ai ma personne entendue. Donc c'est encore une fois, quelque chose que je peux imprimer si je veux. Mais ce serait aussi un excellent moyen de livrer comme résultat final pour ce projet ou pour cette partie du projet de classe. Je vais inclure un lien vers un modèle de persona exemple que vous pouvez télécharger, c'est quelque chose que j'ai trouvé en ligne. C' est un peu plus de style numérique et non numérique, donc c'est quelque chose que vous pouvez imprimer et ensuite dessiner. Cela pourrait être une bonne façon de commencer si vous vouliez commencer par le croquis. Ensuite, je vais aussi télécharger mon fichier de croquis ici au cas où il y aurait quelque chose que vous vouliez sortir de ça. D' accord. Eh bien, tu devrais être prêt à mettre ta personnalité en marche et je ne peux pas attendre pour les voir. 7. Mappage du parcours des utilisateurs: Bienvenue dans l'unité 3, Mapping the User Journey. Notre prochaine technique UX est appelée carte de parcours utilisateur et peut également être connue sous le nom de carte de l'expérience utilisateur. Les parcours de l'utilisateur illustrent la série d'étapes des activités dans les interactions que l'utilisateur aura avec votre application. Les parcours de l'utilisateur sont bénéfiques pour le processus de conception car ils vous permettent de penser à l'application à partir d'un niveau élevé. Ils vous aideront à comprendre comment vos utilisateurs interagiront avec votre application, quelles sont les attentes et vous feront même penser à de nouvelles fonctionnalités que vous n'avez pas encore envisagées. Dans la pratique, les cartes de l'expérience utilisateur peuvent être assez complexes et contiennent des détails tels que les exigences et les objectifs de l'entreprise, multiples points de contact qu'un utilisateur a avec le produit ou le service, et des informations qualitatives. Cependant, dans notre but, se concentrera sur une version simplifiée qui représente l'histoire de la relation d'un utilisateur avec votre application du point de vue de l'utilisateur. Les cartes de parcours utilisateur peuvent être conçues comme un flux plus basé sur le texte, ou vous pouvez adopter une approche plus visuelle. C' est vraiment votre préférence, et je vais vous montrer quelques exemples des deux. En voici un juste ici. Cela pourrait être utile si vous zoomez un peu plus. J' ai également inclus les liens en ligne si vous voulez jeter un oeil de plus près aussi. En voici un autre. Vous pouvez voir que ces parcours utilisateur sont principalement en noir et blanc, similaire aux cadres métalliques, avec des touches de couleur pour représenter le chemin que l'utilisateur prendra ou les options qu'il peut choisir. Voici un autre semble encore un peu de fil me encadrer. Encore une fois, je vous encourage à jeter un oeil à ces en ligne également. Certains sont beaucoup plus simples, c'est un exemple d'un texte très, mais il obtient toujours le même point à travers, est tout simplement pas aussi joli. Maintenant que vous avez créé deux à trois personnes lors de la dernière étape, nous allons les utiliser comme base pour créer une carte de parcours utilisateur pour chacune d'elles. Nous commencerons par écrire et visualiser chaque utilisateur ou personne ou le parcours que chaque personne effectuera à travers votre application. Vous allez penser à quels sont les objectifs et les besoins de vos utilisateurs ? Quelles tâches vos utilisateurs doivent-ils effectuer ? Considérez quels objectifs et tâches sont cruciaux et qui sont secondaires. Cela aide vraiment à réduire au minimum le nombre d'étapes pour effectuer une tâche. Nous ne voulons pas que les utilisateurs passent par votre application et aient l'impression qu'ils sont vraiment dépassés ou que c'est trop compliqué. Ensuite, nous allons cartographier chaque étape du processus de l'utilisateur. Pensez aux écrans que l'utilisateur va traverser, à ce qu'il verra sur chaque écran, et gardez à l'esprit tout ce temps comment l'utilisateur devrait ressentir tout au long. Encore une fois, on ne veut pas insister sur quelqu'un. Ils devraient se sentir bien lorsqu'ils utilisent votre application. cartes de parcours d'un utilisateur doivent contenir une référence à la personne sur laquelle elle est basée et à l'objectif final de l'utilisateur. Quelques exemples de tâches que vos utilisateurs peuvent vouloir effectuer, en particulier dans une application de voyage, sont, disons de rechercher des hôtels trois étoiles ou plus à San Francisco, ou d'acheter un aller-retour, un billet d' avion, peut-être réserver une location de vacances, puis même des recherches et trouver des choses à faire dans un certain lieu de vacances. Ce sont quelques choses qui, que vos utilisateurs peuvent vouloir faire et que vous voulez penser. Ce sont, sont de bons exemples de la façon dont vous pouvez, ce que vous feriez pour amener l'utilisateur à travers la façon dont il accomplirait chacune de ces tâches. Enfin, évaluez les cartes selon lesquelles une fois que vous avez terminé une ébauche et demandez-vous ce qui suit, le niveau de complexité est-il approprié pour chaque tâche ? Où puis-je simplifier les choses ? Est-ce que le flux global a du sens ? Vous voudrez faire des ajustements si nécessaire. Ce n'est pas quelque chose que vous êtes susceptible d'obtenir droit au premier essai. Votre livrable sera de créer un parcours utilisateur pour chacun de vos personnages afin de représenter les objectifs de vos utilisateurs. Une fois que vous avez terminé vos parcours utilisateur, partagez-les avec la classe. Ensuite, nous allons plonger dans les croquis où vous pouvez enfin prendre ces personnages et voyages d'utilisateurs et les transformer en quelque chose d'un peu plus concret. Nous en trouverons un peu plus dans la partie design dans les vidéos suivantes. 8. Exemple du projet : Carte du voyage utilisateur: Donc, dans la dernière étape du projet, j'ai terminé ma personnalité. Maintenant, ce que je dois faire est de décider quel est le parcours utilisateur clé que je vais décrire. Commençons donc par examiner les tâches utilisateur que j'ai trouvées à nouveau. Retour à mes Post-it Notes. Il s'agissait de rechercher un vol aller-retour par prix et horaire, réserver un vol aller-retour, consulter et de réserver existante, modifier ou de surclasser mon siège, d' enregistrer un vol ou de consulter l'état de mon vol. Pour mon exemple, je vais utiliser la première tâche ici. Recherchez un vol aller-retour par prix et horaire. Cette tâche est toujours assez générique, donc je veux créer une petite histoire en utilisant ma personnalité de Kelly. J' ai trouvé un scénario que j'imagine que Kelly traverserait. Disons que Kelly voulait effectuer une recherche pour un vol aller-retour de San Francisco à Portland, Oregon, pour rendre visite à ses amis pendant un long week-end. Elle voyagera avec son petit ami. Elle a trois week-ends différents en tête et elle veut comparer le prix et l' horaire de chaque week-end pour déterminer lequel sera le plus idéal. Donc, avec ce scénario, Kelly utilisera également l'application Southwest pour rechercher ses options de vol. Sur la base de ses détails personnels dans le scénario, j'ai aussi trouvé la liste de ses objectifs potentiels. La première est qu'elle veut chercher un vol aller-retour de San Francisco à Portland. En outre, elle aimerait avoir la possibilité de rechercher facilement et rapidement plusieurs dates de fin de semaine pour pouvoir comparer les prix. Ça ne semble pas si dur, n'est-ce pas ? Eh bien, le premier objectif est le simple. Le deuxième objectif, d'autre part, nécessitera un peu plus de réflexion de ma part. Je veux porter une attention particulière à celle-ci. Je pense à la façon dont je pourrais restructurer le flux de l'application. Alors maintenant, je vais donner une chance à ma carte de voyage utilisateur. Ce que j'ai fait ici est décrit les étapes dans les écrans que Kelly devrait franchir pour atteindre son objectif. Donc, ce serait qu'elle commence à la maison, la réservation de voyage, ce qui nécessite de choisir une ville de départ, ville de retour et ses dates de départ et de retour. Une fois cela fait, elle va lancer la recherche et elle va obtenir les résultats pour un vol de départ, qu'elle choisira un, puis elle obtiendra les résultats pour le vol de retour où elle choisira un. Ensuite, sa prochaine étape serait de voir le résumé du vol et d'obtenir le prix total, puis d'aller de l'avant et de réserver et de payer. Encore une fois, pour notre exemple ici, nous ne allons pas réellement passer par la réservation et payer, nous allons nous arrêter juste à cette étape de résumé de vol. Une fois que j'ai ces esquissés, je suis retourné à mon carnet de croquis et j'ai dessiné ceci comme un flot plus. Je l'ai fait au lieu de sauter directement dans le croquis parce que cela m'a vraiment aidé à visualiser ce que je voulais esquisser plus rapidement. Ensuite, j'ai fini par dessiner quelques fois différents de quelques façons différentes avant que la présentation ne se sentait juste. Donc, comme ça, j'ai plus d'une base. Je peux travailler à partir de mon croquis pour aller dans le croquis. Ensuite, je vais vous expliquer comment j'ai créé ma carte de parcours utilisateur en utilisant Sketch. Je vais cacher ça et je vais retourner à Sketch. Créez un nouveau document et faites ce plein écran. D'accord. Encore une fois, ce que je veux écrire est enregistrer ce document. Nous allons appeler ce parcours utilisateur. Sauvegardez sur le bureau, génial. Encore une fois, comme nous l'avons fait à l'étape précédente, je veux avoir un tableau d'art ici. Ce que je vais juste venir et en dessiner un assez arbitrairement. Je sais que je vais avoir besoin de beaucoup d'espace. Je vais essayer de remplir beaucoup d'espace ici. Ensuite, je veux nommer le tableau d'art, le parcours de l'utilisateur. Super. Encore une fois, je peux changer la taille de cet en-tête à tout moment, donc ce n'est vraiment pas grave. Ce que je vais commencer par créer en fait un petit en-tête pour cela. J' ai fait ça ici, donc je vais juste apporter ça. Voici mon parcours utilisateur. J' ai également la tâche esquissée. Donc, juste une simple chose de texte, recherche pour aller-retour, vol par prix et horaire. Je vais juste faire ça. Super. Sauvegardez. Maintenant, j'ai ma base pour commencer. Comme je l'ai dit, on va commencer sur l'écran d'accueil. Si vous vous souvenez de l'application Southwest sur le tout premier écran était que voulez-vous vous connecter ou voulez-vous continuer en tant qu'invité ? Je vais juste contourner cet écran et aller à ce que j' appelle l'écran d'accueil réel pour commencer. La première chose que je veux faire, j'ai ici qui va représenter mon premier écran. Cela va finir par ressembler à un filaire, mais ce n'est certainement pas un filaire. Ces trames filaires seraient beaucoup plus détaillées. Ce que je veux faire ici est juste de répéter ce que sont les choses simples qui seraient sur chaque écran pour être en mesure de marcher à travers cela un peu plus facile. Je vais commencer par ça, et je vais étiqueter ça. Ça va être mon écran d'accueil. Ce que je vais mettre sur l'écran d'accueil, en fait, je ne vais pas m'inquiéter pour ça maintenant. Ce que je vais faire en fait, c'est mettre ici les boutons que j'ai comme options. Je viens de faire certains de ces déjà juste pour que ça aille un peu plus vite pour nous. Sur mon écran d'accueil, il y avait quelques options, oups, j'essaie de copier ce type. Je vais juste les copier et les coller. J' en ai cinq là-bas. L' 're environ cinq options ou plus de penser à ce que l'application Southwest était. Ce que je vais faire maintenant, c'est juste étiqueter ces gars. Si cela se produit, vous pouvez réellement voir que lorsque je survole, sont les calques qui sont sur le dessus, puis ce calque de texte est en dessous de cela. Donc je peux soit faire monter ce type, donc c'est au-dessus de tout. On est là. Ou je peux aussi aller vers le haut et aller à organiser et passer à l'avant comme toujours une option deux. Faire ces alignés à gauche et donc mes options avant étaient l'enregistrement, l'état du vol, je vais fixer l'espacement dans une seconde, réserver Voyage, gérer Voyage, et il y avait quelque chose d'autre donc nous allons juste mettre d'autres pour l'instant parce que ce n'est pas super important. Ici, je peux changer l'espacement des lignes. Je peux juste les pomper un peu plus, et je dois probablement aller un peu plus que ça pour qu'ils s'adaptent tous. C' est assez bon. Parfait. Voici donc mes options pour l'écran d'accueil. En fait, j'allais juste faire ça, faire en sorte que ça se démarque un peu plus, et toutes ces choses, ça n'a vraiment pas d'importance. Je vais juste faire reculer un peu plus. La prochaine étape que je vais faire est en fait que je veux cliquer sur réserver Voyage. Disons que je veux sélectionner le ciel et juste changer la couleur de fond pour être quelque chose que je vais réellement cliquer sur. J' ai une couleur ici que je veux utiliser. Je vais juste jeter ça là-dedans pour que je puisse prendre cette couleur. Une bonne chose à propos de Sketch est très facile à dire oh, je veux utiliser cette couleur. Cool. Débarrassez-vous de ce type. Ensuite, je vais dessiner une flèche. Donc je vais aller à Insert, Shape, Arrow, et je veux dessiner de ce gars à notre prochain écran. Je vais aussi rendre ce ciel bleu juste pour la cohérence ici. Je pourrais le rendre un peu plus épais pour mieux le voir. Cool. Ensuite, j'ai déjà fait cet écran, qui nous a fait gagner un peu de temps. Je peux copier ça. On y va. Mon écran suivant est en fait l'écran de voyage du livre. Je vais faire deux étiquettes ce type livre voyage. Super. Sur cet écran, je peux voir ce que j'ai déjà fait ici, c'est que je vais choisir le vol , d'où je vole, puis la date d'entrée et puis j'ai un bouton de recherche en bas. La première chose que je veux vraiment faire est de faire le départ. Parce que tout cela est dans cet écran, je vais juste descendre au lieu de me déplacer. Je vais passer à l'écran suivant une fois que j'ai appuyé sur le bouton de recherche. Ce que je vais faire ici, encore une fois, je l'ai déjà sur l'écran. Aligner ça. Si j'ai cliqué sur « De », voici ma ville de départ, je vais l'étiqueter comme de. J' utilise juste les touches fléchées pour déplacer ça vers le bas. Vous pouvez le faire avec votre souris aussi, de et je vais juste déplacer ce gars un peu vers le bas. Ici, je serais en mesure de faire une recherche. Je vais juste en copier un. Oups, je n'ai pas tout copié. écrit ceci ici. Encore une fois, qui est allé derrière quelqu'un a eu à prendre des dispositions pour se déplacer à l'avant. Super. Cela va servir de boîte de recherche en fait et en plus, je vais ajouter juste une ligne pour représenter la liste des choses que j'ai ici. Un peu perfectionniste, j'essaie toujours d'aligner ces gars. Maintenant, je vais juste copier. Si je peux le faire rapidement et faire un tas de lignes à ressembler, sont mes résultats de recherche. Alors je vais juste copier ça. On y va, un peu plus vite. Je les regroupe juste pour pouvoir les copier un peu plus vite. C' est mon petit modèle pour mon départ. Voici ma liste de villes. C' est un de mes documents, ça va commencer à s'agrandir. Je vais choisir ici, et je veux que ce gars soit plus grand parce que je veux faire une autre rangée en dessous. Je vais copier tout ça. Assurez-vous que j'ai tout eu et juste dupliquer ça pour le voyage de retour. De, à et ce sera la ville de retour. En fait, je veux dessiner une petite flèche d'ici à ici. Je vais copier ce type et ce que je peux faire, c'est de traîner ça. Si j'appuie sur « Maj », il restera sur l'axe droit. Ici comme ça, je vais bouger un peu ce type. Cool. Cela montre que je choisis mon vol de et vers. Je vais changer ça pour dire ville de destination parce que le retour semble un peu bizarre en ce moment. Super. Je vais sauver ça, je suis un épargnant compulsif, je n'aime pas perdre des choses. La prochaine chose que je veux faire, c'est que je vais changer cette flèche. Voyons voir ici. Si je reçois mes options de flèche. Je ne les vois pas. Si cela arrive, juste dit évasion. On va laisser ça tranquille pour l'instant. La prochaine chose que je veux faire est de faire mon rencard. Je vais copier ceci, ceci et ça, et le déplacer sur entendre. Cela va devenir la date de départ et cela va finir par être calendrier. Je ne vais pas m'embêter à tirer une tonne, mais je vais faire un peu plus gros truc ici. Disons que c'est notre calendrier. Une autre chose que vous pouvez faire si vous voulez vous laisser un peu long je vais juste dire calendrier pour voir ce que vous pensez. Encore une fois, ce n'est pas comme n'importe quel type de fil-frame. C' est juste exposer les bases mêmes de ce que je fais sur chaque écran. Je vais copier ça et le placer ici. Ça a l'air assez proche. Cela va être deux et maintenant cela va avoir plus de sens que notre date de retour.Encore une fois, je vais saisir ces flèches pour montrer que je vais d'ici à ici. Annuler. Ce type ne coopère pas en ce moment. Parfois, le croquis devient un peu fou. Faites glisser ça dessus. On y va. Cela montre à nouveau, je choisis toutes ces choses et puis je vais deux retourner à l'écran. Ceux-ci vont remplir avec tout ce que je choisis dans ces étapes. Aussi, je vais dessiner certaines de ces flèches ci-dessous. On y va. C'est un peu serré. On y va. Test pour tout couvrir. Cool. Sauvegardez ça. L' étape suivante est que je vais obtenir mes résultats de recherche. En fait, c'est très serré avec moi et ça me dérange. Donc je vais attraper ces gars et bouger un peu tout ça, et ensuite je vais le rendre plus grand. Comme vous pouvez le voir, c'est super flexible. Vous pouvez toujours changer n'importe lequel de ces trucs. La prochaine chose que je vais faire est d'appuyer sur ce bouton de recherche, qui est arrivé derrière et puis sur le devant. Cool. Suivant. On y va. Cet écran va être mes résultats de vol pour le départ. Je vais juste lire les résultats pour l'instant, puis l'écran va être décomposé en toutes les options de vol que j'ai. Je vais juste le désigner en rendant ces gars un peu plus gros. Puisque, de toute évidence, tous ces résultats vont défiler, je vais juste revenir à ce gars. Défile en bas et s'aligne. On le fera après, alors on copie. Disons que c'est l'option de vol A. Je vais faire option de vol B et je suis ici l'option de vol C, et ainsi de suite. Fais semblant que ça planait au milieu. Je vais juste faire ce vol de départ. Je vais dupliquer tout ça nouveau parce que je vais avoir des résultats pour mon vol de retour aussi. Je vais jeter ça ici, et disons que le vol B était une excellente option. Je choisirai le vol B. Je vais changer ça pour le vol retour. Disons que je voulais choisir. Je vais en fait colorer ce type ici. Devrais-je choisir ça ? Disons que le vol A était le meilleur. Je vais choisir le vol A, c'est mal. La frontière, on va se remplir. Cool. Encore une fois, dessinez ma flèche. Fais-le aller sur le dessus. Une chose que je n'ai pas mentionnée était pour chacune d'entre elles, j'ai peut-être quelques détails de vol. Cette chose pourrait soit se développer en ligne ou il pourrait me montrer un autre écran. Nous ne sommes pas tout à fait sûrs de ce que cela va être. Je ne vais pas le laisser comme un écran différent pour l'instant. Je garderai ça à l'esprit plus tard. Je vais copier ça, et ça va être nos derniers écrans, donc notre résumé de vol. On y va. Résumé. Cela va commencer avec notre vol de départ, et cela va avoir juste quelques informations. Je vais copier un de ces mecs, prendre ce truc à l'avant. Disons que ça a des informations sur notre vol de départ, et ensuite je vais faire la même chose pour notre vol de retour. Ensuite, nous voulons faire notre total. Disons que c'est là que nous avons notre montant total, puis en bas, nous allons avoir un gros bouton à acheter. On ne sait pas encore ce que ça va dire. Totalement très bien. Voici un aperçu très rapide des étapes que nous allons prendre. Encore une fois, ceux-ci étaient basés sur l'application Southwest existante. Ce sont les étapes que nous voyons l'utilisateur prendre. Encore une fois, nous commençons par, nous allons choisir le voyage de réservation. Nous allons choisir d'où ils volent, d' où ils volent, et les dates. Chercher. Encore une fois, en choisissant ces gars. Une fois qu'ils ont fouillé, ils vont voir leur vol de départ. Ils vont voir leur vol de retour et un résumé de tout. Ce que ça ne couvre pas en ce moment, c'est une façon de le faire. C' est exactement ce que Southwest a en ce moment. La seule chose que nous voulions optimiser pour Kelly était qu'elle ait la possibilité de regarder différents vols ou des week-ends différents. Disons qu'elle a choisi un week-end ici. Elle arrive au résumé et dit : « Oh, celui-ci coûte 600$, oui, c'est assez cher. Je veux vérifier un autre week-end. » À ce stade, elle aurait dû faire est de revenir, revenir, revenir à la recherche pour pouvoir changer ses dates. Ce que je veux regarder ensuite, c'est quelles sont les différentes options que je peux essayer d'aimer Kelly en fait plus facilement changé les dates pendant qu'elle est dans le processus un peu plus bas, parce qu'elle ne veut probablement pas changer ces de et vers. Elle veut juste changer les dates. Il y a beaucoup de retour et de quatrième. Nous allons regarder ça dans nos croquis. Nous n'allons pas regarder cela sur le parcours de l'utilisateur, car cela mène la voie vers ce qu'elle va faire. Nous allons nous concentrer à nouveau sur cela dans nos croquis et encore dans nos trames filaires. On couvrira ça ensuite. 9. Commencez à faire l'ébauche: Bienvenue à l'unité 4, Sketching. Maintenant que vous êtes armé de personnages et de voyages d'utilisateurs, il est temps de les mettre en œuvre. Dans cette phase UX, vous allez esquisser vos parcours utilisateur afin de comprendre les implications de vos décisions de conception. Cela vous aidera à voir combien de décisions les utilisateurs devront prendre et combien d'écrans ils passeront pour atteindre leur objectif. Cette étape est vraiment inestimable et ne devrait certainement pas être ignorée. Alors pourquoi esquisser est-il si important ? Honnêtement, il est beaucoup trop difficile de sauter directement dans les filaires, même si vous avez déjà des idées qui flottent autour de votre tête. Les trames filaires sont également créées sur l'ordinateur, sorte qu'elles prennent déjà plus de temps à créer que l'esquisse. Vous pourriez également être déclenché trop tôt dans le processus avec les détails de conception, comme « Où va le bouton ? Quelle taille ce texte devrait-il être ? Etc » Sketching vous aide à rassembler vos idées très rapidement. Vous pouvez effacer, jeter les choses dehors. Vous pouvez changer d'avis aussi souvent que nécessaire. n'y a pas de ramifications à faire ça. Prends un nouveau morceau de papier et pars. Vous voulez garder vos croquis lâches et ne vous concentrez pas sur tous les détails. Vous allez enregistrer cette partie pour les trames filaires. Alors, pour commencer, esquissez plusieurs idées et options pour quelques écrans clés de vos flux. Pendant que vous esquissez, n'oubliez pas de penser à ce qui suit. Quelles informations devraient figurer sur chaque écran ? Quelle est la hiérarchie de l'information ? Quelles sont les différentes options de mise en page que je peux essayer ? D' autres choses à garder à l'esprit pendant que vous esquissez sont : gardez vos croquis lâches. Cela va vraiment vous aider à vous déplacer rapidement et essayer de nombreuses options différentes. Encore une fois, ne vous inquiétez pas d'être parfait. Nous ne sommes pas là pour vous juger sur vos croquis. Ne vous concentrez pas sur tous les détails. Vous voulez juste obtenir l'essentiel de chaque écran et vous serez en mesure d'affiner tout plus tard. Avez-vous pensé à de nouvelles idées que vous esquisitionniez ? Super. N'ayez pas peur de remue-méninges une fois que vous avez le stylo dans votre main et que vous vous laissez sauvage, rien n'est trop fou à ce stade. Cela vous aidera à travailler à travers de nombreuses options différentes. Tu te sens coincé ? Éloignez-vous de vos croquis et faites une pause. Vous aurez peut-être besoin d'un peu de temps pour éclaircir votre esprit, ou vous voudrez peut-être simplement vous sentir inspiré par d'autres applications. Alors ouvrez votre téléphone, allez sur votre ordinateur, jouez avec certaines choses et laissez-vous inspirer. Aussi, n'oubliez pas vos personnages. Si vous les faites imprimer à côté de vous, lisez-les à nouveau et mettez-vous à la place de l'utilisateur. Tu es toujours sur la bonne voie ? Voici donc quelques exemples de croquis pour vous donner une idée de ce que nous voulons réaliser à l'étape. Le premier exemple est en fait mon propre croquis, et vous pouvez voir que c'est assez simple. Je n'utilise pas trop de mots ou de boutons, et je ne dessine pas vraiment un plein écran. Au lieu de cela, je me concentre sur la tâche à accomplir sur chaque écran. Il n'y a pas vraiment besoin d'être super complet ici. Les quelques exemples suivants que j'ai trouvés sur Dribbble, ils sont tous les deux un peu plus raffinés que le mien. Vous pouvez voir qu'ils ont vraiment des lignes droites et les contours de l'écran. Puisque ceux-ci ont été affichés sur Dribbble, les concepteurs ont probablement pris un peu plus de temps pour les nettoyer, mais n'hésitez pas à aller dans les deux sens. Vous pouvez vraiment être aussi désordonné ou aussi parfait que vous le souhaitez, tant que vous êtes capable de les déchiffrer à la fin. Donc, à ce stade, vous avez probablement des tonnes de croquis en papier. Ce que vous allez faire maintenant est de décider quelles sont les options les plus idéales et celles que vous pouvez simplement jeter. Une fois que vous avez cloué vos croquis des parcours de l'utilisateur, publiez-les pour les partager. Assurez-vous d'inclure des notes à côté de vos croquis pour vous aider à communiquer ce que le flux est pour vous et pour les autres. À venir dans la prochaine vidéo sera notre dernière étape dans le processus UX, le filamage. 10. Exemple de projet : croquis: Hé les gars, bienvenue. J' espère que vous avez eu beaucoup de succès jusqu'à présent travaillant sur vos personas et vos cartes de parcours utilisateur. Ensuite, nous allons nous attaquer aux croquis. J' ai quelques croquis ici pour vous montrer, pour parcourir ce que j'ai fait pour les applications Southwest jusqu'à présent. Pour commencer, je suppose que je vais commencer par vous faire connaître la méthode que j'ai prise pour faire ces croquis et je voulais qu'ils soient vraiment lâches. Encore une fois, j'ai attrapé mon fidèle carnet de croquis, attrapé quelques Sharpies et j'ai juste commencé à déconner. Vous pouvez voir qu'il se passe beaucoup de choses ici. J' ai un tas d'écrans différents, j'ai des notes partout, mais je voulais me laisser vraiment lâcher et voir ce qui se passait. Une autre chose que je voulais mentionner était, je voulais obtenir de l'inspiration pour pendant que je commençais sur ce, donc j'ai parcouru le web, regardé sur Dribbble, Behance et juste essayer d'obtenir un sens général de comme, ce que font d'autres applis ressemblent ? J' ai fait beaucoup de recherches sur d'autres applications qui sont là maintenant, mais c'est toujours agréable de regarder des trucs comme sur Dribbble par exemple, parce que les gens sont un peu plus innovants et c'est beaucoup de plaisir d'obtenir une certaine inspiration que façon. Ce que je voulais commencer par faire était de s'attaquer aux différents écrans que je dois faire pour cette application. Donc le premier ici est la maison ou comme où nous réservons le voyage. C' est là que toutes les informations sont entrées. Il y a beaucoup de façons différentes que l'écran pourrait ressembler, et en fait pour vous montrer, je vais jeter ça, pour me rappeler que ce gars ici est le premier écran et ensuite le livre voyage ici est un autre écran celui que je suis en train d'entrer tout. Je pense que je montre ce gars après sur une page différente, mais je suppose que je commence ici avec cette section de voyage de livre parce que cela a beaucoup de choses et il y a beaucoup de façons différentes que nous pourrions le faire. Alors je bouge ça jusqu'au bout. L' une des principales choses est de comprendre est que c'est un aller-retour ou un sens unique. J' ai juste essayé de démontrer ici à travers mes croquis certaines des différentes façons que nous pouvions faire cela. Donc, nous pourrions avoir plus d'un bouton bascule, il y a cette méthode où vous avez celui qui est sélectionné est souligné ou même une pilule ici où cela pourrait être juste un arrière-plan subtil derrière celui qui est sélectionné. Toutes les informations sur ces écrans sont les mêmes. C' est juste une question de savoir comment devrions-nous les exposer. Donc choisir les aéroports, les dates de départ et de retour, combien de passagers, codes promo, puis bien sûr, notre bouton de recherche. Sur la version originale, tout était sa propre ligne. Donc, du jour de départ, le jour de retour, les passagers, tout était comme empilé, donc l'écran est en fait long dans leur application existante. J' ai regardé deux façons différentes, comme si on pouvait empiler ces choses pour économiser de l'espace ? Ici, en empilant ces moyens, vous perdez un peu de place pour le texte, mais nous pourrions utiliser les codes d'aéroport à la place pour le rendre un peu plus court. Donc SFO au lieu de San Francisco, par exemple. Juste quelques options ici que j'ai foiré pour commencer, et il y en a une autre ici. Puis j'ai passé aux résultats de la recherche. Encore une fois, on dirait comment ce gars pourrait ressembler ? Existe-t-il un moyen de trier ceci par $ ou par points ? Chercher un moyen de changer réellement la date, ce qui est quelque chose que je pensais être vraiment important. Une chose que Southwest fait un peu différemment de certaines des autres applications aériennes, c'est qu'ils mettent l'accent sur les différentes classes tarifaires. Ils ont le désir de s'évader, ce qui est le bon marché. Ils ont tout le temps, ce que je crois que vous êtes capable changer les choses et il n'y a pas de pénalités ou quelque chose comme ça. Ensuite, bien sûr, ils ont la classe affaires. D' autres applications, quelque chose comme United ou Delta, vous permettent de choisir entre la cabine principale en classe économique ou en classe affaires. Mais Southwest veut vraiment se concentrer sur les trois classes différentes. Donc, parce qu'ils ont mis l'accent sur ce point, j'ai pensé que c'était assez important et nous devons jeter un oeil à deux façons différentes de présenter cette information. Encore une fois, je vous montrerai ici. Ce sont ces gros boutons violets qui ont juste l'air assez fou, surtout quand vous devez faire défiler tous ces boutons. Vous perdez les temps et ensuite les informations de vol si c'est non-stop ou autre, parce que ces boutons sont si proéminents. Bien sûr, nous voulons qu'ils ressemblent à des boutons, mais ceux-ci vont juste au-dessus. Une chose que je l'ai explorée avec mes croquis est, y a-t-il une meilleure façon de le faire ? Si nous devons les avoir en ligne au-dessus de l'autre, pourrions-nous agrandir les dates ? Ou pourrions-nous faire quelque chose où nous étendons et montrer que le tarif commence à 100$ ? Je peux taper dessus, je pense que j'ai descendu ici. Quand j'élargis ce type, je vois que les différents tarifs sont de 100, 248 et 270. Une autre option que j'ai regardée ici, était d'avoir ces gars l'un à côté de l'autre. Donc plus d'une pilule ou d'un format à bascule où je pourrais choisir quel tarif, et peut-être que ce gars serait sélectionné et puis il y a un moyen que je passe à partir d'ici. Un peu plus d'exploration à faire, mais juste pour le sens général, je jouais avec ceux-ci. Voici où j'ai mon écran d'accueil. Encore une fois, c'est l'écran juste ici. Donc ce type est le même que ce gars. C' est assez générique, c'est assez ennuyeux. Il y a beaucoup de choses en haut, ce qui est tout au sujet de la vente incitative plutôt que de me laisser obtenir les informations que je veux ici. Laisse-moi revenir ici. Une chose que je pensais que ce serait vraiment sympa est de donner à cette marque Southwest, un peu plus de visibilité et peut-être juste avoir de belles images ici. Juste pour le faire paraître un peu plus raffiné et sophistiqué. Une autre chose est de regarder comment je peux empiler ces éléments. J' ai tous les mêmes objets à l'écran, mais puis-je les réorganiser d'une manière un peu plus agréable ? Peut-être même introduire ici une icône un peu plus sophistiquée. Encore une fois, quelques options différentes. Celui-ci, je me concentre vraiment sur la section Livre de vol, parce que pour moi, c'est la plupart de la raison pour laquelle je vais à une application. Je vais à une application plus pour chercher un vol plutôt que de m'enregistrer parce que je ne vole pas tout le temps. Cette option a également cet exemple de navigation en bas, qui ici j'ai jeté un oeil, quelles sont quelques façons différentes que je pourrais montrer la navigation. Comment l'utilisateur pourrait-il obtenir entre les différentes sections ? Pour quelque chose comme une application de voyage ou pour cette application de voyage particulière comme la réservation d'un vol, cela peut ne pas être super important où je pourrais rentrer chez moi en réservant des vols. Je pense que celui-ci est en train de s'enregistrer, c'est des réservations, et aussi mon profil. Il y a quelques choses différentes qui seraient utiles, mais est-ce la bonne approche pour cette application ? Je ne suis pas tout à fait sûr. La méthode qu'ils utilisent en ce moment est juste le bouton Retour, sorte que cela pourrait tout simplement être parfaitement correct. Une autre façon de le faire serait d'avoir un tiroir où cela pourrait avoir des informations différentes dedans aussi. Encore une fois, quelques façons différentes que nous pourrions faire cette navigation, c'est juste une question de préférence dans, vraiment qu'est-ce que je pense va fonctionner pour l'application ? Je n'en connais peut-être pas encore. Je ne sais peut-être pas avant d'arriver à la scène filaire, parce que ici j'essaie juste de jouer avec beaucoup de choses différentes. Une fois que je suis dans les wireframes et disons que je décide, j'aime vraiment cette mise en page, mais hé, ce nav en bas ne fonctionne pas et en fait cette version de la navigation va mieux fonctionner. Alors hé, j'ai déjà réfléchi. J' ai toutes ces choses à ma disposition au fur et à mesure que je pars. Autre chose que je voulais savoir sur mes croquis ici, j'ai ajouté quelques notes d'accompagnement pour moi-même. Avec la navigation, vous ne dites pas seulement comme, hé, je veux me rappeler pas trop de robinets, cette chose devrait être accessible n'importe où, et il est facile de toujours revenir à cet écran d'accueil. Pour l'écran d'accueil, comme je l'ai dit, peut-être un peu plus de branding pour Southwest, quelques plus grands boutons plus intéressants. Ensuite, rendre la mise en page juste se sentir un peu plus moderne plutôt que juste tout coincé dans un plan vertical où c'est juste assez ennuyeux. Enfin, ma troisième page de croquis, je me concentre vraiment sur les résultats de recherche et j'ai un peu pour le résumé du voyage. Encore une fois, ce n'est pas un exercice d'esquisse totalement complet, mais c'est juste pour vous donner une idée de la façon dont j'aborderais cela et comment j'aborderais les croquis en général. Avec les résultats de la recherche, encore une fois, comme nous l'avons vu sur la toute première page des croquis, il y a beaucoup de façons d'afficher cette information. Ici, je voulais me concentrer sur cette partie, donc montrer les différents vols. J' ai aimé cette petite partie supérieure ici où j'ai mon vol de départ. Ça montre d'où je vole, où je prends l'avion, et ensuite pouvoir changer la date. Je pense que cela pourrait être vraiment, vraiment intéressant, où je peux aller en arrière et en avant d'un jour. Ou peut-être qu'il y a même une petite icône de calendrier ici qui me permet de changer complètement la date, donc je ne veux pas avoir à y aller un par un. Vous voudrez peut-être recommencer pour cette option, mais ce serait bien si nous pouvions le faire à partir d'ici. Encore une fois, cette première option est que le mode expansion, où je peux voir qu'il est de 100$. Si je tape sur ce gars, celui-là se développerait. Je pouvais voir toutes les différentes options, et ça pousserait les autres vols hors du chemin. Nous devrions également faire quelque chose avec le design visuel pour nous assurer que cela se distingue et se sent comme une chose cohésive. Mais encore une fois, nous pouvons aborder cela plus tard avec le design. Deuxième option ici, montre le plus de comme un format de carte. Encore une fois, c'est ce format où chacun de ces prix est présenté côte à côte. Ensuite, j'ai un peu plus d'importance sur les dates de vol ou les heures de vol, ainsi que si c'est non-stop ou/et quel est le numéro de vol. La troisième version, c'est plus similaire à ce qu'ils ont maintenant, mais peut-être que nous pourrions rendre le type un peu plus grand. Peut-être qu'ils ne doivent pas être si géants et que tout, ils peuvent toujours se sentir comme des boutons, juste les tonifier un peu. Encore une fois, quelques options différentes ici. Ensuite, en ce qui concerne le résumé du voyage, la partie importante ici est de savoir où vous voyagez, quels sont vos heures de vol pour votre départ, ainsi que pour votre retour, et la date est particulièrement importante ici aussi. Enfin, le prix en bas et un bouton pour acheter. Ce n'est peut-être pas tout ce qui doit aller sur cet écran de résumé. Je pense que celui-ci, je voudrais certainement explorer un peu plus. Mais encore une fois à ces fins, ça devrait suffire pour que vous commenciez. Alors allez, croquis, et j'ai hâte de voir ce que vous venez avec. 11. Prendre des croquis à Wireframes: Bienvenue de retour. Nous sommes arrivés à notre dernière technique UX. Emmenez vos croquis sur des trames filaires. Les trames filaires vous permettent d'affiner et de transformer vos esquisses et flux utilisateur en une représentation tangible de votre application. Maintenant que vous avez un tas de grandes esquisses à partir de, vous pouvez enfin sauter sur l'ordinateur et passer à l'image filaire. À partir de la phase d'esquisse, vous auriez déjà dû explorer de nombreuses possibilités et associer des idées à ce qui vous semble le mieux fonctionner. Ce raffinement devrait vous aider lorsque vous commencez à filtrer, car vous avez une meilleure idée de ce que votre application fera et comment votre interface devrait prendre en charge cela. Avec les filaires, vous devriez être descriptif, mais pas parfait pour les pixels. Essayez d'utiliser la copie réelle pour les boutons, et d'autres éléments de l'interface utilisateur afin que vous puissiez avoir une idée de la façon dont les choses vont s'intégrer ensemble. Ne vous inquiétez pas de remplir les zones de contenu avec une copie réelle, suffit d'utiliser Loremipsum là. Assurez-vous d'affiner et d'effectuer des ajustements en continu. Si vous ne l'avez pas déjà fait, vous devrez décider d'un modèle de navigation. Comment les utilisateurs vont-ils se déplacer d'une section à l'autre de l'application ? Plus important encore, qu'est-ce qui fonctionnera le mieux pour votre application ? Certains modèles courants sont les onglets inférieurs, que Foursquare, Facebook, Twitter et Pinterest utilisent, un tiroir ou un panneau coulissant comme LinkedIn et Google Maps font, ou un Home ou un « hub », que tout le monde utilise maintenant. Les exemples ci-dessous illustrent d'autres façons dont les utilisateurs peuvent naviguer. LinkedIn a un tiroir coulissant, mais ils ont également des icônes en haut pour les nouveaux messages, notifications et demandes. Expedia utilise une autre approche où vous pouvez appuyer sur n'importe quelle destination recommandée dans une liste déroulante, ou simplement choisir des hôtels ou des vols. Enfin, le troisième écran montre Flickr, où ils utilisent une navigation inférieure comme navigation principale, mais à l'intérieur de chaque section, il y a des onglets en haut pour basculer entre ces sections. L' étape suivante est que vous allez vouloir hacher les détails. N' oubliez pas que l'un des éléments clés des applications mobiles est de présenter le contenu avant tout. Ne faites pas creuser vos utilisateurs pour ce qu'ils veulent. Pensez au nombre d'appels à l'action que vous devez mettre sur chaque écran. Vous devriez essayer de vous concentrer sur un primaire et un secondaire tout au plus, mais sachez que ce n'est pas toujours possible. Rappelez-vous simplement que vous ne voulez pas donner aux utilisateurs trop d'options, afin qu'ils soient distraits de la tâche à accomplir ou qu'ils se perdent. Vous voudrez également hiérarchiser le contenu de chaque mise en page d'écran. hiérarchie est la clé, utilisez aussi peu de mots que nécessaire et s'assure que tout ce qui est présent doit être réellement là. Considérez quels éléments de l'interface utilisateur, tels que les zones de recherche , les boutons, etc., vous aurez besoin et où ils iront. N' enterrez pas la boîte de recherche si elle fait partie intégrante de votre expérience. Au fur et à mesure que vous travaillez à la création de vos filaires, c'est là que votre niveau de raffinement entrera en jeu. Vous devez vous assurer que vos fichiers sont configurés pour utiliser des dimensions d'écran précises. Je recommande d'utiliser la résolution iPhone 5S, qui est de 640 par 960 pixels. Gardez à l'esprit que vous aurez un peu moins de hauteur pour les petits iPhones, et vous aurez plus d'espace pour jouer avec l'iPhone 6 et 6 Plus. Nous devons encore trop nous inquiéter pour cela en ce moment. En outre, les échelles et les tailles que vous utilisez pour les boutons et autres éléments de l'interface utilisateur doivent être proches de la finale, sorte que vous puissiez représenter plus précisément les conceptions que vous allez créer ultérieurement. Un petit travail de préparation dans les premiers stades vous aidera une tonne plus tard. Enfin, vous voudrez assembler soigneusement vos filaires pour créer une présentation cohérente. Vos trames filaires doivent représenter chaque tâche ou parcours utilisateur que vous avez décrit, afin d'afficher le flux logique du chemin de l'utilisateur à travers votre application. Il devrait être clair quant au nombre d'étapes et d'écrans qu'un utilisateur passera pour accomplir une tâche spécifique. Comme vous l'avez fait pendant la phase d'esquisse, vous pouvez évaluer les avantages et les inconvénients de différentes solutions, et éliminer celles qui ne fonctionnent pas ou qui vous semblent simplement trop complexes. Il existe une variété d'outils que vous pouvez utiliser pour créer vos trames filaires. Choisissez un programme que vous connaissez le mieux ou dont vous pensez pouvoir obtenir les meilleurs résultats. Les outils que j'ai utilisés moi-même sont Illustrator, Sketch, Omnigraffle et Balsamiq. Dernièrement, j'ai utilisé Sketch pour mes filaires, puisque je suis capable de me déplacer assez rapidement sur l'interface et cela semble un peu plus léger que Illustrator. Je crois également que tous ces programmes ont un essai gratuit, donc vous devriez être en mesure de les utiliser n'importe lequel dont vous avez besoin. Jetons maintenant un coup d'oeil à quelques exemples filaires. J' ai tiré tous ces trucs de Dribbble, car ils ont tendance à être joliment conçus et de meilleure qualité. Notez que la plupart de ces concepteurs ont assemblé leurs fils en flux, et indiquent comment l'utilisateur se déplacerait d'un écran à l'autre en appuyant sur divers boutons ou liens. Ils comprennent également du texte pour indiquer les noms des écrans et des notes utiles. Les différents filaires présentent également une variété de styles que vous pouvez utiliser. Donc, celui de gauche ici, ils utilisent une de ces lignes rouges et flèches pour aller entre les écrans, ceux-ci un peu de couleur. Le second montre juste les écrans les uns à côté des autres. Voici un autre exemple. Ce concepteur introduit à nouveau un peu de couleur dans les filaires pour l'accent, vous pouvez le voir sur quelques boutons différents ici et en utilisant le gris foncé. Enfin, c'est un autre exemple de filaires qui sont un peu hybrides. Ils utilisent de vraies icônes, mais ils utilisent également des boutons d'espace réservé dans des boîtes en même temps. Si vous avez téléchargé le PDF de classe, que j'espère que vous avez, je vous encourage à regarder de plus près ces exemples et même à faire quelques recherches supplémentaires en ligne pour plus d'inspiration. Donc, pour limiter ce délai pour votre dernier livrable de classe, vous allez créer un ensemble de filaires annotés finaux pour compléter l'histoire de votre application de voyage. Téléchargez vos images filaires dans votre projet et partagez-les avec la classe. Je suis tellement excité de voir ce que vous avez trouvé. 12. Exemple de projet : Wireframes: Salut tout le monde. Prêt pour la dernière démonstration du projet de classe. Ici, je vais vous montrer comment je vais aborder les filaires pour ce projet. Je vais commencer par jeter un oeil en arrière ma carte de parcours utilisateur ici pour rappeler le flux que j'avais décrit. Cela devrait sembler familier, nous sommes passés en revue ces deux vidéos il y a. Idéalement, vous feriez référence à cette carte ainsi qu'à vos esquisses lorsque vous complétez vos filaires. Vous pouvez les imprimer pour les avoir facilement à côté de vous ou simplement ouvrir le fichier afin que vous puissiez basculer entre les fichiers. Une autre chose qui serait pratique à avoir sont vos croquis. Depuis que j'ai pris une photo de ceux-ci, je les ai sur l'ordinateur, mais il pourrait aussi être utile d'avoir votre carnet de croquis ou tout ce que vous avez utilisé pour vos croquis à côté de vous aussi. Si nous jetons un coup d'oeil sur ce parcours utilisateur, le flux que nous allons capturer avec nos filaires commence à partir de l'écran d'accueil, nous allons taper sur Voyage de livre, je vais entrer à l'endroit où je vole et à partir de, les dates, puis je vais chercher des vols et être en mesure de choisir un vol de départ et un vol de retour, puis voir un résumé pour aller de l'avant et continuer à acheter à partir de là. Donc c'est le flux que nous allons couvrir. Maintenant, pour les filaires. Ouvre ça. Pour commencer, puisque les filaires prennent beaucoup plus de temps, ils sont beaucoup plus complexes à créer à la volée au cours de cette démonstration, je suis allé de l'avant et me moquer de ceux-ci pour ce projet. Je vais vous accompagner dans tout ça. Mais avant de commencer, je veux vraiment partager certaines des choses que j'ai utilisées pour créer ces filaires qui, je pense, vont être vraiment utiles. La première chose est que vous remarquerez ici que nous avons ces petits contours. C' est en fait un modèle d'iPhone que j' utilise que j'ai trouvé en ligne qui était gratuit à télécharger. Je vais inclure ceci pour vous les gars afin que vous puissiez l'utiliser aussi pour vos projets. C' est assez utile. Je pense que cela rend juste les filaires un peu plus polis, et cela vous donne une idée de exactement où votre contenu doit s'intégrer dans le cadre. L' autre chose que j'ai fait était en fait télécharger autre fichier de croquis qui est un modèle pour iPhones, et pas seulement un modèle, mais vous pouvez voir ici j'ai ce petit bouton à bascule, j'ai certaines de ces flèches. Si vous êtes familier avec iOS, ce sont des éléments assez standard. En fait, ça va le sortir ici. C' est le modèle iOS 8 iPhone 6 de Teehan-Lax, et cette société a créé beaucoup et beaucoup de modèles, ils ont toutes sortes de personnel pour Photoshop et pour illustrateur et croquis. Ce fichier d'esquisse est vraiment pratique. Si vous ne l'avez pas vu, je l'inclut également dans les ressources de la classe afin que vous puissiez aller de l'avant et télécharger cela. Ici vous pouvez voir qu'ils ont toutes sortes d'éléments que vous trouverez sur l'iPhone, différentes icônes au cas où vous avez besoin de choses pour les barres d'outils. Ils ont des boutons, ils ont ce que nous appelons contrôles de segment, des boîtes de recherche, des claviers. Il y a même la façon dont vous pouvez afficher les vues de table. Tous ces trucs sont à votre disposition pour l'utiliser dans vos trames filaires. Ensuite, à partir de là, vous pouvez réellement les modifier un peu. Donc, si je retourne à mes filaires, ici vous pouvez voir que j'ai juste changé la police et changé la couleur pour la rendre plus noir et blanc à mes fins. Super. Donc, ce sont quelques outils pour vous aider à démarrer, mais pour couvrir la façon dont j'ai créé ces filaires, j'ai fait la même chose que j'ai fait lors de la création des personas et des trajets utilisateur. La première chose que j'ai fait était de monter ici pour insérer et créer un plan de travail, et j'ai juste dessiné ce grand carré. Encore une fois pour rafraîchir, je peux cliquer ici, et je peux faire glisser les boîtes de coin ici, ils sont la boîte de sélection ici pour rendre cette chose plus grande ou plus petite que nécessaire, et juste cliquer pour enregistrer cela. J' ai créé le plan de travail, puis j'ai glissé à partir de mon fichier modèle ces arrière-plans pour le téléphone. Une chose à remarquer, je vais en fait mettre ça au bas de la couche, j'ai verrouillé ces couches. Si les choses ne sont pas verrouillées, si je déverrouille cela là, alors je peux parfois déplacer les choses un peu trop, et cela devient un peu ennuyeux. Je veux juste aller de l'avant et verrouiller ça pour savoir que je ne bouge pas accidentellement ça nulle part. Super. Commençons par parcourir ce que j'ai fait ici. La première chose était de créer l'écran d'accueil de l'application. Encore une fois, nous avons couvert cet écran de deux façons différentes, nous l'avons regardé dans nos croquis. Je remettrai mes croquis pour me rappeler, voyons. Ici, nous allons à la maison options pour notre navigation. J' ai eu quelques variations différentes ici et j'ai regardé quelques choses. À ces fins, j'ai juste choisi une et j'ai couru avec elle, mais vous voudrez peut-être vraiment se moquer de quelques de ces versions dans vos wireframes et voir ce qui fonctionne. Vous pouvez toujours faire un fichier maître où vous avez tout un tas d'options différentes d'écrans là-dedans, puis choisir et choisir au fur et à mesure. Mais à ces fins, juste gardé assez simple. Voici mes options que j'ai. Nous allons nous concentrer sur la réservation d'un vol ici, donc ce serait notre prochain écran. Puis ici, je viens d'incorporer les deux choses que nous avions mentionnées tout au long de ce projet. Encore une fois, nous prenons l'avion à destination et en provenance, dates, combien de personnes voyagent, s'il y a un code promotionnel, puis à nouveau aller-retour ou aller simple, puis rechercher. Je n'ai pas couvert tous ces éléments, mais si je tape sur l'un de ces endroits où je voyage, puis ici, j'ai choisi de décrire la ville de départ. Ce serait la même chose pour les deux, et j'ai également décrit cela ici, montrant que, je vais en fait faire ce plein écran pour le rendre un peu plus grand. Ok, super. Pour montrer que je vais passer par chacune de ces étapes. Quand vous faites vos filaires, ce serait génial de voir toutes les différentes possibilités et tous les différents écrans, mais pour cela, juste pour la démonstration, je voulais juste capturer quelques choses . Une chose que j'avais mentionnée quand je pensais à cette application de vol, c'est que je voulais vraiment faire quelques optimisations. Une des choses que j'ai remarqué que Southwest ne fait pas c'est qu'ils n'utilisent pas du tout votre emplacement. Celle-là, je montre que la première chose qui est là-bas est San Francisco parce que c'est l'aéroport le plus proche de moi. Si je tape dessus et que je viens ici, je peux voir que San Francisco est vérifié, et je peux aussi voir qu'Oakland et San Jose sont au sommet parce que ce sont les aéroports les plus proches de moi, et ensuite ils commencent à aller par ordre alphabétique. Encore une fois, je peux taper ici pour rechercher n'importe quelle ville que je veux. Une fois que j'en ai fini, ma prochaine étape serait d'appuyer sur ce bouton de recherche de vols, et puis ici je vais chercher un vol de départ. Je voulais juste rendre cet écran un peu plus visuel, en apportant les grands codes aéroportuaires, un peu d'iconographie, et il y a aussi une barre de date. Voici quelque chose que je peux utiliser pour basculer. Disons que je me suis dit : « Oh, en fait, je veux voir si le 23 ou le 22 avril, ou peut-être même le 25 a un meilleur prix, alors je peux facilement basculer ici. » Je n'ai pas développé ce gars pour ce cadre, mais si c'était mon vrai projet de classe, alors j'aurais certainement voulu le faire pour comprendre toutes ces interactions et comment cette chose fonctionnerait. Alors ici, je démontre que voici les options de vol, nous pouvons voir que c'est à partir de ce prix. Alors, si je tape sur l'un de ceux-ci, nous allons déménager ici, et ce gars va s'agrandir pour que je puisse voir la volonté de retirer le prix à tout moment, et le prix de sélection de l'entreprise. Ensuite, à partir d'ici, je peux choisir l'un d'entre eux. De cette façon, vous n'avez pas à regarder tous ces chiffres différents en même temps. Enfin, après avoir choisi ce type, je vais revenir ici pour sélectionner mon vol de retour, et cet écran devrait ressembler au premier car ils font essentiellement exactement la même chose. Ensuite, à partir d'ici, je vais aller de l'avant, je n'ai pas simplement copié et coller ce gars, mais ce serait le même que celui-ci pour savoir lequel je voulais aller de l'avant et choisir. Ensuite, une fois que j'ai choisi mes deux vols, je vais aller au résumé de mon vol. Une chose que j'ai fait en vous guidant à travers ça, c'est que j'ai éteint toutes mes flèches. Je vais revenir en arrière et te montrer ces gars, mais pour l'instant, c'est un peu plus propre de passer pour l'instant sans eux. Encore une fois, résumé de vol, je n'ai pas passé trop de temps à se moquer de cela évidemment, et puis à partir d'ici, une fois que vous examinez tout, si tout semble bien et que vous ne voulez pas recommencer, je vais frapper continuer, alors je passerais par le processus de réservation, puis ma confirmation, et puis je suis tout prêt. Assez simple, revenons-le ici, et vous pouvez voir que j'ai également essayé de noter ici que j'ai étiqueté tous mes dossiers et essayé de regrouper les choses pour que cela ait du sens. Donc ce type est mon en-tête, mes étiquettes sont partout, mais ce sont ces gars ici. Les flèches seront mon flux que mon utilisateur prend, et je vais simplement verrouiller ceci pour voir si cela le cache. Oui, ça aide. Ensuite, j'ai également étiqueté ici, j'ai écran d'accueil, réserver un vol, donc essayer de juste montrer chaque pièce comme ils ont été étiquetés ici. Super. Ici, vous pouvez voir que j'ai ajouté ces boîtes au-dessus de mes filaires pour montrer le chemin. Cela peut être vraiment utile surtout quand vous esquissez un flux et il y a un tas de choses différentes sur lesquelles je pourrais cliquer, juste pour le rendre un peu plus clair. Aussi si vous faites plus d'un flux, donc si peut-être je commence sur cet écran d'accueil de l'application et je vais faire le flux de vol de livre, et alors peut-être que je veux aussi faire l'état du vol, donc le flux d'enregistrement ainsi. Avoir ces contours gardera cela droit pour vous. Même si tu veux utiliser un autre document, c'est sympa de voir que je tape sur ce gars et que je déménage ici. Encore une fois, appuyez sur le vol de livre, je peux voir que j'ai tapé sur ce gars pour aller ici. Une fois que j'ai fini avec ce gars, je vais aller à l'écran suivant même chose, je tape ici montrer que celui-ci est ouvert, sélectionnez ce gars, je passe à l'écran suivant. Il vous montre juste un chemin linéaire au fur et à mesure que vous allez, et ensuite juste pour le finir ici. Je vais reculer un peu, on y va. Ce document est un peu gros juste parce que cet iphone est arrivé à être humongue. Vous pouvez toujours réduire n'importe quoi, vous sentir libre, mais je me suis dit, et juste les laisser à la taille qu'ils sont pour le moment. Espérons que cela vous donne une bonne idée de ce que nous recherchons avec les filaires pour ce projet. Ils sont un peu plus détaillés, il y a des choses qui doivent encore être repassées, il y a des choses qui, qui sait peut-être quand j'arriverai à la phase de conception, je pourrais changer, donc quelque chose comme ça, peut-être que je ne veulent pas utiliser d'icône. Peut-être que je regarde cela dans le design visuel et en fait ne fonctionne pas très bien, mais l'avoir ici dans nos fils filaires capture vraiment toutes les choses différentes que nous allons traverser. Encore une fois, si ce sont vos filaires, j'aimerais voir toutes les différentes possibilités, alors que se passe-t-il lorsque j'appuie sur cette date de départ pour choisir une date ? A quoi ressemble ce calendrier ? À quoi ressemble ce calendrier lorsque je veux changer d'une date à l'autre ? Est-ce que ce truc me laisse juste cliquer ? Puis-je ouvrir le calendrier et le choisir complètement ? Disons que je voulais faire May, au lieu d'avoir à taper ou à retourner à Mars par exemple, quoi ressemblent toutes ces choses ? Tout cela va être très utile à jeter un coup d'oeil dans cette étape de filature. C'est une pellicule. Une fois que vous aurez terminé vos filaires, j'aimerais que vous téléchargez l'ensemble final dans votre projet de classe, et ne soyez pas trop timide pour demander des commentaires non plus. Si vous continuez cette série de cours, nous allons reprendre ce projet. Ainsi, vous pouvez toujours incorporer commentaires ou des changements dans votre projet à mesure qu'il s'affine. J' espère vraiment que vous avez apprécié ce cours et que vous vous sentez doté de vos nouvelles compétences UX. Merci beaucoup d'avoir regardé.