Transcription
1. Introduction: Bienvenue dans ce cours Skillshare sur la conception de l'expérience utilisateur et les bases du cadrage de fil. Merci de vous accorder. Dans cette classe, nous allons construire ensemble un ensemble de trames filaires pour une application mobile étape par étape, ensemble. Un peu sur moi. m'appelle Sarah Bannister et je suis un concepteur d'expérience utilisateur freelance et concepteur d'interface utilisateur. J' ai travaillé sur des marques comme Ford et Streamlette. Je suis passionné par la conception de sites Web et d'applications mobiles qui résolvent les problèmes, sont
superbes et conviviales. Je me souviens du jour où j'ai réalisé que le design allait être ma carrière de rêve. J' étais tellement excité d'apprendre qu'il y avait une carrière qui pouvait répondre à mon besoin d' un débouché créatif tout en aidant les
gens à devenir plus facile grâce au design et à la technologie. Si vous êtes quelque chose comme moi et que vous partagez ces mêmes valeurs, le
design sera un merveilleux débouché pour explorer et peut-être commencer une carrière dans. Cette classe vous sera utile si vous avez peu ou pas d'expérience dans conception
d'interface utilisateur ou les bases de conception de l'expérience utilisateur, mais si vous avez un intérêt à les explorer. Cool. Commençons.
2. Qu'est-ce un Wireframe ?: filaires sont un élément essentiel du processus de conception du produit. Un filaire est une maquette squelettique d'un concept web ou d'application. Un filaire peut être présenté dans une large gamme de visuels,
de faible à haute fidélité,
ce qui signifie qu' de faible à haute fidélité, un filaire peut être fabriqué avec quelque chose d'
aussi simple que le crayon et le papier ou le stylo et le tableau blanc, jusqu'à la création de cadres graphiques. dans un logiciel de conception comme Sketch, Adobe XD, Balsamiq ou Axure. filaires à faible fidélité sont généralement recommandés au début de tout nouveau processus de conception. C' est parce qu'ils vous permettent de prendre plusieurs concepts et de les tester rapidement sans avoir à y investir une tonne de temps ou de coûts. Vous pouvez ensuite prendre les différentes idées et les placer devant les participants de test
utilisateur ou les clients pour obtenir des commentaires. Vous pouvez obtenir des commentaires plus rapidement, puis effectuer les révisions nécessaires pour affiner la meilleure stratégie de conception pour votre produit. filaires sont une partie précoce de la conception du produit ou de ce que
l'on appelle le processus de conception conçu par une société de design IDEO, mais ils ne commencent pas au début. filaires font partie du processus de conception physique, qui vient après avoir fait beaucoup de recherches et de découvertes sur le produit que vous allez concevoir. Cette phase de découverte est assez d'informations pour toute une autre classe. Supposons que nous avons déjà parcouru nos sprints de recherche et de découverte, et nous savons déjà que nous allons concevoir des filaires pour une application mobile de voyage.
3. Qu'est-un Prototype ?: Pour ce cours, nous construirons également un prototype cliquable avec nos cadres filaires pour les derniers cours de la classe. Un prototype est en corrélation avec les trames filaires, mais il existe deux livrables de conception différents. prototypes sont des démonstrations interactives du fonctionnement et de l'apparence de votre produit. Les prototypes peuvent également être de faible à haute fidélité, vous pouvez créer des prototypes à partir de vos croquis papier et crayon, ou à partir de vos conceptions d'applications haute fidélité entièrement conçues. Un prototype permet généralement à un utilisateur de traverser un certain ou plusieurs flux de tâches et peut inclure ou non des interactions et des animations. prototypes sont importants pour le processus de conception du produit car ils vous permettent de communiquer conceptions prévues aux utilisateurs et aux développeurs de tests
utilisateur ou à d'autres équipes dans le processus de transfert, ou aux clients et les parties prenantes auxquelles vous devez présenter vos conceptions, elles prennent votre conception statique et le rendent plus réaliste. Être capable de voir comment les utilisateurs interagissent avec votre produit fait partie
du processus et voir ce qui fonctionne et ce qui ne fonctionne pas dans votre conception, cela vous permettra d'effectuer les meilleures révisions pour votre produit.
4. Le processus de conception: Connaître le processus de conception est une compétence importante que vous pouvez ajouter à votre trousse d'outils lorsque vous entrez dans le monde du design. Je vais passer brièvement en revue le processus qui est devenu connu sous le nom de design thinking, rendu populaire par la société de design IDEO. La première étape du processus de conception de pensée est d'empathie. L' empathie est cruciale lorsque vous concevez des produits qui seront utilisés par les gens. Ce sprint vous permet d'en savoir plus sur les points d'épingle de terrain que vous essayez de résoudre pour le public cible qui pourrait utiliser votre application. Vos livrables de conception pour l'étape de l'empathie de la conception peuvent inclure recherches et des statistiques sur les
utilisateurs et une compréhension du public cible pour lequel vous concevez. La deuxième étape du processus de réflexion de conception est l'étape définie. Dans la phase de définition du processus de réflexion de conception, vous allez prendre toutes les informations que vous avez recueillies sur vos utilisateurs pendant le sprint d'empathie et les synthétiser en éléments clés qui vous aideront à définir votre approche aux problèmes que vous avez déterminés que votre produit résoudra. Vos produits livrables pour l'étape de définition peuvent inclure les principales leçons tirées de la recherche et des entrevues auprès des utilisateurs, des définitions de
stratégie telles qu'un énoncé de problème, des objectifs commerciaux, besoins et des objectifs des
utilisateurs, et des indicateurs de succès telles que les mesures et les indicateurs de performance clés. La troisième étape du processus de conception de pensée est l'étape idéée. Une fois que vous avez une bonne compréhension de votre stratégie et des besoins des utilisateurs, vous pouvez commencer à réfléchir à différentes idées qui pourraient être des solutions
potentielles au problème ou à de multiples problèmes que votre produit vise à résoudre. C' est la partie où la pensée créative est encouragée. Pensez à l'extérieur des sentiers battus pour trouver des moyens de résoudre ces problèmes. livrables de l'étape idéale peuvent inclure des croquis de différentes techniques de remue-méninges et une liste restreinte de fonctionnalités qui pourraient être intégrées à vos différents concepts de conception. La quatrième étape du processus de réflexion de conception est le prototypage. En fonction de la contrainte temporelle de la portée de votre projet, vous pouvez déterminer le niveau de fidélité requis pour vos filaires et votre prototype. Cette phase de prototypage est quand vous allez prendre les concepts que vous avez
inventés dans la phase d'idéation et les transformer en filaires, un prototype interactif qui présente la clause de tâche principale qu'un utilisateur doit remplir lors de l'utilisation de votre produit. Vous utilisez ces prototypes pour obtenir vrais participants au test de votre public cible en utilisant rapidement votre produit, ce qui est important pour la phase finale de test, où vous obtiendrez commentaires afin que vous puissiez effectuer vos révisions finales de conception. Les livrables de votre phase de prototypage peuvent inclure
des filaires de vos flux utilisateur et des prototypes de faible à haute fidélité. La cinquième étape du processus de conception de pensée est le test. Dans cette dernière phase du processus de conception, vous testerez le nombre de concepts reçus pour déterminer que le temps le permet. Cette phase de test peut révéler des drapeaux rouges ou des problèmes avec votre conception que vous n'avez peut-être pas remarqué avant de tester avec de vraies personnes. Cela vous permet d'effectuer les révisions nécessaires vos conceptions de faible fidélité au fur et à mesure que vous augmentez la fidélité afin de ne pas découvrir
les erreurs de conception plus tard après avoir consacré plus de temps ou d'argent à eux, disons dans le phase de développement. Les livrables de la phase de test peuvent inclure des commentaires des
utilisateurs basés sur votre conception préliminaire, des fonctionnalités
incluses et des flux utilisateur. Le design est un processus extrêmement itératif et quelque peu unlinéaire. Vous complétez une certaine forme du processus de réflexion de conception avec chaque révision que vous faites pour un produit axé sur l'humain. Dans cette étape importante de réflexion, vous passerez en revue les commentaires et les résultats de vos tests, qui vous indiqueront où effectuer des révisions afin que vous puissiez
recommencer le processus de conception sur de nouveaux concepts qui sont des versions améliorées de votre conception déjà testée.
5. Qu'est-ce qu'une tâche d'utilisateur ?: Étant donné qu'une application sur laquelle vous travaillez en tant que concepteur UX ou d'
interface utilisateur peut se composer de nombreux écrans différents, parfois des centaines d'écrans et d'états d'écrans et de fonctionnalités différentes. Dans l'intérêt de ce cours, nous allons travailler à l'achèvement d'un flux de tâches unique pour une application mobile de voyage. Un flux de tâches utilisateur est une tâche que les utilisateurs utiliseraient votre application ou votre produit pour effectuer. Le flux doit guider votre utilisateur vers le point d'entrée de la tâche, en les amenant à chaque étape jusqu'à l'étape finale et à un résultat réalisable, comme l'ajout d'un événement à son calendrier numérique personnel ou l'achat d'un produit en ligne. conversions réussies dépendent de la création d'un flux convivial. Si les utilisateurs ne savent pas comment effectuer la tâche principale proposée par votre application, les utilisateurs n'utiliseront tout simplement pas votre produit. Nous pouvons déterminer les grandes lignes de notre flux d'utilisateurs en comprenant nos objectifs commerciaux et les besoins des utilisateurs, que nous avons déterminés lors de la phase de définition du processus de réflexion de conception. Se concentrer sur les objectifs commerciaux et les besoins des utilisateurs répondra aux exigences des clients et des parties prenantes qui sont investis dans le projet et qui cherchent à atteindre certaines mesures de réussite tout
en aidant l'utilisateur à atteindre ses objectifs et se sentir satisfait de votre produit. Pour la partie filaire de notre application, nous allons concevoir un flux de tâches qui emmènera l'utilisateur à
travers le processus de réservation dans un hôtel pour une application de voyage. D' autres flux de tâches que vous pouvez concevoir pour une application de voyage peuvent inclure la réservation d'un vol, recherche de différentes choses à faire dans votre destination et la réservation de votre groupe pour différentes attractions, ou la planification d'un rendez-vous avec un voyage agent. Comme vous pouvez le voir, vous pouvez avoir de nombreux flux de tâches différents pour une seule application. Je ne veux pas que ce cours prenne trop de votre temps, donc nous allons rester avec le flux de tâches unique. Commençons avec nos trames filaires.
6. Outils de cadrage: Ce sont les outils que vous devrez suivre et créer un cadre de crayon et de fil de papier. La première chose est le papier quadrillé. J' ai inclus une ressource que vous pouvez télécharger et imprimer différentes dimensions de papier grille, y compris les dimensions mobiles encadrées par un graphique de téléphone, vous pouvez fil cadre à l'intérieur de. La deuxième chose est un crayon et une gomme. Alors que vous pouvez dessiner au stylo, il est agréable de pouvoir effacer vos erreurs ou faire des révisions. La dernière chose dont vous aurez besoin est d'une règle pour vous
assurer que vous gardez des formes et des lignes bien serrées, et que tout semble cohérent. Vous pouvez également commander un encadrement métallique ou un gabarit d'interface utilisateur sur Amazon. Vous n'avez pas besoin de cela, mais cela vous permet de dessiner rapidement et précisément des choses comme l'endroit où se trouvent vos icônes sociales ou d'autres éléments d'interface utilisateur communs. Commençons.
7. Wireframe: Le but d'un filaire est de décrire
la structure squelettique de la conception de chaque criblage. filaires sont constitués de formes, de
lignes, de boîtes, de texte et de boutons. Donc, des choses comme les images, la
couleur, la direction artistique, la topographie, ces choses ne sont pas importantes dans le
processus de cadrage métallique et elles sont en fait découragées parce que vous ne voulez pas que votre utilisateur soit enveloppé dans les détails fins et ce que
pourrait être le design final , nous ne travaillons pas à la conception finale. Je l'ai mentionné précédemment, la couleur n'est pas conseillée et c'est généralement le cas. Il y a des cas où vous pouvez vouloir utiliser la couleur. Par exemple, je l'utilise pour les CTA,
si utile pour moi afin que je puisse me rappeler ce que je voulais dire être interactif ainsi que les autres à qui je remets mon design. Alors qu'un filaire est fondamentalement un brouillon, nous voulons garder tout cohérent en ce qui concerne le dimensionnement et l'espacement. Plus vous pouvez faire paraître vos fils esquissés sur papier, plus ils seront lisibles et utilisables et vous obtiendrez commentaires
plus cohérents de la part de vos utilisateurs lors des tests. Tout ce que vous voulez, c'est que votre design soit lisible et propre. Il est important de ne pas être trop pris dans les détails. Par exemple, nous ne savons probablement même pas encore quelle copie nous aimerions utiliser. Vous pouvez utiliser des espaces réservés pour les images et la copie, tels que de petites boîtes rectangulaires ou des carrés. Ceci est appelé cadrage de bloc et va
définir le flux utilisateur aura besoin pour ce cadre de fil. La première partie est la navigation et la possibilité de parcourir les hôtels. La deuxième étape sera de permettre à l'utilisateur de définir dates
d'arrivée et de départ et de fixer le nombre de personnes qui séjourneront. La troisième étape est la possibilité de parcourir différentes offres. Quatrièmement, la possibilité d'afficher une page détaillée sur une offre disponible. Cinquième étape est de réserver enfin une chambre. La sixième étape invitera les utilisateurs à fournir leurs informations et détails de
paiement et la dernière étape sera la confirmation de réservation.
8. Numérisation et téléchargement de vos fichiers de Wireframes: Une application scanner prendra automatiquement les conceptions de vos documents et les
améliorera comme un vrai scanner copierait et transférerait des documents. Ils seront beaucoup plus lisibles car le contraste sera automatiquement ajusté pour vous. Une fois que vous avez pris des photos de toutes vos conceptions, vous allez simplement les transférer sur votre ordinateur afin que nous
puissions ensuite les télécharger dans un logiciel de prototypage.
9. Prototyping InVision (Invisionapp.com): Ensuite, nous allons sur invisionapp.com et créer un compte gratuit sur invision. Une fois que vous êtes dans votre compte, cliquez sur le grand bouton rose dans le coin supérieur droit pour lancer un nouveau projet. Nommez le projet et sélectionnez le prototype dans la liste des options du projet. Ensuite, vous pouvez simplement glisser-déposer vos fichiers dans cette section du tableau de bord. Chaque fois que vous apportez une révision à votre conception, si vous entrez un fichier portant le même nom, il écrasera votre fichier d'origine. C' est donc facile si vous essayez de mettre à jour vos conceptions après avoir déterminé les révisions. Vous pouvez également renommer les titres généraux
des écrans sans modifier les noms de fichiers ici. Maintenant, cliquez sur l'un des écrans. Ensuite, nous allons passer en mode construction ici en bas. Maintenant, nous allons simplement cliquer et glisser sur un élément avec notre souris et cela va créer ce qu'on appelle un hotspot. Un point d'accès est l'endroit où l'utilisateur cliquera pour déclencher une interaction avec votre prototype. Nous allons passer en revue et créer des hotspots pour chaque écran jusqu'à ce que nous ayons un prototype pleinement fonctionnel qui permettra à un utilisateur de passer par votre flux de tâches. Vous disposez maintenant d'un prototype fonctionnel de votre conception que vous pouvez montrer à vos participants au test de perspective ou présenter votre processus de réflexion aux parties prenantes. Ou vous pouvez simplement montrer à vos amis et famille que vous savez comment concevoir des applications mobiles tueuses.
10. Conclusion: Tu l'as fait, un travail génial. Nous venons de construire des filaires et un prototype entièrement fonctionnel. J' adorerais voir le travail de tout le monde. Veuillez télécharger des images de vos filaires dans la galerie de projets et parler un peu de votre expérience. Quel était votre aspect préféré du filage ? Quelle était la partie la plus difficile ? Avez-vous choisi de concevoir un flux de tâches différent pour une application mobile de voyage ou une application différente de celle que nous avons faite en classe ? Quelles autres idées d'applications pourriez-vous essayer de concevoir à l'avenir ? Mieux encore, vous pouvez également inclure un lien vers votre prototype d'
vision en direct dans la description de votre projet. Vous pouvez le faire avec ce bouton. J' ai hâte de voir tes dessins. Merci beaucoup d'avoir suivi ce cours.
Sarah Bannister, UX/UI Designer | Dog Enthusiast
