Prototyper pour le Web I : information, UX et prototypes papier

1. Bande-annonce: Je suis Erika Heins, je suis concepteur Web et développeur Web. Je travaille depuis plus de 10 ans sur le terrain aux États-Unis. Ceci est organisé Web design, UX, IA et prototypes papier. Cette première classe porte sur l'organisation et la planification d'un site Web. Donc, nous allons passer en revue les grandes lignes de contenu à propos de, qu'avez-vous ? Que devez-vous créer ? Qui pouvez-vous obtenir pour commencer à travailler sur la création de ce contenu dans certaines lignes directrices de marque, donc c'est tout au long du processus devrait provenir d'un point de vue cohérent ? Ensuite, dans les sitemaps, les histoires d'utilisateurs et les filaires. Tout ce genre de fonctionnalité et de narration comme une façon de naviguer sur un site Web. Donc, à la fin de ce cours, vous aurez des prototypes de papier cliquables. Il peut s'agir de croquis au stylo et au papier que vous avez liés en tant que JPEG pour effectuer des tests utilisateur ou nous utiliserons un outil appelé Supposer. Être capable de créer des sites Web et de maintenir , de comprendre comment ils fonctionnent, et comment les rendre plus puissants ou efficaces n'est qu'une de ces compétences précieuses. 2. Introduction: Bonjour et bienvenue à la conception web organisée. L' objectif de cette classe est de fournir tous les contours dont vous avez besoin pour un processus de conception Web clair et productif. Comme le dit Ryan Singer, design est un processus dépendant du chemin. Nous voulons donc diviser le processus en étapes distinctes et recueillir les bons commentaires au bon moment, afin de prendre de bonnes décisions à chaque point. La conception web réactive a changé beaucoup de nos workflows et nous parlerons donc d'un processus avec plusieurs prototypes. Notre projet est de planifier un site web pour vous-même ou quelqu'un d'autre. Vous allez comprendre votre navigation, esquisser l'expérience utilisateur et tester la façon dont vos idées sont reçues. Vous pouvez compléter le projet assigné ou suivre les leçons de votre propre idée. Nous discuterons à travers des notes de projet, des sitemaps, des consignes de marque, contours de contenu, des flux utilisateur, filaires réactifs et des tests de convivialité. Vous pouvez remettre ces documents aux concepteurs et développeurs ou suivre les deux classes suivantes pour concevoir et construire le site vous-même. Les outils que nous utiliserons sont : un éditeur de texte comme TextEdit, Google Drawings, vieux stylo et papier ordinaire, et Balsamiq. Alors commençons. Allez-y et configurez un compte Google Drive si vous en avez besoin et créez un dossier de projet pour ce site. Téléchargez également Balsamiq si vous n'avez pas l'application, ils ont un essai gratuit pour commencer. 3. Plans de projet: Commençons par les grandes lignes de nos projets. Ces questions et ces plans nous permettront de rester sur la bonne voie tout au long du processus. Il y a un fichier de plans de projet dans la section Ressources, si vous voulez suivre et remplir le vôtre. abord, regardez vos objectifs de haut niveau, pourquoi ce site doit-il exister ? Y a-t-il des mesures spécifiques que vous poursuivez ? Qu' est-ce qui vous fera voir ce site comme un succès ? Assurez-vous que votre équipe est d'accord. On fait un événement de mécène donc, on veut évidemment que les gens se présentent. Beaucoup de gens s'arrêtent là, mais il y a aussi des objectifs secondaires. Nous voulons que les participants apprennent à se connaître, nous voulons qu'ils profitent de cet événement même après et nous pourrions vouloir ou avoir besoin de parrainage. Alors, faites une liste de quelque chose comme ça. Beaucoup de startups regardent ce qu'on appelle les métriques pirates à cause de l'acronyme. s'agit de l'acquisition, qui est le nombre de personnes que vous accédez au site, l' activation, le nombre de personnes qui font quelque chose une fois qu'elles y sont arrivées, chiffre d'affaires, ce qui est ce qu'elles contribuent à la durabilité du site, rétention, ce qui est ce que nombre revenir à nouveau, et le renvoi, bien sûr, qui dit à un ami. Donc, notez tous les numéros spécifiques que vous aimeriez toucher. Maintenant, parlons du processus. Comment allons-nous atteindre ces objectifs ? Comment allons-nous gérer le web responsive ? Ainsi, un processus de conception de cascade typique va de l'idée aux plans en passant par les maquettes en passant par le code. Un processus de conception centré sur l'utilisateur implique les utilisateurs à chaque étape de la façon de traiter les commentaires le plus tôt possible. C' est un changement important dans la perspective et si vous avez de la chance que Skillshare vous offre le forum pour présenter et tester votre travail avec d'autres. processus de conception de Stanford décrit cela comme de l'empathie. Vous voulez en savoir plus sur le public pour lequel vous concevez. processus de conception centré sur l'homme d'IDEO commence par l'audition. Vous sortez et vous écoutez des observations et des histoires. Le point principal est que vous devez parler à vos utilisateurs. Vous devez les écouter et vous devez visualiser leur vie et leur routine quotidienne afin de vraiment concevoir quelque chose qui leur convient et qui leur plaît. Capturez toutes vos observations sous la forme qui vous convient le mieux et vous pouvez utiliser diverses méthodes formelles pour gagner cette empathie. C' est hors du champ d'application de cette classe, mais consultez l'agence anciennement connue sous le nom de Bolt Peters pour trouver beaucoup de ressources exceptionnelles. Tout se résume à la compréhension. Si vous concevez pour quelqu'un d'autre que vous-même, assurez-vous de bien comprendre leur point de vue. Tu essayes de voir le monde à travers leurs yeux. Le design est la traduction, pas l'art. Gardez votre esprit aussi ouvert que possible. Nous allons passer par divers exercices dans ce cours et si vous abandonnez votre expertise, vous pourriez trouver quelque chose de nouveau. Alors, lorsque vous pensez à vos utilisateurs, tenez compte de votre impact. Quel pourrait être l'héritage de ce projet parce qu'il existe différents formats qu'un site Web peut prendre. Les brochures sont le style le plus ancien où vous ne faites que présenter et organiser des informations textuelles. Mais les jeux et les communautés sont maintenant plus répandus ou importants maintenant que nous avons la technologie nécessaire pour les soutenir. Même si vous ne construisez pas toute une communauté ou un jeu en ligne, vous pouvez toujours l'utiliser comme modèle de conception pour une inspiration interactive et visuelle. Par exemple, Facebook a été conçu comme un miroir des communautés du monde réel. C' est l'interaction principale est comme qui encourage les gens à poster les choses les plus sympathiques. Jonathan Harris a conçu Cowbird comme plateforme de narration. Ses actions comprennent le dévouement, la germination et plus encore. Il parle de la façon dont cela a créé une compétition de vulnérabilité, un sentiment totalement différent sur le site. Donc, si nous considérons notre site comme un réseau social, nous pourrions simplement énumérer quelques fonctionnalités de base, mais si nous venons avec une nouvelle métaphore, cela pourrait vraiment aider le site à évoluer vers quelque chose de nouveau. Pensez également à quand les gens vont visiter le site, dans un moment d'ennui, comme une habitude ou dans la poursuite d'un but et rappelez-vous où ils pourraient être et comment votre site pourrait servir ou s'adapter à cela. Votre site est-il une carte pour découvrir quelque chose nouveau ou est-ce un service pour vous aider à vous souvenir de quelque chose d'important ? Ce sont toutes des métaphores et des inspirations, revenons à la pratique. Revenez donc à votre document sur les grandes lignes de projet et encore une fois, listez tous vos objectifs pour ce projet. Ils pourraient être élevés et élevés et aussi extrêmement pratiques. Maintenant, listez tout le contenu spécifique avec lequel vous devez travailler. Pour être aussi précis que possible, nous voulons des morceaux pas des blobs vagues, comme le dit Karen Migraine, des textes, des images, des vidéos, chansons, tout ce qui est prêt à être placé dans vos mises en page. Je fais un site web pour mon ami, Ariel Crass qui est professeur de yoga. Donc, voici le type de contenu que je pourrais avoir sur son site en fonction de ce qu'il a déjà sur son site actuel. Mais vous voulez aussi énumérer les choses que vous voulez créer, une vidéo d'introduction, une biographie, n'importe quoi. Parfois, le client a cette liste pour vous, mais souvent elle est incomplète, donc vous voulez y réfléchir aussi. Essayez de penser dans ces pièces discrètes, pas dans les pages complètes. Plus nous sommes spécifiques, mieux nos mises en page peuvent être. La troisième chose à penser est les phases de ce site. Par exemple, si vous créez un site d'événements, vous aurez des éléments avant l'événement, par exemple une vue d'ensemble, une planification, un lien de registre, mais vous pouvez également avoir un contenu différent pendant l'événement. Vous pouvez avoir un flux en direct ou un flux de hashtag que vous voulez jouer lorsque les gens viennent visiter. Ensuite, vous pouvez montrer des galeries de photos de tous les participants, vous pouvez afficher des informations pour l'inscription de l'année prochaine. Si vous listez tout le contenu du flux maintenant, vous pouvez demander au rédacteur de commencer à l'écrire et vous pouvez demander aux photographes commencer à le filmer et d'avoir du contenu réel au moment où vous êtes prêt à concevoir. Par conséquent, votre plan de contenu peut également inclure une liste de participants, des bandes-annonces vidéo, des flux d'actualités, des liens sur les réseaux sociaux, une lettre d'information par e-mail, des informations de contact, bios pour les personnes impliquées, des descriptions de vos événements, une boutique de marchandises ou d'informations de parrainage. Si l'un de ces éléments s'applique à vous, ajoutez-le à votre plan de contenu. Ensuite, vous pouvez aller demander aux développeurs à quel point chacune de ces fonctionnalités est complexe et vous pouvez l'insérer pour une mise à jour future si elle va retarder votre lancement. Donc, pensez à ce projet comme la version 1.0 de votre site, mais c'est génial d'aller de l'avant et d'avoir des plans pour la version 1.1 ou 2.0. Désormais, listez vos actions prioritaires pour ce site. Que doit-on se passer pour que ce site soit durable ? Commencez par vos besoins d'affaires, essentiellement, vos besoins personnels à partir de ce site. Nous aborderons les besoins des utilisateurs un peu plus en détail dans une seconde. Donc, listez les utilisateurs qui pourraient visiter ce site. Commandez-les par ordre d'importance ou fréquence et réfléchissez à la façon dont ils entendront parler de votre site, pourquoi ils visiteront et comment vous les aiderez une fois qu'ils seront là. Enfin, décrivez votre navigation comme une liste approximative de la façon dont vous pensez que le contenu de cette version pourrait être regroupé. Encore une fois, nous allons entrer dans les détails plus tard, mais il est utile de voir comment votre site pourrait commencer à prendre forme. Si vous voulez aller plus loin dans cette partie du processus, je recommande fortement Content Strategy by Erin Kissane. C' est un excellent livre court qui vous aidera à élaborer un plan de contenu qui durera à long terme. Alors, passez en revue et nettoyez les ébauches de votre projet et examinez-les avec les visiteurs potentiels si vous le pouvez. 4. Plan de site: À ce stade, j'aime faire une carte du site et avoir une idée de la portée globale du projet. Il est également très important de réfléchir à votre navigation et à la façon dont les gens vont se déplacer sur le site. Donc, si vous avez mis tout votre contenu sur fiches d' index et que vous commencez à essayer de déterminer quels groupes ont du sens et quelles étiquettes vous pourriez utiliser pour ces groupes, vous commencerez à avoir une idée de la carte de votre site. C' est amusant à faire avec Post-its sur le mur, sorte que vous pouvez les déplacer librement et vous tenir debout et regarder l'image globale du site ou vous pouvez également le faire sur votre ordinateur. Donc, le tri des cartes fonctionne sur des sites plus petits. Il vous montre également quelle langue les gens utilisent, si vous faites cela avec un groupe de personnes de testeurs. Vous pouvez le faire comme un magasin de cartes ouvert, où vous organisez tout le contenu et ensuite vous comprenez quelles étiquettes ont du sens à la fin. Vous pouvez également placer toutes vos étiquettes sur le mur, puis demander à vos utilisateurs d'organiser le contenu pour correspondre à chacune de ces étiquettes. Assurez-vous que votre modèle mental correspond au modèle mental de votre utilisateur. Pour les sites plus grands, je vais de l'avant et je vais à l'ordinateur et fais une carte du site. J' utilise OmniGraffle pour ses bibliothèques de symboles mais Google Drawings a également des flèches magnétiques, donc c'est tout aussi bon à cet effet. Vous souhaitez inclure tous les écrans qui doivent être conçus, construits ou visités. Ceux-ci comprennent des bulletins d'information, des pages Facebook, des services tiers , des panneaux d' administration, tout ce qui fait partie de l'expérience utilisateur et que quelqu'un va devoir concevoir. Vous n'avez pas besoin d'inclure une flèche pour chaque section. J' en ai inclus quelques-uns ici pour vous montrer la navigation de base à partir de la page d'accueil, pour dire, la page de retraite, puis vers le bas tout au long du processus de paiement. Mais si vous incluez chaque lien sur votre site, la carte du site commence à devenir un peu écrasante. Tout le monde les conçoit d'une manière différente, mais voici quelques styles que je trouve utiles. Vous remarquerez que j'ai utilisé des rectangles pour toutes les pages régulières. Ensuite, cette pile de rectangles indique qu'il s'agit d'un modèle, donc je sais qu'il va y avoir plusieurs versions de cette page. Je peux également obtenir plus de détails et faire du codage couleur. Donc, je fais jaune pour les pages de destination, les pages les plus importantes et où les gens peuvent venir de Google ou de Facebook. Les clients et les fondateurs se concentrent souvent sur la page d'accueil, mais les pages d'accueil sont les premières impressions ou les plus fréquentes de votre site. Alors, pensez à BuzzFeed ou Upworthy, vous allez même sur leurs pages d'accueil ? Non. Vous n'atterrissez que sur ces pages d'article. Alors, pensez à vos billets de blog, pensez à toutes les promotions spéciales que vous aurez et mettez vraiment en évidence ces pages afin qu'elles reçoivent la même attention à la page d'accueil. Vous pouvez également mettre en surbrillance tous les services tiers en gris afin que vous sachiez qu'il s'agit d'une page qui fait partie de votre écosystème, mais que vous n'avez pas réellement à concevoir celle-ci. Vous pourriez être capable de l'écorcher, mais parfois vous ne pouvez pas. Ensuite, j'aime mettre en évidence en vert toutes les pages qui génèrent des revenus. Cela me rappelle que je dois amener les gens dans cet entonnoir, si ce site essaie de soutenir quelqu'un. La mise en évidence bleue est pour le travail de marketing. Pour les startups et les autres personnes qui tentent de planifier leur site Web, c'est souvent la planification d'affaires en même temps. En incluant toutes ces propriétés différentes, comme votre page Facebook ou Twitter, tous les dépliants que vous créez, le badge du bouche à oreille que vous essayez de créer, cela les aide à se rappeler que ceux-ci sont propriétés supplémentaires dont ils ont besoin pour créer et maintenir. Ensuite, vous pouvez également mettre en évidence en rouge toutes les pages qui nécessitent une connexion, donc la protection par mot de passe ou juste votre panneau d'administration de base. J' utilise également des coins arrondis pour des choses qui pourraient être un calque au lieu d'une page autonome. Donc pour moi, c'est mon signe dans la couche. J' aurais aussi ces appels qui apparaîtraient sur plusieurs pages, donc pour m'abonner à la newsletter, pour partager des choses. Alors, vous pourriez en avoir un très simple. Cela ressemble à ceci, ce qui vous donne juste le nom des pages, ce regroupement grossier de contenu, ou vous pourriez avoir un super impliqué. C' était pour un projet pluriannuel sur lequel j'ai travaillé, où j'étais en train de coder chaque plateforme que nous utilisions. Il s'agissait d'une agrégation open source de quatre plates-formes open source différentes. C' était la vision à long terme de la façon dont la plate-forme fonctionnerait lorsque nous avons tous les systèmes fonctionnant ensemble, mais évidemment, c'est un peu écrasant si vous ne faites qu' un petit site pour un petit groupe de personnes. Essayez de faire une carte du site qui révèle la portée du projet d'une manière qui vous est utile. Il clarifie les actions prioritaires sur le site et il obtient tous les membres de l'équipe sur la même page. Donc, vous allez sur Google Drive et vous allez créer un nouveau dessin et vous aurez cette toile vierge. Vous pouvez passer par les différentes formes, les différentes flèches. Ce sont les outils les plus importants. Mais bien sûr, vous pouvez polir ceci pour être aussi agréable que vous le souhaitez. Alors, parcourez votre plan de site, créez un rectangle pour chaque écran ou section, créez des piles de rectangles pour les modèles, puis n'oubliez pas de le coder en couleur afin que vous puissiez obtenir un aperçu de haut niveau des priorités pour ce site. 5. Directives de marque: Notre prochaine étape est les lignes directrices de la marque. Les gens ne veulent pas toujours prendre le temps pour cette étape, mais c'est super important si vous voulez que votre projet ait un sentiment cohérent. Téléchargez le fichier de consignes de marque à partir de la section de la ressource si vous voulez suivre. La prochaine classe de cette série va approfondir le design visuel, mais vous devez également avoir une idée de la personnalité de votre marque au stade UX. Quels mots utiliserez-vous comme étiquettes ? Allez-vous raconter votre histoire à travers des images, des diagrammes ou autre chose ? Ces éléments font tous partie de l'expérience utilisateur, et il y a maintenant des millions de sites Web dans le monde. personnalité unique et cohérente est donc essentielle à la fois pour la fonctionnalité et l'impact. Par exemple, la Maison Blanche a une image particulière qui essaie de transmettre ce qui est très différent de ce que vous pourriez attendre de Disney ou de Starbucks. Alors, comment articulez-vous ça ? Comment le mettre dans des lignes directrices que tout le monde peut utiliser ? Il y a un livre de la marque du Père Noël qui a été publié comme une sorte de blague mais qui en fait vous donne une très bonne idée de la façon dont ces choses ont tendance à fonctionner sur les sentiments et les valeurs de votre marque particulière. Alors regardez à travers celui-là pour une vue d'ensemble drôle. MailChimp est un autre excellent exemple de personnalité de la marque. Ils ont fait beaucoup de travail en étant vraiment créatifs et vraiment cohérents sur de nombreuses plateformes différentes. Et Aarron Walter, qui travaille chez Nalgene, a un excellent livre pour vous donner plus d'informations sur ce processus, il s'appelle Designing for Emotion. Et nous utilisons deux de ses exercices pour compléter notre plan aussi. Voici donc un exemple de ce qu'il appelle une personnalité de marque. Si vous expliquez qu'ils ont un personnage réel qui détient une partie de la personnalité, mais pour nos besoins, nous allons penser à une célébrité qui pourrait représenter notre personnalité. Il fait également des traits de marque au format X mais pas Y, donc vous avez une sorte de gamme dans laquelle votre marque va tomber. Et puis vous parlez aussi de vos méthodes d'engagement ou vos méthodes d'interactivité que votre site Web pourrait utiliser pour transmettre sa personnalité. Et rappelez-vous également qu'il s'agit de vos utilisateurs. Vous n'essayez pas de vous représenter à moins que ce soit votre site Web de portefeuille, mais vous voulez penser à ce qui va charmer et ravir vos utilisateurs. Alors utilisez leur langage pas nécessairement le vôtre, essayez de le faire dans un style qui leur donne quelque chose qu'ils sont fiers de posséder, et pensez aux images qui sont aspirantes pour eux, pas nécessairement les détails banaux d'une journée aujourd'hui. Donc, quand nous faisons tout cela, cela nous donne une direction cohérente tout au long de chaque étape de conception. Donc encore une fois penser à cela comme une célébrité est une très bonne façon de commencer. Votre personnalité est-elle super haut de gamme et plus formelle, est-elle plus jeune et innocente et pleine d'énergie ? Quelle célébrité pourriez-vous choisir pour représenter la personnalité de votre site ? Commencez donc par énumérer les meilleures fonctionnalités de votre marque. C' est à quel point vous êtes averti de la technologie, c' est à quel point vous êtes amical, à quelle vitesse, tout ce que vous essayez de traverser. Faites une courte liste de toutes ces fonctionnalités. Et puis si vous regardez cette échelle de personnalité que j'ai rédigée, tracez où vous voulez tomber sur chacune de ces gammes. Vous êtes plus professionnel ou plus décontracté ? Êtes-vous plus bien établi ou êtes-vous plus à la pointe de la technologie ? N' ayez pas peur de vous pencher d'un côté ou de l'autre. Cela va vous donner des indices de conception très clairs plus tard. Alors prenez un peu de temps et regardez à travers chacune de ces échelles et tracez où vous êtes maintenant et vous pouvez également tracer où vous voulez être si c'est quelque chose de différent. Une fois que vous avez choisi la célébrité de votre représentant, assurez-vous d'avoir expliqué pourquoi. Il s'agit donc de leur attitude de travail acharné, ou du sens du glamour, ou du sens du glamour, ou de l'approchabilité ou de la connaissance qu'ils représentent. Donc, les raisons pour lesquelles sont en fait plus importantes que la personne que vous avez choisie eux-mêmes. L' étape suivante consiste à déterminer quel type de langage visuel pourrait exprimer votre personnalité. Alors quel type de couleurs, seraient-ils bruyants, seraient-ils tranquilles, seraient-ils plutôt rétro, seraient-ils néon et futuristes, quel genre de choix serrés, seraient-ils tous des casquettes, super formelles, serait-il décontracté et précipité, serait-il des scripts comme plus écrits à la main ? Alors pensez à tous ces types de repères visuels que votre marque pourrait avoir. Et puis listez enfin vos méthodes d'interaction. Vous verrez quelques exemples dans les directives de la marque doc. Donc, si vous essayez d'être amical, vous pouvez poser des questions ou donner des conseils à vos utilisateurs. Si vous essayez d'être sophistiqué, vous pouvez utiliser une technique d'animation plus moderne et vous pouvez utiliser des mises en page réactives et si vous essayez d'être amusant, vous pouvez utiliser de l'humour ou des jeux ou des surprises tout au long de votre mise en page. Pensez donc à certaines de ces idées et faites un croquis de toutes les pièces de votre marque telles qu'elles pourraient être liées à la conception de votre site. 6. Histoires d'utilisateurs: Maintenant, il est temps de penser aux histoires d'utilisateurs. La plus grande chose à retenir à propos du Web Design est que c'est 4D pas 2D. Vous concevez des expériences au fil du temps, pas des compositions plates. Peu importe comment photoshop peut vous faire sentir le contraire. expériences utilisateur sont le sentiment qu'un utilisateur obtient lorsqu'il passe par un processus. Voulez-vous qu'il soit super simple et ciblé et minimal, comme la page d'accueil de Google, ou voulez-vous être fou, inspirant, et amusant., avec beaucoup de gens autour. Comme ce site Jameson, nous pouvons considérer cela comme une histoire et vos techniques de narration pour nous aider à planifier. Tout comme les histoires ont un arc narratif avec une scène d'ouverture, les différentes crises d'action, un point culminant puis une résolution, nous pouvons penser à nos voyages d'utilisateurs comme ayant un début, un milieu et une fin, et peut-être même un l'épilogue. Là où nous utilisons des histoires, elles sont beaucoup plus relatables. Ainsi, par exemple, le site Wi-Fi de Karma, nous présente John qui est constamment en déplacement et doit rester connecté. Lorsque vous faites défiler vers le bas, il montre qu'il met en place son hotspot Karma, rencontre un autre utilisateur, raconte son histoire, marche à travers le processus de fonctionnement du service, puis les avantages de l'utiliser. C' est beaucoup plus convaincant, beaucoup plus accessible que beaucoup de spécifications techniques. Mais ce qui est un produit très technique. Des histoires aussi beaucoup plus émouvantes et touchantes qu'une simple information ou une brochure. L' eau de charité fait un excellent travail de raconter différentes histoires sur la façon dont votre don vous aidera, comment ils ont commencé, pourquoi vous devriez leur faire un don au lieu de tout autre organisme de bienfaisance. Ils utilisent beaucoup de photographies personnelles, beaucoup de photographies en gros plan, beaucoup d'histoires personnelles pour le rendre beaucoup plus perceptible et beaucoup plus réaliste. Dans l'histoire principale que vous faites défiler leur page d'accueil, il y a même une sous-histoire sur ce scénario probable si votre village reçoit un projet d'eau. Ainsi, en tant que donateur, vous pourriez visualiser exactement comment votre don vous aidera. Les histoires rendent également votre site beaucoup plus unique. Donc, dit Sony, nous sommes des ingénieurs, mais nous sommes aussi des artistes, et si vous parcourez ce site, ce sont des exemples fous d'animation et créativité pour montrer qu'ils ne sont pas seulement un autre producteur de matériel, mais qu'ils voient vraiment cela comme artistique créativité dans la façon dont ils conçoivent les choses, ce qui les rend très différents de peut-être tout autre fournisseur d'électronique. Les manchettes choquantes peuvent aussi raconter une histoire différente pour attirer votre attention, celle-ci est sur l'esclavage à travers le monde et qu' il existe toujours d'une manière que vous pourriez ne pas penser et alors quelques incitations à vous demander certaines questions ou pour vous diriger vers l'étape suivante en fonction de vos intérêts. Ainsi, ces flux sont également appelés flux lorsque vous essayez de diriger les gens ou ce qui les suit à travers différents chemins sur votre site Web. Donc, dans le livre mondial du marketing, ils sont appelés entonnoirs, donc vous pouvez mesurer combien de personnes visitent le site Web et ensuite quel pourcentage de ces inscriptions, quel pourcentage de ceux qui entrent dans votre essai, quel pourcentage de ils saisissent les renseignements de votre carte de crédit et , ensuite, quel pourcentage d'entre eux deviennent des clients payants. Vous étudiez chaque étape de cet entonnoir pour voir où les gens tombent , puis vous pouvez faire des tests AB pour essayer d'améliorer chaque étape de l'entonnoir. Ensuite, lorsque vous entrez dans la conception de l'expérience, vous pouvez également cartographier leur humeur pendant cette partie de celui-ci et cela vous aide à essayer de concevoir votre site pour soutenir votre client d'une manière plus personnelle. Donc, vous pouvez penser avant même qu'ils arrivent sur votre site Web, ils font quelque chose, ils font des recherches, peut-être qu'ils sont sur Google, peut-être sur Facebook. Quelle est leur humeur là quand ils arrivent pour la première fois à votre page d'accueil. Ensuite, bien sûr, ils ont changé d'humeur au fur et à mesure qu'ils se déplacent tout au long de votre processus, puis après s'être inscrits à votre événement ou vous avoir envoyé un courriel, ils peuvent également avoir des questions de suivi ou sentiments que vous pourriez également aborder à travers différentes techniques. Donc, Google et d'autres outils d'analyse, cartographiez cela comme un flux détaillé à nouveau où vous pouvez voir toutes les différentes sources que nous pensons à la façon dont les gens ont commencé ce processus, où ils atterrissent et puis ce qui se passe ensuite et encore cette devient une chronologie. Donc, ils ne sont pas mise en page 2D, mais c'est comme montrer le chemin de quelqu'un à travers le temps sur votre site. Alors, comment allons-nous tracer ce voyage ? Certaines personnes font des persona, mais d'après mon expérience, elles se transforment en stéréotypes où vous commencez à faire des hypothèses, ce que cette caricature pourrait faire. Donc, vous voulez vous assurer que vous commencez à partir de la recherche réelle des utilisateurs, à partir d'une compréhension réelle de vos utilisateurs, puis les exprimer comme des rôles. Donc, un philanthrope généreux est l' un de vos utilisateurs les plus précieux ou en difficulté deuxième année est l'un de vos utilisateurs les plus fréquents. Ensuite, pensez à ce que chacun de leurs objectifs est. Ainsi, ils peuvent avoir un objectif majeur ou avoir plusieurs objectifs pendant qu'ils sont sur votre site. Vous allez tracer chacun séparément. Pensez ensuite à ce qu'ils ont besoin de vous pour atteindre cet objectif. Ainsi, par exemple, ce généreux philanthrope qui veut rendre le monde meilleur, ils ont juste besoin de confiance que leur don sera efficace s'ils décident de vous donner. Alors que, si vous faites dire un site de tutoriel photo, la deuxième année, leur objectif est de devenir un photographe un jour et donc ils ont besoin d'une formation de base via de courts tutoriels. Donc, si vous pensez réellement à ce que l'utilisateur réel a besoin, votre contenu sera beaucoup plus spécifique. Donc, vous pouvez esquisser ça à nouveau, j'aime les notes collantes parce qu'il vous fait sortir de votre ordinateur pendant un moment. En pensant à votre rôle comme point de départ du voyage, tout le chemin sur la gauche, puis en essayant de tracer chaque petit pas le long du chemin pour qu'ils atteignent cet objectif. Donc, ce pourrait être qu'ils entendent parler de votre site d'un ami et alors ils vous Google. Ensuite, ils atterrissent sur votre page de cours , puis ils parcourent vos cours, puis ils en choisissent un et lisent la description. Puis ils s'inscrivent, puis ils partent et ensuite ils assistent à la classe. Il y a beaucoup d'étapes si vous voulez vraiment entrer dans les détails. Donc, essayez d'identifier vos utilisateurs les plus importants et leurs principaux objectifs et tracez toutes ces étapes. Donc, vous pouvez simplement utiliser un crayon et du papier. J' ai ces cahiers de Muji que j'aime qui ont carrés pré-dessinés sur eux ou encore des collants sont amusants, vous pouvez les mettre sur le mur et ensuite ils sont faciles à réorganiser. Donc, rappelez-vous que c'est juste que vous commencez l'état et l'objectif final et que vous essayez de remplir toutes les étapes entre les deux. Donc, pour ce novice photo à la recherche d'une formation, notre flux pourrait ressembler à ceci. Leur première étape serait qu'ils sont des tutoriels de photographie Googling et donc nous voulons réfléchir, en rouge est notre réponse que nous voudrions nous assurer que nous optimisons notre site pour ces mots-clés. Puis de Google ils atterrissent sur notre page d'accueil et donc nous voulons penser à, oh ce novice voudrait voir peut-être les classes les plus populaires. Donc, vous voulez simplement remplir pour chacune de ces étapes. Maintenant, allez remplir le contenu prioritaire qui prendrait en charge ce que vous voulez qu'ils fassent ensuite ou ce qu'ils veulent faire ensuite. Ainsi, les histoires peuvent être orientées vers des objectifs. Comme nous venons de le décrire. Ils peuvent aussi être exploratoires. Donc, si vous êtes sur Pinterest ou un site avec beaucoup de contenu, vous pouvez simplement lire et naviguer et dire que vous pouvez tracer l'un de ces sites si vous faites un site où les gens vont naviguer. Mais ils commencent aussi à faire surface à ces exigences fonctionnelles. Donc, vous commencerez à voir que, oh nous devons être en mesure de mettre en évidence les classes les plus populaires ou nous devons être en mesure de trier par prix ou toute autre fonctionnalité que cette personne pourrait vouloir. Donc, c'est pourquoi vous voulez les parcourir en détail, et encore une fois ils révèlent souvent des lacunes. Vous avez cette ébauche de contenu que votre client vous a peut-être fournie, mais lorsque vous parcourez les histoires dans un format linéaire, vous allez commencer à réaliser des pages et du contenu négligés, et il y a toujours une étape de plus à l'histoire. Après avoir quitté votre site, ils pourraient aller le dire à un ami. Ils pourraient revenir plus tard. Quelle est leur expérience en tant que visiteur de retour ? Mais pensez toujours à cette dernière étape. Même si c'est généralement s'inscrire, il y a un grand appel à l'action alors ensuite vous voulez les remercier. Vous pourriez leur donner une récompense qui pourrait être un bon moment pour recueillir des commentaires, que souhaitez-vous voir d'autre sur notre site ? Comment as-tu aimé ce cours ? Vous pouvez également recommander d'autres activités si vous voulez les aider à naviguer, à consulter votre site et à voir du contenu qu'ils ont peut-être écrémé. Vous pouvez également suggérer qu'ils vous suivent, s'abonnent à votre newsletter, restent en contact afin qu'ils ne manquent pas service que vous fournissez et qu'ils s'amusent simplement avec lui. Vous pourriez leur raconter une blague, les surprendre, leur donner quelque chose de divertissant après avoir terminé un morceau particulier de votre site Web. Alors, passez en revue et listez toutes vos histoires d'utilisateurs. Identifiez vos principaux utilisateurs, les plus importants et aussi les plus fréquents. Énumérez les principaux objectifs pour chacun d'eux. Ce qu'ils tentent d'atteindre, puis aussi ce que vous avez besoin d'eux , puis énumère chaque étape pour atteindre cet objectif et comment vous allez le soutenir. Encore une fois, vous pouvez utiliser des autocollants, du papier ou de l'ordinateur. Ensuite, une fois que vous avez toutes ces histoires écrites, revenez en arrière et agrégez tous les besoins pour chaque page. Ainsi, par exemple, ce photographe novice peut avoir besoin d'une chose de la page d'accueil, mais un photographe professionnel peut s'attendre à une première impression très différente. Donc, vous allez devoir, chaque page va avoir un ensemble d'exigences pour de nombreux utilisateurs différents et ensuite vous allez devoir les trier par ordre de priorité. Évidemment, vous ne pouvez pas rendre tout le monde heureux, mais votre mise en page va essayer de le faire. 7. Wireframes/Prototypes papier: Maintenant, nous sommes prêts à passer aux trames filaires et aux prototypes papier. Vous voulez commencer par l'esquisse. Il est bon de rester libre et de doter l'ordinateur lorsque vous essayez de trouver vos idées originales. J' adore cette citation de Jason Santa Maria que, carnets de croquis ou pas sur le fait d'être un bon artiste, il sur le fait d'être un bon penseur. Donc, ne vous inquiétez pas pour vos talents de dessin. Essayez de ne pas être conscient de ce que vous mettez sur la page, vous essayez juste de capturer toutes vos idées d'une manière que vous pouvez les trier. Donc, vous pouvez le faire à travers beaucoup d'applications iPad folles maintenant ou tout simplement votre carnet de croquis ce qui vous rend plus à l'aise que vous pouvez rendre vos idées à un niveau de clarté qui est approprié. Donc, pour mon site de yoga, je fais habituellement Sharpie pour les contours audacieux, puis un pan plus léger pour remplir quelques détails évidemment le texte va avoir l'air vraiment différent quand nous entrons dans la conception. Ce n'est pas vraiment à propos de ça, c'est à propos de l'heure des cours ou juste du jour sur la page ? On a un modèle ou six modèles ? Vous essayez juste de comprendre ce qui va être sur la page et ce que les gens vont voir en premier, deuxième, troisième, etc. Donc, voici mon flux utilisateur sortant sous forme de croquis et encore une fois, j'ai commencé à essayer d'indiquer ce que le contenu de support pour chaque page. Donc, je pense à quelle est la première impression pour cette personne, quel est le contenu de soutien et ensuite quel est l'appel à l'action pour chaque étape du processus. Encore une fois, le papier dans mon expérience est le meilleur moyen de capturer des idées créatives. Vous n'êtes pas limité au logiciel, vous ne vous inquiétez pas avec vos raccourcis clavier et il est limité dans certains aspects. Bien sûr, vous ne pouvez faire qu' un certain nombre de dessins sur papier dans un certain laps de temps. Parce que vous ne pouvez pas copier et coller, vous ne pouvez pas les dupliquer à moins que vous deviez vraiment fou avec la machine à copier, avec vos ciseaux et bande. Donc, quand nous passons dans les trames filaires, ce mot signifie beaucoup de choses différentes pour différentes personnes. Les ingénieurs peuvent s'attendre à toutes les exigences techniques, ils voudraient savoir quand cet écran est-il sauvegardé dans la base de données ? Lorsque notre message d'erreur est déclenché ? À quoi ressemble une version déconnectée ? Attendu que votre responsable peut s'attendre à ce que les contours de chaque élément la page soient dans la même position qu'ils apparaîtront en tant que conception finale. Les concepteurs peuvent s'attendre à ce qu'ils décrivent les priorités de la page, mais ils ne s'attendent pas à prendre la mise en page aussi au sérieux. Donc, vous voulez confirmer ce que votre équipe attend avant de démarrer les trames filaires. Pour ce projet, nous allons nous concentrer sur les trames filaires qui esquissent le contenu principal et les fonctionnalités afin que nous puissions tester nos histoires d'utilisateurs les plus importantes. Voici un exemple de ce que j'ai fait pour CreativeMornings. Là où cela aidait l'équipe de développement à voir que nous voulions pouvoir trier par continent, trier par alphabet, trier par arc-en-ciel. Nous voulions avoir un début d'un chapitre ou d'un lien, nous voulions avoir un état de vol stationnaire sur une carte, nous avions besoin d'une carte. Ainsi, ils peuvent commencer à faire tous leurs plans techniques et nous savoir combien de temps nos idées vont prendre pour construire. Mais c'est évidemment encore un format assez rugueux que moi en tant que concepteur, je ne peux pas commencer à choisir des couleurs, je ne peux pas commencer à se disputer avec les mises en page. Ça ne sera jamais beau. Si votre filaire commence à être belle, vous y passez trop de temps. Il s'agit vraiment de capturer des idées et des fonctionnalités. Voici un autre que j'ai fait pour cette application de livre que j'ai mentionnée, Riffle. À l'origine, j'avais un concept appelé Book Drop où il s'agissait d'une interface glisser-déposer. Je voulais vraiment une fonctionnalité où si vous n'aimez pas le livre, vous pourriez le traîner dans une fosse de feu et le regarder brûler ne peut pas passer si bien. Mais c'était amusant de mettre ces idées sur papier et faire en sorte que les gens puissent comprendre de quoi nous parlions. Encore une fois, nous avons parlé de ce qui se passe lorsque vous recommandez le livre à un ami, il génère un message, quel type de message ? Que dit ce message ? Il y a beaucoup de sous-étapes dans n'importe quel site de démarrage en particulier, beaucoup de sous-éléments qui doivent être abordés. Lorsque vous les faites cliquables, vous pouvez également tester leur interactivité. Donc, idéalement avant de les lier tous, vous voulez vous assurer que vous avez commencé à trier cette hiérarchie des besoins pour chaque page. Mais les besoins que vous déterminez à travers vos histoires d'utilisateurs. Espérons que vous avez inclus toutes les fonctionnalités requises et le contenu principal et que vous avez commencé à voir où vous avez des problèmes de mise en page. Si vous pensez que vous allez aligner toutes ces photos comme un panorama, mais qu'il s'avère qu'aucune de vos photos n'est formatée de cette façon, vous commencez à voir certaines de ces choses et peut-être à faire d'autres plans lorsque vous visualisez le site. Nous devons également tenir compte du contexte dans l'ère du design réactif. Donc, Google a fait une énorme étude de recherche appelée The Multi-Screen World et parle la façon dont le contexte détermine quel appareil une personne va ramasser. Donc, nous avions l'habitude de stéréotyper que les utilisateurs mobiles étaient dehors et autour. Ils étaient dans la rue ou debout dans la file, mais nous savons maintenant que les gens prennent souvent leur téléphone quand ils sont assis sur le canapé. Vous ne voulez pas aller de l'autre côté de la pièce pour monter sur votre ordinateur portable ou vous ne voulez pas revenir sur votre ordinateur et commencer à travailler. Donc, vous pouvez prendre un téléphone en raison du temps que vous avez, parce que vous avez un certain objectif que vous essayez d'atteindre, raison de l'emplacement particulier où vous n'avez pas accès à un appareil ou à l'autre ou aussi simplement votre état d'esprit. Parce que les gens voient leurs téléphones de toute évidence comme un appareil personnel, il s'agit généralement d'une relation individuelle entre certains et leur téléphone. Un ordinateur peut être partagé entre plusieurs personnes ou il peut être quelque chose qu'elles ont seulement au travail. Une tablette remplit parfois ce rôle intermédiaire où il peut être plus comme un centre multimédia, peut-être que c'est juste où ils regardent des films ou juste où ils écoutent de la musique ou juste où ils jouent à des jeux. Donc, pensez aux contextes particuliers de chacun de ces appareils lorsque nous commençons à planifier la façon dont nos mises en page vont se régénérer pour eux. Encore une fois, les téléphones peuvent démarrer un processus, mais ce n'est peut-être pas là où vous le terminez. Donc, l'étude dit que 65 pour cent des tâches de recherche sont démarrées sur le smartphone, mais alors vous pouvez aller à votre ordinateur pour continuer le processus. Donc, si vous planifiez un voyage, si vous essayez de faire des achats en ligne, vous pourriez simplement essayer de voir si quelque chose est en stock sur votre téléphone. Mais alors vous pouvez aller à un écran plus grand une fois que vous voulez comparer les options, essayer de faire des plans, ou commencer à compiler un document de recherche, alors pensez à cela aussi. Souvent, le téléphone ou les appareils mobiles sur la collecte des informations et les mises en page du bureau sont sur l'organisation ou le partage de ces informations. n'y a plus que trois, nous avions l'habitude de toujours diviser les choses en mobiles, tablettes et ordinateurs de bureau, mais nous devons nous rendre compte qu'il y a de nombreux fabricants de matériel maintenant. Donc, pensez à ça comme mobile ish, tablet-ish. Ces appareils de taille moyenne ou tablettes, mais nous ne pouvons plus concevoir pour des largeurs de pixels particulières. Donc maintenant, vous voulez écrire des histoires contextuelles liste chacun de vos contextes principaux afin que vous puissiez commencer par simplement dire tablette mobile et bureau et que vous voulez énumérer les objectifs probables sur chacun. Donc, quelqu'un sur son téléphone portable pourrait juste chercher votre adresse, quelqu'un sur le bureau pourrait essayer de s'inscrire, entrer toutes les informations de sa carte de crédit. Quelle que soit la liste des objectifs particuliers pour chaque contexte et, à nouveau, énumère toutes les étapes pour atteindre chaque objectif. Revenez ensuite aux exigences de votre page et ajoutez ces besoins supplémentaires pour chaque contexte. Mais rappelez-vous aussi que vous pourriez réduire vos besoins. Parfois, les utilisateurs d'un téléphone mobile n'ont pas besoin tout ce que vous offrez sur le site Web. Ainsi, vous pourriez également être en mesure de simplifier votre site Web pour différents appareils. Ensuite, nous serons prêts à commencer le processus de filature. Encore une fois, les trames filaires visent à se concentrer sur le contenu et à obtenir simplement des choses sur la page, elles ne sont pas verrouillées mises en page. Ils vous aident à comprendre certains problèmes de mise en page , mais vous allez réviser toutes ces mises en page au cours de la phase de conception visuelle. Donc, concentrez-vous sur les choses sur la page. Donc, le magazine Smashing parle arrêt logiques par rapport à ces points d'arrêt spécifiques à l'appareil. Donc, vous pourriez dire, d'accord, sur un écran étroit si je n'avais qu'une petite quantité d'espace, j'aurais besoin de la navigation et j'aurais besoin du texte principal de la page. Mais si j'avais un peu plus d'espace, je mettrais des annonces là-dedans parce que ça va aider mon entreprise à survivre. Si j'ajoute encore plus d'espace, alors je vais aller de l'avant et montrer les commentaires des utilisateurs afin qu'ils commencent à avoir une idée de la communauté et de l'action en cours sur ce site. Donc, pensez au contenu des points d'arrêt vers l'extérieur contre juste concevoir vers l'intérieur. Je le pense aussi comme l'approche Goldilocks. Puisque je passe généralement de la planification à la conception en passant par le développement, il n'y a que tellement de temps à faire. Goldilocks était à nouveau décomposer les choses en disposition ish. Donc, c'est petit, moyen et grand. Ils appellent ça bébé, maman et papa ours contre mon iPhone. Trois mise en page, mon iPhone 5 mise en page, la mise en page Android. n'y a généralement pas le temps de faire une mise en page pour chaque appareil. Alors, considérez cela comme trois contextes généraux. Donc, il est utile de commencer. Je vais à Balsamiq à ce stade. Donc, je peux copier et coller et encore, dupliquer et vous pouvez lier les choses et les rendre couche interactive. Je voudrais commencer par filtrer toutes les pages les unes à côté de l'autre. Donc, je peux simplement copier et coller très facilement et commencer à voir comment chaque mise en page réagit. Balsamiq est un outil vraiment utile car il a la bibliothèque de symboles. Ainsi, vous pouvez simplement glisser-déposer des menus, vous pouvez glisser-déposer des barres de liens. Vous n'avez pas à recréer toutes ces choses au pixel dans Illustrator. Il a construit dans des états sélectionnés ou désactivés. Encore une fois, il vous permet de lier vos pages afin que vous puissiez les faire interagir et interactive PDF ou un lien vers un prototype. Donc, c'est vraiment important parce que lorsque vous faites des sites web réactifs, vous avez au moins trois fois la mise en page. Donc, vous devez être aussi efficace que possible. Donc encore une fois, concentrez-vous sur la fonctionnalité et la hiérarchie de base ici. Si ça commence à paraître bien, tu prends trop de temps là-dessus. Assurez-vous également de regarder à travers bibliothèque de symboles Balsamiq et de vous familiariser avec tous ses différents éléments. Dans correspond au HTML réel et aux modèles assez bien. Il est donc beaucoup plus réaliste en tant qu'outil de conception Web que Photoshop. Vous pouvez également regarder à travers leurs maquettes de site pour aller pour beaucoup d'autres bibliothèques de symboles, par exemple, tous ces panneaux de partage Facebook éléments iOS et vous pouvez également faire vos propres symboles en important des images dans le programme ou en utilisant d'autres bibliothèques. Donc, lorsque vous avez ce fichier toutes tailles, éventuellement vous voulez le diviser en un seul profil de mise en page afin que nous puissions les tester. Donc, si vous regardez les onglets inférieurs sur cet écran, vous pouvez voir que j'ai mes six pages plus un menu tout moqué et alors vous pouvez voir Balsamiq me montrer les liens que j'ai faits vers toutes les différentes pages. Donc, il y aura cliquable. L'autre chose utile est que, excusez-moi, vous pouvez également augmenter votre vocabulaire de la conception Web en regardant des sites comme Pattern Tap, UxLab, modèles de bibliothèque et plus encore. Consultez mon guide de ressources pour certains sites favoris parce que nous travaillons tous avec le même alphabet d'éléments HTML. Mais il y a un million de façons de combiner ces textes, ces boutons dans toutes sortes de nouveaux modèles d'expérience utilisateur. Pour faire de bons filaires qui sont réellement utiles pour la lecture et le test, assurez-vous que vous utilisez du texte réel et non Lorem Ipsum, sorte que vous concevez du contenu réel et que vos utilisateurs obtiennent le point au lieu d'être juste un arrangement anonyme des boîtes. Assurez-vous d'étiqueter les images. Donc, si vous laissez tomber un grand rectangle gris sur l'écran personne ne saura ce que cela signifie à moins que vous ne l'étiquettez paysage du Pérou alors ils comprendront quand vous faites le test utilisateur. Alors, parcourez vos filaires et commencez par vos mises en page mobiles et concentrez-vous sur hiérarchie des besoins pour chaque page et dans ce contexte, pour chacun de vos utilisateurs. Ensuite, je voudrais aller à la plus grande mise en page et faire la version de bureau. Donc, en essayant de tirer pleinement parti du grand écran, puis, je vais aller dans les mises en page de la tablette et voir comment est le milieu. Parfois, je vais aller directement dans le navigateur et faire du code pour cela, mais il est également utile de les faire à votre phase filaire et de voir comment vos mises en page tiennent. 8. Test utilisateur: Ok, vous avez rédigé vos fils. Maintenant, vous voulez les tester. Pourquoi ? Parce que vous vous éviterez quelques maux de tête dans les phases de conception et de développement. Dans le design web, nous devons admettre ce qu'on appelle le biais de Malkovich, qui est la tendance à penser que tout le monde utilise Internet de la même manière que nous. Mais quand vous regardez quelqu'un essayer de passer par vos belles mises en page, c'est une expérience éclairante et très humble. Ils ne trouvent pas le bouton que vous pensiez être si évident. Il leur manque une grande partie du contenu. Cela vous oblige vraiment à regarder vos mises en page d'une nouvelle manière. Donc, voici un autre exemple de ceci de usertesting.com. Quelle est l'expérience sur votre site Web ou votre application ? Oh, les gars, vous n'avez plus de zoom. C' est terrible. Comment vais-je voir toutes les coutures ? Honte à toi. Wow. Donc, des tonnes de magasins. Je ne peux pas vraiment dire lequel est le plus proche. J' aimerais jeter un oeil à ceux spécifiquement, juste la seule source. Je clique ici pour voir, mais rien ne se passe. Alors, laissez-moi essayer de les contacter. Bon, eh bien, je ne suis pas sur Outlook donc c'est un problème pour moi parce que je ne peux pas utiliser ça. C' est un peu plus que ce que je cherche à dépenser donc je vais essayer de réduire par prix ici. Essayons 50 et moins. Du savon à vaisselle ? Donc, nous voyons qu'il y a beaucoup de choses que nous n'avions pas vraiment l'intention de se produire qui apparaissent et vous pouvez obtenir ce genre de commentaires même sur votre filaire. Vous pouvez commencer à voir la hiérarchie principale s'ils l'obtiennent et comment la navigation fonctionne. Alors, retournez à vos croquis ou Balsamiq et faites des liens entre toutes les pages. Donc, dans Balsamiq, vous allez simplement dérouler, il y a un menu déroulant pour sélectionner les liens et ensuite vous allez les exporter sous forme de PDF interactif ou vous pouvez exporter toutes les pages en tant que PNG et les lier dans l'application InVision. Donc, vous finirez avec quelque chose comme celui-ci où vous avez toutes vos différentes pages et vous allez les relier ensemble, donc à quelqu'un qui les regarde toutes, il semble qu'ils cliquent sur un site Web sommaire. InVision est cet outil où vous pouvez télécharger un dossier entier de PNG et ensuite quelqu'un peut ouvrir ce lien sur son téléphone et quand ils tapent sur les différents boutons et liens, il les emmènera aux différents écrans de votre PDF. Donc, ce sont les deux principaux outils que j'utilise pour les croquis cliquables. Si vous avez fait tous vos filaires au crayon et au papier, vous pouvez également utiliser l'application InVision. Il suffit de prendre des photos de tous vos croquis papier , puis de les télécharger sur InVision, puis de dessiner des points d'accès et de les relier à partir de là. Ou vous pourriez vous asseoir côte à côte avec quelqu'un et faire des tests en personne d' un prototype de papier et vous lui feriez simplement pointer sur le bouton et ensuite vous lui montreriez le morceau de papier suivant. Donc, c'est un autre moyen vraiment lo-fi, vraiment rapide que vous pouvez obtenir des commentaires jour un sur vos idées. Donc, lorsque vous faites ce test réel, il y a quelques lignes directrices importantes à garder à l'esprit afin que vous ne fassiez pas vos résultats. Lisez la recherche à distance, le livre, et regardez également leur site pour de nombreux conseils sur la façon dont vous pouvez le faire. Vous pouvez tester des personnes à travers votre site Web, à travers des laboratoires, en personne, tous les différents types de recherche que vous pourriez faire. Cependant, les lignes directrices de base sont que vous voulez vous concentrer sur les individus et non sur les groupes de discussion. humains ont certainement un comportement de troupeau et si vous obtenez une foule de gens dans une pièce, ils vont se regarder avant répondre et vous n'obtiendrez pas d'opinions honnêtes. Aussi, assurez-vous que vous parlez à des utilisateurs qualifiés et tout le monde dans le monde ne va pas aimer votre site Web ou l'utiliser du tout. Donc, vous voulez vous assurer que vous parlez aux gens qui sont vraiment excités par votre site Web et qu'ils vont vous donner les meilleurs commentaires. Vous devez également essayer d'être aussi neutre que possible. Donc, vous ne voudriez pas dire « Est-ce que cette nouvelle page d'accueil est meilleure que la dernière ? » Parce que ça mène le témoin. Vous voudriez dire « Laquelle de ces deux versions préférez-vous ? » Vous voulez essayer d'être aussi neutre que possible. Votre tendance tout comme un humain va vouloir être de hocher la tête et dire « Oui, c'est vrai », et leur donner quelques encouragements ou quelques commentaires, mais vous voulez rester très neutre et dire intéressant ou leur demander pourquoi. Pourquoi dis-tu ça ? Pourquoi pensez-vous que ça devrait être là ? Demandez-leur la raison de la rétroaction qu'ils vous donnent et essayez d'en arriver à leurs motivations. Parce qu'une fois de plus, ce sont des idées que vous mettez sur le papier. Ce ne sont pas des mises en page soignées et vous essayez juste d'obtenir les commentaires sur ces idées de base. Donc, pour préparer cette entrevue, prenez vos histoires d'utilisateurs les plus importantes et vous voulez les exprimer comme des scénarios afin que la personne que vous testez puisse visualiser un peu mieux ce que vous voulez dire. Donc, dans votre histoire d'utilisateur, vous pouvez avoir un utilisateur qui a déjà acheté un appareil photo et qui doit maintenant contacter le support technique. Donc, pour vos tests utilisateur, vous pouvez avoir quelque chose comme si vous avez trouvé une erreur dans votre compte et que vous avez besoin de contacter le service clientèle. Donc, cela leur permet d'imaginer un peu plus clairement le début de votre histoire. Ensuite, vous allez écrire tout cela dans un script clair pour vous guider comme vous le faites les tests utilisateur. Donc, d'abord, vous allez leur donner un contexte, alors comment ou pourquoi ils sont arrivés sur votre site. Donc, c'est exactement comme dans le monde réel. Un ami peut lui envoyer un lien et il le vérifie en raison de la recommandation de son ami, ou il peut avoir un besoin particulier qui l'incite à utiliser votre site. Donc, si vous êtes un calendrier d'événements, ils diraient, « D'accord, j'essaie de faire... », vous les aideriez à imaginer qu'ils essaient de faire un plan avec deux amis. Donc, cela leur donnerait la perspective dont ils ont besoin pour juger vos mises en page dans un état d'esprit approprié. Ensuite, vous voulez obtenir les premières impressions. Quelle est la première chose que vous voyez qui attire votre attention et que pensez-vous que ce site fait ? Avec vos croquis, il s'agira principalement des titres que vous avez choisis, peut-être des images étiquetées si vous les avez, mais cela vous permet de savoir si ces choses fonctionnent. Vous voulez présenter ces écrans sans conseils ni instructions, alors demandez-leur ce qu'ils voient en premier, que ferez-vous ensuite et qu'attendez-vous quand vous faites cela ? Ainsi, par exemple, vous voyez ce post sur Facebook. Qu' est-ce que tu te souviendrais ? Que ferais-tu et qu'attendez-vous ? Montrez-leur ensuite l'écran suivant. Demandez-leur de raconter leurs pensées, leurs questions et leurs sentiments tout au long de cette expérience. Vous pouvez essayer de prendre des notes pendant que vous les traversez ou vous pouvez enregistrer la session avec votre téléphone ou avec un autre type d'enregistreur ou vous pouvez demander à un ami de venir jouer au scribe pour vous. Après cela, vous allez donner et observer ces tâches, ces principaux scénarios que vous voulez vous assurer sont vraiment utilisables et vraiment faciles. Donc, un à la fois, vous les ferez passer par là et vous direz simplement, « Imaginez que vous essayez de contacter le support technique », et vous les regarderez simplement cliquer à travers votre prototype et vous les observerez. Qu' est-ce qui les distrait, où avez-vous quelque chose d'autre qui perturbe leur attention, quelles étiquettes ou mises en page les confondent. Par exemple, si votre magasin est étiqueté Dernière collection ou ce qu'ils attendent de vos étiquettes de navigation. Ensuite, vous pouvez également remarquer à quelle vitesse ils accomplissent les objectifs. Alors, est-ce qu'il leur faut 10 clics juste pour ajouter un produit à leur panier ou est-ce quelque chose que vous pourriez réduire à neuf ou huit ? Chacun de ces flux, nous voulons essayer de faire aussi simple que possible. Alors tu finiras. Obtenez des commentaires globaux. Ce site vous est-il utile ? Que veux-tu d'autre ici ? Qu' utiliseriez-vous normalement pour faire quelque chose comme ça ? Comment ce site se compare-t-il à cela et quelle est la chose la plus mémorable sur ce site ? Cela leur donne l'impression d'ensemble, et encore une fois, à cette étape de croquis, il s'agira principalement de vos idées et de votre contenu. Vous pouvez arrêter vos tests une fois que vous avez des résultats cohérents de cette phase. Donc, vous devriez commencer à voir des modèles après environ cinq ou 10 tests, espérons-le après cinq selon Jacob Nielsen et d'autres chercheurs importants sur la facilité d'utilisation. Donc, une fois que vous avez des informations claires, vous pouvez aller de l'avant et itérer vos prototypes. Donc, construisez quelque chose qui est vraiment rapide. Vous pouvez modifier la mise en page si personne ne comprend où cliquer. Vous pouvez changer le titre si tout le monde pense que c'est stupide et vous pouvez aller de l'avant et retester avec vos prochaines personnes. Alors, passez en revue et faites votre plan de test. Écrivez quels sont vos objectifs, ce que vous voulez explorer. Dans celui-ci, il se peut que vous souhaitiez tester vos fonctionnalités et tester votre contenu. Vous voulez écrire vos exigences pour savoir qui est qualifié. Donc, s'il s'agit d'un site de portefeuille, demandez-vous pour une certaine industrie ? Est-ce que cela va être une certaine personne avec un certain niveau d' éducation en design qui va juger votre travail ou est-ce cela va être quelque chose où vous voulez que tout le monde puisse utiliser votre site ? Ensuite, vous voulez énumérer vos outils qui sont la façon dont vous prévoyez de les atteindre. Alors, allez-vous faire un PDF cliquable ? Allez-vous utiliser InVision et vous devez exporter des PNG ? Allez-vous appeler vos utilisateurs et les parcourir au téléphone ? Allez-vous faire un Google Hangout et partager l'écran et l'enregistrer ? Écrivez exactement votre outil afin que vous puissiez mettre en place une liste, puis écrire votre script. Donc, encore une fois, vous définissez le contexte pour le test, vous collectez leurs premières impressions, vous leur assignez une variété de tâches, puis vous terminez et obtenez leur impression globale. Ensuite, vous voulez aussi planifier ce que vous allez garder. Alors, allez-vous prendre des photos de chaque personne que vous testez afin que vous puissiez faire une belle présentation plus tard ? Allez-vous transcrire tout ça ? Allez-vous écrire une feuille de calcul Google afin que vous puissiez essayer de faire une analyse de données plus tard ? Alors, faites un plan pour, une fois que vous avez cinq ou dix personnes que vous avez testées, ce qui sera un format utile pour revenir à ces commentaires et aussi pour les partager avec d'autres personnes. La meilleure chose est que tout le monde dans votre équipe puisse regarder ces sessions de test utilisateur en personne, mais ce n'est pas toujours réaliste. Donc, nous devons réfléchir au type de documentation qui sera utile à avoir plus tard. Alors, continuez à traverser ça. Tester et itérer. Vous pouvez tester avec d'autres personnes ici sur Skillshare, vous pouvez trouver des personnes qui représentent vos visiteurs de site dans le monde réel et continuer à itérer jusqu'à ce que vous ayez l'impression ces fils fonctionnels qui serviront vos concepteurs et vos développeurs dans les prochaines phases. Vous disposez maintenant de tous les documents dont vous avez besoin pour concevoir et développer une expérience Web solide. Votre portée est définie, vos directives de marque sont définies et vos actions principales sont claires et prises en compte. Donc, si vous voulez continuer, notre prochaine étape sera Magnifique Web Design et vous pouvez suivre et concevoir votre propre site Web.