Transcription
1. Introduction au cours: Bienvenue dans mon cours sur le design UX pour débutants. Pourquoi ai-je créé ce cours ? J' ai vu beaucoup de concepteurs, de développeurs, même de chefs de produits faire et répéter la même conception, et la convivialité et la conception d'interaction, des erreurs. raison pour laquelle ils n'ont pas été en mesure de corriger ces erreurs est qu'ils ne comprennent pas la facilité d'
utilisation, l'expérience utilisateur ou les principes de conception d'interaction. Maintenant, ces principes sont ces idées profondes. Ils vont régir l'expérience utilisateur de tous les produits, qu'
il s'agisse de produits physiques ou numériques. Donc, dans ce cours, vous allez maîtriser ces principes de base avec
des tonnes d'exemples réels comme Amazon, Walmart et G-mail et Google, différents produits de Google. Donc, après avoir suivi ce cours, vous serez en mesure de repérer les problèmes dans votre propre site e-commerce ou votre propre application, et vous pouvez facilement les améliorer. Vous pouvez voir où est le problème et comment le résoudre. Bonjour, je suis Muhammad Ahsan, et je suis en train de concevoir des UIS des huit dernières années et améliorer leur facilité d'utilisation et leur expérience utilisateur des trois dernières années. Commençons maintenant et commençons à améliorer l'expérience utilisateur des produits numériques.
2. Qu'est-: La première question est qu'est-ce que l'expérience utilisateur ? Il y a beaucoup de définitions en ligne ou même dans les livres qui sont très difficiles à comprendre donc je vais le simplifier pour vous. La joie, la satisfaction ou la frustration que votre utilisateur va ressentir après avoir utilisé votre produit efficace ou très lent, utilisable et délicieux. En termes de produit, il peut s'agir d'une application mobile, d'une application web, smartphone, d'un paquet, d'un ordinateur portable ou autre chose. En termes simples, le parcours de votre utilisateur avec votre produit est essentiellement une expérience utilisateur. Expliquons l'expérience utilisateur en termes d'application mobile. Vous avez peut-être utilisé de nombreuses applications mobiles et vous ne
savez pas comment l'ensemble de l'expérience utilisateur vous affecte. Pour un utilisateur, trouver l'application ou l'installation de l'application est la première étape. Vous pourriez le trouver sur Facebook ou peut-être d'entendre d'un ami que « Cette application est vraiment cool homme. Vous devez l'installer. Vous pouvez faire différents visages amusants avec elle ou quoi que ce soit. » Donc, la première étape consiste à trouver le ou et à installer l'application. Ensuite, l'étape suivante est l'expérience d'intégration, l'inscription. Il pourrait y avoir beaucoup de problèmes. Même j'ai vu beaucoup d'applications qui craint vraiment à l'inscription. La plupart des utilisateurs, ils vont partir à ce stade. La troisième étape consiste à apprendre l'application. Les premières impressions, comment l'application circule différemment avec différents écrans, et différentes interactions, et comment vous apprenez l'application. Ensuite, la quatrième étape effectue une tâche importante efficacement et facilement. C' est l'efficacité ; fonctionnalité de votre produit, façon dont vous pouvez accomplir efficacement et facilement vos tâches principales avec ce produit. Puis impact émotionnel, à la fin, vous serez frustré ou vous pourriez être heureux sur l'utilisation de cette application et vous pourriez être globalement satisfait de cette application. Il y a encore une chose. Cela peut également impliquer de contacter votre équipe de support par téléphone ou e-mail. Beaucoup de sites Web et d'applications, ils sont vraiment bons et ils exécutent tout, mais alors leur équipe de support ou leurs retards de support sont pour trois jours. Votre utilisateur va vous donner de très mauvaises critiques. J' ai vu de très bons produits ayant très mauvaises critiques juste à cause de leur équipe de support. Assurez-vous donc qu'il s'agit également d'une autre étape très importante dans l'expérience utilisateur. Maintenant, nous allons discuter de ce qui est le produit final de la conception de l'expérience utilisateur et qui sera impliqué dans le processus de conception de l'expérience utilisateur. Le produit de toute conception de l'expérience utilisateur sera des filaires détaillés ainsi que des spécifications détaillées de ce produit. Spécification détaillée signifie quelles sont les fonctionnalités, et ce que l'application va faire, ou ce que ce site Web va couvrir, combien de surface sur combien de fonctionnalités et de fonctions. Processus UX implique PDG parce qu'ils connaissent beaucoup le produit, puis les gestionnaires de produits, puis le service client, puis vos concepteurs et développeurs, et ainsi que d'autres utilisateurs, vos principaux utilisateurs, et aussi le référencement les gens ou les gens du marketing. Toutes ces personnes seront impliquées dans le processus UX. Définissons la conception de l'interface utilisateur. Nous avons beaucoup de confusion au sujet de la conception de l'expérience utilisateur et de la conception de l'interface utilisateur. La conception de l'interface utilisateur signifie l'aspect et la sensation de votre application. L' interface utilisateur est le point où votre utilisateur et votre produit vont se rencontrer. L' utilisateur va interagir avec vos boutons, l'utilisateur va appuyer sur différentes choses sur votre écran, mais ce qu'il visualise à l'écran est essentiellement la conception de l'interface utilisateur. Il inclut les couleurs, la typographie, ou comment les différents boutons sont espacés, comment le texte doit être aligné. Il s'agit donc de l'esthétique et de la façon dont votre utilisateur va interagir avec votre application. Encore une chose, c'est la première impression que votre utilisateur va obtenir de vos produits,
alors assurez-vous que cette interface est vraiment superbe et fonctionne également bien. Beaucoup d'utilisateurs de nos jours, même si vous regardez les produits Apple, ils ont une qualité esthétique spécifique ou ils sont très beaux. La première impression que l'utilisateur va obtenir de votre produit est ce qu'il ressemble et se sent, donc c'est très important. Le produit final de toute conception d'interface utilisateur ou conception d'interface utilisateur sera des maquettes haute fidélité avec des guides de style. maquettes sont essentiellement l'aspect final de votre produit. Ce sont essentiellement des images et ceux d'entre vous qui ont suivi mes autres cours de conception d'interface utilisateur, ils connaissent les guides de style et les maquettes. Les guides de style sont fondamentalement comment vos couleurs, polices de caractères, et différentes tailles de boutons et tous les autres objets que vous utilisez, élément de
conception que vous utilisez, ils vont se réunir et d'autres spécifications de conception différentes que vous êtes à l'aide. Ces maquettes et guides de style sont remis aux développeurs pour les implémenter réellement sous la forme d'un produit réel ou d'un code réel. En fin de compte, je vais résumer cette conférence en disant une chose que la conception de l'interface utilisateur est fondamentalement un processus d'une conception UX. La conception UX est un domaine très large. La conception de l'interface utilisateur fait partie de la conception UX. Gardez à l'esprit toutes ces choses et si vous avez des questions, posez-moi. Il y aura beaucoup d'autres choses à venir sur l'UX et la conception de l'interface utilisateur, alors passons à la prochaine leçon.
3. Puis-je être un concepteur UX: Maintenant, la question est, qui peut être un UX Designer ? réponse la plus simple est, n'importe qui peut être un UX Designer, juste besoin d'étudier quelque chose sur la psychologie humaine et quelques choses sur la façon dont les humains interagissent et se
comportent autour des produits numériques ou d'autres produits. Vous avez vu que j'ai tout montré sur les humains, donc tout est sur les humains. C' est pourquoi on l'appelle la conception centrée sur l'homme. Parlons des différents emplois de UX Designer. Il existe différents types de concepteurs UX. Ils font des emplois différents. Il y a beaucoup de titres de poste spécifiques différents pour différents concepteurs UX. Le premier est l'intervieweur d'utilisateurs ou l'enquête d'utilisateurs. Je l'appelle un enquêteur utilisateur ou quelque chose comme ça. Il interroge différents utilisateurs et obtient des informations d'eux. Ensuite, nous avons les planificateurs sont ceux qui planifient l'information ou l'architecture de l'information. Elles sont appelées Architecte de l'information. Ensuite, nous avons des designers. Ils vont au filaire et au prototype. Ensuite, nous avons des concepteurs d'interaction qui vont concevoir les flux et les diagrammes et les interactions, planifier toutes les interactions de votre application, peut-être quelques animations comment cet écran va circuler vers un autre écran, quelque chose comme ça. Ensuite, nous avons des testeurs d'utilisabilité ou des gourous d'utilisabilité qui vont observer les utilisateurs
réels de votre produit avec vos utilisateurs et vont évaluer différents problèmes UX avec lui. Maintenant, les intervieweurs d'utilisateurs vont également impliquer des entrevues avec les parties prenantes et les PDG de cette entreprise ou produit parce qu'ils connaissent beaucoup le produit. Maintenant, si vous étiez un concepteur d'interface utilisateur, vous pouvez facilement devenir un concepteur UX parce que vous connaissez déjà quelques choses sur la conception. Ce que vous devez apprendre, c'est la psychologie humaine et le comportement humain à l'aide de produits numériques. Vous connaissez déjà la moitié de UX Design, mais parce que vous savez déjà que la façon dont ces mises en page, typographie ou piliers
vont attirer l'attention de l'utilisateur ou si les utilisateurs peuvent cliquer sur ce bouton ou non, quelle taille ce bouton devrait être ou quelque chose comme ça. Si vous êtes un concepteur d'interface utilisateur, vous connaissez déjà la psychologie derrière les conceptions et les informations visuelles. Vous savez comment mettre en page les informations. Vous savez présenter des informations. Maintenant, comment vous allez passer d'un développeur à un UX Designer, si vous êtes un programmeur ou vous êtes un codeur, alors vous savez comment les choses sont implémentées. Tu connais l'épine dorsale de tout. L' équipe UX peut vous appeler un ingénieur ou un développeur de logiciels ou quelque chose comme ça. Vous pouvez facilement comprendre pourquoi regarder les tests d'utilisabilité ou les utilisateurs ou peut-être les interviews d'utilisateurs ou quand les concepteurs UX planifient quelque chose, vous savez comment nous pouvons y parvenir, comment nous pouvons rendre notre charge de produit rapide ou peut-être certains des choses précieuses comme ça. Vous savez déjà comment mettre en œuvre les choses. Vous devez connaître la psychologie de l'utilisateur et comment différentes choses affectent le comportement de l'utilisateur. Si vous maîtrisez ces choses ou l'essentiel des concepts d'expérience utilisateur, vous pouvez facilement devenir UX Designer. Chaque fois que des enquêteurs d'utilisateurs ou des interviews d'utilisateurs amènent l'équipe à interroger des utilisateurs, ils prennent toujours un ingénieur ou un programmeur avec eux
car les programmeurs peuvent voir les volets derrière l'interface utilisateur. Ils peuvent voir pourquoi ce problème se produit. Peut-être qu'il s'agit d'une erreur de connexion de base de données ou peut-être que l'erreur n'est pas visible ou peut-être que cette erreur est très petite lorsqu'elle est rendue à partir du serveur ou quelque chose comme ça. Ils peuvent trouver beaucoup de solutions pratiques. Il s'agit de devenir un concepteur UX à partir d'un arrière-plan de concepteur ou de développeur. Si vous avez d'autres questions, vous pouvez me poser. en va de même pour les ingénieurs SEO et les autres personnes qui ont un développement ou une formation informatique. Si vous avez des questions, demandez-moi. J' attendrai vos questions. Passons maintenant à la leçon suivante.
4. Différents rôles de concepteurs UX: Vous avez peut-être entendu dire qu'il y a beaucoup d'ingénieurs, comme les ingénieurs électriques, les ingénieurs mécaniques, les ingénieurs civils. De même, il y a des rôles différents dans la conception de l'expérience utilisateur, il y a des gens qui font des recherches sur les utilisateurs, il y a des gens qui font l'architecture de l'information ou définissent l'architecture de l'information, puis il y a des gens qui vont faire la conception d'interaction pour le produit, puis il y a des stratèges de contenu, puis il y a des experts en utilisabilité. Je suis fondamentalement un concepteur d'interaction parce que je travaille normalement avec des cadres métalliques, des maquettes et des prototypes la plupart du temps, je fais aussi des recherches d'utilisateurs et des tests d'utilisabilité. Voyons toutes ces règles. Maintenant, le chercheur utilisateur est quelqu'un qui va mener des entrevues avec les utilisateurs et va enquêter sur l'utilisateur et va poser à l'utilisateur quelques questions sur le produit. L' objectif principal de la recherche sur les utilisateurs est de recueillir des informations sur la façon dont, quand et pourquoi les utilisateurs utilisent certains produits et sur les caractéristiques dont ils ont besoin dans n'importe quel produit. Vous pouvez faire des recherches sur les utilisateurs sur site ou des recherches sur les utilisateurs hors site ou des recherches sur les utilisateurs en ligne, il existe différents sites Web. Sur place signifie que vous allez faire des recherches sur les utilisateurs dans le bureau de l'utilisateur, où l'utilisateur utilise réellement les produits. L' hors-site signifie que vous allez appeler votre utilisateur dans votre bureau et que vous avez mis en place, vous allez enregistrer son entretien tous les utilisateurs dans votre laboratoire. Une recherche d'utilisateurs en ligne est que vous allez poster quelques questions en ligne et différents utilisateurs qui répondent à vos critères, ils vont répondre aux questions. Il s'agit de différents types de recherche sur les utilisateurs. Maintenant, nous allons parler de concepteur d'interaction. Les concepteurs d'interaction travailleront sur le flux de votre application, comment quelqu'un va cliquer ou taper et où l'écran va couler et va amener l'utilisateur à un autre écran, l'utilisateur se voit poser quelques questions avant de passer à la écran ou quelque chose comme ça. Vous avez peut-être vu le flux de processus de paiement sur différents sites Web, ils sont totalement différents avec différents sites Web. Si vous allez sur Amazon, ils sont comme cinq, six étapes dans le processus de paiement, et si vous utilisez Walmart, ne
s'agit que de deux ou trois étapes de paiement. C' est ainsi que le concepteur d'interaction va résoudre ce problème. En outre, le concepteur d'interaction va vous dire les interactions ou toutes les missions qui vont se produire lorsque vous ouvrez ou lancez votre application, vous avez peut-être vu iPhone lorsque vous appuyez sur une icône ou que vous essayez de fermer une application, il y a un animation de fermeture et d'ouverture d'une application, donc cela va faire partie du concepteur d'interaction. Maintenant, l'architecte de l'information va planifier toute
l'information de n'importe quelle application ou site Web et comment elle va être affichée, comment l'utilisateur va atteindre ou trouver cette information, si l'information doit être au format vidéo, , ou il devrait être juste le texte avec des en-têtes, ou il devrait être une image, des images ou quelque chose comme ça. Maintenant, vous pouvez voir sur Facebook il y a différents types de messages, comme des photos, et ensuite nous avons post vidéo avec des textes, alors nous avons différents liens ou type intégré de messages. Il existe différents types de blocs d'information. C' est le travail de l'architecte de l'information de planifier toutes ces informations et comment elles seront affichées et comment l'utilisateur va les trouver. Maintenant, le stratège du contenu va répondre à la question de savoir comment votre entreprise, votre marque ou votre message commercial va être livré à vos utilisateurs finaux, quelle langue devriez-vous utiliser ? Quelle voix et le ton du produit devrait être ? Bref, il va encadrer toute l'histoire de votre produit. Maintenant, comment vous allez raconter toute l'histoire de votre produit, vous allez utiliser moins de texte et plus d'images, ou vous allez utiliser du texte détaillé ou moins d'images, ou si vous allez utiliser une vidéo d'introduction à ce sujet et tout le script de cette vidéo et tout va être le travail des stratèges du contenu. Maintenant, cela implique également l'écriture de tout le contenu, compiler, comment produire le contenu dont l'utilisateur a vraiment besoin. Si ce contenu est nécessaire pour les utilisateurs, si les utilisateurs sont vraiment à la recherche de ce contenu, s'ils ont vraiment besoin de télécharger ce fichier PDF, sont
donc les décisions que le stratège du contenu va prendre. Maintenant, les experts de la facilité d'utilisation, j'ai vraiment adoré ce travail. Les experts de la facilité d'utilisation vont obtenir les commentaires des utilisateurs après les avoir consultés à l'aide du produit. Ils donneront à l'utilisateur une chance d'utiliser le produit ou d'effectuer différentes tâches, puis ils vont regarder l'utilisateur faire des tâches différentes et obtenir tous les problèmes, les noter et les écrire. C' est ainsi qu'ils vont atteindre le point de broche de l'utilisateur et comment nous pouvons améliorer le produit. fin de compte, ils vont préparer un rapport sur la facilité d'utilisation. Ce sont tous les différents rôles des concepteurs d'expérience utilisateur. Si vous aimez l'un d'eux, vous pouvez pénétrer dans ce champ. Si vous avez des questions, posez-moi. Passons à la leçon suivante.
5. Les parties de conception UX: Vous connaissez l'UX, qu'est-ce que l'UX ? Mais nous allons voir quelles sont les différentes parties principales du processus UX. Je vais tout simplifier. Nous allons commencer par quel est le problème. Obtenir un aperçu d'un problème. Quel est le problème ? C'est la première étape. Alors qui a le problème ou qui a le problème ? Ce sont essentiellement nos utilisateurs. Alors nous avons comment il sera utilisé ? C' est le contexte. Comment nos utilisateurs vont utiliser notre appareil photo. Vont-ils l'utiliser sous la pluie ou quelque chose comme ça ? Comment les utilisateurs utiliseront la solution, comment ils vont interagir avec elle. C' est essentiellement l'interaction, qu'ils vont utiliser leur commande vocale ou s'ils vont entrer personnellement en utilisant leurs doigts, ou s'ils vont vibrer avec vos mains ou quelque chose comme ça. C' est l'interaction. Puis, à la fin, comment nous allons le tester et l'améliorer. Il s'agit de tests de convivialité et de voir vos utilisateurs utiliser vos produits. Si vous n'avez pas votre produit en ce moment, vous pouvez leur donner des produits similaires ou des sites Web similaires, ou le site Web de vos concurrents et voir quels sont
les lacunes et les problèmes auxquels vos utilisateurs sont confrontés. Cela peut vous donner beaucoup d'informations sur ce qui est le problème et comment vous pouvez le résoudre. Maintenant, c'est un mot à la mode. Vous avez peut-être entendu beaucoup de design centré sur l'humain. Maintenant, la conception centrée sur l'homme est fondamentalement une approche qui a été adoptée par l'équipe de conception d'IDEO. En fait, ce qu'ils ont fait c'est qu'ils ont mis d'abord les besoins et les
capacités humains et le comportement humain, puis ils ont tout conçu en fonction de cela. Fondamentalement, ils ont conçu tout autour des besoins, des capacités et des comportements humains. Il y a un autre conseil que je vais vous donner est, même si vous concevez pour les humains, n'oubliez pas qu'il y a des détenteurs de pieux et d'autres PDG, qu'ils ont leurs propres objectifs et qu'ils ont leurs propres objectifs en tête. Vous devez également répondre à eux aussi. Parlons maintenant du contexte utilisateur. C' est très important. Il peut changer l'ensemble du processus de votre produit ou il peut ajouter beaucoup de fonctionnalités nécessaires à votre produit. Il suffit de penser que le contexte utilisateur signifie que les conditions et l'atmosphère ou la pièce ou le bureau où votre produit va être utilisé. Prenons un exemple d'appareil photo. C' est peut-être un appareil photo reflex numérique et je suis un tireur de paysage et je tire surtout dehors. Peut-être que j'ai montré la plupart des paysages sous la pluie, alors cette caméra a besoin d'un bouclier si. De nos jours, beaucoup de gens qu'ils tournent dans toutes les atmosphères. Ils tirent au soleil, sous la pluie, sous la lumière du soleil, ils peuvent tirer en nageant ou quelque chose comme ça. Ces choses vont changer le contexte d'utilisation. Prenons un autre exemple d'application de réservation de train. Vous êtes peut-être pressé et vous réservez votre train pendant que vous voyagez, donc il peut y avoir du bruit autour de vous et il peut y avoir des signaux bas, signaux
Wi-Fi, ou peut-être quelques contraintes supplémentaires et le contexte utilisateur est totalement différent. Il y a peut-être des gens autour de vous, il pourrait y avoir beaucoup de bruit, il pourrait y avoir beaucoup de rassemblement et vous réservez vos places. Tu dois t'occuper de toutes ces choses. Vous êtes peut-être au soleil, donc votre écran n'est pas si lumineux ou vous avez des
problèmes de cliquer ou d'appuyer sur différents boutons. C' est ce qu'on appelle Contexte utilisateur. Maintenant, quelles sont les caractéristiques d'une très bonne ou grande expérience utilisateur design. La seule chose à propos de la conception de l'
expérience utilisateur ou de la conception de l'expérience utilisateur est notre interaction avec la technologie. En tant qu'humains, nous faisons beaucoup d'erreurs. Une bonne conception nécessite une communication, en particulier de machine à personne ou de personne à machine, indiquant quelles actions sont possibles ou ce qui se passe en
ce moment, que se passe-t-il avec mon application ? J' ai cliqué sur le bouton, est-ce que cela soumet mon formulaire ou fonctionne-t-il en arrière-plan ? Que va-t-il se passer ensuite ? Est-ce que ça va m'inculper maintenant ou est-ce qu'il va me
faire payer à la fin du mois ou quelque chose comme ça ? Ce sont les choses que vous devez garder à l'esprit que la communication entre la machine et personne ou votre produit et l'utilisateur est vraiment importante dans la création de design UX. Si vous avez des questions sur conception de
l'expérience utilisateur ou si vous ne comprenez rien de cette conférence, demandez-moi et je serai en mesure de répondre à toutes les questions concernant la conception de l'expérience utilisateur. Passons à la leçon suivante.
6. Conception centrée sur humain: Parlons de la première approche pour UX qui est la conception centrée sur l'homme. Maintenant, dans cette approche, ce que nous faisons en fait, c'est que nous nous concentrons uniquement sur nos utilisateurs, ok ? Chaque utilisateur a des besoins différents et des limites de mémoire différentes ou peut-être des limites physiques, donc nous allons prendre soin de toutes ces limites et nous allons créer un produit efficace et efficace qui peut satisfaire notre utilisateur et il peut augmenter efficacité globale ou tâche
importante que l'utilisateur va faire avec votre produit et ils peuvent facilement faire cette tâche. Maintenant, HCD était essentiellement utilisé dans les usines industrielles et les usines de production où les utilisateurs besoin de vérifier des centaines et des milliers d'articles et qu'ils étaient fatigués et malades, alors ce qu'ils ont fait c'est qu'ils ont commencé à rechercher comment nous
pouvons créer notre de sorte que les utilisateurs ou nos employés, ils peuvent être plus efficaces et il est plus facile sur leurs limites physiques. Il s'agit d'une conception centrée sur l'homme. Nous allons nous concentrer sur nos principaux utilisateurs et leurs besoins et leurs limites, qu'
il s'agisse de limites physiques ou mentales. IDEO est une agence de design qui travaille sur le design centré sur l'homme et ils sont connus pour cette approche, donc je vais vous montrer leur définition du design centré sur l'homme. La définition IDEO pour la conception centrée sur l'homme est que vous allez construire une profonde empathie avec vos gens ou avec les utilisateurs principaux
pour lesquels vous concevez alors vous allez générer des tonnes d'idées avec des croquis, avec différents filaires, alors vous allez construire sur ces idées et vous allez créer des prototypes fonctionnels. Maintenant, toutes ces étapes sont presque similaires dans n'importe quel processus d'expérience utilisateur et à la fin, ce que nous allons faire est que nous allons partager nos prototypes avec les utilisateurs et nous allons les
tester et finalement, nous allons montrer notre produit raffiné au monde entier. Ce sont les quatre étapes qui sont impliquées dans la conception centrée sur l'homme. abord, vous allez absorber et faire des recherches sur ce que l'utilisateur a besoin. besoins des utilisateurs et leur limite sont notre premier objectif, puis nous allons passer à la génération d'idées et explorer différentes solutions, ce qui peut être des dizaines ou des centaines de solutions. Ensuite, nous allons affiner et choisir quelques-unes des solutions et nous allons construire des prototypes ou des prototypes fictifs de ces idées. Ensuite, nous allons tester avec de vrais utilisateurs pour voir à quel point nos idées sont perçues par nos utilisateurs et comment ce produit fonctionnera dans le monde réel. Il s'agit d'une conception centrée sur l'homme. Maintenant, à la fin, je vais partager avec vous une boîte à outils de conception centrée sur l'homme, qui est libre d'IDEO. Vous pouvez le télécharger et vous pouvez l'utiliser. Ceci est un guide de terrain. C' est un document PDF ici. Vous pouvez voir ici le guide de terrain pour la conception centrée sur l'homme. Vous pouvez le télécharger et vous pouvez l'utiliser et vous pouvez le lire. Si vous avez des
questions, posez-moi, j'attendrai vos questions. Passons à la leçon suivante.
7. Modèle de conception double par Don Norman: Vous devez suivre quelques modèles de base ou quelques approches de base de la conception de l'expérience utilisateur. L' un d'eux est le modèle double diamant de conception. C' était de Don Norman et il est l'un des pionniers de la conception de l'expérience utilisateur et dans son livre, « The Design of Everyday Things », il a pensé à ce modèle double diamant, et ce que ce modèle est, il a essentiellement deux diamants. L' une est de trouver le bon problème et la seconde de trouver la bonne solution. Maintenant, regardons le diagramme. Voici le schéma du modèle double diamant de Don Norman, et vous pouvez voir sur le côté gauche nous avons le diamant qui va trouver le bon problème et sur le côté droit, nous avons trouvé la bonne solution. On va de gauche à droite. Maintenant, quand nous allons commencer sur ce point jaune gauche, nous allons explorer et sonder notre véritable problème. Quel est le vrai problème. Nos utilisateurs ont-ils vraiment besoin de cette solution ? Ce que disent les utilisateurs, c'est ce dont ils ont vraiment besoin. La plupart du temps, les utilisateurs ce que le besoin est, pas ce qu'ils disent. Ces choses vont se contredire les unes avec les autres. Nos utilisateurs vont nous dire beaucoup de choses, mais c'est notre travail de trouver le vrai problème. Maintenant, au milieu de ce diagramme, vous pouvez voir à gauche nous avons une ligne pointillée. À ce stade, ce que nous faisons, c'est que nous examinons de nombreux problèmes différents. divergence signifie que nous allons diverger et créer beaucoup d'options différentes pour le problème. Cela pourrait être un problème ou cela pourrait être un problème, ou cela pourrait être le bon problème. Ensuite, nous allons nous concentrer et nous converger sur un problème qui est la véritable racine de tout. À ce stade, nous allons commencer à chercher des solutions. Nous allons esquisser différentes idées, différentes solutions. Il peut s'agir de dizaines ou de milliers de solutions ou peut-être de centaines de solutions et à ce
stade, au milieu, nous avons exploré beaucoup d'alternatives. Vous pouvez voir de ce côté, cette flèche signifie que dans cette section en direction verticale, nous élargissons fondamentalement nos alternatives. Il pourrait s'agir de solutions alternatives ou de problèmes alternatifs. Après avoir trouvé ces alternatives, nous allons à nouveau converger vers la vraie solution. En fait, nous allons tester différents prototypes avec nos utilisateurs, et en fin de compte, nous allons produire la vraie solution. Maintenant, parlons de pourquoi avons-nous besoin de trouver le bon problème ? La plupart du temps, ce que les gens vont vous dire n'est pas ce dont ils ont vraiment besoin. Ils vont dire beaucoup de choses. J' ai ce problème, j'ai ce problème, mais le vrai problème est pour vous de trouver. Commencez à interroger vos utilisateurs et sondez leurs problèmes et élargissez la portée de ces problèmes. Il pourrait y avoir beaucoup de problèmes derrière ce problème ou liés à ce problème, et il est temps de faire une convergence sur le vrai problème en fin de compte. Une fois que nous avons trouvé le vrai problème, nous allons vers la solution. Avant cela, nous ne devrions jamais essayer d'explorer des solutions ou essayer de trouver une solution. Maintenant, explorer des solutions possibles signifie que nous allons créer beaucoup de croquis, beaucoup de prototypes factices, et leur montrer à nos utilisateurs lequel
fonctionne vraiment ou qui est leurs vrais problèmes et à la fin, nous allons pour converger vers la bonne solution. La meilleure et la seule solution qui fonctionne bien lors des tests avec de vrais utilisateurs. L' essence de l'expérience utilisateur est que nous concevons une solution à un problème que nos utilisateurs rencontrent actuellement. Voyons un exemple pour illustrer le modèle double diamant. L' utilisateur vient me voir et me dit que j'ai un problème, ma voiture ne démarre pas et je ne sais pas quel est le problème. Maintenant, votre idée de départ est de résoudre le problème de l'utilisateur et de montrer l'état de la voiture ou des problèmes état sur l'écran de la voiture ou sur son application mobile ou quelque chose comme ça. Maintenant, nous allons étendre ce problème. Quelle pourrait être la raison de ce problème ? Pourquoi la voiture ne montre aucun problème ? Quelles erreurs ou problèmes pourraient être liés aux problèmes d'allumage de la voiture ? Les batteries sont-elles faibles ou le carburant est faible ? Combien de raisons pourraient être derrière les problèmes d'allumage de voiture ? Une fois que vous allez trouver le vrai problème, et à la fin, vous avez découvert que la batterie était faible. Maintenant, vous allez vous développer, aller vers les solutions. Avons-nous vraiment besoin d'une application pour cela, ou existe-t-il un moyen de montrer tous ces problèmes ou l'indicateur de faible batterie ou existe-t-il une icône que l'utilisateur est incapable de reconnaître ? Avons-nous juste besoin de changer une icône ? Peut-être que nous avons besoin d'une batterie avec un surlignement rouge ou peut-être avec un peu de son pour montrer à l'utilisateur que c'est le problème ou peut-être nous avons besoin un indicateur avec la batterie qui est faible, alors vous pouvez converger vers la bonne solution. Peut-être changer une seule icône ou peut-être le retour à cette icône que ce qui se passe à votre voiture peut être la bonne solution. C' est tout sur le modèle double diamant. J' espère que vous avez apprécié si vous avez des problèmes, faites-le moi savoir. Passons à la leçon suivante.
8. Compétences d'analyse pour la cause: Il y a une autre technique que je voudrais discuter, savoir l'analyse des causes profondes. Cette technique est vraiment essentielle pour tout concepteur d'expérience utilisateur. Si vous voulez être un concepteur d'expérience utilisateur, vous devez le maîtriser. C' est très facile et simple à apprendre. Maintenant, trouver le problème de la cause première est essentiel dans tout processus de conception de l'expérience utilisateur car nous allons trouver le vrai problème derrière ce que l'utilisateur essaie de dire. Ça s'appelle cinq Why's. Ce procédé a été développé par Sakichi Toyoda qui est utilisé dans l'usine de production Toyota. Ce que vous allez faire est juste de continuer à demander Pourquoi est jusqu'
au moment où vous atteignez la cause réelle ou profonde de ce problème. Voyons cette analyse des causes profondes avec un exemple. Maintenant, le problème est que l'utilisateur n'a pas pu se connecter. La première question est, pourquoi l'utilisateur n'a-t-il pas échoué à se connecter ? La réponse est qu'elle a tapé le mauvais mot de passe. Pourquoi a-t-elle tapé le mauvais mot de passe ? Parce qu'elle l'a oublié. Pourquoi a-t-elle oublié le mot de passe ? Parce que nous avions une contrainte de faire des mots de passe forts. Pourquoi n'a-t-elle pas utilisé le mot de passe oublié ? Elle a essayé de l'utiliser, mais n'a pas reçu l'e-mail dans les 30 secondes. Pourquoi le retard s'est produit avec le mot de passe de réinitialisation ? Parce que nous utilisons un plug-in tiers. Maintenant, le vrai problème était que l'utilisateur a essayé d'utiliser la fonctionnalité oublier mot de passe, mais elle n'a pas pu recevoir le mot de passe en raison de retards la. Le vrai problème derrière son échec de connexion n'était pas le mauvais mot de passe, mais la réinitialisation du mot de passe retarde. C' est ainsi que vous allez trouver le vrai problème derrière quoi que ce soit. Vous pouvez appliquer cette technique à n'importe quelle situation dans votre vie ou dans la conception de l'expérience utilisateur, ou pendant que vous concevez quelque chose ou que vous interrogez les utilisateurs. Il s'agit d'une analyse des causes profondes. J' espère que vous avez apprécié cette leçon. Si vous avez des questions, posez-moi, passons à la leçon suivante.
9. Quelles sont les sept étapes d'action ?: Chaque fois que nous utilisons un produit, un site Web ou une application dans notre esprit, nous essayons de créer un ensemble d'actions. abord, je vais le faire, puis je vais le faire et toutes ces actions sont basées sur notre perception, ce que nous percevons, comment nous percevons cette application ou le résultat de nos actions. Donc, toutes nos actions, elles seront basées sur la perception, qui est aussi appelé modèles mentaux et nos objectifs, ce que nous voulons accomplir à la fin. Nous parlerons de modèles mentaux plus tard. Voyons voir quelles sont ces sept étapes d'actions. Ces sept étapes d'actions ont également été proposées par Don Norman. Voyons voir, quelles sont ces sept étapes. Numéro 1 est, quoi et pourquoi est-ce que je veux accomplir ? Tout d'abord, nos objectifs et nos déclencheurs. Qu' est-ce qui déclenche pour atteindre cet objectif ? Deuxièmement, quelles sont les séquences d'action alternatives ? Pouvons-nous atteindre le même objectif que faire quelque chose d'autre ou avec une autre séquence d' actions en appuyant sur ce bouton et aller à cette URL et peut-être copier et coller tout. Puis-je créer un document Google comme celui-ci ? C' est donc la séquence des actions. Chaque utilisateur a une séquence d'actions différente. Ils pourraient utiliser une autre séquence pour atteindre le même objectif. Alors vous penserez que quelles actions puis-je faire maintenant ? Puis-je appuyer sur ce bouton ? Est-il activé ou désactivé ? Alors l'étape suivante est, comment puis-je le faire ? Comment je vais cliquer sur ce bouton en utilisant mon clavier ou ma souris ou en appuyant dessus. Ensuite, l'étape suivante est la rétroaction. Que s'est-il passé ? L' application est un besoin de vous dire ce qui s'est passé lorsque vous avez cliqué ou quand vous avez fait cette action. Ensuite, l'étape suivante est que vous allez percevoir cette rétroaction de ce qui s'est passé. Par exemple, vous utilisez un four à micro-ondes et lorsque vous appuyez sur « Démarrer », il ne démarre pas et cela a donné une erreur. Vous devez comprendre ce que cette erreur signifie. Qu' est-ce que ça veut dire, que s'est-il passé ? Alors, à la fin, ça va ? Ai-je atteint mon objectif ? En fin de compte, vous allez voir si vous avez créé un document Google, un
nouveau document avec succès, ou si vous avez chauffé votre lait dans le four à micro-ondes. Ce sont donc sept étapes d'actions. Si vous pouvez les maîtriser, vous pouvez les appliquer sur n'importe quelle application, n'importe quel site Web, n'importe quel produit. Élaborons les sept étapes d'actions avec un écran de Gmail. Ceci est ma capture d'écran de mon application iPhone Gmail. Maintenant, vous pouvez voir mon déclencheur et mon objectif est de supprimer les e-mails. Mon déclencheur était de se débarrasser des e-mails inutiles. C' était ma principale envie de supprimer les e-mails. Je ne veux pas d'e-mails inutiles. Mon objectif était de supprimer les e-mails. Maintenant, je suis à l'écran et vous pouvez voir combien de séquences d'action alternatives possibles sont. Je peux appuyer longuement sur un e-mail pour le sélectionner. Ou je peux également appuyer sur le côté gauche du cercle, ok, et sélectionner plusieurs e-mails. Peut-être que je peux sélectionner un seul e-mail. Il existe deux façons possibles de sélectionner les e-mails. Soit je peux taper dans le cercle ou je peux appuyer longuement sur l'e-mail. Ensuite, puis-je appuyer sur « Supprimer » ? Quelles actions puis-je savoir ? L' icône de suppression est-elle activée ou désactivée ? Non, je ne peux pas dire que cela est activé ou désactivé car la plupart de mes e-mails, ils sont mis en surbrillance en noir. Donc mis en évidence ou activé sont fondamentalement en couleur noire, mais les icônes supérieures sont en gris. Maintenant, le suivant est, j'ai pris l'action, j'ai appuyé sur le bouton « Supprimer », qui est comment le faire. Je vais appuyer sur le bouton « Supprimer ». Ensuite, le message suivant que je vais voir à l'écran sera une barre de notification jaune qui, « Voulez-vous annuler les messages a été supprimé ». C' est ce qui s'est passé. J' ai besoin de le percevoir que j'ai besoin sont de le traduire si je suis capable de comprendre le message, c'est l'étape suivante, ce que cette notification signifie. Donc, je comprends juste que j'ai terminé avec succès. La notification a été que vous avez supprimé les e-mails et souhaitez-vous les récupérer ? Voulez-vous annuler votre action ? En fin de compte, mon objectif a été atteint. J' ai supprimé tous mes e-mails que je veux. Donc, ces sept étapes d'actions, vous pouvez l'appliquer sur n'importe quel écran mobile, n'importe quelle application, importe quel produit, n'importe quelle chose que vous concevez ou développez. J' espère que vous avez compris les sept étapes des actions. Passons à la leçon suivante.
10. Qu'est-: Les prix et les signifiants sont l'un des concepts majeurs de la conception de l'expérience utilisateur ou l'un des concepts de base de l'UX. Maintenant, ce que signifie l'accessibilité est juste comment vous pouvez utiliser n'importe quel objet ou ce qui peut être fait avec. Par exemple, l'accessibilité du smartphone est qu'il peut être activé, il peut être désactivé. Nous voyons normalement un écran attaché à elle, sorte que nous pouvons toucher l'écran, nous pouvons taper sur l'écran. Vous pouvez également l'insérer dans vos poches en raison de sa petite taille. Ce sont quelques-uns des prix des smartphones. De même, les portes, elles peuvent être ouvertes, elles peuvent être verrouillées, vous pouvez vous cacher derrière une porte, c'est aussi un prix abordable. Voyons ce que sont les anti-prix. anti-abordage est le contraire de l'abordage. Il montre ce que vous ne pouvez pas faire avec cet élément ou cet objet. Par exemple, nous ne pouvons pas utiliser les smartphones comme un marteau parce que nous pouvons voir qu'il y a un écran en verre dessus. Nous savons que c'est sensible, et ça peut se casser si j'essaie de frapper quelque chose avec. De même, si vous avez utilisé Photoshop ou n'importe quel logiciel de conception, vous savez qu'il y a toujours une toile présente et qu'il y a une boîte de délimitation autour de la toile. Zone de sélection ou écran large ou limites de document dans Microsoft Word ou Google Docs qui indique qu'il s'agit de la limite de ce document. Vous ne pouvez pas sortir de cette limite, ou vous ne pouvez pas effectuer cette action avec elle, donc c'est anti-abordage. Il y a peu de fonctionnalités intégrées n'importe quel produit. Vous pouvez le regarder et vous pouvez voir qu'il a des coins pointus donc je devrais l'éviter. Je ne peux pas le mettre dans ma poche. Ils pourraient rester dans ma peau. Ces prix dans les anti-abordages, ils sont à nouveau liés à votre perception. Si vous ne percevez pas que c'est une porte, vous n'essaierez jamais de la verrouiller, ou vous n'essaierez jamais de l'ouvrir. Pour cela, nous aurons besoin de signifiants. Les débordements sont tout au sujet des actions possibles avec cet objet. Maintenant signifie essentiellement nous dire que c'est le signe, ou c'est le bouton que vous devez appuyer pour faire cette action. Les significateurs communiquent où vous pouvez effectuer l'action comme vous pouvez voir les poignées sur la porte. Vous savez que cette poignée peut être déplacée vers le bas ou vers le haut ou vous pouvez l'ouvrir ou vous pouvez la faire pivoter pour ouvrir la porte. Cette poignée de porte ou cette poignée est essentiellement un signifiant. Dans la conception de l'interface, les significateurs sont de différentes formes. Vous pouvez voir le champ de recherche, les boutons sur le champ de recherche, sorte que vous pouvez cliquer dans le champ de recherche pour taper quelque chose. C' est un signifiant. Vous pouvez également voir les boutons sur une interface. Ils sont un peu élevés, ou ils ont des ombres en dessous. C' est un signifiant. C' est un signe que cette action est possible avec cet élément. Vous pouvez appuyer sur ce bouton. Passons maintenant à la façon dont nous allons utiliser ces prix et ces signifiants. Pour créer une expérience utilisateur agréable, vous devez avoir des prix et des anti-prix perceptibles. Cela signifie que vous allez utiliser des signifiants très forts pour montrer quelles actions sont possibles et où l'utilisateur doit appuyer ou faire l'action. C' est pourquoi nous avons de très grandes barres de recherche et gros boutons sur les grands magasins de commerce électronique comme Amazon et Walmart. Il spécifie que cette action principale est possible sur ce site Web, et que vous devez l'exécuter. Maintenant, avoir un signifiant très grand ou très significatif aide beaucoup. L' utilisateur peut instantanément voir qu'il s'agit d'un magasin de commerce électronique, j'ai besoin de trouver ou de chercher ici. La plupart des utilisateurs vont utiliser des barres de recherche. Il s'agit de signifiants, de prix et d'anti-prix, mais je vais vous montrer quelques exemples. Maintenant, si nous regardons ce site Web, Amazon.com, vous pouvez voir qu'il y a une très grande barre de recherche ici avec une icône de recherche,
et si je tiens dessus , vous pouvez voir que cela signifie que c'est touchable ou pressable. Je peux utiliser celui-ci pour rechercher n'importe quel produit que je veux. Ensuite, vous pouvez voir que nous avons ces flèches ici, mon dossier client, et il y a peu de bouton de plus. Si je passe la souris sur ces zones, vous pouvez voir qu'elles se transforment en boutons, et cela va me montrer une liste. Je peux voir que tout ce sont des significateurs, ces boutons, ces états de vol stationnaire, la couleur brutale de cette zone. Vous pouvez voir ici, c'est un signifiant que cette zone est importante, vous pouvez effectuer des actions ici. Maintenant, si nous prenons l'exemple de Walmart.com, vous pouvez voir ici, encore une fois, le même modèle est répété ici. On a un très grand bar bleu par ici. La plupart des actions se déroulent dans ce domaine. C' est un signifiant. Ensuite, nous avons ce très gros bouton jaune, couleur
puissante, et encore une grande barre à rechercher ici. C' est encore un signifiant. Vous pouvez voir que ce sont des états de vol stationnaire. Ce sont des signifiants que ces actions sont possibles. Vous pouvez utiliser ces zones pour faire ces actions, donc je peux cliquer sur celle-ci. En outre, vous pouvez voir sur mon vol stationnaire, vous pouvez voir une petite icône de main. Cela signifie que c'est pressable, ou je peux cliquer dessus. Ce sont tous les significateurs utilisés pour élaborer l'action, quelles actions sont possibles, et comment vous allez le compléter, où vous devez cliquer sur « OK ». Il s'agit de signifiants et de prix, d'anti-prix. Passons à la leçon suivante.
11. Affordances et Signifiers expliqués → Headshot: Permettez-moi d'expliquer plus au sujet des prix et des signifiants. Maintenant, vous avez tous vu cet iPhone. Donc, sur iPhone, les prix sont que je peux tenir dans ma main et il permet de le mettre dans la poche, et aussi il va se permettre de l'allumer et de l'éteindre. C' est la propriété de tous les téléphones mobiles. Je sais que cet écran est sombre, donc j'ai besoin de l'allumer, mais où je vais l'allumer ou quel bouton je vais
appuyer sera signifié en utilisant signifiant. Je vais vous montrer les boutons ici. Ici, nous avons un bouton en haut et si vous le voyez de près, alors nous avons trois boutons de ce côté, vous pouvez voir par ici. Vous pouvez voir qu'ils ont plus, laissez-moi vous montrer un peu de zoom avant. Il ne fait pas de zoom avant, mais il y a un symbole plus sur un bouton et un symbole moins, qui signifie qu'il va augmenter ou diminuer le volume de ce téléphone mobile, et le bouton de sourdine. Pour la première fois, je ne savais pas ce qui allait faire dans ce bouton, s'il allait couper le son ou diminuer les couleurs de mon écran ou quoi que ce soit, mais après l'avoir utilisé une fois, j'ai su que cela allait le couper. S' ils avaient mis une icône ici qui va couper le son, alors ce serait plus utile. Il y aura toujours un compromis entre le design et les significateurs. Vous pouvez voir ici qu'ils peuvent faire ce bouton, cette allumer mais en haut vous pouvez voir ici. Donc, ce n'est pas se concentrer de toute façon. Le bouton en haut, si c'est une couleur un peu différente comme le rouge ou peut-être le vert, je sais que je vais appuyer dessus pour l'allumer. moment, quand j'utilise ceci pour la première fois, je ne vais pas être sûr quel bouton va allumer cet appareil. De même, si vous voyez mon iMac à l'arrière, vous pouvez voir ici, c'est mon iMac et quand j'ai montré mon iMac à l'un de mes amis, vous pouvez voir qu'il y a un logo Apple ici et ce qu'il a fait c'est qu'il essayé de tapotez ici comme ça et ils le tapent trois ou quatre fois. Il n'était pas sûr que ça va l'allumer. Alors il a essayé de chercher autour de cet appareil où est le bouton d'allumage ? Il s'agit d'un compromis de conception. Ils ont fait le bouton à l'arrière et il est à peine visible. Il est tout argent donc vous devez trouver le bouton. Même en ce moment, je l'utilise à partir de six mois encore j'ai difficulté à tendre la main en mettant ma main ici et essayer de trouver le bouton où il est. C' est donc une histoire sur les signifiants et les prix. De même, si je vous montre cette bouteille, c'est une bouteille de médicament que je prends. Vous pouvez voir qu'on a un couvercle ici en haut. Maintenant, les moyens sont que je peux le tenir dans la main. Il peut être équilibré sur une table comme celle-ci et un prix de plus est, je peux voir que c'est une bouteille, donc je dois l'ouvrir. Donc, il peut être ouvert et fermé. Maintenant, où il peut être ouvert et quelle partie de celui-ci sera le couvercle ? C' est le signifiant. Donc ils ont, laissez-moi vous montrer qu'ils ont fait ce couvercle est un peu séparé de cette bouteille. Donc vous pouvez voir que cela va signifier que je peux l'ouvrir d'ici ou que je dois le tourner comme ça. Ok, donc tout est sur les signifiants et les prix. Je te verrai bientôt dans une autre leçon.
12. Exemples Examples et Signifiers: Permettez-moi maintenant de vous montrer quelques autres exemples
de prix et de signifiants pour en apprendre davantage à ce sujet. Maintenant et vous pouvez voir que c'est Photoshop J'ai ouvert un document. Vous pouvez voir ce sont les limites limites de ce document, qui est en blanc et tout le reste est noir. C' est un prix que vous ne pouvez pas taper ou faire quoi que ce soit dans ce domaine. Tout ce que vous avez besoin que
vous allez créer, vous devez le faire dans ce domaine. C' est donc un anti prix que Photoshop a limité ce document avec une limite. La même chose est dans Microsoft Word. Si j'ouvre un document dans Microsoft Word, maintenant, la même situation est dans Microsoft Word. Vous pouvez voir qu'il y a un anti-abordage que vous ne pouvez pas aller au-delà de ce domaine. Donc, si je continue à taper, ça va être sur la ligne suivante. Donc, il montre que vous ne pouvez pas aller en dehors de cette marge sont en dehors de
ce document, cette limite de document, c'est anti affordance. Cela aide l'utilisateur à comprendre ce qu'il ou elle ne peut pas faire avec ce logiciel. Maintenant, si nous parlons des prix, vous pouvez voir que j'ai ouvert ce document ou ce logiciel. Je sais que je peux taper quelque chose ici. Donc, si j'ai un document vide comme celui-ci, vous pouvez voir que c'est le curseur. Je vois que je peux taper quelque chose ici. Je peux copier ou coller quelque chose ici. Ce sont les prix. Si nous parlons de significateurs, alors vous pouvez voir ce sont les significateurs, Ceci est mis en évidence. Donc, si je passe à celui-ci ou celui-ci, ce sont des styles différents. Vous pouvez maintenant voir que ce curseur a été modifié en texte plus grand. Donc ce sont des significateurs. Ce sont tous les boutons que vous pouvez voir ici. C' est cliquable, déroulant, et beaucoup d'autres regroupements différents de boutons. Ces boutons sont tous des signifiants que ces actions sont possibles avec ce logiciel logiciel ou objet agréable. C' est la même situation ici à Photoshop. Vous pouvez voir ici, il y a peu de contrôles en surbrillance et peu sont désactivés. C' est ainsi qu'un significateur va m'aider à comprendre que ces actions ne sont pas possibles pour l'instant avec ce document. Vous pouvez voir ici vous pouvez afficher ces contrôles de transformation et tout et quelques actions ou quelques boutons. Ceux-ci sont possibles avec elle. D' autres ne sont pas possibles. Il s'agit donc de logiciels. Maintenant, je vais passer au matériel ou à des produits différents. Vous pouvez voir que c'est l'un des exemples. Maintenant, en regardant pour la première fois, je pense que c'est une sorte de bouilloire et je dois la mettre sur ma cuisinière ou mon four pour la chauffer. Mais je pense que ce sont des orateurs. Si nous regardons de près, vous pouvez voir ici le signifiant que ces petits trous dedans, ceux-ci montrent que c'est fondamentalement un haut-parleur. Maintenant, si vous regardez les boutons autour de ça, vous pouvez voir ici, ici nous avons les boutons de ce côté. Ceux-ci sont pour l'activer ou l'allumer, éteindre ou quelque chose comme ça. Maintenant, si nous regardons cet appareil, très nouveaux produits qui entrent sur le marché et, et qui sont vraiment nouveaux ou innovants produits. Ils vont avoir ce problème beaucoup. Ce qui est que nous ne pouvons pas dire comment l'allumer, les signifiants et les prix. Peut-être que je pense qu'il a parlé alors peut-être que c'est un téléphone ou peut-être un microphone ou quelque chose comme ça. Mais en fait, je vais vous le dire et vous serez étonné que ce soit un parapluie de la colline. Il crée une grue à air pour arrêter les gouttes d'eau venant du haut afin
que vous puissiez la tenir dans votre main et vous pouvez être hors de la pluie. C' est donc un produit très innovant et en regardant dessus, je ne vois pas la plupart des contrôles. Je ne sais pas comment l'allumer ou l'éteindre. Donc les prix sont essentiellement liés à votre perception. Donc, si je ne peux pas percevoir ce qu'est cette chose, alors je ne vais pas obtenir les prix et je pourrais peut-être voir certains des signifiants, mais je ne sais pas ce qu'ils vont faire. Voici un autre exemple. C'est un fan. Il est très, très innovant ventilateur, mais en regardant dessus, je ne peux pas dire ce que cet appareil va faire ou quelles sont les possibilités, si je vais obtenir de l'air de lui et tout, je vais voir mon visage dedans ou un hologramme dedans. Je ne sais pas. Maintenant, si nous regardons en bas de celui-ci ici, et si je zoom avant, vous pouvez voir ici en bas, vous pouvez voir qu'il y a différents boutons et boutons pour l'éteindre ou l'allumer, ou peut-être l'accélérer. Il y a un bouton de volume ici pour le retourner. Donc, ce sont les prix. Ce sont les significateurs qui montrent que cet appareil peut être allumé et éteint. Aussi, il doit y avoir quelque chose à augmenter ou à diminuer. C' est peut-être sa vitesse ou quelque chose d'autre. Il s'agit donc de prix et de signifiants. Je vais partager une autre vidéo où je vais
vous montrer une bouteille de shampooing pour vous montrer les prix. Passons donc à la leçon suivante.
13. Mappage naturel: cartographie est la relation entre deux ensembles de choses. Supposons qu'il y ait beaucoup de lumières dans une salle de classe et qu'une rangée d'interrupteurs d'éclairage est sur le mur. Maintenant, pouvez-vous deviner lequel est lié à lequel ? C' est la plus grande question. Beaucoup de gens, ils ont numéroté leurs boutons et commutateurs en écrivant F ou léger un, L_1, L_2, quelque chose comme ça sur les commutateurs. C' est un concept vraiment important. Un autre concept est la cartographie naturelle. La cartographie naturelle est que lorsque vous avez deux ensembles, et que leur cartographie correspond les uns aux autres d'une manière naturelle. Le premier bouton est la première lumière, et le deuxième bouton est une seconde lumière sur le plafond et le troisième bouton. Par exemple, si j'ai trois lumières d'affilée, dans une colonne et j'appuie sur le premier bouton, alors il allume la première lumière, alors c'est essentiellement une cartographie naturelle. Chaque fois, si je veux allumer la lumière que je désire, je peux naturellement la mapper au bouton que j'ai besoin d'appuyer. Peu d'exemples de mappages dans la conception logicielle ou conception
matérielle sont lorsque vous avez utilisé vos touches de contrôleur X-Box, et vous voyez également qu'il existe différentes touches de raccourci dans différents logiciels et applications, même Photoshop ou n'importe quel éditeur de texte. Il existe des contrôles similaires, comme le contrôle S ou la commande S, pour enregistrer le fichier. Il est commun dans tous les systèmes d'exploitation différents ou dans tous les logiciels différents. Ainsi, l'utilisateur peut facilement les mémoriser. Ils sont naturels sauf. S est pour Save, il est
donc plus facile de s'en souvenir. Il est notre mappage naturel que si j'appuie sur le contrôle S ou la commande S, Il va enregistrer le document. Voyons quelques exemples de mappage et comment les différentes mappages sont bons ou mauvais, et comment vous pouvez utiliser ces principes pour améliorer ceux de
vos logiciels ou sites Web, jeux ou applications. Maintenant, vous pouvez voir ici, cette femme est, ce qu'elle fait c'est qu'elle étiquette l'idée principale en haut ou dans la catégorie principale ou la zone principale en haut et en bas, elle étiquette ce que ces boutons vont allumer. Ce qu'ils vont faire, quelle lumière ils vont allumer. Ce sont des boutons différents, elle utilise différentes étiquettes dans toute sa maison comme ça. Donc c'est sa solution. Il y a un autre article de Don Norman, Designing For People. Tu vois que je parle beaucoup de lui. Maintenant, dans son livre, il a essayé de proposer une solution, quelque chose comme ça. C' est le plan d'étage d'une maison et il dit : « Placez les boutons sur les endroits où les lumières sont réellement là. » Donc, si la lumière est sur ce mur, vous devez placer le bouton sur le plan d'étage par ici. Donc si j'allume
ça, il va allumer la lumière juste ici. C'est son plan. Maintenant, un designer appelé Hwang, je pense qu'il est ingénieur civil et de Corée, il a essayé de résoudre ce problème. Je pense qu'il a résolu la moitié du problème, et vous pouvez voir qu'il y a tout un panel avec toute la planification de l'étage de la maison. Vous pouvez taper sur n'importe quelle lumière ADR, si je veux allumer ma chambre, Je vais taper sur cet ADR, Il va allumer, allumer et éteindre l'ensemble des lumières. C' est son design. Il est appelé interrupteur de lumière de plan d'étage. Voyons maintenant certains des modèles les plus confus comme celui-ci. C' est le panneau à l'intérieur d'un camion et vous ne pouvez pas dire ce que ces boutons vont faire ou où ils sont réellement liés. C' est vraiment déroutant. Je vais vous montrer quelques exemples supplémentaires de ce poêle ou four. Si nous zoomons dessus, vous pouvez voir qu'il y a, un, deux, trois, quatre, cinq poêles et il y a, un, deux, trois, quatre, cinq, six boutons par ici. C' est un peu déroutant. Si je vais zoomer, vous pouvez voir ici que ce bouton sur la gauche, que j'ai pensé qu'il devrait allumer
celui-ci, c'est pour l'arrière. Donc il va allumer ce brûleur ici et pas celui-ci. Je pense qu'ils ont mentionné ce plan parce qu'il ne s'agit pas d'une cartographie naturelle. Vous pouvez voir ici, dans mon esprit, je pensais que ça devrait être lié à celui-ci et ça devrait être pour celui-ci, ou peut-être quelqu'un d'autre pense que c'est pour l'arrière et c'est pour l'avant, mais de mon point de vue, je pense que cela devrait allumer ce brûleur. C' est pour le centre qui est par ici, et je pense qu'il devrait être quelque part par ici. Donc plus de cartographie naturelle dans ce domaine, mais je pense qu'ils réservent cette zone pour ce four contrôles. Si nous allons sur le côté droit, vous pouvez voir ici ce bouton est pour le four en bas. C' est encore une fois, avant et arrière. Maintenant, vous pouvez voir que cette position est totalement différente de celle-ci. Ici, le bouton arrière est au premier, et ici l'arrière est à la dernière, ce qui est très déroutant pour moi. Tout cela est à propos de ce mappage déroutant de cet appareil. Voyons maintenant quelques-uns de l'exemple le plus. Maintenant, vous avez vu cette télécommandes dans beaucoup de jouets. Jouets télécommandés ou radiocommandés. Vous pouvez voir que c'est un peu déroutant parce que l'un des panneaux et ce contrôle est pour l'avant et l'arrière et l'autre est pour tourner. Donc, parfois un nouvel enfant, ils sont vraiment confus comment tourner cela ou utiliser ceci. Mais au lieu de cela, si vous allez à celui-ci, ceux-ci sont un peu nouveaux. Vous pouvez voir qu'ils sont vraiment naturels. Si vous avez tourné ce volant, à droite ou à gauche, il va tourner à droite ou à gauche. C' est plus facile pour les enfants. C' est plus naturel parce qu'il est lié à nos voitures, qui conduisent des voitures avec ces roues. Maintenant, laissez-moi vous montrer quelques-uns des exemples de jeu et comment les contrôles sont mappés sur un clavier. Vous avez joué beaucoup de jeux, vous pouvez voir la plupart d'entre eux utilise les mêmes contrôles comme W, S, A et D pendant un moment. L' un est un, le clic de souris est pour se battre, et le second est pour le chargement, quelque chose comme ça. Donc, la plupart de ces contrôles seront similaires dans beaucoup de jeux. Vous pouvez voir ici, c'est un autre jeu ZMR. Il a également presque les mêmes contrôles. Vous pouvez voir que c'est « Attaque » ce « Aim », ceux-ci sont appelés cartographie et ils sont fondamentalement pourquoi ils utilisent le même modèle parce que nos esprits sont câblés avec des boutons. Si j'ai joué comme deux ou trois jeux avant, je serai adopté à ce jeu facilement. Je peux facilement commencer à jouer à ce jeu parce que je suis déjà habitué et j'ai déjà vu ces modèles de cartographie. Comme vous pouvez le voir W. Il est très naturel en effet parce que W est au sommet. Donc, si j'appuie sur ceci, ce sera le mouvement dans la direction de l'avant, et S est pour l'arrière, E pour la gauche et la droite. Donc, quelle que soit la position de ces boutons, il va déplacer mon personnage de jeu dans la même direction. C' est ce qu'on appelle le concept de cartographie de l'expérience utilisateur, et comment nous pouvons les utiliser dans notre logiciel
ou dans notre matériel, ou dans nos appareils, ou dans nos appareils électroniques pour améliorer l'expérience utilisateur. Maintenant, à la fin, je vais vous montrer la cartographie des voitures et des véhicules. Ceci est de Mercedes-Benz 2014 Model S 550. C' est la cartographie de réglage du siège. Il y a quelques années, ils n'utilisaient pas quelque chose comme ça. Ils avaient quelques boutons ici pour appuyer et gérer ça. Maintenant, si vous essayez d'appuyer sur ce bouton, ce siège de tête, et si vous le faites glisser en haut, ou essayez de le presser en haut, ou en bas, il va se déplacer dans la même direction. Maintenant, ce que vous devez faire est juste, vous devez appuyer sur ce bouton et cette zone est liée à votre siège. Il est très facile de cartographier avec ce que j'essaie d'ajuster. Donc, si j'essaie de régler ma banquette arrière, cette partie je vais appuyer sur celle-ci ou je vais pousser celle-ci de l'arrière ou d'ici et je peux facilement m'y adapter. C' est mon siège de repos ou quoi que ce soit. Je ne sais pas comment tu l'appelles. C' est le fond. Donc, tous ces contrôles sont vraiment mappés naturellement. Tout le monde peut facilement régler les sièges de Mercedes-Benz. Ce sera mon dernier exemple. J' espère que vous avez apprécié cette leçon, maintenant, passons à la leçon suivante.
14. Modèles conceptuels et mentaux pour améliorer l'UX: Vous avez peut-être lu beaucoup de manuels lorsque vous achetez une nouvelle chose ou un nouveau produit, nouvel appareil photo, un nouveau four à micro-ondes, et vous avez peut-être lu beaucoup de manuels techniques et comment l'utiliser. Maintenant, modèle conceptuel et modèles mentaux, ils sont vraiment nécessaires pour comprendre l'expérience utilisateur de n'importe quel produit, ou si vous voulez améliorer l'expérience utilisateur de n'importe quel produit numérique. Modèle conceptuel est essentiellement une explication en termes très simplifiés, comment cette chose,
cette application , ce produit, va fonctionner. Idéalement, vos utilisateurs devraient pouvoir commencer à utiliser votre produit, ou votre application, sans lire aucun manuel, aucun document de modèle conceptuel, ou quelque chose du genre. Maintenant, parlons de modèles mentaux. Les modèles mentaux sont fondamentalement des modèles conceptuels, mais ils vont être dans la tête de votre utilisateur. Votre utilisateur va voir et construire son propre modèle dans son esprit après avoir vu votre produit qu'il va fonctionner à partir de ce bouton, ou je dois faire quelque chose comme ça pour l'activer, ou peut-être utiliser ce produit, ou utilisez ce four à micro-ondes, ou utilisez cette application. C' est la compréhension de votre utilisateur dans leur esprit, comment votre produit va fonctionner. Différentes personnes peuvent avoir des modèles mentaux différents
d' un même objet parce qu'il est relatif à votre perception. Si j'ai des connaissances différentes, ou si j'ai interagi avec les différents types de produits, ou de voitures, alors je pourrais ne pas être en mesure de conduire la voiture de luxe automatique la première fois. Je pourrais être confus, entrer dedans. Mon modèle mental pourrait ne pas correspondre au modèle conceptuel de ce produit. Maintenant, quelles sont les choses qui vont créer un modèle mental ? Ce seront les moyens financiers, les
contraintes, la cartographie et les signifiants. Ce sont toutes les choses qui vont montrer ou dire à votre utilisateur que cela est possible avec cet appareil. Vous pouvez appuyer sur ce bouton à partir d'ici, vous ne pouvez pas l'utiliser sans le brancher d'abord dans la socket, c'est une contrainte, et le mappage est que ce bouton va contrôler ces choses. En tant que concepteur ou concepteur d'expérience utilisateur, votre travail consiste à aligner modèle mental de
votre utilisateur sur le modèle conceptuel de votre produit, votre application. Vous allez utiliser des signifiants, et vous allez utiliser des prix, et vous allez guider votre utilisateur dans l'utilisation de votre produit. Vous avez peut-être vu des applications. Presque toutes les applications ces jours-ci, ils vont vous montrer un guide d'utilisation, ou un guide d'introduction chaque fois que vous démarrez une application pour la première fois. Il s'agit de combler l'écart entre un modèle mental et un modèle conceptuel. C' est ainsi que nous allons former notre utilisateur et leur
dire que vous allez utiliser ce produit, cette application de cette façon. Une seule personne peut avoir des modèles mentaux différents ou multiples d'un même objet. Par exemple, si j'utilise un four à micro-ondes, je pourrais penser que pour chauffer les liquides, j'ai besoin d'utiliser ces boutons, et pour chauffer la viande, ou une autre chose, j'ai besoin d'utiliser ces boutons ou ceci séquence. En outre, il y a une autre chose que vous devez répondre aux utilisateurs experts et aux utilisateurs novices. Si vous développez une application, vous devrez peut-être savoir qu'il pourrait
y avoir utilisateurs experts qui vont utiliser l'application de manière totalement différente, et ils ont un modèle mental totalement différent de celui que vous êtes des utilisateurs novices. Donc, vous devez prendre soin de ces deux modèles mentaux, ou des deux de ces utilisateurs. Voyons maintenant quelques exemples de modèles mentaux. Voici comment vous allez combler
cet écart entre un modèle mental et un modèle conceptuel. Vous allez afficher différents écrans pas-à-pas au début de votre application. Vous pouvez voir ici, un exemple est ici. Un autre exemple est cet écran d'intégration, vous pouvez voir ici. Il s'agit de trois écrans et ils mettent en évidence chaque fonctionnalité de votre application. Il y en a un de plus. C' est mieux parce que vous pouvez voir qu'il vous emmène progressivement à la première étape. Il vous guide vers la première étape, qui est cette connexion avec Facebook. C' est vraiment sympa. C' est ce que vos applications, vos produits devraient faire. Ils devraient guider l'utilisateur sur leur première utilisation, comment utiliser votre application, plutôt que d'ouvrir votre manuel et de lire différentes pages et de parcourir ce que je dois faire avant d'utiliser cette application. Maintenant, voici quelques images des temps de rêve, et celui-ci vient aussi des temps de rêve. Ce sont les vieux fours à micro-ondes. Vous les avez peut-être utilisés. Ils ont des boutons comme ça. Ce sont différents niveaux de chaleur, et c'est la minuterie. C' est très simple à utiliser. Juste vous devez sélectionner la minuterie et la capacité à ce qu'il va fonctionner. C' est très facile. Tu as juste besoin de tourner le bouton. Pendant de nombreuses années, nous avons tendance à utiliser quelque chose comme ça, donc notre modèle mental a été construit sur elle. Chaque fois que nous voyons des designs comme celui-ci, c'est de Samsung. Si j'essaie de commencer à utiliser ceci, après avoir utilisé ceux-ci, je vais vraiment avoir du mal à l'utiliser parce que je ne sais pas par où commencer. Dois-je appuyer sur le bouton Démarrer, et cela va me guider ? Ou devrais-je commencer à taper sur ces boutons ? Il n'y a pas de guide ici. Maintenant, si vous regardez ces modèles, je pense que les derniers modèles à venir maintenant, vous pouvez voir qu'ils ont combiné les anciens concepts, ou les anciens modèles mentaux avec le nouveau. Vous pouvez voir ce que nous avons ici, nous avons le bouton, et ici nous avons différents boutons qui sont très audacieux, et ils ont un effet de construction, donc comme les vieux boutons. Ici, vous pouvez voir qu'il s'agit essentiellement d'un panneau tactile, et ce sont des boutons. Vous pouvez voir, il est je pense qu'un peu plus facile de commencer avec, avoir moins de contrôles, vous avez juste besoin de sélectionner n'importe qui et juste tourner ce bouton et commencer. C' est mon modèle mental. Il s'agit de modèles mentaux et de modèles conceptuels. J' espère que vous avez apprécié cette leçon. Si vous avez des questions, posez-moi. Passons à la leçon suivante.
15. Maîtriser et attention Span: L' une des plus grandes limites de l'esprit humain est la mémoire de travail. La mémoire de travail est notre centre d'attention à court terme, et elle a une durée très limitée. C' est la ressource la plus limitée que nous possédons. C' est essentiellement notre attention et cette attention est très ciblée et très sélective. Vous êtes assis dans un restaurant et vous parlez à votre ami, dîner dehors et vous n'êtes pas au courant de
la plupart des gens autour de vous qui sont assis dans le même restaurant. Mais vous n'étiez pas au courant de quelques choses devant vous et de quelques choses que votre ami dit. C' est ainsi que notre mémoire de travail est limitée. Un concept similaire s'applique à vous. Vous êtes en ce moment conscient des derniers mots ou idées que vous avez entendus de moi. Mais vous ne savez probablement pas quelle est la couleur du mur derrière vous. Donc, ce sont les limites de l'esprit humain, la mémoire de travail ou l'attention, notre mémoire à court terme, il est aussi appelé mémoire à court terme, est très limitée. Maintenant, parlons de la limitation réelle ou de la capacité en quelques secondes ou en nombre de mémoire de travail. La capacité moyenne de la mémoire de travail était de quatre éléments plus ou moins un. Avant cela, il y avait une vieille recherche disant qu'
il y avait quelque chose avec les sept plus deux ou moins deux. Mais la nouvelle recherche est qu'il s'agit de quatre plus ou moins un. Cela dépend également de l'article, l'article
que vous essayez de stocker, si c'est juste un grand nombre ou s'il s'agit de noms différents de fruits différents. Cela dépend également de cela, mais la fourchette moyenne est de quatre plus ou moins un, donc elle est de trois à cinq. Maintenant, combien de temps l'information va rester dans votre esprit brillant et la durée est de 10-15 secondes par Goldstein. Je pense que la recherche effectuée par Goldstein, il ya un terme de plus qui est lié à la mémoire de travail, qui est la charge cognitive. Il est montré et parlé beaucoup dans conception de
l'expérience utilisateur que cette chose va augmenter la charge cognitive. Il fait référence à la charge placée sur votre mémoire de travail ou à votre puissance de traitement de votre esprit. Il pourrait s'agir de n'importe quel calcul, calcul
dur, ou de mémoriser des choses. Gardez donc à l'esprit que cette charge cognitive signifie la charge placée sur votre mémoire à court terme et la façon dont vous allez traiter cette information. Maintenant, le principal problème avec la mémoire de travail est qu'elle est très volatile. Si vous travaillez sur quelque chose et que quelqu'un vous interrompt, vous allez perdre tout ce qui était dans votre mémoire de travail. Maintenant, cette volatilité s'applique également aux objectifs et aux détails des objets. Peut-être que vous essayez de vous souvenir de la liste des articles et vous êtes allé à l'extérieur de votre maison pour prendre quelques choses à l'épicerie et vous avez rencontré un ami et il vous demande comment allez-vous homme, qu'est-ce qui se passe ? Ceci et ça et soudain vous avez oublié toute la liste des articles que vous essayez d'acheter à l'épicerie. Il est très volatil, vous n'allez pas le garder pour des durées plus longues dans votre esprit. Si vous perdez un objet, vous allez également perdre la trace de la chose que vous essayez de faire ou que vous êtes objectif. J' essayais peut-être d'aller chercher du lait dans le réfrigérateur. Mais quand je viens d'arriver dans la cuisine, j'ai oublié ce que je faisais ici, je ne me souviens pas. Peut-être que j'étais là pour prendre un verre d'eau. C' est ainsi que fonctionne notre mémoire de travail et c'est la plus grande limitation qu'elle a. L' information dans la mémoire de travail va disparaître rapidement. Je vais partager avec vous beaucoup d'exemples de mémoire de travail, puis son application dans la conception de l'interface utilisateur ou la conception de l'expérience utilisateur ou des applications mobiles. Mais en ce moment, je vais montrer juste la seule application qui est la longueur du titre. Maintenant, selon la recherche publiée par l'une des sociétés de la
plate-forme de partage de médias sociaux qui est appelé Buffer et ils ont effectivement recherché que ce qui est la longueur idéale de n'importe quel titre. Ils ont découvert que six mots sont la longueur idéale parce que six mots sont dans la limite de notre mémoire de travail. Il est très proche aussi, Jakob Nielsen, il est l'un des pionniers dans la conception de l'expérience utilisateur. Son étude montre également que les manchettes avec la longueur de 5-6 mots fonctionnent très efficacement. En fait, tout cela est lié à notre capacité de mémoire de travail. Nous avons une capacité de trois à cinq mots, ou peut-être de trois à cinq points. Il est plus facile pour notre esprit de traiter ces nombreux morceaux de données. Si nous avons une longueur de titre de 10 mots, nos yeux et notre esprit vont sauter certains des verbes trop facilement ou rapidement, saisir l'idée ou percevoir l'idée ce que ce titre dit réellement. Gardez cela à l'esprit lorsque vous concevez des applications mobiles ou que vous concevez des formulaires ou tous ces produits. Gardez à l'esprit que vous n'allez pas mettre votre utilisateur dans une situation où il ou elle doit se souvenir de beaucoup de choses, ou qu'il doit s'en souvenir pour des durées plus longues. Passons à la leçon suivante.
16. Exemples de mémoire de travail: Voyons quelques-uns des exemples de mémoire de travail et comment différents objets ou éléments de
conception ils peuvent soulever la charge sur votre mémoire de travail. Maintenant, ce premier exemple est Google Maps, et vous pouvez voir ce localisateur de
carte IM ici va m'aider à mémoriser que je suis ici. Aussi, vous pouvez voir tous les symboles autour de moi comme cette mosquée et ce centre e-Salhulat. C' est une école. Ensuite, nous avons ce club de restauration ou une zone de restauration. Ensuite, nous avons cette banque ici. Donc toutes ces choses m'aident. Ma mémoire de travail que voici quelque chose se trouve. Donc, je peux facilement épingler le point que je veux aller ici ou je veux aller par ici. Je dois prendre le tour. Ces cartes et les applications qui utilisent,
utilisent des cartes pour localiser l'emplacement actuel des clients ou des utilisateurs. C' est vraiment utile. Un autre exemple est que si vous voulez que votre utilisateur ait moins de mémoire de travail ou de traitement, alors vous pouvez utiliser quelque chose comme ceci. Vous pouvez voir ici au paiement d'expédition par carte supérieure. ce moment, je suis là. C' est aussi une autre implémentation que je suis en ce moment là. J' ai juste besoin d'une étape de plus comme celle-ci, revoir et de la confirmer. Je veux entrer la carte. Cela peut facilement me dire combien d'étapes j'ai fait et combien j'ai besoin d'aller plus loin. Un autre exemple est les modes. Les modes signifient que je suis en mode Incognito ou en mode caché dans mon navigateur Chrome. Vous pouvez voir que je passe à ce Incognito, vous pouvez voir ici vous pouvez aller sur ce ici, une nouvelle fenêtre incognito. Tout a changé. Je suis en ce moment dans une autre fenêtre et ce thème entier devient noir. Il y a un signe ou un symbole ici. Cela me dit à chaque fois, chaque minute, chaque seconde que j'utilise ce mode de ce logiciel, donc je suis déplacé vers un autre mode s'ils suppriment cela, tout cela, et je pense peut-être que j'utilise mon navigateur normal via ce navigateur me demande de me connecter à nouveau sur ce site. C' est une autre façon. En utilisant les modes, vous avez peut-être vu différents jeux vidéo. Si vous passez à un autre mode et qu'il peut changer toute
l'interface ou une indication que vous êtes en ce moment dans ce mode, vous jouez dans ce mode, mode
réseau ou en mode équipe ou quelque chose comme ça. Une chose qui peut également aider à augmenter votre charge de mémoire de travail est celle-ci, vous pouvez voir sur ce coin, ceci est appelé chapelure. C' est le chemin, encore une fois que je suis ici en ce moment. Vous pouvez également voir les sélections. Si j'ai cliqué, sélectionné celui-ci, cela me dit que maintenant je suis sur cette sélection. Il est mis en évidence toutes ces indications et signifie. Ils me disent qu'en ce moment je suis ici et que je suis dans cet état. Prenons un autre exemple de walmart.com. Vous pouvez voir à nouveau, ils ont très joli oiseau vient et ils sont vraiment visibles. Dans cet exemple, vous pouvez voir que ce n'est pas très visible aussi, il est très emballé. Ici, nous avons des chapelures très visibles. Puis encore une fois, nous avons toute la piste et un bouton de plus, éditer ici retour à la page précédente. Donc, si quelqu'un veut revenir en arrière et faire une autre page, c'est très pratique. Maintenant, un autre exemple est l'histoire. Vous pouvez voir si vous allez sur YouTube, toutes les vidéos que vous avez regardées, il garde l'historique de toutes ces vidéos pour que je puisse chercher dans mon histoire comme vous pouvez le voir ici. Je vois ce que j'ai cherché. Alors c'est mon historique de montre, et c'est mon historique de commande. J' ai peut-être oublié que la dernière nuit, quelle vidéo je regardais par exemple, comme MacBook Pro, bouton d'alimentation, correctif. Je peux les prendre d'ici. En outre, si vous allez à cet historique de navigateur, tous ces navigateurs, ils conservent l'historique des pages ou sites Web que vous avez visités à quel moment. Cela aide notre mémoire de travail parce que nous ne pouvons pas garder toutes ces informations dans notre mémoire de travail. De même, si nous regardons différents nouveaux logiciels comme Photoshop ou même ce Microsoft OneNote, vous pouvez voir maintenant qu'ils ont activé l'enregistrement automatique. Si j'essaie de changer quelque chose, vous pouvez voir ici, il montre le nom de la personne qui change sur ce document, écrire des notes dans le Cloud. Il se synchronise sur mon iMac et mon PC Windows. J' utilise juste ce document et il est automatiquement enregistré et téléchargé sur mon Cloud ou la synchronisation sur différents appareils. C' est vraiment la fonctionnalité soignée, l'enregistrement automatique, beaucoup d'applications, ils utilisent l'enregistrement automatique. Laisse-moi revenir aux cartes par ici. Il s'agit d'un autre exemple d'enregistrement automatique. Vous pouvez voir ici ce sont les objets que j'ai laissés dans ma carte et quand je suis retourné, il me montre les mêmes objets ici. Ça veut dire qu'il tient un registre de mes articles ici et de toutes mes commandes, de toutes les commandes. Ils sont aussi bons pour ma mémoire de travail. Un autre exemple de mémoire de travail est que vous avez vu ces fichiers récents dans beaucoup d'applications et de logiciels. C' est juste pour mémoriser la dernière fois que j'ai ouvert tous ces fichiers ou ce fichier ou ce fichier ou ce fichier. Cela me fait gagner du temps à localiser tous ces fichiers. Vous pouvez voir ici dans je suis en ce moment dans Photoshop ou il affiche, Je pense que presque 10-12 derniers fichiers ouverts et il est de les trier par ce dernier ouvert ok. Ma dernière est par ici. C' est vraiment logique et cela correspond à mon modèle mental que c'est le premier, le dernier que j'ai utilisé puis celui-ci puis celui-ci. Ce sont tous les fichiers. Ceci est un autre exemple, les fichiers récents. Cela peut aider beaucoup à faire moins de charge sur la mémoire de travail. Tout cela concerne la mémoire de travail et les exemples et comment nous pouvons l'implémenter pour élever la mémoire de travail. Nous n'avons pas besoin que nos utilisateurs pensent tout et les gardent dans leur mémoire. C' est ça. Si vous avez des questions, demandez-moi. Passons à la leçon suivante.
17. Reconnaissance et rappel: Si vous voyez un de vos amis venant de 500 mètres ou même 200 mètres, vous pouvez facilement le reconnaître, même en regardant tout le corps ou le mouvement que c'est
cette personne ou ceci est John ou ceci est Sara. Nos cerveaux sont branchés pour reconnaître les choses à grande vitesse. Vous pouvez facilement reconnaître un visage que vous avez vu il y a 20 ans. De même, les modèles ou les visages familiers, ou les icônes familières que vous avez vu dans déjà peu d'applications, votre esprit va les traiter très rapidement et ils vont être reconnus très rapidement. Il faudra beaucoup moins de temps pour les reconnaître. Plutôt que de les rappeler ou de les retirer de votre mémoire à long terme et de penser que « Où ai-je vu cette personne ? Je ne me souviens pas de lui. » Mais si vous voyez un de vos amis, vous allez rapidement vous souvenir de lui. Tu n'as pas besoin de
te souvenir de quoi que ce soit, tu le reconnais, tu sais juste qui il est. Vous pouvez appliquer le même principe. Cette reconnaissance est plus facile que le rappel. Rappel signifie que vous allez apporter cette information de votre mémoire, faites-la glisser. Mais la reconnaissance, cela fonctionne comme Snap. Vous allez savoir ce que cela signifie réellement. Ainsi, l'utilisateur ne devrait pas se souvenir des informations d'une partie de l'écran à l'autre, il n'a pas besoin de rappeler les informations qu'il vient de voir. En outre, n'essayez pas d'utiliser de nouveaux types d'icônes ou de modèles que l'utilisateur n'est pas familier. De même, si nous montrons à un utilisateur dévoilant un nouveau modèle ou un comportement
très nouveau d'une application qu'il n'a pas vue auparavant, il sera très difficile pour lui utiliser ce produit ou même de s'inscrire ou de se connecter. Alors évitez de vous rappeler et essayez de mettre en œuvre la reconnaissance, essayez d'utiliser des modèles similaires. Nous allons avoir une autre conférence complète sur les modèles dans la prochaine section. Élaborons cette reconnaissance en utilisant un exemple. Vous avez rempli beaucoup de formulaires en ligne ou de formulaires de connexion, vous avez vu qu'il y a des icônes de verrouillage dans le champ mot de passe. Si vous l'avez vu plusieurs fois auparavant, vous allez instantanément reconnaître que sans aucun travail ou
sans aucune aide que vous avez besoin de mettre un mot de passe dans ce domaine. En utilisant des icônes et des modèles familiers dans votre site Web ou vos applications mobiles ou logiciels, vous réduisez réellement la charge cognitive de votre utilisateur. Gardez donc à l'esprit que vous allez utiliser des modèles et des icônes similaires ou familiers. N' essayez pas de créer un nouveau type de lettre ou de champ qu'un utilisateur ne peut pas reconnaître. Maintenant, il y a un autre concept qui est lié à cette reconnaissance, qui est les attentes des utilisateurs ou l'anticipation des utilisateurs. Essayez toujours de répondre aux attentes ou à l'anticipation de vos utilisateurs. Ce que ce concept signifie, c'est que si notre cerveau est branché pour voir un modèle similaire encore et encore, il le suivra. Donc, si vous essayez de créer un nouveau type de barre d' onglets qui flotte à l'intérieur ou au milieu de votre application, alors l'utilisateur ne va pas le reconnaître. L' utilisateur ne s'attend pas à ce que la barre d'onglets soit flottante dans l'application au milieu de celle-ci. En outre, si vous essayez de regarder l'icône du panier ou les icônes de la liste de souhaits, ils sont en haut à droite de n'importe quel site de commerce électronique. Donc, si vous essayez de placer l'icône du panier sur la gauche ou au milieu, l' utilisateur ne s'attend pas à ce modèle. Ils vont le manquer, ils ne vont pas le reconnaître, et il leur faudra beaucoup de temps pour trouver cela et aggraver l'expérience utilisateur. N' essayez donc pas de créer un nouveau modèle, une nouvelle icône pour confondre vos utilisateurs. Dans la leçon suivante, nous allons voir beaucoup d'exemples
sur la reconnaissance ou la reconnaissance des modèles et les attentes des utilisateurs. Si vous avez des
questions, posez-moi, passons à la prochaine leçon.
18. Exemples de reconnaissance plutôt que de rappeler: Voyons quelques exemples de reconnaissance plutôt que de rappel. C' est un principe très basique et j'ai vu beaucoup de designers l'utiliser d'une très mauvaise manière. C' est donc notre premier exemple. Maintenant, vous pouvez voir ici il y a quelques icônes que nous
reconnaissons instantanément comme cette icône « Retour » et l'icône « Téléphone », et aussi l'icône « Chat » peut-être. Mais pour ces trois points, peut-être c'est « Plus », mais la plupart des utilisateurs, je pense qu'ils ne vont pas le reconnaître, de nouveaux utilisateurs. Ensuite, en bas, vous pouvez voir ceci est notre barre d'onglets principale, et ceci est notre barre de navigation principale de cette application. Vous pouvez voir deux utilisateurs et un utilisateur, alors c'est, je ne sais pas ce qui est ce signe et c'est pour Setting. C' est très commun, et ce n'est pas très commun. Cela pourrait devenir et comme peut-être c'est mon profil ou mon compte, et ce n'est pas très clair non plus. Vous pourriez entrer dans une certaine ambiguïté que je ne sais pas si c'est mon réseau d'utilisateurs ou si ce sont mes followers ou quoi que ce soit. Assurez-vous donc que si vous utilisez ou introduisez de telles icônes, elles devraient être facilement reconnaissables par les utilisateurs. Essayez donc d'utiliser des icônes standard ici. Si vous ne trouvez pas d'icônes standard, mettez des étiquettes sous elles comme ceci est peut-être mes correspondances ou ceci est mon profil, et ceci est mes followers, et ce sont mes paramètres. Si vous pouvez écrire quelque chose dans votre interface utilisateur, c'est la meilleure chose que vous pouvez expliquer juste par un mot ou deux mots, que cet élément va faire les choses. Une fois que les utilisateurs sont familiers avec ces icônes en les regardant et en lisant leurs titres, vous pouvez supprimer plus tard les titres ou les étiquettes avec ces icônes car les utilisateurs sont déjà formés. Pour les nouveaux utilisateurs, ce sera toujours un problème. Voyons maintenant un autre exemple. Vous pouvez voir ici c'est un écran de connexion conçu par ce Vitaly Rubtsov je pense que c'est un coup de dribble. Maintenant, vous pouvez voir que c'est assez standard, mais il y a peu de choses qui pourraient être déroutantes que ce sera toujours un e-mail. Donc, il s'agit essentiellement d'une icône « E-mail ». Donc, toute personne utilisant cet écran va toujours supposer de mettre son e-mail ici et c'est pour mot de passe, mais peut-être peu d'utilisateurs ou peut-être de vieux utilisateurs qui commencent juste sur des mobiles ou des applications intelligentes qu'ils pourraient ne pas être en mesure de se connecter en utilisant cela. Mais encore je pense que c'est un bon exemple parce qu'ils utilisent presque les icônes standard ici. Un autre exemple, celui-ci Login and Sign up, vous pouvez voir ici. Ici, nous avons encore cette icône « Utilisateur ». Maintenant, qu'est-ce que tu en penses ? Devriez-vous utiliser votre nom d'utilisateur ici ou devriez-vous utiliser votre e-mail ici ? C' est assez standard pour le mot de passe, mais c'est un peu ambigu. Cela peut confondre votre utilisateur. Donc, ce sont quelques choses que vous devez garder à l'esprit cette reconnaissance plutôt que de rappeler. Vous pouvez utiliser une icône « E-mail » ici, ou vous pouvez simplement utiliser quelque chose comme ça. C' est le meilleur exemple de S'inscrire et se connecter que j'ai jamais vu. Essayez toujours d'utiliser les étiquettes en haut. Donc, quand l'utilisateur tape, il sait ou elle sait que c'est ce qu'ils tapent ici ou c'est l'information requise. Si vous utilisez quelque chose comme ça à l'intérieur des étiquettes, ceux-ci ne sont pas très bons si vous avez un formulaire comme quatre ou cinq champs. N'essayez jamais de l'utiliser. Mais si vous avez seulement deux champs, peut-être que l'utilisateur peut se souvenir de cela. C' est dans la limite de la mémoire de travail. S' il vous plaît essayez de vous rappeler que je vous ai montré que c'est presque trois à cinq éléments. Donc le meilleur exemple que je dirais est celui-ci. Chaque étiquette est claire puis ils ont un champ de texte ici ; mot de passe, confirmation du mot de passe, code d'invitation. C' est clair. Pourquoi ? Parce qu'il utilise du texte pour expliquer que cette information est requise. Aussi, vous pouvez voir une drôle de façon de dire ça,
j' ai oublié le mot de passe. Mais s'ils mettent le soulignement autour, alors peut-être qu'il est plus facile de cliquer. Ensuite, nous avons cette connexion et créer des comptes. Donc ce sont aussi de très bons indicateurs que nous avons besoin de connexion ici, c'est l'écran de connexion, c'est un écran de création de compte. C' est assez standard si vous utilisez des symboles, des icônes, essayez d'utiliser des symboles standard. Si vous utilisez une nouvelle icône, essayez d'utiliser une étiquette avec elle, comme un nom d'utilisateur ou placez votre e-mail ici, quelque chose comme ça pour aider l'utilisateur à résoudre la confusion que signifie cette icône. Maintenant, regardons cet écran. C' est assez standard. C' est un vieux écran de Facebook. Au début, ils ont montré quelques étiquettes autour de ces icônes si vous vous souvenez, peut-être que certains d'entre vous se souviendront. Ensuite, une fois que les utilisateurs ont été familiarisés et se familiariser avec ces icônes, alors ils peuvent facilement savoir que cette icône est pour mes demandes ou réseau. C' est pour mes messages. Ce sont toutes les dernières mises à jour et ce sont mes flux et ce sont les extras. Donc, bien qu'ils utilisent quelque chose comme ça, mais il est quand même préférable de mettre quelques étiquettes autour et de le rendre plus utilisable. Okay un autre exemple de Google YouTube, et vous pouvez voir ici, il y a quelques icônes au bas de cette vidéo,
comme, J'aime et je n'aime pas. Chaque fois que je survole dessus, il montre une popup. C' est une autre façon de montrer à l'utilisateur que cette icône va le faire. Donc les trois premières icônes me sont assez familières et je sais ce que ces deux et ils ont récemment ajouté celui-ci ici, ce qui est un peu nouveau pour moi. Donc, si j'ai plané dessus,
il est écrit « Ajouter à ». Je dois cliquer dessus pour voir quelles options sont disponibles. Vous pouvez voir ici je peux ajouter à ma liste, playlist. C' est un peu déroutant pour moi. Je pense qu'ils l'ont récemment changé et que ces choses peuvent créer des confusions. Je pense qu'auparavant, c'était ici, dans ce domaine, et ils l'ont récemment déplacé ici. C' est une bonne idée de montrer les textes sur le vol stationnaire. Mais je pense que ce n'est possible que sur le web. Donc, sur les applications mobiles, vous ne pouvez pas montrer quelque chose comme ça. Assurez-vous donc que vous traitez tous ces problèmes ou toutes ces confusions que les utilisateurs peuvent obtenir de votre interface. Il s'agit donc de la convivialité et conception de
l'expérience utilisateur et de ce que vous devez garder
à l'esprit lors de la conception de vos écrans, écrans connexion ou du développement ou de la conception. Si vous avez des questions, posez-moi. Passons à la leçon suivante.
19. Expectations utilisateur dans UX: Parlons un peu plus des attentes des utilisateurs. Maintenant, les attentes de l'utilisateur se produisent en deux étapes. abord, nous allons reconnaître l'objet, ce qu'est cet objet, une barre de recherche, est-ce un bouton, est-ce une barre de navigation déroulante ou une icône de fermeture. Ensuite, dans la prochaine étape, nous allons voir comment il va se comporter et fonctionner. Ce que nous devons faire dans une meilleure expérience utilisateur, c'est que nous allons minimiser l'écart entre ce que l'utilisateur attend et ce
qu' il vit ou comment cette chose se comporte. Tout ce que vous concevez, il devrait se comporter de la manière que l'utilisateur s'attend à ce qu'il soit. Maintenant, la question est de savoir comment ces attentes sont formées. Ce que nous attendons est dans notre main. Il s'agit des connaissances que nous avons acquises du monde extérieur ou d'expériences similaires qui sont rassemblées dans notre tête. C' est ce qu'on appelle la connaissance en tête. C' est le terme défini par Don Norman dans son livre,
The Design of Everyday Things et ce que cela signifie, c'est que si nous avons expérimenté ou utilisé des produits similaires, ils vont former nos attentes. La première fois que j'ai vu la bulle pop-up du chat Facebook, je n'ai pas pu la supprimer de mon écran pendant 30 minutes. Maintenant, les concepteurs et les développeurs, ils ont créé une bibliothèque de modèles de conception ou de modèles de conception. Maintenant, ces bibliothèques de conception, ils nous aident à faire face aux attentes des utilisateurs et aux comportements familiers afin que l'utilisateur puisse instantanément reconnaître qu'il s'agit d'une navigation déroulante ou ceci est une barre de navigation, ou ceci est une barre de navigation déroulante de n'importe quel site Web . Il y a toute une conférence sur ce modèle de conception puis je vais vous montrer ces modèles de conception et ses sites Web dans la section suivante. instant, vous avez juste besoin de savoir que ce sont des bibliothèques de modèles conçues qui sont construites sur des expériences familières et des éléments familiers que les utilisateurs peuvent reconnaître instantanément. En tant que concepteurs et développeurs, nous devrions d'abord chercher ces modèles et les utiliser dans nos produits numériques plutôt que d'inventer ou de
créer un nouveau modèle ou un modèle propre. Alors gardez toutes ces choses dans les attentes des utilisateurs. Voyons juste un exemple. Je vais vous montrer plus d'exemples dans la prochaine conférence juste pour vous donner un aperçu des attentes des utilisateurs. Ceci est l'écran de Microsoft Edge qui est avec Windows 10 et vous pouvez voir qu'il n'y a pas de barre de recherche en haut. Vous pouvez voir qu'il devrait être ici. Ce qu'ils ont fait, c'est que je ne sais pas, ils ont essayé de le moderniser. Ils l'ont mis ici comme Google. Je m'attendais à la barre de recherche en haut et pendant cinq minutes, je continue de presser ici dans ce secteur. Je ne m'attendais pas à ce que la barre de recherche soit déplacée ici ou c'est la première page où je dois chercher ici ou entrer mon adresse web ici. Donc pendant 5 à 10 minutes, je continue juste à taper dessus, en cliquant ici dans cette zone et en disant où je dois taper l'URL du site. Que se passe-t-il avec ce navigateur ? Je ne sais pas mais maintenant je pense qu'ils ont corrigé ce problème avec ces nouvelles mises à jour, mais c'est la capture d'écran que j'ai prise du problème que j'avais. Aussi, vous pouvez voir dans le bas de ce site, il se sent comme si c'était une page Web. Donc, sur une page Web s'il y a une barre de recherche, cela signifie qu'il va chercher à l'intérieur de ce site Web. C' était un modèle très inconnu et très nouveau modèle, maintenant je pense qu'ils l'ont corrigé, mais c'est très déroutant pour n'importe quel utilisateur. Tout cela concerne les attentes des utilisateurs, modèles de
conception et la façon dont ils sont formés. Si vous avez des questions, demandez-moi. Passons à la leçon suivante.
20. Les attentes d'utilisateur expliquées → Vidéo d'image: Maintenant, je vais expliquer le concept des attentes des utilisateurs et comment ils sont formés en utilisant les deux mêmes téléphones que je vous ai montré avant. Celui-ci est un jouet et celui-ci est iPhone. Vous pouvez voir que cela a une certaine zone d'écran ici. Ce qui s'est passé, c'est mon enfant ,
il a deux ans, la
plupart du temps il utilise ce téléphone. Il regarde donc des vidéos YouTube en tapant sur différentes zones à l'écran. Il s'attendait à ce que chaque téléphone soit fonctionnel. Vous pouvez l'utiliser en appuyant sur l'écran. Quand je lui ai donné ce téléphone pour la première fois, il a essayé d'utiliser cet écran. Il a essayé de taper ici pour l'activer, mais ça ne s'activait pas. Pendant 15 minutes, il n'a pas eu l'idée qu'il avait besoin d'appuyer sur ces boutons comme ça. C' est là le problème majeur. C' est ainsi que se forment les attentes des utilisateurs. Ils sont formés par les connaissances dans votre tête et ce que vous avez appris avant ou ce que vous avez vécu auparavant de la même manière. Si vous avez des appareils similaires comme ceux-ci, vous allez les utiliser de la même manière si vous en voyez un nouveau. C' est ainsi que les attentes des utilisateurs sont. J' aime voir des enfants quand ils essaient de me montrer un problème d'expérience utilisateur. J' adore les voir. Ils sont le meilleur exemple de confusions et de problèmes de l'utilisateur. Quand ils vont voir un nouveau produit, ils vont réagir et essayer de l'utiliser. C' est le moment où vous devez voir où ils vont mettre leurs mains, s'ils vont le tirer vers le haut, s'ils vont le réparer. Tout cela est au sujet des attentes des utilisateurs et vous voir dans une autre leçon.
21. Exemples d'attentes des utilisateurs: Maintenant, commençons par quelques exemples d'attentes des utilisateurs et comment ils sont formés et ce que nous attendons, et comment la plupart des concepteurs et développeurs font les mêmes erreurs. Maintenant, si je vous montre ce site, c'est presque un site e-commerce assez standard,
je suis à la recherche d'un très grand modèle de
ce type ici, alors je suis à la recherche d'un e-mail de support. Aussi, je cherche surtout dans le côté droit, coin
droit, le panier. Donc j'ai aussi une connexion à la caisse, donc tout cela est par ici. Maintenant, une chose que je ne m'attendais pas est que, ces paramètres sont à gauche, mais je pense que cela n'a pas d'importance, ce ne sont pas de très gros paramètres ou de très gros problèmes. C' est presque assez standard, comme j'ai surtout besoin des catégories ici, c'est assez standard et tout le reste. Maintenant, vous pouvez voir ici ajouter au bouton Panier est très proéminent, c'est
ce que je m'attendais. Maintenant, permettez-moi de vous montrer certains des problèmes et des exemples où beaucoup de concepteurs et de développeurs l'ont fait vraiment mal. Très mauvaise expérience utilisateur et facilité d'utilisation. Laissez-moi vous montrer un exemple. Donc, dans cet exemple, le thème est très minimaliste, mais le problème est, c'est la barre de recherche. Vous pouvez voir ici, je dois cliquer dessus, et une fois que je clique sur mes yeux vont être verrouillés sur cette zone. Je vais vous montrer ce problème, qui est la vision périphérique, c'est dans la conférence à venir, je suppose, et vous pouvez voir la barre de recherche et l'icône est sur la gauche ici. Donc, une fois que j'ai cliqué dessus, je ne sais pas ce qui se passe, alors j'ai continué à regarder ici, puis j'ai regardé de ce côté et j'ai trouvé ça. C' est trop loin, peut-être que s'ils veulent utiliser ce modèle, ils peuvent simplement utiliser cette zone ici. Pourtant, ce modèle n'est pas très reconnaissable et les utilisateurs ne s'attendent pas à ce comportement. Donc, c'est assez standard et en le regardant,
il ne me dit pas que c'est zéro articles ou zéro pour le nombre de $ ou le coût, donc c'est aussi un peu ambigu et ce n'est pas ce que je m'attendais. Cette barre de recherche est tout, bien qu'elle soit très unique et moderne, mais je pense que c'est un très gros problème avec les sites de commerce électronique. Maintenant, si nous allons dans ce magasin, très beau design, très bonne équipe, très belle tout, mais si vous cherchez une barre de recherche ici ou au milieu,
vous ne pouvez pas la trouver, parce qu'ils l'ont déplacée sur la gauche. Donc, c'est vraiment, de ce que je devrais dire, il est vraiment inattendu que cette barre de recherche se trouve sur le côté gauche où le logo devrait être. Donc ils devraient changer ces endroits, donc le logo devrait être ici, et les barres de recherche devraient être au milieu. Maintenant, si je vais sur ce site, il y a beaucoup d'attentes des utilisateurs, ils ont vraiment foiré. Vous pouvez voir les paramètres et la carte est dans le milieu gauche, il devrait être ici et proéminent, puis la barre de recherche est très étrange. Ils ont deux barres de recherche ici, une celle-ci et une autre ici, ce
qui est, je dirais, vraiment pas un modèle très courant et familier. Vous pouvez voir le logo et juste assis au milieu. C' est très drôle. Je dirais que c'est vraiment inutilisable site web suce et l'expérience utilisateur aussi. Tout le reste va bien, mais ces choses vont vraiment faire beaucoup de mal, même si vous avez conçu cela très bien et tout est créé, mais quand même, ces quelques choses vont confondre votre utilisateur. Permettez-moi de vous montrer plus d'exemples, c'est le même thème, les mêmes problèmes. Ensuite, nous avons cette zone et vous pouvez voir par ici, carte est par ici, barre de
recherche par ici, c'est assez bon. Où se trouve mon login et où sont mes paramètres sur mon compte ? Ils l'ont décalée sur le côté gauche. C' est vraiment gâché l'expérience utilisateur et la facilité d'utilisation. Je vous montre ces thèmes d'invent sur le marché, et ceux-ci sont développés par différents développeurs et designers. Ils devraient regarder ces éléments. Alors c'est aussi vraiment foiré, ce n'est pas ce que l'utilisateur attend, recherche ici, et pas d'icône pour les paniers, donc je dois chercher tous ces textes, lire tous ces textes pour aller au panier, cela va aussi à l'encontre de la règle de la reconnaissance plutôt que du rappel. Cela va également donner à vos utilisateurs beaucoup de problèmes. Ensuite, vous pouvez voir qu'il n'y a aucune information pour tous ces produits, vous pouvez voir, je ne sais pas quel est le prix de ces produits. C' est vraiment mauvais exemple d'un site Web ou d'un thème de commerce électronique. C' est vraiment bien conçu, tout a l'air cool, mais cette icône du cœur, je ne sais pas si c'est mes articles préférés ou ma liste de souhaits. Peut-être que je pense qu'un peu de texte ici comme liste de souhaits est vraiment utile, bien qu'ils aient un sommet comme celui-ci,
donc cela montre que c'est une liste de souhaits. Encore une fois, ils ont violé la règle, ils ont utilisé la barre de recherche sur la gauche, et c'est un modèle très étrange, cela ne devrait pas être comme ça. Encore une fois, ici, vous pouvez voir la barre de recherche est sur la gauche. Vous pouvez donc voir qu'il y a des tonnes de ces thèmes qui ont besoin de beaucoup de correctifs. J' ai même vu beaucoup de sites e-commerce qui utilisent ou le font très différemment, et ils surprennent leurs utilisateurs avec les attentes et les confondent, alors assurez-vous que vous ne faites pas ces erreurs. C' est le dernier. Tout semble très bien dans celui-ci, mais je vais vous montrer un comportement très étrange que j'ai trouvé ici. Je ne m'attends pas, donc je ne vois aucun bouton « Ajouter au panier » sur ce produit. Donc, une fois que je survole, je vois ces options ou quelque chose comme ça, et je ne suis pas sûr de ce que c'est, donc si je passe la souris sur ce bouton plus, et je ne sais vraiment pas ce qu'il va faire, donc si j'appuie dessus, vous pouvez voir qu'il a ajouté cet article à mon panier. Essayez donc d'éviter ces nouveaux modèles ou les attentes auxquelles les utilisateurs ne s'attendent vraiment pas, et ils ne vont pas reconnaître ces objets, et ils ne vont pas les utiliser. Ils seront dans la confusion, et la plupart du temps ils n'utiliseront pas cette fonctionnalité. Ce sont donc tous des exemples de mauvaise expérience utilisateur, principes de
convivialité et de violation de la plupart des principes de base des attentes des utilisateurs. J' espère que vous avez apprécié cette leçon. Passons à la leçon suivante.
22. Limites de vision périphérique: Un autre concept vraiment génial est le fonctionnement de notre vision ou de notre œil. Nous sommes limités dans la visualisation, donc ce concept est appelé vision périphérique. Ce que vous voyez directement devant ou
au milieu de vos yeux s'appelle votre vision centrale qui est très claire. Ce que vous voyez sur les côtés ou sur les côtés de votre vision principale est la vision périphérique. La limite de base de la vision périphérique est que vous ne pouvez pas voir clairement dans votre vision périphérique, tout
est floue. Un exercice simple pour voir comment fonctionne notre vision périphérique. Si vous essayez de vous concentrer sur cet écran, ou sur la diapositive, ou sur l'en-tête de cet écran, et si vous essayez de lire le texte en dessous, vous échouerez, il sera un peu floue, vous ne pouvez pas le voir clairement. Si vous vous concentrez sur une zone, la zone autour d'elle est floue, vous
ne pouvez pas voir ce qui se passe là ou ce qui est écrit là-bas. Voyons comment nos yeux fonctionnent avec ce diagramme et comment cette vision périphérique et centrale affecte notre expérience utilisateur ou comment nous voyons et interprétons les choses. Maintenant, comme vous pouvez le voir au milieu, notre centre de regard est le plus clair, c'est quatre détails, au milieu, nous pouvons voir très clairement, c'est juste une zone d'intérêt. Je vais vous montrer combien c'est, côté droit
sur les côtés,
la première zone est près de la vision périphérique, nous avons une zone floue, ici nous n'avons pas trop de flou, puis dans la zone périphérique moyenne, nous avons plus de flou. Maintenant, sur la vision périphérique de l'extrême gauche, nous ne pouvons rien voir
clairement, tout est très floue. Parlons maintenant de la limite de la vision périphérique, votre vision périphérique est très faible à droite et à gauche, ou sur les bords, et il est très clair au centre. La vision centrale est utilisée pour voir les détails tandis que vision
périphérique est plus expérimentée en voyant le mouvement, donc si quelqu'un se déplace juste sur le côté droit de votre épaule et qu'il essaie de
vous frapper, vous allez canaliser instantanément. Pourquoi ? Parce que votre nature a mis en œuvre cette vision périphérique que nous pouvons répondre très clairement à la motion. Si un animal, une chose dangereuse, une voiture, ou un cycle vient de la droite, c'est floue dans cette région, et si quelque chose bouge très rapidement, vous allez le
deviner ou notre esprit va interpréter ça. C' est ainsi que fonctionne la vision périphérique, il est préférable de détecter le mouvement. Parlons de combien le champ visuel est pour la vision périphérique et la vision centrale. Notre champ visuel est près de 170 degrés autour de nous et 100 degrés comprenant la vision périphérique. Il s'agit surtout d'une vision périphérique, nous ne pouvons pas voir clairement la plupart des choses qui nous entourent. Essayons de voir comment cette vision périphérique est importante dans la conception d'interfaces numériques. Lorsque vous concevez des messages ou des notifications, vous devez les garder dans la vision centrale, et si vous ne pouvez pas le garder dans la vision centrale ou très proche de l'endroit où l'utilisateur cherche, alors vous devez le déplacer, vous devez utiliser un mouvement pour montrer à l'utilisateur que quelque chose s'est passé ou qu'une erreur s'est produite. Ce que les concepteurs font, c'est qu'ils essaient d'utiliser le mouvement appelé effet pop ou effet pop-up pour concentrer l'attention des utilisateurs afin que l'utilisateur puisse instantanément voir que quelque chose se passe sur la droite ou le bas de l'écran, et il permettent à l'utilisateur de trouver l'information facilement. Une autre façon de répondre à cette vision périphérique est le son. Vous pouvez déplacer des choses et vous pouvez également donner un peu de son comme vous avez vu des bulles d'aide arriver. Dans différents sites Web, ils viennent avec un peu de son et d'animation, sorte que vous pouvez facilement attirer l'attention sur le fait que quelque chose se passe dans ce domaine. La vision centrale est très limitée, tout sur l'écran qui n'est pas dans un ou deux centimètres de votre emplacement de clic alors il va tomber dans la vision périphérique où la résolution est très faible, tout est floue. Si vous utilisez un formulaire ou un bouton et que l'utilisateur va cliquer dessus, alors votre message d'erreur ou message de réussite devrait être très proche de ce bouton qu'il vient de cliquer, donc si l'utilisateur regarde un objet ou qu'il se concentre sur quelque chose sur votre écran, le message d'erreur ou tout ce
que vous voulez donner des commentaires à l'utilisateur sur ce qu'il fait, il doit être très proche de la vision centrale de l'utilisateur, donc c'est ainsi que la vision périphérique et la vision centrale fonctionnent. Je vais vous montrer quelques exemples dans la prochaine leçon alors passons à la leçon suivante.
23. Exemples de limites de vision périphérique: Permettez-moi de vous montrer quelques exemples de vision périphérique et comment nous pouvons améliorer nos conceptions et nos produits en mettant en œuvre ces limitations de vision périphérique. Vous savez déjà que nos yeux sont limités. Permettez-moi maintenant de vous montrer quelques exemples de vision périphérique et comment nous pouvons éviter les limites de la valeur de la vision périphérique lors de la conception d'applications web et mobiles. Que les problèmes les plus courants que nous voyons sont lorsque les utilisateurs utilisent quelque chose. Par exemple, j'utilise cette configuration de création de code promo sur cette plateforme Udemy. Si j'essaie de cliquer ici, et je crée un coupon, par
exemple, échantillon gratuit ou quelque chose comme ça. Le prix réduit est de 50$ et vous pouvez voir maintenant ici je suis concentré dans ce domaine. Si quelque chose ou une erreur se produit et qu'il s'affiche ici dans cette zone, je ne vais pas l'examiner. Je vais créer dix coupons et les dates limites seront le lendemain. Une fois que j'ai cliqué dessus, vous pouvez voir que je n'ai reçu aucun message pendant deux secondes. Ok, c'est le moment. Une fois que quelque chose a bougé, je regardais dans ce domaine, ici, vous pouvez voir que j'étais concentré dans ce domaine. Mais une fois que ma vision périphérique a vu un mouvement en haut, j'ai été dirigé vers le message. Si ce message ne s'affiche pas pendant quatre ou cinq secondes ou qu'il est retardé de plus d'une ou deux secondes, alors je vais être confus, mon coupon a échoué. C' est une façon d'utiliser la vision périphérique et d'éviter les limitations de la vision périphérique. En montrant cela idéalement, cela devrait être apparu dans ce domaine. Comme un message et avec un peu floue que cette chose a été créée. Laissez-moi vous montrer un autre exemple. moment, je suis sur Amazon dot com et ceci est ma liste de souhaits ou de souhaits de produits pour la calligraphie. Je suis vraiment intéressé par ce sujet. D' accord. J'ai ces pinceaux et si j'essaie de supprimer cela, vous pouvez voir ici où le message apparaîtra. Supprimons ceci et dès que j'ai supprimé, vous pouvez voir le message a été supprimé sur le côté gauche. C' est dans la même zone que je cherchais. Je regardais ici et c'était par ici. Dès que j'ai vu le changement, j'ai vu ce message, mais idéalement, je pense qu'il devrait être dans ce domaine, au milieu ou peut-être à ce côté-ci. Je vais l'annuler et je vais te montrer autre chose. Supprimons quelque chose du milieu, comme celui-ci. La seule chose est ce qu'ils ont fait est qu'ils utilisent un effet flou, si vous avez pu l'avoir vu. Ils utilisent un effet de flou du texte pour me montrer que j'ai supprimé ce message juste pour attirer mon attention sur le message. C' est une autre façon. Laissez-moi vous montrer un autre exemple. Ceci est un autre exemple et c'est vraiment une mauvaise mise en œuvre de cette vision périphérique et de l'affichage des erreurs de formulaire. Ce que j'ai fait, c'est que je créais un formulaire sur ce magasin et c'était le magasin TeeChip. Je remplissais tous les champs du formulaire et quand j'appuie sur le bouton Enregistrer à la fin, cette erreur apparaissait. Vous avez peut-être su que beaucoup de vos utilisateurs, utilisateurs Web, ils n'utilisent pas leurs navigateurs en plein écran. Qu'est-ce qui se passait ? Cette partie du message d'erreur était cachée derrière et je n'ai pas pu la voir. C' était en dessous du pli. Fold signifie que je n'étais pas en mesure de le voir, mon navigateur n'a pas été maximisé. Pendant cinq à dix minutes, j'ai continué à remplir ceci et à cliquer dessus. Mais ensuite j'ai vu ce message d'erreur. Je n'ai pu le relier à aucun de ces domaines. Ce que j'ai fait, c'est que je changeais le champ de description plutôt que le champ de titre. Vous pouvez voir ici il dit que le champ de titre doit contenir ces nombreuses lettres. Ce que je faisais, c'est que je pensais qu'il montre l'erreur liée à cette description parce que vous pouvez voir si nous déplacons cette erreur en dessous de ce champ de titre ou au-dessus de ce champ de titre, alors cela va avoir plus de sens et c'est dans notre vision périphérique. Aussi, nos esprits sont branchés avec le groupement, ce qui est notre psychologique. Vous pouvez dire la psychologie visuelle, que si quelque chose est groupé, nous considérons qu'il est lié. Si cette erreur est groupée avec ce titre, cela aurait plus de sens. Ne faites jamais ces erreurs ou si l'erreur est en dehors de la vision périphérique. Par exemple, si j'avais le bouton ici et le message d'erreur ci-dessous ici, alors je pourrais regarder le bouton et je pourrais manquer l'erreur. Ce sont les exemples que vous devez garder à l'esprit que les
messages d'erreur ou toute information ou notification que vous montrez à vos utilisateurs, ils doivent être dans la vision périphérique. Permettez-moi de vous montrer un autre exemple de vision périphérique et comment ce site ne l'utilise pas correctement. C' est Shophive et l'un des plus grands sites de commerce électronique au Pakistan. Si j'essaie de me connecter, nous allons vous montrer la page de connexion. Maintenant, si j'essaie de me connecter, vous pouvez voir ici il n'y a pas de bouton de connexion. Je remplis celui-ci, puis je remplis celui-ci. Quand je suis allé appuyer sur mon bouton ici, il n'y a pas de bouton. Pourquoi ? Parce que ma vision périphérique est limitée à cela. Pendant quelques secondes, j'ai essayé de trouver le bouton et puis soudain je le trouve ici. C' est vraiment bizarre. Ce n'est pas l'utilisateur, ce que l'utilisateur attend la première chose. Ensuite, la deuxième chose est que c'est en dehors de ma vision périphérique, je me concentrais sur cela. C' est vraiment confus. Assurez-vous que si l'utilisateur regarde et remplit le formulaire comme celui-ci, dans cette ligne, dans cet angle, ses yeux glissent de haut en bas, alors il devrait trouver les boutons ici dans cette ligne. Pas par ici. J'espère que vous avez apprécié cette leçon. Si je viens avec un autre exemple, je vais vraiment le partager avec vous les gars. Je pense que vous avez compris les problèmes de notre vision périphérique et comment elle est limitée. Passons à la leçon suivante.
24. Quel contexte l'utilisation ?: Pour être un meilleur concepteur d'expérience utilisateur, l'
une des choses est que vous étudiez le comportement humain ou la psychologie. Le second est que vous allez
chercher l' environnement des utilisateurs ou le contexte de l'utilisation. Si vous savez que ce que votre application va être utilisée et comment elle va être utilisée et où l'utilisateur va l'utiliser principalement et dans quelles situations, alors vous pouvez mieux la concevoir. Par exemple, si vous concevez une application, par exemple, l'application pour suivre une adresse ou quelque chose et que
vous savez que l'utilisateur va l'utiliser principalement à la lumière du soleil, alors vous savez que vous allez concevoir un schéma de couleurs vives pour il ou peut-être plus sombre schéma de couleurs pour elle s'il va l'utiliser dans la nuit. Vous allez vous assurer que le contraste est élevé et qu'il peut voir ou
il ou elle peut voir l'ensemble de l'écran de l'application tout en le tenant au soleil. De même, si je suis photographe de paysage et que je prends des photos sous pluie et près des lacs et des rivières, alors j'ai besoin d'une caméra avec un bouclier météo intégré. Beaucoup de nouveaux appareils photo arrivent, ils ont un bouclier météorologique dedans et beaucoup de photographes sont enclins à acheter ces appareils. Si vous connaissez les contextes, cela va changer toute la direction de votre conception de produit. Voyons un autre exemple du contexte d'utilisation. Le contexte peut également nous parler des limites de notre logiciel ou de notre utilisation, par exemple, si je développe un logiciel ou une application pour les banques, alors je pourrais avoir besoin de voir la configuration de leur poste de travail. J' ai besoin de voir quel est le système d'exploitation ils utilisent ou quel navigateur ils utilisent ou quelle version du système d'exploitation ils ont. Il peut aussi me dire combien les distractions qu'ils ont, par exemple, ils ont beaucoup de foules dans la banque ou il y a beaucoup de bruit dans la banque, bruits de
ventilateur ou comment leur bureau est installé, comment leurs chambres et leurs chaises sont aménagées. En outre, quelle est la luminosité de l'écran ou quels moniteurs ils utilisent ? Donc, 95 pour cent du temps, les banques ont beaucoup de navigateurs obsolètes et de systèmes d'exploitation installés. Il est arrivé avec moi une fois que je corrigeais et concevais un site Web pour une très grande banque en Australie et le client continue de me demander réparer les banques pour Internet Explorer 8 et à ce moment-là, je pense qu'il y avait Internet Explorer 10 publié et beaucoup d'utilisateurs utilisaient Chrome et Firefox. Je me suis toujours plaint de lui, pourquoi avez-vous besoin de moi pour Internet Explorer 8 ? Ce que j'ai appris c'est que toutes les banques, ils avaient le système d'exploitation Windows, Windows 7 installé et ils avaient Internet Explorer 8 et il n'y avait aucune option pour télécharger Internet Explorer 9 ou mettre à niveau parce qu'ils ont été corrigés. Vous voyez que les contextes d'utilisation et façon dont votre produit va être utilisé sont très importants. Maintenant, comment vous allez vous adonner
aux contextes que comment vous allez explorer le contexte d'utilisation. Vous allez prendre des photos de l'environnement utilisateur. Vous devez sortir où réellement utiliser le produit. Vous pouvez aller de l'avant et vous pouvez aller à leurs bureaux, à leur maison, passer quelques heures avec eux, passer quelques heures pendant qu'ils utilisent votre produit pour voir dans quelles situations ils vont l'utiliser. Certains utilisateurs font des recherches, ils passent des jours ou même des mois à
comprendre le contexte dans lequel le produit va être utilisé, par exemple, si nous avons un bébé alarmant ou un moniteur bébé, nous devons passer une journée entière à comprendre comment les habitudes de sommeil des bébés et ce que les bébés vont faire avec le moniteur. Peut-être qu'ils vont l'attraper et le
mettre dans leur bouche ou ils vont le jeter. Est-il trop lumineux dans la pièce ou est-il trop sombre dans la chambre du bébé et votre moniteur ne peut pas fonctionner, votre appareil photo ne peut pas fonctionner dans l'atmosphère sombre ? Ce sont toutes les choses que vous devez garder à l'esprit lors conception d'un produit ou de la construction d'un produit, d'une application ou d'un site Web. J' espère que vous avez apprécié cette leçon sur les contextes d'utilisation et comment ce contexte utilisateur joue un rôle important dans l'expérience utilisateur. Passons à la leçon suivante.
25. Contexte d'utilisation → Vidéo à capture: Aujourd'hui, je vais expliquer le contexte d'utilisation en vous montrant ces deux mobiles. Maintenant, c'est un mobile sec et voici l'iPhone. Maintenant, la principale différence est que cela est destiné aux enfants. Le contexte d'utilisation est totalement différent pour ces deux appareils. Celle-ci est pour les enfants, ils vont le jeter par terre. Ils vont le frapper dans le mur. Mais d'un autre côté, ce téléphone n'est pas destiné à frapper dans le mur. Donc, cela va être mis dans la poche pour que vous puissiez voir la forme mince. Vous pouvez facilement le mettre dans la poche. Vous pouvez facilement le tenir dans votre main. D' un autre côté, celui-ci n'est pas destiné mettre dans la poche donc il est très énorme, vous pouvez le voir ici. Si vous le voyez de près, il est un peu gras, donc il est destiné aux enfants afin qu'ils puissent facilement le tenir. Le corps est quelque chose comme ça. Vous pouvez voir que ces deux produits sont totalement différents parce que leurs contextes d'utilisation sont différents. De même, lorsque vous utilisez certaines caméras, elles sont différentes parce que leur contexte d'utilisation est différent. Certains d'entre eux sont juste pointer et tirer. Ils sont de très petite taille et certains d'entre eux sont pour un usage professionnel. Ils sont très lourds et ils ont une très bonne prise en main. Vous pouvez facilement les saisir. C' est plus sur les contextes d'utilisation et je gardais ce jouet de six mois dans mon tiroir. Juste pour te montrer celui-là. On se voit dans une autre vidéo. Prenez soin de vous et à bientôt.
26. Pourquoi les parties en matière UX ?: Nous avons déjà appris que les utilisateurs sont vraiment importants dans n'importe quel processus de conception de l'expérience utilisateur ou dans n'importe quel produit que vous concevez. Maintenant, l'autre côté de la médaille ou l'autre côté qui est vraiment important, tout comme les utilisateurs, sont des parties prenantes. Ils peuvent avoir les personnes et les personnes les plus informées sur leur produit. Ils connaissent les tenants et aboutissants de leurs produits, leurs caractéristiques, qui sont différentes des autres produits. Ces parties prenantes comprennent les PDG ou les responsables de produits, ou les marketeurs, voire les investisseurs, qui sont des tiers. Ils s'intéressent à une certaine caractéristique de ce produit. Par exemple, vous avez peut-être utilisé des imprimantes colorées. Maintenant, dans les imprimantes colorées, vous savez que les cartouches couleur ou les cartouches supplémentaires lorsque vous finissez vos couleurs sur une cartouche sont vraiment chers. Alors peut-être que les investisseurs sont à la recherche des imprimantes qui ont des cartouches coûteuses
afin que les gens qui achètent leur produit puissent en avoir besoin ou augmenter leurs ventes. Maintenant, les investisseurs pourraient être intéressés par les ventes globales de votre produit. Ils sont peut-être à la recherche de marchés différents comme l'Europe ou peut-être l'Asie. Ils ciblent le marché spécifique et ils ont besoin que le produit soit dans une langue spécifique pour être touché. Par exemple, s'ils veulent frapper les pays arabes,
les Émirats arabes unis, ou les peuples des pays arabes, ils doivent faire traduire leur produit en arabe ou avoir un soutien de la langue arabe. Pourquoi ces parties prenantes importent-elles vraiment ? Pourquoi avons-nous besoin de prendre leurs interviews ou de voir quels objectifs ils ont ? Quels sont leurs objectifs ? Parce qu'ils ne recherchent peut-être pas de revenus, de bénéfices, ou peut-être que certains intervenants recherchent l'ensemble des ventes, et certains pourraient avoir un intérêt pour une caractéristique spécifique de ce produit. Donc, si vous essayez d'ignorer cette fonctionnalité qui
exige que l'utilisateur s'abonne pour 5$ par mois ou quelque chose comme ça, vous réduisez le bénéfice réel ou les avantages des parties prenantes. Donc, vous devez équilibrer entre les deux. Vous devez trouver un équilibre entre les utilisateurs et les intérêts des parties prenantes. De mon point de vue, si vous concevez ou développez un produit, le bon équilibre entre les parties prenantes, les intérêts et les objectifs, et les buts et intérêts des utilisateurs est le véritable produit d'expérience utilisateur excellent. Vous devrez peut-être supprimer certaines fonctionnalités
ou ajouter quelques fonctionnalités dans
votre application, votre site Web ou votre site e-commerce,en votre site Web ou votre site e-commerce, gardant à l'esprit que les objectifs de vos parties prenantes. Toutes les décisions prises dans n'importe quelle organisation sont prises principalement par leurs PDG, sorte qu'ils sont les parties prenantes les plus puissantes. La plupart des startups que vous voyez, ils ont des PDG qui sont vraiment impliqués dans le produit et ils sont les fabricants de pensée que ce produit. Ils pourraient donc être à la recherche d'un plus grand nombre d'inscriptions, d'
une plus grande pénétration du marché, ou d'un plus grand nombre d'utilisateurs entrant dans leur produit plutôt que de revenus au début. Une fois que la concentration des utilisateurs est atteinte, ils sont peut-être à la recherche des revenus. La même chose que Microsoft a fait avec la mise à niveau de Windows 10. Vous l'avez peut-être eu gratuitement pour la première fois, alors vous devez payer pour mettre à niveau vers les mises à jour récentes. C' est ainsi que certaines parties prenantes tentent d'entrer sur le marché ou recherchent plus d'utilisateurs. Ce sont des objectifs différents. Vous devez prendre soin d'eux tous. Lors de la conception de votre produit, vous devez voir quels objectifs les parties prenantes recherchent. Il s'agit des parties prenantes et de leurs objectifs, leurs objectifs et de leurs entretiens. Vous devez prendre une ou deux ou même toutes les entrevues des parties prenantes pour obtenir leur point de vue et leurs idées sur le produit. Vous devez garder tous ces éléments à l'esprit pendant que vous concevez ou développez votre produit. Passons à la leçon suivante.
27. Comportement humain, décision paralysis et motifs de numérisation: Tous les humains sont paresseux, nous sommes paresseux, je suis paresseux, vous êtes paresseux. Pourquoi ? Parce que c'est dans notre nature. Si vous donnez à un humain une tâche où il y a trop d'obstacles pour y parvenir, alors ils vont abandonner. La même chose se passe dans notre industrie du jeu. Si le jeu est trop difficile, vous ne pouvez même pas traverser le premier niveau, vous allez quitter, vous allez désinstaller ce jeu. De même, dans la conception web ou la conception d'applications mobiles, formes
plus longues qu'ils ne vont pas mieux convertir. Essayez donc d'éviter vos formulaires très longs ou ne laissez pas les utilisateurs remplir des centaines de champs de saisie avant d'essayer d'utiliser l'application. La même chose se produit avec l'industrie du commerce électronique. taux d'abandon du panier est de 69 pour cent. La deuxième raison majeure de cet abandon est la création d'un compte. Quand il s'agit de créer un nouveau compte ou de s'inscrire sur n'importe quel site e-commerce, 70 % des gens vont quitter. Vous pouvez voir comment cela va s'appliquer à notre nature que nous sommes paresseux si nous voyons beaucoup d'obstacles et si nous voyons que cette chose est très difficile à réaliser, nous allons abandonner. Un autre comportement de l'utilisateur est la paralysie de la décision. Je l'ai vu des centaines de fois avec ma femme. Maintenant, ce que vous devez faire est que si vous essayez submerger votre utilisateur avec trop de choix ou trop de choses à choisir, elle va entrer dans un état de paralysie de décision. L' esprit humain abandonne et ne peut prendre aucune décision. Il y avait une recherche sur la paralysie de la décision, comment il s'est passé est un chercheur, il met comme sept ou huit saveurs différentes de confitures sur une étagère et laisser les utilisateurs prendre la décision. Donc, les utilisateurs prenaient le plus de temps et ils n'essayaient pas d'acheter l'un d'eux parce qu'ils n'étaient pas en mesure de décider. Alors ce qu'il a fait, c'est qu'il a juste mis deux ou trois saveurs de la même confiture sur cette étagère et que les utilisateurs commencent à acheter l'une d'entre elles. C' est ce qu'on appelle la paralysie de décision. Vous avez peut-être vu sur de nombreux sites Web que les forfaits de prix ou les modèles
de tarification d'un site Web ou d'une application Web
ne sont que des modèles de prix complets ou des forfaits de prix complets. Pourquoi c'est ça ? Parce qu'ils ne veulent pas que tu sois dans une paralysie de décision. Maintenant, pour éviter cette paralysie de la décision, vous devez donner aux utilisateurs peu d'options à choisir. Il y a un autre comportement que je veux partager avec vous, ce qui est la plupart du temps que les gens font, c'est qu'ils ne lisent pas l'analyse. Cela se produit sur n'importe quel appareil numérique, n'importe quel site Web, n'importe quel site e-commerce, nos yeux et nos esprits sont connectés pour analyser l'objectif que nous recherchons. Donc si on cherche quelque chose, on va scanner, on ne va pas lire. Il y a deux modèles de balayage. L' un est le modèle Z et l'autre est le modèle F. Je vais vous montrer les deux exemples d'images dans la prochaine leçon. instant, gardez à l'esprit qu'il y a deux modèles pour numériser les informations. Z, il déplace nos yeux en Z motif, et F est que nous voyons normalement les sites Web ou les motifs en forme de F. Chaque être humain fait des erreurs. Même si le score de vos applications est de 100 pour cent sur l'échelle de convivialité, qu'il est parfaitement utilisable, il n'y a pas de problème si ce sont toujours des utilisateurs feront des erreurs. Si vous pensez que votre application est très facile, très intuitive, quand même les utilisateurs vont faire beaucoup d'erreurs. Il y a deux façons de le limiter. Tout d'abord, ne les laissez pas arriver. Utilisez certaines contraintes, significations
ou contraintes pour limiter la survenue de cette erreur. Deuxièmement, vous devez guider l'utilisateur pour corriger les erreurs facilement. Vous avez vu que lorsque vous supprimez certains e-mails de G-mail, cela vous donne la possibilité d'annuler. Vous pouvez facilement revenir aux e-mails, vous pouvez facilement récupérer les e-mails que vous avez supprimés. Un autre problème avec les humains et le cerveau humain est l'attention et la distraction. Nous avons très peu d'attention et si quelqu'un nous distrait, nous allons perdre notre attention. Donc, vous devez toujours mettre le fardeau loin du cerveau de l'utilisateur, ou il est appelé, vous devez réduire la charge cognitive de l'utilisateur. Vous pouvez voir l'exemple est la prédiction des termes de recherche Google. Lorsque vous commencez à taper quelque chose, Google va vous donner quelques suggestions. Donc, il est plus facile pour vous que vous n'avez pas besoin de taper toute la ligne, vous avez juste besoin de cliquer sur la suggestion et il va chercher pour vous. Je vais vous montrer quelques exemples de ce comportement humain dans la prochaine leçon. Passons à la leçon suivante.
28. Comment vieux et nouveau cerveau prend des décisions: Parlons du fonctionnement de l'esprit humain et de la façon dont nous prenons des décisions. Nous avons deux types d'esprits. L' un est appelé le vieux cerveau et l'autre est appelé le nouveau cerveau. Maintenant, la plupart du temps, le vieux cerveau prend la plupart des décisions,
et la plupart des décisions que vous prenez quotidiennement sont prises par votre esprit inconscient, c'est aussi appelé vieux cerveau, et la plupart des traitements mentaux se font inconsciemment. Donc, si vous pensez que vous pensez et prenez, et les décisions d'achat, principalement avec votre esprit intellectuel, ou avec votre esprit de décision, alors vous avez tort. Vous utilisez principalement votre esprit inconscient ou votre vieux cerveau qui prend des décisions pour vous. Certaines des décisions où nous devons comparer beaucoup de produits, c'est par notre nouveau cerveau. Notre vieux cerveau est très rapide et la plupart du temps, il ne
faudra que 0,05 seconde pour se faire une opinion sur un site web, sur un produit, sur un iPhone Apple, ou sur un nouveau modèle d'appareil photo. Donc, tout ce que le client a besoin de décider est juste moins d'une seconde. C' est donc très important. Tu dois en apprendre davantage sur ce vieux cerveau. Vous devez vous attaquer à ce vieux cerveau lorsque vous concevez vos produits, ils doivent avoir l'air très cool, très attrayant, et très solide et fiable. Il y a un dicton que la première impression est la dernière impression, bien que ce ne soit pas très vrai, mais dans l'expérience utilisateur, c'est presque 80-90 pour cent vrai. Pourquoi ? Parce que 75 pour cent des utilisateurs, ils admettent que quand ils voient pour la première fois n'importe quel design de site Web d'une entreprise, ils vont deviner la crédibilité ou la confiance de cette entreprise en fonction de la première apparence de leur site Web. C' est donc très important. C' est ton vieux cerveau qui joue ici. Ainsi, les gens sont les plus susceptibles d'acheter des produits s'ils perçoivent qu'il s'agit d'un produit de haute qualité ou s'ils ont une grande confiance sur leur site Web. Maintenant, si vous regardez un site Web et qu'il semble très peu professionnel, et très désordonné, ou qu'il n'est pas très bien conçu, peu probable que
vous achetez à partir de ce magasin de commerce électronique ou ce site Web. Tout cela est influencé par l'expérience globale de l'utilisateur et la qualité perçue du produit. Donc, nous percevons dans la première impression que cette chose va fonctionner ou c'est une entreprise fiable, et ce produit est fiable. Maintenant, la plupart des décisions calculées où vous devez comparer les choses les unes avec les autres, ou vous devez comparer les caractéristiques de deux smartphones, celui
que j'ai besoin d'acheter, votre nouveau cerveau va commencer. Vous devez comparer les choses, vous devez faire des calculs. Ce PC a plus de puissance de traitement ou quelque chose comme ça. Donc, lorsque vous essayez de comparer ou d'utiliser le mode de comparaison d'un produit que vous essayez d'acheter, et de voir leurs différences et caractéristiques, alors c'est votre nouveau cerveau qui vous aide à prendre des décisions. Il s'agit donc d'un nouveau cerveau et d'un vieux cerveau, et des premières impressions, et de la confiance et de la crédibilité de n'importe quel produit ou application. J' espère que vous avez apprécié cette leçon. Si vous avez des
questions, posez-moi, passons à la prochaine leçon.
29. Changement de haine: Un autre comportement humain et psychologie humaine est que nous détestons le changement. La plupart des humains vont résister au changement. Chaque fois qu'une application ou un site Web qu'ils font sur, ou la refonte de leur site Web ou application, la
plupart des utilisateurs ne vont pas l'aimer. Ils vont commencer à se plaindre à ce sujet, » Que nous n'aimons pas le design. Quel est le contexte ? Où sont mes affaires », quelque chose comme ça. La solution est de créer un changement progressif, et aussi la cohérence est si vous essayez de concevoir une nouvelle version de Facebook, vous n'avez pas besoin de changer toutes les couleurs ou toute la mise en page du post. Peut-être que vous pouvez utiliser un peu d'icônes différentes, une ou deux peut-être, juste un peu différent, pas totalement différent. Juste un exemple, si vous utilisez Facebook et qu'ils ont essayé de déplacer leur bouton J'aime en haut et de le déplacer vers le haut de la publication. Que croyez-vous qu'il se passera ? La plupart des utilisateurs, ils vont devenir confus car ils
vont commencer à se plaindre pourquoi avez-vous changé ces choses ? De même, vous pouvez voir dans les sites Web, cela arrive et je pense que c'est arrivé avec eBay il y a des années. Ils ont introduit un fond gris de blanc et ils
voient soudainement que la plupart des utilisateurs commencent à se plaindre à ce sujet et ils ont écrit un algorithme, pour changer l'arrière-plan du blanc au jaune, je suppose que c'était très lentement dans les années. Chaque jour, la valeur de la couleur était décalée vers une autre nuance de jaune et qui était très proche du blanc. Les utilisateurs ne s'attendent pas à ce que quelque chose change, ils ont juste introduit le changement progressivement. Chaque fois que vous voulez changer quelque chose dans votre site Web, votre application Web, vous devez utiliser un changement progressif, introduire le changement progressivement, pas instantanément. Maintenant, la plupart d'entre nous, j'ai vu beaucoup de clients, ils veulent redessiner leurs sites Web. Maintenant, le problème est qu'avons-nous vraiment besoin d' une nouvelle solution ou avons-nous vraiment besoin d'une refonte de notre site Web ? Avant d'apporter des modifications à vos sites Web, vous devez vous assurer que les utilisateurs ont vraiment besoin d'une refonte ou d'une refonte du site Web, ou vous avez juste besoin de changer quelques choses pour créer une meilleure expérience utilisateur. Il y a un très grand exemple de Yahoo et Digg, ils sont tous deux très grands géants dans le domaine. Quand ils ont introduit un nouveau site Web repensé, c'était Yahoo mail, et je pense qu'ils ont échoué et le trafic de Digg a chuté plus de 25 pour cent aux États-Unis et au Royaume-Uni. Je vais vous montrer les exemples d'images dans la leçon suivante, alors passons à la leçon suivante.
30. Nos objectifs et changer la franchie: Quoi que nous fassions toute la journée, toutes
nos actions sont orientées vers des objectifs. Nous effectuons, ou faisons des choses, ou des tâches en fonction de nos objectifs. Assurez-vous que vous savez quels sont les objectifs et les motivations de vos utilisateurs, c'est pourquoi dans les entretiens avec les utilisateurs, nous enregistrons différents objectifs et motivations des autres utilisations. Par exemple, si je cherche un médicament antidouleur sur Google, c'est mon objectif. Je cherche un médicament. De même, une autre personne qu'il pourrait être à la recherche d'une vidéo. Il y a différents objectifs liés au même outil. Le même produit peut être utilisé de plusieurs façons lorsque les objectifs sont différents. Si vous concevez un produit ou que vous concevez un écran, vous devez savoir ce que l'utilisateur va faire sur l'écran ou sur cet écran d'application. Maintenant, l'objectif peut être différent, par exemple, si vous utilisez un écran de connexion, vous devez savoir que l'utilisateur va utiliser une connexion. Mais ce qui est [inaudible] c'est qu'il pourrait oublier son mot de passe ou qu'il pourrait avoir besoin de s'inscrire plutôt que de se connecter. Est-il possible qu'il puisse passer à ce mode ou qu'il puisse passer à cet objectif et utiliser le même écran pour un autre but. Gardez toutes ces choses à l'esprit. Un autre concept qui est similaire ou lié à des objectifs est la cécité du changement. Changer la cécité est que lorsque vous êtes aveugle aux choses que vous ne cherchez pas. Par exemple, si votre objectif est de trouver un lien vers un fichier PDF sur un site Web, alors vos yeux rechercheront le lien ou n'importe quel bouton indiquant PDF. Vos yeux ignoreront toute information ou toute autre chose qui n'est pas liée à votre objectif. Nos yeux et nos esprits sont aveugles face aux changements qui ne nous intéressent pas. Par exemple, si je regarde un article ou une vidéo sur Google, et si je recherche sur une vidéo, par exemple,
h o pour créer une meilleure expérience utilisateur ou quelque chose comme ça,
chaque fois que les résultats de recherche sortent, mon yeux seront à la recherche de seulement les vignettes vidéo. Je vais sauter n'importe quel autre titre ou articles, je vais juste chercher des vidéos. Ici, nous utilisons notre comportement humain appelé balayage. Nous ignorons les informations, nous cherchons notre objectif et les seules informations dont nous avons vraiment besoin. Gardez toutes ces choses à l'esprit lors de la conception d'un produit, d'un site Web ou d'une application.
31. Exemples de la décision de comportement humain: Permettez-moi de vous montrer quelques exemples de comportement humain et comment nous prenons la décision avec les appareils numériques, comment l'esprit humain fonctionne pendant que nous décidons, et quelles choses vous allez découper pour prendre cette décision et le comportement humain plus facile. Vous avez besoin de moins de charge sur la cognition
humaine et l'esprit humain pour rendre ce processus de prise de décision plus facile pour eux. Je vais commencer par ce processus de paiement Amazon. Vous pouvez voir ici, ce
moment je vérifie, et dès que j'ai sélectionné mon adresse où je dois expédier, vous pouvez voir sur cette page que je ne vois que le logo Amazon.com et rien d'autre. Juste je peux aller et cliquer sur ce bouton continuer, pas d'autres décisions, pas d'autres options. J' ai juste trois options pour l'expédition, rien d'autre. Une tâche à la fois et une décision à la fois. Si vous donnez à votre utilisateur de décider plusieurs choses en même temps, cela va lui donner quelques maux de tête. Maintenant, si j'essaie de cliquer sur Continuer, vous pouvez voir que je ne peux même pas revenir à mon panier ou au site Web principal. Le logo Amazon n'est pas cliquable. Ce que je peux faire, c'est que je peux aller dans une seule direction. Si je clique sur continuer, vous pouvez voir ici il me demande l'adresse et tout et me donne le total pour la commande. Vous pouvez voir maintenant je dois ajouter cet endroit, l'étape de commande, et il n'y a qu'une action principale que je peux faire. C' est passer votre commande. Sur l'autre chose que je peux choisir est cette option de livraison à la date de livraison. Je suis très limité avec ces options. Chaque fois que vous utilisez un site Web de commerce électronique ou la conception pour elle,
ou une application de commerce électronique, ou lorsque vous voulez que l'utilisateur dépense quelque chose, ou
prendre la décision, essayez d'éviter toute distraction, éliminer toutes les distractions de lui. C' est la règle principale. Parlons de la paresse humaine. Les humains sont paresseux et c'est pourquoi nous avons créé toutes ces télécommandes. Vous pouvez voir que c'est le dernier. Cette télécommande peut être transformée en beaucoup de choses qu'elle remplit beaucoup de fonctions, et vous pouvez voir qu'elle a également le même design que les anciens. Laisse-moi te montrer les anciens. Ici, vous pouvez voir les anciens. Ils ne sont pas si vieux,
mais ce sont aussi les dernières versions et ils sont également similaires dans la forme et les boutons comme les anciens. Laisse-moi te montrer les anciens. Ce sont les anciennes télécommandes TV, et ça montre que les humains sont paresseux, nous voulons tout en ce moment et là où nous sommes assis. De même, si je veux des informations ou des vidéos, je le veux maintenant. Si vous essayez de créer beaucoup d'obstacles dans mon chemin pour obtenir cette information, si je veux des informations, vous devriez éviter autant de cercles et il a essayé de les supprimer de mon port. Si je suis à la recherche d'un fichier PDF à télécharger, il devrait être téléchargé instantanément. Je devrais simplement cliquer sur le bouton de téléchargement et je reçois le PDF. Si vous allez créer beaucoup d'autres façons qui essaient d'installer ce logiciel avant, je vais vous donner ce téléchargement, je vais quitter. Gardez toutes ces choses à l'esprit, nous sommes paresseux, nous voulons l'information et tout en ce moment. Voyons quelques exemples de paralysie de la décision. Vous pouvez voir ici, et c'est l'outil proto.io, outil prototypage pour les concepteurs. Vous pouvez voir qu'il y a quatre options à choisir. Il s'agit d'entreprise, d'agence, de startup et de freelancers. Maintenant, vous pouvez voir qu'ils viennent de donner quatre plans. C' est ainsi que nous allons limiter les décisions de l'utilisateur à trois ou quatre options maximum. Ne leur donnez pas trop d'options, cela va les rendre plus confus. Peu plus de sites Web, vous pouvez voir ce sont les modèles de tarification UX spin. Vous pouvez voir ici nous avons 1 et 2 ou 3 options et le prix est attaché à seulement deux. Je peux choisir celui-là ou celui-là. Si je suis une très grande entreprise ou une très grande entreprise, je devrais peut-être les appeler. Seulement deux options. Ainsi, vous pouvez voir ces UX spin, il est un outil très important et d'imagerie dans la conception de l'interface utilisateur et la conception de l'expérience utilisateur. Vous pouvez concevoir des cadres filaires et beaucoup de choses. Un autre exemple d'avocode, vous pouvez voir ici qu'ils ont aussi trois plans et seulement deux options à sélectionner. Vous pouvez voir que cela ne va pas être sélectionné la plupart du temps, et surtout l'utilisateur va passer de celui-ci ou celui-ci. Ils vont soit sélectionner celui-ci, soit celui-ci. Seulement deux options et il est très plus facile de prendre des décisions. Vous pouvez voir qu'ils ont seulement trois dollars de différence entre ces deux paquets. La plupart des gens vont pour celle-là parce qu'ils ont beaucoup de membres de l'équipe et beaucoup de choses. La plupart des entreprises ou des agences, ils vont tomber dans cette catégorie. C' est ainsi qu'ils
piégeent, je peux dire, les clients ou ils jouent avec nos esprits en leur donnant moins d'options à choisir. Maintenant, nous avons parlé des raisons pour lesquelles les humains détestent le changement. Vous pouvez voir ici, c'est un grand vieux site et c'est un article de côté point, je vais vous envoyer le lien. Ce qu'ils ont fait, c'est qu'ils l'ont transformé en ce site tout à fait différent. Maintenant, les utilisateurs, ils ne s'attendaient pas à cette mise en page, ils n'étaient pas impatients de voir ce changement. Ce qui s'est passé, c'est que vous pouvez voir ici, son trafic a chuté de 26 pour cent aux États-Unis et de 34 pour cent au Royaume-Uni. C' est une très grosse perte. Vous pouvez voir par ici. Il a été vendu en 2012 pour cette raison, un demi-million, ils ont perdu leur popularité et tout. Assurez-vous que votre utilisateur a vraiment besoin de la modification. Le deuxième exemple est le courrier Yahoo. C' est l'ancien courrier et c'est le nouveau qui a changé beaucoup de choses. Vous pouvez voir ici, composer et les boutons, les icônes, tout le fond, tout. Ça ne ressemblait pas à l'ancien e-mail. En raison de ce changement de Yahoo, seulement 25 % du personnel de Yahoo a continué à utiliser l'e-mail Yahoo. Yahoo n'a pas révélé combien d'utilisations ils ont perdu à cause de ce design. Le troisième exemple était target.com. Lors de la refonte, ils ont également perdu une grande partie de leurs revenus. Dès que le chaîné ou créé la nouvelle version, beaucoup de leurs utilisateurs ont commencé à se plaindre. C' est la première chose. C' est le plus gros problème. Nos esprits et nous, les humains, n'acceptons pas très bien le changement. Rends-le très subtil. Ils ont apporté mauvais cette barre de menu catégories gauche ici en raison de leurs utilisateurs et supprimer les ombres. Vous pouvez voir ici des ombres lourdes sur l'interface, ce nouveau design, ils l'ont enlevé. En fin de compte, je vais vous donner juste une chose qui n'essaie pas de couler avec les tendances. Essayez d'être fidèle à vos clients et voyez s'ils ont vraiment besoin d'un changement ou si votre site Web a vraiment besoin d'une mise à niveau. Est-ce que les utilisateurs ont un problème avec mon site Web ? J' ai besoin de résoudre ce problème plutôt que de concevoir l'ensemble du site Web. Il s'agit du comportement humain et de la façon dont nous n'
acceptons pas les changements et les décisions dans la paralysie et toutes les choses. Si j'ai manqué un exemple, je vais créer une autre vidéo, et nous vous verrons dans une autre vidéo. Avec plus d'exemples, passons maintenant à la leçon suivante.
32. Motifs F et Z Abandonnement, exemples de conversion de forme de champ: Maintenant, dans cette leçon, je vais vous donner quelques exemples de modèle Z ou de modèles de lecture, comment nous lisons et tamisons à travers le contenu, les modèles Z, modèles
F, et aussi le panier d'
abandon, les problèmes de taux d'abandon et les champs de formulaire. Commençons. Maintenant, c'est une image du motif Z. Maintenant, le modèle Z était basé sur la façon dont nous lisons les livres de gauche à droite. Si nous avons un site web écrit en
ourdou ou en arabe ou toute autre langue qui est de droite à gauche. C' est le contraire donc ce sera de droite à gauche comme ça, mais ce sera toujours Z. Cela signifie que nous allons commencer,
nos yeux vont commencer à partir du côté gauche, puis aller à droite, puis passer à nouveau à la à gauche, puis à nouveau à droite. C' est le modèle que nous utilisons lors de la lecture des paragraphes, des publicités, n'importe quoi. La plupart du temps, notre ligne va de haut en bas comme ça dans ces zones ou va essayer de voir cette zone ou cette zone. La plupart du temps, les concepteurs essaient d'utiliser ce modèle Z à leur avantage lorsqu'ils conçoivent des sites Web ou des applications mobiles. Le deuxième modèle était le modèle F. Pourquoi ça s'appelait F ? Parce que la plupart du temps, il est également lié à notre modèle de lecture ou l'écharpe de couloir ou écrémé à travers le contenu. Normalement, nous allons cette ligne dans cette direction verticale comme ça et comme ça. Pour le contenu haut comme celui-ci, nous allons aller comme ça et ça, et ensuite nous allons tout sauter. Maintenant, si vous voyez qu'il y a peu d'annonces de ce côté et qu'il n'y a pas de contenu sur cette zone. La plupart du temps, nous allons commencer à regarder de ce côté-ci et peut-être que nous allons regarder par ici. Donc, notre modèle de balayage oculaire fait ce modèle F. Laissez-moi vous montrer un autre exemple. Il s'agit des réserves de recherche Google. Ce sont différents autres sites Web qu'ils font tous le modèle F. Le modèle F est fondamentalement lié à nos modèles de lecture et comment nos yeux vont scanner une page. Assurez-vous d'utiliser ce modèle d'oeil à votre avantage et de mettre vos choses importantes dans votre produit ou votre site de commerce électronique ou autre dans ces domaines. Maintenant, il y a une nouvelle recherche par ce gars conversion XL. C' est Peep Laja, je crois. Il fait des recherches sur la conversion, tout sur la conversion et il dit qu'il existe nouveaux modèles qui ne sont pas des modèles F. Voici sa nouvelle recherche de Google. Vous pouvez voir quoi ici. C' est Google en 2005 et c'est 2014, je pense que c'est sa recherche. Maintenant, vous pouvez voir ce modèle F est presque parti. Mais le modèle de lecture commence toujours à partir de cette zone de gauche. Vous pouvez voir par ici. Puis certains des utilisateurs, ils ont regardé cette zone. Les zones les plus actives ou les plus consultées par les utilisateurs sont en rouge, vous pouvez voir ici. Ensuite, la couleur suivante est jaune, le vert est un peu moins. Les utilisateurs commencent à regarder en haut dans cette zone. C' est pourquoi la plupart des entreprises exécutent différentes campagnes de référencement pour être dans le top 10 des résultats de recherche Google. Il s'agit de motifs, motifs
Z et de motifs F et d'un nouveau modèle qui est celui-ci. Passons maintenant à l'optimisation de vos champs de formulaire. Maintenant, les champs de formulaire sont vraiment nécessaires pour la conversion pour gagner de l'argent sur différents sites Web, comme les pages d'apprentissage et aussi les sites de commerce électronique. Les formulaires sont essentiels pour obtenir de l'information de l'utilisateur. Vous pouvez voir dans cette recherche par Unbounce, ils ont dit que cette image sauter société, ils ont réduit leurs formulaires de contact de 11 à quatre et ils gagnent 120 pour cent augmentation de la conversion de 5,24 pour cent à 12 pour cent donc presque doublé, leur taux de conversion a presque doublé en réduisant les champs. Notez que cela est directement lié à votre psychologie, psychologie humaine. Pourquoi ? Quand les humains voient moins d'obstacles dans leur façon de réaliser ou de refroidir, ils vont le poursuivre. S' ils voient beaucoup d'obstacles sur leur chemin, ils vont cesser de fumer. Vous pouvez voir ici, c'est le taux de conversion optimal que 3-5 champs est un standard d'or. N' essayez pas d'augmenter plus de cinq champs, sinon vous allez perdre 10 % de conversion de deuil. Il s'agit de la conversion et de la façon dont les humains se sentent réticents à la paresse et quand leur objectif est difficile à atteindre, ils vont cesser de fumer. Encore un exemple. Il s'agit d'une autre recherche avec toutes les grandes entreprises et c' est aussi les 37 statistiques sur le taux d'abandon des chariots. Maintenant, cela se fait sur beaucoup de plus grands sites Web, plus grands géants comme Adobe list, Star Trek, IBM, de grandes entreprises comme ça. Ce sont les principales régions que l'on retrouve dans cette recherche. Ils utilisent 144 personnes. Ce sont leurs réponses, abord était, les coûts supplémentaires trop élevés. C' est un sujet lié à quelque chose d'autre, que je vais aborder dans une autre leçon qui sur la présentation de tous les détails pour la prise de décision. Si vous cachez des détails à l'utilisateur qui vont l'aider à décider, il va trop vite. La deuxième raison la plus importante qui nous intéresse en ce moment est que le site voulait que je crée un compte. Vous pouvez voir beaucoup de gens, ils vont être poussés par cette configuration de compte. Si le formulaire d'inscription doit avoir comme 10 champs, ils vont quitter. Maintenant, le troisième est aussi lié à notre paresse et à la nature humaine que nous sommes paresseux et que nous n'aimons pas trop d'obstacles dans notre but. Trop long, processus de paiement compliqué. Si votre processus de paiement sur vos sites de commerce électronique est très long, comme il prend six ou sept étapes, vous allez perdre beaucoup de clients et de revenus. Ce sont les choses qui sont liées à la nature humaine, à la paresse, et à la façon dont les humains se sentent quand il y a trop d'obstacles dans leur but et qu'ils veulent l'atteindre. Essayez de minimiser les obstacles dans le chemin de l'objectif de l'utilisateur et de leurs objectifs et quelle est la tâche principale qu'ils vont utiliser. Par exemple, s'ils vont utiliser le processus de paiement
ou le processus de création de compte ou de connexion, sont les deux ou trois choses qu'ils vont utiliser sur n'importe quelle application ou sur n'importe quel site Web, site commerce électronique, essayez de les rendre simples et aussi faciles que possible. J' espère que vous avez apprécié cette leçon, si vous avez des questions, demandez-moi. Passons à la leçon suivante.
33. Comment la découverte améliore un produit ?: Aujourd'hui, nous allons parler de la découvrabilité. Voilà le truc. Si vous entrez dans la chambre de quelqu'un et que vous ne trouvez aucun
des interrupteurs pour allumer la lumière ou le ventilateur, que ferez-vous ? La première chose à utiliser n'importe quel type de produit, qu'il
s'agisse d'un produit numérique ou physique, c'est la découvrabilité. Si vous pouvez découvrir comment l'
utiliser, ses boutons ou ses fonctionnalités, vous ne pouvez pas l'utiliser du tout. La découvrabilité signifie que les utilisateurs peuvent facilement et rapidement trouver les fonctionnalités, les boutons et les éléments de n'importe
quel produit, produit industriel ou application mobile. Permettez-moi de partager avec vous une toute petite histoire. Un de mes amis, il est venu chez moi et je lui ai montré que je venais acheter cet iMac 27 pouces et pour lui, même pour moi, c'était le premier iMac que nous avons acheté. Maintenant, quand j'ai acheté cet iMac pendant les deux premières minutes, je n'ai pas pu trouver son
bouton d'allumage ou le bouton où je dois appuyer pour l'allumer. Bien que cet iMac est conçu par Apple et ils ont le meilleur design et l'expérience utilisateur final concepteur, mais encore ils ont échangé de la conception avec la découvrabilité. Ainsi, ils peuvent mettre le bouton d'allumage et d'arrêt sur le devant de l'écran pour qu'il puisse être facilement découvert, mais ils le mettent à l'arrière sur le côté gauche. Alors ce que j'ai fait c'est que je l'ai montré à un de mes amis et je suis sorti de la pièce. Ce qu'il a fait est la même chose, ce que j'ai fait pour la première fois. J' ai essayé de taper sur cette icône Apple à l'avant. Je pensais que c'est le bouton où je dois juste taper dessus et il va s'allumer. Il a fait la même chose. Ainsi, vous pouvez voir comment la découvrabilité joue un rôle essentiel dans n'importe quel produit, qu'il
s'agisse d'un produit numérique ou physique. Maintenant, laissez-moi vous montrer quelques exemples. Désormais, découvrir la capacité ne signifie pas toujours que vous devez découvrir les fonctionnalités. Leur est aussi une autre chose que ce que ce produit peut faire ou ce que vous pouvez faire avec. Il peut également être communiqué avec votre utilisateur en utilisant du texte. Donc, sur les sites Web que vous pouvez voir
ici, voici mon titre principal de cette maquette côté tête, le sous-titre et le bouton. Donc ces 3 textes d'accueil, ils vont définir ce que vous pouvez faire ici. C' est une chose. Maintenant, laissez-moi vous en montrer un autre. C' est le même outil de maquette et vous avez peut-être pensé qu'il affiche l'espace de travail similaire à Photoshop, Sketch ou tout autre outil. Même les outils de codage comme Visual Studio, Microsoft Visual Studio, ils ont la même mise en page. Ce qu'ils ont est, ici, nous avons sur le côté droit plus de contrôles ou options d'
alignement ou d'options de texte pour contrôler ou personnaliser nos objets. Ici, nous avons les objets, et ici nous avons différents contrôles que nous pouvons glisser ici et les placer ici. Nous avons 1, 2 et 3 panneaux et c'est notre espace de travail. Donc, ces fonctionnalités sont très visibles. Vous pouvez voir ici, certains d'entre eux sont activés. Vous pouvez voir comme ça. Maintenant, sur cette interface, vous pouvez facilement découvrir les fonctionnalités de cette application. Vous pouvez voir que vous pouvez faire toutes ces choses avec l'onglet. Vous pouvez voir maintenant qu'ils ont été activés afin que je puisse l'aligner au milieu ou quelque chose comme ça. Voyons donc quelques exemples supplémentaires. C' est l'espace carré. Maintenant, vous pouvez voir ce site montre un message très simple et très simple. Créez votre propre site Web. Pas de procès. Aucune carte de crédit n'est requise. Commencez. Donc, c'est très simple, très puissant moyen de découvrir la capacité et les utilisateurs peuvent instantanément découvrir que ce côté va faire cette tâche. Voyons un autre exemple. C' est send-grid, et je ne sais pas ce que c'est. Donc, je suis venu ici pour la première fois et vous pouvez voir que cela a quelque chose à voir avec la personnalisation des
e-mails, les bulletins d'information électroniques, et quelques autres choses que vous pouvez voir ici, voir Plans et prix. Mais après avoir lu celui-ci, vous aurez l'idée complète. Partenaire avec un service de messagerie électronique approuvé par Dwell présente aux spécialistes du marketing, évolutivité et à l'expertise de livraison. Donc, il est fondamentalement plus axé sur la livrabilité et peut-être sur le commerce électronique. Je ne sais pas. Ensuite, nous allons voir un autre exemple ici nous avons ce site Shopify et il indique instantanément la plate-forme e-commerce faite pour vous. C' est une plateforme de commerce électronique. Donc ce sont les choses qui peuvent vraiment aider à comprendre que quelles fonctionnalités sont présentes dans ce site Web, ce produit, cette application web,
l'application mobile, et ils doivent être proéminents, ils doivent être facilement découvrables si elles essayer de cacher tous ces boutons dans une barre de menu ici, menu
hamberger, alors ce n'est pas la chose que je cherche. Vous pouvez voir ici nous avons un centre d'aide et commencer. Je pourrais cliquer dessus. Ce sont donc toutes les choses qui sont liées à la découvrabilité. Apprenons-en plus sur la découvrabilité. La découvrabilité nous indique également quelles actions sont possibles et quel est l'état actuel de l'appareil, s'il est allumé, s'il est éteint, puis-je l'activer ? Donc, toutes ces questions sont répondues par la découvrabilité. N' essayez donc pas de masquer les fonctionnalités que vos utilisateurs souhaitent voir dans votre produit. Par exemple, le menu hamberger nous sommes le pire exemple de conception de l'expérience utilisateur et ces hambergers, menus, ils vont enterrer beaucoup de fonctionnalités
de votre site Web ou de votre application loin de vos utilisateurs. Assurez-vous donc que toutes les principales fonctionnalités de votre application ou de votre produit sont facilement découvertes. Maintenant, vous avez beaucoup appris sur la découvrabilité. Passons à la leçon suivante.
34. Qu'est-: Parlons d'une autre fonctionnalité de n'importe quel produit ou application qui est vraiment pratique pour la conception de l'expérience utilisateur. Maintenant qu'est-ce que c'est que si vous ne pouvez pas apprendre à utiliser une application, vous allez la désinstaller. L' apprentissage joue un rôle très important. Maintenant, ce qui est l'apprenabilité est. C' est à quel point il est facile pour un utilisateur d'apprendre et d'utiliser vos produits et ses fonctionnalités. C' est la partie de la facilité d'utilisation de votre produit, quel point il est utile. Maintenant, si votre application est nouvelle, vous avez besoin que votre utilisateur l'apprenne rapidement. Tu dois lui montrer, le former. Vous devez le guider vers les différentes caractéristiques, et leur présenter de temps en temps, que vous pouvez le faire avec ce produit. Il y a aussi différentes phases d'apprentissage. Il y a un apprenant qui est juste dans le débutant et il y a des utilisateurs
avancés et il y a des utilisateurs intermédiaires. Tu dois t'occuper de ça. Maintenant, comment vous pouvez améliorer l'apprentissage. Il y a peu de choses que vous pouvez mettre dans
votre produit , votre application ou votre logiciel pour améliorer l'apprentissage. Numéro un est des contrôles découvrables, comme je vous l'ai montré dans la leçon précédente, et la découvrabilité que les boutons plus grands, les contrôles plus grands, boutons
activés ou les boutons surlignés, ils peuvent me montrer que je peux effectuer cette tâche. Puis notifications, notifications différentes, différentes vidéos d'aide me notifiant que,
hey, regardez cette vidéo si vous n'êtes pas en mesure d'envoyer l'e-mail ou quelque chose comme ça. Il y a une autre fonctionnalité que vous pouvez ajouter à votre application est l'utilisateur lors de l'embarquement. Vous avez peut-être vu beaucoup d'applications ou de
logiciels différents qui vous montrent diapositive par diapositive, et vous ont montré différentes fonctionnalités, mettre en évidence les fonctionnalités d'un produit ou d'une application mobile, et peut-être que certaines vidéos ont montré vous de petites vidéos comme dix 10-15 secondes sur la façon de gérer vos e-mails, ou comment supprimer votre e-mail, ou si elles introduisent une nouvelle fonctionnalité, ils vont vous envoyer un e-mail avec une vidéo que cette fonctionnalité a été ajoutée et vous pouvez l'utiliser comme ça. Le numéro quatre est les connexions sociales. Pourquoi les connexions sociales ? Ils, parce qu'ils sont modèle familier, vos utilisateurs savent déjà comment se connecter à une application en utilisant votre Facebook ou Google. Il va aider à les apprendre rapidement, ils peuvent facilement se connecter ou lancer une application. Ils peuvent facilement commencer à l'utiliser sans aucun obstacle. Permettez-moi de vous montrer quelques exemples d'apprentissage. Maintenant beaucoup de grandes entreprises comme cette application de croquis, c'est une nouvelle application pour vos designers. Vous pouvez voir qu'il y a une section d'apprentissage ici. Si vous cliquez sur apprendre, vous pouvez apprendre différentes fonctionnalités gratuitement de cette application. Il est vraiment nécessaire que vous allez présenter quelque chose comme ça sur votre application. Vous pouvez voir ici,
voici différents domaines ou différents contenus que vous pouvez apprendre à ce sujet. Alors même Adobe, c'est une très grande entreprise, ils ont leurs propres tutoriels en ligne, sur leur propre site Web qui sont libres d'
éditer des images et de faire différentes choses que vous pouvez voir ici si vous voulez. Ils l'ont également trié par expérimenté et débutant. C' est ce dont je parlais, que vous devez prendre soin de vos deux utilisateurs, qu'ils
soient expérimentés ou qu'ils soient débutants. Offrez une expérience de prêt à tous les deux, afin qu'ils puissent facilement apprendre votre application et commencer à l'utiliser. C' est également une très grande partie de la conception de l'expérience utilisateur. Maintenant, il y a encore une chose que vous pouvez faire, voici comment ça fonctionne vidéos. Vous les avez peut-être vus sur un grand nombre de sites Web et d'applications différents, et je pense que c'est l'une des meilleures fonctionnalités pour Learnability. Il peut vraiment pomper la vitesse d'apprentissage de vos utilisateurs. C' est tout au sujet de l'apprentissage. si vous avez des questions à me poser, passons à la leçon suivante.
35. Comment réagir s'agit de l'effet dans UX ?: Les commentaires sont la seule chose qui peut augmenter la confusion de votre utilisateur. Donc, si quelqu'un utilise votre produit et qu'il ne sait pas ce qui se passe et ce qu'il vient de faire, alors il va devenir confus. Les commentaires sont essentiellement le résultat de l'interaction de l'utilisateur, si quelqu'un appuie sur un bouton ou si quelqu'un a essayé de brancher votre produit, a essayé de l'allumer ou a essayé d'utiliser sa fonctionnalité, il devrait dire ce qui se passe et comment il devrait être fixe ou comment il devrait être exploité. Tout dépend de la rétroaction. Il suffit de prendre un exemple que quelqu'un
a appuyé sur un bouton de connexion et que rien ne s'est passé pendant cinq secondes. Que ferait l'utilisateur ? Il va appuyer sur ce bouton de connexion, 10 fois frustré que rien ne se passe, quelque chose ne va pas. Ici, nous avons besoin d'une rétroaction, d'une rétroaction appropriée, rétroaction
opportune, en temps opportun et dans le contexte. Je vais montrer beaucoup d'exemples dans la prochaine leçon. Alors ne vous inquiétez pas à ce sujet, il y aura beaucoup d'exemples dans la prochaine leçon. Maintenant, que devrait dire une rétroaction ? Les commentaires vont dire à l'utilisateur que ce qui vient de se passer. Si vous avez appuyé sur un bouton, qu'est-ce qui vient de se passer ? Que fait le système ? Le système est-il occupé ? Le site Web se charge-t-il ? application est-elle en train de se charger ? Était-ce un succès ? Ensuite, l'application est chargée et c'était un succès. Y a-t-il eu des erreurs ? Ce sont tous les commentaires, aussi l'état actuel de l'appareil. Donc, si j'ouvre un appareil ou l'allume et qu'il montre que définir l'heure, donc c'est l'état actuel que j'ai besoin de
définir l'heure en premier pour continuer à utiliser cet appareil. En cas d'erreur, s'il y a une erreur, comment l'utilisateur peut corriger ou sortir de cette erreur, cela fait également partie des commentaires. Vous éprouvez des retours sous toutes les formes tout en interagissant avec tous les appareils électroniques, comme votre smartphone, qui vous informe de son état de batterie faible en bip, donnant une indication de batterie faible sur son écran et aussi avec un peu de voix ou de son. Maintenant, il existe différents formulaires de rétroaction comme vous pouvez informer l'utilisateur par mouvement, déplacer une boîte pop-up et vous pouvez utiliser des couleurs vives, comme la couleur rouge pour les erreurs et pour la notification. Couleurs jaunes ou des couleurs vertes qu'il a été un succès. En outre, votre cerveau réagit à n'importe quel son. Si vous avez donné un son d'erreur sonore ou un bip sonore, que la batterie est faible ou un carillon que vous avez envoyé le message, cela va donner à l'utilisateur des commentaires que quelque chose se passe. De nos jours, vous pouvez utiliser WhatsApp ou Viber et vous savez quand un message apparaît sur WhatsApp, vous savez que même le téléphone est sur votre table et vous ne le visualisez pas, vous savez que quelqu'un vous a envoyé un message sur WhatsApp ou Viber. Tous ces formulaires de rétroaction peuvent être combinés. Vous pouvez combiner le mouvement avec le son, ou vous pouvez combiner le mouvement avec l'effet clignotant ou vous pouvez combiner différents types de sons et de couleurs. Tout est une question de rétroaction. Si vous avez des questions, demandez-moi. Passons aux exemples de commentaires.
36. Exemples de commentaires: Permettez-moi maintenant de vous montrer quelques-uns des produits physiques
ainsi que des produits numériques et des exemples de commentaires. C' est une partie très importante de toute conception de produit, que vous conceviez des applications mobiles, applications
Web, des sites Web ou même des produits physiques. Donc, le premier exemple que je vais montrer est que vous avez peut-être vu tous ces boutons ou panneaux de commutation sur vos murs. J' aime vraiment ceux qui me montrent qu'il est allumé ou que l'électricité fonctionne dedans. Lorsqu' il est allumé, il indique à l'audit lumineux que la lumière est allumée que l'électricité fonctionne et qu'elle est allumée. Donc, c'est vraiment beau formulaire de rétroaction. Permettez-moi de vous montrer quelques exemples supplémentaires. Donc, c'est une dernière, je pense que c'est WiFi Smart panneau et aussi vous pouvez voir c'est une autre forme de rétroaction. Il montre deux actions possibles ou état. moment, l'état de cet appareil que vous pouvez soit verrouiller vos portes ou vous pouvez ouvrir votre porte. Quelques autres exemples, ceci est une autre prise murale et vous pouvez voir qu'il a
également un bouton allumer et éteindre et qu'il va s'allumer une fois qu'il est allumé. Quelques autres exemples que vous pouvez voir ceci est le site Nest. Ils ont des caméras, des thermostats et beaucoup de nouvelles technologies de pointe. Vous pouvez voir cet appareil photo, il a un voyant vert qu'il fonctionne en ce moment sur la caméra qu'il est allumé. De même, dans toutes ces formes, vous pouvez voir qu'il montre l'état de ce thermostat. Voyant vert à nouveau sur tous les appareils photo, même si vous pouvez voir le voyant vert allumé sur votre mac-book Pro lorsque l'appareil est en marche. Ce sont toutes les formes de rétroaction. Vous pouvez voir ici, Nest, cela montre qu'il fonctionne en ce moment plus économique ou économe en énergie. La température est maintenant réglée à 72 Fahrenheit. Il montre l'horloge en ce moment, la date et l'heure, et il montre le temps dehors. Donc ces deux-là sont vraiment utiles. Vous pouvez voir ici ces deux montrent l'état de cet appareil. Voyons maintenant quelques-uns des exemples de produits numériques
tels que les sites Web et les applications mobiles et leurs commentaires. Vous pouvez voir que j'ai cherché sur le site Adorama, c'est un magasin d'appareils photo et une fois que je recherche Panasonic gh4, vous pouvez voir qu'il est retourné avec 84 produits. Ce sont donc des formes de rétroaction. Il me montre que ces nombreux produits sont trouvés pour votre système. Aussi, vous pouvez voir l'état actuel comme vous pouvez voir ici, les sacs dans les cas, deux caméras 22. Ce sont aussi des formes de rétroaction qui
me disent que combien d'articles de ce genre sont disponibles ? Maintenant, une application mobile que je vais vous montrer c' est un écran d'application mobile et de Mobile Patterns.com, et vous pouvez voir que dans ce premier écran sur la gauche, l'utilisateur a sélectionné n'importe quelle ambiance, donc il y a une coche et le toute la couleur de cette zone est changée. Donc, c'est fondamentalement le feedback de sélection que vous avez sélectionné cet élément de tous ces éléments, alors c'est essentiellement le chargement. Vous pouvez voir ici l'écran de chargement, et ceci est une fois que vous avez chargé. Il y a donc une autre option que vous pouvez voir si j'ai une option pour vous. C' est donc une autre forme de rétroaction. C' est vraiment une notification. Maintenant, ce sont mes préférées. J' ai vraiment aimé ces boutons parce qu'ils vont me
donner des commentaires une fois que j'appuie sur eux. Donc c'est le chargement en ce moment ou je les aime vraiment. La plupart des formulaires en ligne sur nos applications web ont genre de modèles qui vont aller dans ce formulaire de sorte qu'ils ne sont pas cliquables, donc tout le statut et tout change et vraiment agréable feedback. Un autre exemple, c'est un stylo de Ken et vous pouvez il y a une animation de chargement ici, bouton de chargement de
fichier. J'aime vraiment ça. C' est une animation très agréable et indique à l'utilisateur combien le fichier a été chargé. Peu d'exemple, c'est un tweet de Luke Wroblewski et c'est un très grand gars américain, travaille
principalement avec des formes. Vous pouvez voir qu'il s'agit d'un autre formulaire de rétroaction. Si quelqu'un a cliqué, vous devez lui montrer qu'il a été sélectionné avec une couleur très nette. Aussi sur Twitter, vous avez peut-être remarqué qu'il s'agit d'un autre formulaire de rétroaction. Donc, si je vais cliquer dessus, une petite animation se produit. Il s'agit essentiellement d'une rétroaction. Donc, si je vais cliquer un de plus ici, donc vous verrez. Cette micro animation est vraiment une excellente forme de feedback. Ceux-ci sont appelés micro animations. Maintenant, c'est un autre exemple qui vient de Dropbox. Vous pouvez voir ce sont les fenêtres contextuelles de notification. Ils peuvent facilement informer votre utilisateur des commentaires. C' est ainsi que Dropbox indique à l'utilisateur qu'il a un nouveau look, qu'il a changé d'interface. Vous pouvez voir que c'est le premier écran puis il y a une balise à impulsions pour attirer l'attention que cela se passe ici ou cela a été changé et aussi ils montrent chaque fonctionnalité avec ce pop-up en bas et une fois tout est terminé, vous pouvez voir ceci est une autre rétroaction, vous êtes prêt à partir. Donc, à chaque étape, des commentaires sont nécessaires. Que vous utilisiez un produit physique ou numérique, vous devez en informer votre utilisateur à chaque étape. Maintenant, c'est l'avenir. Voyons certains des derniers appareils qui sont contrôlés par la voix ou
alimentés par la voix ou utilisent essentiellement des formulaires de rétroaction combinés voix et couleur. C' est Google Home. Le vendeur Google Home est en cours de chargement. Il va montrer cette animation. C' est l'animation de chargement et puis nous avons cette allumée s'allume. Donc, si c'est allumé, il va s'allumer. Il y a un retour de plus de cet appareil. Je ne sais pas quel est le nom de cet appareil. Mi-Croft, je crois. Quand quelqu'un parle, donne la commande, il montre une ligne tortueuse ici parce que l'utilisateur sait qu'il reçoit ses commentaires ou reconnaît sa voix ou sa voix. Vous pouvez également voir qu'il s'agit d'un autre appareil. Il donne le retour de la lumière avec des lumières émettant qu'il vous dit quelque chose. C' est un autre. Il montre un anneau lumineux à l'intérieur pour montrer la commande et tout. C' est donc un autre formulaire de rétroaction. C' est une autre forme de rétroaction. Vous réduisez le volume et il vous montre instantanément et vous donne des commentaires que vous avez atteint ce volume ou que vous avez réduit le volume à 50 pour cent. Vous pouvez voir ici, ceci est un autre formulaire de rétroaction. Ceci est éteint le volume, donc il est fondamentalement éteint l'audio. C' est donc une autre lumière et elle montre lumière
rouge pour montrer à l'utilisateur que vous avez désactivé certaines fonctionnalités. Donc, ce sont tous les différents formulaires de rétroaction. Vous allez les trouver partout autour de vous. Assurez-vous que vos commentaires sont significatifs et qu'ils sont compréhensibles et compréhensibles par l'utilisateur sinon il n'y a aucun avantage à montrer
les codes d'utilisateur L des autres qu'il ou elle ne peut pas comprendre. Ce sont donc tous des exemples de rétroaction. Passons à la leçon suivante.
37. Commentaires dans le contexte - Exemple Walmart: Maintenant, je vais parler des commentaires dans le contexte. Maintenant, si je vais à ce Walmart et si j'ai commandé quelque chose sur Walmart, ça va me montrer le processus que vous passez la commande, alors c'est le traitement, et maintenant le statut est expédié. C' est une très bonne forme de rétroaction. Aussi, il me montre quand il va arriver, aussi le numéro de la boîte. Maintenant, une fois que je clique sur cet élément de piste, c'est là que le problème commence. Je vais vous donner comment vous allez vraiment utiliser les commentaires en termes vraiment gentils. Maintenant, une fois que vous cliquez sur les éléments de piste, vous allez voir cet écran. Ma mémoire, la mémoire de travail est très limitée. Le problème ici sur cet écran est que je ne sais pas quel était le paquet, et si j'ai ouvert comme trois ou quatre écrans multiples de différents éléments de suivi, je ne sais pas quel était l'article. Il me montre la livraison estimée, mais où est le nom de l'article ou le nom de la boîte ou les articles que j'ai commandés ? C' est vraiment déroutant pour moi. Ils violent le problème qui se trouve dans les contextes. Chaque fois que vous utilisez vos commentaires, cela devrait être dans le contexte. Dans les contextes signifient qu'il devrait montrer le statut de la chose et aussi à quoi le statut est lié. Ce statut est lié à une boîte que j'ai commandée, et ce devrait être quelque part sur cet écran que cette boîte va arriver le 24 mai. Ceci est très important lorsque vous utilisez des commentaires. Peu de choses qu'ils ont violées ici sont la mémoire de travail. Ils ont augmenté la charge sur la mémoire de travail. Je ne me souviens pas si j'ai ouvert trois ou quatre de ces pages. Je ne me souviens pas de quel point cette page parle. Ceci est vraiment important dans toute conception d'expérience utilisateur que vous devriez rester dans le contexte et ne pas essayer de violer les règles, ou de mettre une charge cognitive sur l'esprit de votre utilisateur. C' est une autre cassette qui m'est venue à l'esprit après que j'ai utilisé ce Walmart, j'ai pensé que je devrais partager avec vous. Passons à la leçon suivante. Si vous avez des questions, demandez-moi, à bientôt.
38. Cohérence avec des exemples 8: Parlons maintenant de la consistance. C' est aussi l'un des principaux concepts derrière toute conception d'expérience utilisateur. Comme la technologie progresse ces jours-ci, cohérence ne se limite pas à remplir
simplement votre produit ou les couleurs utilisées dans votre produit. Il a été étendu à des dispositifs de réseau intelligent
très complexes dans votre maison, par exemple, les cuisines intelligentes. Maintenant, les applications et les systèmes, ils sont connectés et tout peut être suivi ou localisé à partir d'une seule interface. En outre, une application n'est pas limitée à un seul appareil. Vous pouvez utiliser WhatsApp sur votre PC. Vous pouvez utiliser WhatsApp sur votre tablette. Vous pouvez utiliser WhatsApp sur votre téléphone mobile, iPhone, IOS, Android. Une application ou un produit est utilisé sur différentes plateformes. Maintenant, cette cohérence est très importante car l'utilisateur va passer d'une plate-forme à une autre. Il ne devrait pas ressentir la différence. Les applications doivent être cohérentes d'un appareil à un autre, une plate-forme à une autre, un système à un autre système. Ce que vous pouvez faire pour augmenter le niveau de cohérence de vos applications ou appareils numériques. numéro 1 est que tout devrait fonctionner et fonctionner de la même manière et que l'emplacement de ces éléments fonctionnels devrait être le même. Si vous avez positionné un bouton qui va envoyer un message sur chaque appareil, il devrait envoyer un message plutôt que de faire autre chose. Si nous avons un thème sombre et un thème léger, alors ce commutateur devrait faire la même fonction sur chaque appareil ou toute plate-forme sur laquelle l'application est installée. Maintenant, la deuxième chose, dans la cohérence est la cohérence des éléments de l'interface utilisateur. Les éléments de l'interface utilisateur sont des boutons, des listes déroulantes, tous ces éléments interactifs d'interface utilisateur. Le troisième est la cohérence de la typographie, des couleurs et des thèmes. Si votre application utilise le thème vert sur un appareil, elle doit utiliser le même thème et typographie, ainsi que les téléphones et couleurs sur un autre appareil. Utilisateur, ne soyez pas confus qu'il a ouvert et à toute autre application ou tout autre produit. contexte d'utilisation de l'application peut être modifié, mais la cohérence ne devrait pas trop changer. Vous pouvez changer, par exemple, si votre application est un peu différente sur iOS ou iPhone, et qu'elle est un peu différente sur Android, ils ne peuvent pas être 100 % similaires dans la conception car ils sont des systèmes d'exploitation différents ou différents systèmes mobiles. Vous pouvez varier un peu, mais vous ne pouvez pas vous en écarter beaucoup. Maintenant, comment vous pouvez rester cohérent et maintenir la cohérence de la conception de vos produits. Il y a des systèmes de conception et des guides de style. J' ai discuté de la conception atomique dans mon flux de travail de conception web moderne et est un système de conception de pile complète par Intercom et ces systèmes de conception vont essentiellement garder nos conceptions et fonctionnalités cohérentes sur différents supports, sur différents appareils, sur différentes plates-formes. Je vais vous montrer quelques exemples de guides de style et de systèmes de conception pour que vous sachiez de quoi je parle. Voyons quelques exemples. C' est un système de conception carbone et c'est vraiment génial. Vous pouvez voir toutes les directives ici. Ce sont les styles, ce sont les couleurs, les grilles, l'iconographie, les calques. Vous pouvez voir tout ici,
voici à quoi ressemble notre guide de style ou notre système de conception. Ensuite, nous avons ceci, un autre élément de conception et composant d'interface utilisateur , composants
JS, VS, JSS ,
utilitaires, toutes les couleurs, textes ,
interfaces, tout est décrit ici. Si je vais à cette interface, vous pouvez voir ici ils ont toutes les icônes,
les couleurs, tout ce qui est listé ici. Maintenant, Atlassian est aussi un excellent moyen de voir comment ils ont aligné tous leurs anciens combattants du design et tout ce qu'ils ont. Ils ont aussi leur guide de style. Si nous allons à cette personnalité atlassienne, vous pouvez voir ce sont les guides de style de marque, illustration, typographique, logos, couleurs, style d'écriture. Ils ont même le même ton ou la même personnalité dans l'écriture de leur site Web ou application mobile ou quel que soit le contenu. Le contenu doit également être cohérent sur toutes vos plateformes. Vous pouvez également voir différents autres guides de style, comme vous pouvez voir ici, guide de style Yelp. Je vais partager avec vous les liens de ces guides de style. Maintenant, je vais vous montrer l'exemple de WhatsApp. Je me sens un peu bizarre quand je vois une très grande application utilisant des choses comme ça. Si vous avez utilisé WhatsApp sur Android, vous savez que l'ensemble du thème est construit avec la couleur vert foncé comme ceci. Vous pouvez voir ici, zone supérieure verte. C' est aussi vert lorsque vous appelez quelqu'un. Mais une fois que vous passez à l'appareil iOS, vous pouvez voir que c'est le même WhatsApp, et pendant un certain temps quand je l'ouvre pour la première fois sur iOS, mon iPhone 5S, j'étais confus que si j' utilise WhatsApp ou un autre chat d'Apple. Ce qu'ils ont fait, c'est qu'ils ont supprimé tout le thème. Vous pouvez voir ici qu'il n'y a pas de bar vert en haut. Rien de semblable au thème réel ou à leur cohérence de style. Ils ont brisé leur consistance de style. Peut-être qu'ils ont leurs propres raisons. Peut-être qu'ils ont des sections iOS ou des sections de plate-forme, ou peut-être qu'ils veulent le rendre rapide. Mais encore je pense qu'ils auraient dû garder le fond vert derrière pour rendre le thème similaire à l'application Android. Il s'agit d'une différence très importante entre WhatsApp iOS et WhatsApp Android apps. Ils ont vraiment brisé la cohérence de leur conception. Ce sont tous des exemples de consistance. Passons à la leçon suivante.
39. 4 contraintes avec des exemples avec: Parlons des contraintes et de la façon dont elles rendent notre produit ou notre application web ou mobile plus utilisable et plus utile. Vous avez peut-être vu que Twitter a une limite de 140 caractères par tweet. Vous ne pouvez pas dépasser 140 caractères. Cette limite nous aide à rendre nos produits plus utiles et plus utilisables. Je vais vous montrer beaucoup d'exemples de contraintes qui ont été délibérément mises dans les produits pour les rendre plus utilisables et utiles. Voici quelques exemples de contraintes. Je vais vous montrer les images de ces exemples dans un moment. Vous avez peut-être vu beaucoup de systèmes de sécurité, des verrous de
sécurité sur les armes à feu, équipement
dangereux, et le verrouillage de l'ADF, ou une opération dangereuse. Pourquoi ces contraintes existent parce que peu de choses
ne devraient pas être utilisées par un autre utilisateur, le novice ou les enfants. Ces contraintes vont rendre ces produits plus utiles. Ils ne sont pas destinés à être utilisés pour cette personne en particulier, pour cet âge ou pour ce groupe d'âge spécifique. C' est pourquoi ils ont mis quelques contraintes. Un exemple de contrainte très courant est une boîte pop-up save and not save (save and not save). Vous avez peut-être vu beaucoup de dialogues apparaître lorsque vous utilisez Photoshop ou l'un des logiciels, lorsque vous essayez de fermer ce logiciel et le document sans enregistrer, il va vous inviter, il va vous, il va vous donner une limite que je ne vais pas fermer cette application tant que vous n'avez pas enregistré, ou voulez-vous vraiment enregistrer ou quitter l'application. Ce sont essentiellement des contraintes. Quelques autres exemples de contrainte, si vous regardez une machine à laver nouvelle ou moderne, ils ont intégré Child Lock. Je pense que ces serrures d'enfant sont même présents dans beaucoup d'autres appareils comme les fours à micro-ondes. Si quelqu'un essaie de l'ouvrir ou si un enfant essaie de gâcher votre machine à laver, il va cesser de fonctionner ou il va s'éteindre ou il ne va pas laisser l'enfant ouvrir le couvercle. Ce sont toutes les contraintes qui rendent ces machines à laver vraiment utiles. Sinon, si certains accidents comme ceux-ci commencent à se produire,
ce sera beaucoup de désordre. Aussi, si vous utilisez un four à micro-ondes et pendant que le four à micro-ondes tourne, si vous essayez d'ouvrir son couvercle, il va s'arrêter instantanément. C' est pour vous garder en sécurité et c'est aussi un très bon exemple de contrainte. Permettez-moi d'en illustrer davantage avec quelques exemples. Voici un exemple Twitter. Si je commence à taper, vous pouvez voir qu'il va me contraindre à 140 caractères et cela va me
montrer qu'il reste beaucoup. C'est un exemple. Maintenant, un exemple de contrainte est ce modèle de tarification. Vous pouvez voir que chaque modèle de tarification a un projet actif fixe. Si vous utilisez un libre, vous pouvez juste avoir un projet, donc c'est une contrainte. Il aide ces produits, ces applications web que les utilisateurs sont plus disposés à ou vont aller à l'étape suivante et aller les payer. Ils vont appliquer une contrainte pour le garder sous leur contrôle. C' est un autre outil gratuit de maquette que j'utilise, et vous pouvez voir sur la gauche ici, il dit plan libre et je ne peux placer que 300 objets dans ce plan gratuit. C' est un autre exemple de contrainte. Un autre exemple est que vous pouvez voir ceci est mon cadre de sélection. Il s'agit de la zone de document. Cela montre que j'ai besoin de dessiner ou de créer quelque chose à l'intérieur de ce conteneur. C' est un autre exemple de contrainte. Ensuite, nous avons ce très bon exemple de contrainte. Vous pouvez voir qu'il y a un espace rond, espace
encerclé pour les CD. Une fois que j'ai essayé de mettre mon DVD ici, je sais que c'est l'endroit où je dois le mettre. Aussi, si vous avez utilisé de très petits CD, ils vont être mis dans le cercle intérieur. Un autre exemple est les blocs de lego. Vous les avez peut-être beaucoup utilisés. Ils sont un parfait exemple de contraintes. S' ils n'appliquent pas ces contraintes, les blocs LEGO vont s' intégrer dans les autres blocs LEGO avec des contraintes. Ces contraintes rendent ces blocs de lego utilisables. Maintenant, voici une machine à laver de Samsung, et c'est leur caractéristique. Vous pouvez voir par ici. C' est dit lavage sûr. Maintenant, ce qui est un lavage sûr, c'est que, porte
AddWash ne peut être ouverte que lorsque la température du tambour est inférieure à 50 degrés centigrades, et le verrou enfant est désactivé. Par défaut, je pense que le verrou enfant est toujours activé. Si un enfant, même avec une erreur et même le Child Lock n'est pas activé, il ne va
toujours pas ouvrir le couvercle jusqu'à ce que la température soit inférieure à 50 degrés afin que l'enfant ne se brûle pas. C' est un autre exemple, et voici un autre exemple de votre enfant. Les enfants sont entre de bonnes mains. Ils ont un verrou enfant, et vous pouvez voir ici qu'il ne s'ouvrira pas lorsque le verrou enfant est activé. Si vous voulez utiliser la fonction Verrouillage enfant, il ne va pas ouvrir le couvercle. Vous pouvez voir qu'ils font beaucoup de publicité sur
leur sécurité et que toutes ces choses sont liées à des contraintes. Ils ont mis beaucoup de contraintes pour rendre cet appareil utilisable dans toutes les conditions. Voici le menu. Je pense qu'ils montrent que si vous appuyez sur ces deux boutons, vous pouvez voir ici il y a une icône Child Lock ici. Si vous continuez à appuyer sur ces deux boutons pendant trois secondes, et je pense qu'il va activer ce verrou enfant. Une fois que vous activez le Verrouillage enfant, chaque fois que vous essayez de redémarrer votre appareil, il sera de nouveau en mode Verrouillage enfant. C' est vraiment utile et très bon exemple de contraintes. Il s'agit de contraintes. Si vous avez des questions à me poser, passons à la prochaine leçon.
40. Gouverments et erreurs avec des exemples: Même si votre produit est utilisable à 100 % et qu'il n'a aucun problème d'utilisation. Pourtant, les utilisateurs vont faire des erreurs. Gardez ça à l'esprit. Il y a deux types d'erreurs, les feuillets et les erreurs. Maintenant, le glissement est quand vous faites le bon choix, vous avez commencé la bonne chose, mais vous avez pris les mauvaises mesures ou vous sautez l'un d'entre eux. Par exemple, j'ai oublié d'éteindre le brûleur à gaz de ma cuisinière. Ou je suis allé au réfrigérateur et ai pris le lait de mon réfrigérateur et versé dans le café, puis j'ai remis la tasse à café plutôt que le lait. C' est un exemple de feuillet. Pas d'erreurs. D' autre part, ils sont basés sur la mauvaise décision depuis le début, vous avez fait le mauvais pas. erreurs se produisent lorsque l'utilisateur a sélectionné des objectifs et des plans erronés. Ils commencent pas, c'est faux. Dès le début, ils ont pris le mauvais virage. Ainsi, par exemple, si vous avez été calculé ou recalculé le poids du carburant, en livres plutôt qu'en kilogrammes. Il y a un autre exemple. Par exemple, si vous avez mis votre produit sur eBay et que vous
faites des affaires en livres sterling et que votre utilisateur achète en $. Peut-être qu'il voit le mauvais prix du produit en $. Donc, par exemple, vous pouvez l'avoir réglé sur cinq livres et le taux peut indiquer cinq $. Cela va vous donner beaucoup de problèmes. C' est fondamentalement une erreur. Permettez-moi de vous montrer quelques exemples pour en illustrer davantage sur les feuillets et les erreurs. Maintenant, il s'agit d'une boîte de dialogue qui se produit normalement lorsque vous essayez de supprimer quelque chose ou de désinstaller quelque chose. Maintenant, pourquoi les systèmes d'exploitation demandent si vous avez vraiment besoin de le désinstaller, parce que cela pourrait être une erreur, parce que quelqu'un pourrait avoir cliqué dessus sans aucun consentement. Peut-être qu'il ne veut pas le réinstaller ou peut-être qu'il ne veut pas le désinstaller. Demander à votre utilisateur avant de valider,
supprimer ou supprimer sa sauvegarde ou de lier son site Web, vous devriez leur demander de sauvegarder ou vous devriez les limiter avec ces boîtes de dialogue qui, voulez-vous vraiment faire cette action ? J' ai vu certains des sites ici. Maintenant, un autre exemple de glissement est que vous avez peut-être installé si vous êtes un utilisateur Windows ou un utilisateur de PC, vous avez peut-être installé beaucoup de logiciels ou d'applications. Je pense qu'il y a trois ou quatre ans, si quelqu'un me demande, un débutant, qui vient de commencer à utiliser PC, je lui dis normalement que si vous voulez installer n'importe quel logiciel, continuez à appuyer sur oui ou suivant. C' est ce qu'on appelle le slip. Donc, par exemple, il appuie sur oui, et l'écran suivant qu'il voit est celui-ci suivant. Il ne regarde pas ces options ici, donc il ne va pas regarder ces options et il continuera à appuyer sur la prochaine. Maintenant, ces écrans sont en succession continue et ils sont sensibles aux glissements. Beaucoup de gens qui utilisent
quotidiennement des logiciels, ou ils ont 4-5 étapes pour copier et supprimer ou fusionner des fichiers. Ils vont faire beaucoup de feuillets parce qu'ils sont habitués aux mêmes modèles. Si quelque chose manque ou quelque chose vient de manquer une étape, ils ne le remarqueront pas. Cela se produit lorsque vous avez une routine similaire ou une configuration de travail similaire. En fin de compte, je vais résumer cette leçon en disant juste quelques choses, que si vous concevez votre application web ou votre application mobile ou tout type de logiciel, d'application ou de produit. Vous devez garder à l'esprit que ne
fournissent pas à l'utilisateur quelque chose comme vous pourriez avoir vu des mobiles. Il y a un bouton de réinitialisation d'usine. Si vous fournissez seulement une réinitialisation
d'usine de robinet, beaucoup d'enfants vont appuyer sur cela et il va réinitialiser à chaque fois dans, les données seront perdues. Gardez à l'esprit qu'avant d'utiliser ou de décider d'une telle décision pour l'utilisateur, demandez-leur une ou deux fois cela,
qu' ils ont vraiment besoin de le faire ou veulent-ils ignorer cela ? Il s'agit de feuillets et d'erreurs. Passons à la leçon suivante.
41. Comment concevoir pour les erreurs avec des exemples: Chaque fois que quelqu'un utilise votre appareil, votre application mobile ou votre produit, il est très facile que quelqu'un l'utilise ou le démontre avec l'action prévue ou les limites dans les limites. Il est très difficile de concevoir lorsque certaines erreurs ou exceptions commencent à se produire. Le vrai problème commence quand quelque chose ne va pas. Gardez simplement à l'esprit que l'interaction de
votre utilisateur et de votre produit est comme une conversation entre deux personnes. Une personne fait des actions et la seconde est de le guider ou de lui répondre par des commentaires, ou de lui dire quoi faire. Quand quelque chose ne va pas, l'autre personne devrait guider la première personne que c'est mal et vous devriez le réparer comme ça. Cela devrait être très simple et facile à comprendre pour votre utilisateur. C' est comme votre enseignement à votre grand-mère, très vieille grand-mère sur les ordinateurs, ou Facebook, ou Twitter, ou WhatsApp. Comment concevoir des erreurs pour rendre vos produits plus utilisables et plus conviviaux ? La première chose est que d'empêcher les erreurs de se produire. C' est la première étape. Vous pouvez utiliser des contraintes, vous pouvez utiliser des boîtes de dialogue, vous pouvez utiliser des champs de saisie avec des limites, vous pouvez utiliser des mots de passe, tout, pour limiter ces erreurs. Ensuite, la deuxième chose est que vous devez obtenir cette cause comment cette erreur s'est produite, et comment nous pouvons la minimiser. Pourquoi les utilisateurs commettent-ils les mêmes erreurs encore et encore ? Y a-t-il un problème de convivialité ? Y a-t-il quelque chose qui rend nos utilisateurs confus ? Vous devez minimiser ça. Ensuite, vous devez faire une vérification de bon sens. bon sens est que, par exemple, si vous utilisez un four à micro-ondes et que le couvercle est ouvert, et que vous avez laissé le couvercle ouvert, vous ne l'avez pas fermé fermement. Si vous essayez d'appuyer sur le bouton « Démarrer », cela va vous donner une erreur. C' est une vérification de bon sens très basique que que si le couvercle est ouvert, vous ne devriez pas démarrer le micro-ondes, c'est aussi une contrainte. La troisième chose est que vous devez donner à votre utilisateur facilement inverser ces changements. Si quelque chose de mal arrive ou s'il a supprimé par erreur ses e-mails, il peut facilement les inverser, il peut facilement annuler, il peut facilement les changer en arrière. Vous devez également vous assurer que les erreurs doivent être facilement détectables et corrigées. Comment l'utilisateur va voir qu'une erreur s' est produite parce que vous devez leur donner des commentaires. Vous devez leur donner une rétroaction en temps opportun et vous devez leur donner le moyen de corriger cette erreur. Ce sont toutes les choses que vous devez garder à l'esprit pendant que vous concevez pour des applications mobiles, n'importe quel produit physique ou n'importe quel produit numérique. Permettez-moi de vous montrer quelques bons exemples de conception pour les erreurs. Maintenant, si vous avez utilisé Dropbox, il s'agit d'un service de stockage de fichiers, et si vous avez stocké des fichiers et que vous les avez supprimés, il va conserver votre sauvegarde pendant trois mois. Si vous vous souvenez que j'ai supprimé un dossier par erreur, où je dois le trouver ? Vous allez aller à ces fichiers supprimés et lorsque vous cliquez sur, vous allez voir tous ces fichiers supprimés avec des dates lorsque vous les supprimez supprimés. C' est une très grande fonctionnalité de réparer les problèmes ou les erreurs, ou tout ce que vous pouvez restaurer facilement. Il s'agit d'une autre fonctionnalité que vous pouvez restaurer. Un autre exemple est Gmail. Si vous avez un Gmail utilisé et lorsque vous essayez de supprimer certains e-mails, il va vous donner les commentaires et aussi vous dire comment vous pouvez l'annuler,
comment vous pouvez annuler ce changement si vous l'avez fait avec une erreur. Il y a aussi un savoir plus pour former l'utilisateur si l'utilisateur ne sait pas ce qui vient de se passer. Ce ne sont là que quelques exemples. Il y a beaucoup d'autres exemples que vous pouvez voir et que vous avez pu voir en ligne lorsque vous essayez de supprimer quelque chose, ou lorsque vous essayez de créer quelque chose, il y a une erreur. Il va vous donner comment corriger ces erreurs. Aussi certains sites ils vous donnent des étapes qui le font. Hier soir, j'ai eu un problème avec ma chaîne YouTube que mon compte AdSense ne fonctionnait pas avec elle. Je suis allé au guide du guide YouTube et j'ai essayé de l'ouvrir. Il y avait cinq et six pas, et ils étaient vraiment difficiles à suivre pour moi. Vous vous assurez que vous devez les rendre très faciles à comprendre pour votre utilisateur. Vous pouvez même utiliser une vidéo pour guider l'utilisateur comment corriger cette erreur. Ce sont tous les conseils et astuces et la conception pour les erreurs. J' espère que vous avez apprécié cette leçon. Passons à la leçon suivante.
42. 8 utilisateur toujours dans contrôle avec des exemples: Peu importe ce que nous possédons ou ce que nous avons, nous devons le contrôler nous-mêmes. Ce besoin humain de contrôle
remonte à nos premières racines quand nous étions des hommes des cavernes. Quand nous avons commencé à monter le cheval, nous avons utilisé des ceintures pour le contrôler. Nous pouvons facilement arrêter notre cheval, nous pouvons facilement le laisser courir. Ce sont les besoins humains. Ce comportement est intégré dans la nature humaine. En tant que concepteurs UX, nous devons donner aux utilisateurs le contrôle
total ou presque le meilleur contrôle de leurs applications, sites Web qu'ils utilisent, de leurs comptes ou des sites e-commerce qu'ils utilisent, afin que les utilisateurs se sentent en charge. Ils vont se sentir très bien. Cela fait également partie de l'expérience utilisateur. Même si vous voyez les enfants et les observez chaque fois qu'ils ont un an et demi, ils essaient de manger eux-mêmes avec une cuillère. Si vous essayez de prendre leur cuillère, ils vont pleurer, et ils vont dire : « Nous devons manger nous-mêmes. » Même ils jettent tout partout et ils jettent de la nourriture sur eux-mêmes, mais ils continuent à essayer d'utiliser une cuillère parce qu'ils se sentent en contrôle. Aujourd'hui, dans nos technologies partout autour de vous, même les voitures, vos téléphones portables, vos ordinateurs portables, vos ordinateurs, ils disposent de contrôles de luminosité. Ils ont des commandes audio. Vous pouvez réduire l'audio, vous pouvez l'éteindre. Ils ont des thèmes sombres et clairs. Vous pouvez appliquer si vous sortez au soleil. Vous pouvez également connecter et déconnecter le Wi-Fi et le Bluetooth. Tous ces paramètres et services, vous pouvez les désactiver et vous pouvez les activer. Tous vos appareils sont sous votre contrôle. Maintenant, pourquoi donnons-nous autant de contrôle à l'utilisateur ? Parce que c'est la nature humaine que nous nous sentons satisfaits quand nous contrôlons. Permettez-moi de vous montrer d'autres exemples d'utilisateur en contrôle. Vous avez peut-être vu des pages de destination où vous allez à cette page de destination et la vidéo commence à jouer elle-même et il n'y a aucun moyen de la contrôler ou de l'arrêter. Maintenant, vous pouvez voir que cette vidéo est en cours de lecture, mais si elle a un son fort, vous allez tuer cette page. Vous allez cliquer instantanément sur cette croix. Ce bouton est appelé lecture automatique. lecture automatique n'est pas une mauvaise chose si vous l'utilisez de bonne manière, mais si vous essayez de limiter le contrôle de l'utilisateur et
ne leur donnez aucune option pour éteindre l'audio ou fermer la fenêtre du lecteur vidéo, ils vont être irrités. Permettez-moi de vous montrer quelques exemples de différents systèmes d'exploitation comme Google, Android systèmes d'exploitation mobiles et Windows, et iOS ,
Mac, et comment ils donnent le contrôle à leurs utilisateurs. C' est un exemple que vous pouvez voir, vous pouvez désactiver n'importe quelle application, même vous pouvez les forcer à arrêter. Toutes ces applications sont listées ici. Ensuite, nous avons cet écran de paramètres pour iPhone, et vous pouvez voir, vous pouvez tout personnaliser, Wi-Fi, Bluetooth, mode avion, notifications, tout. C' est l'écran des paramètres de Gmail et vous pouvez voir qu'il y a des tonnes de paramètres que vous pouvez faire. Bien que ce ne soit pas très bien défini ou pas très bon, il y a beaucoup d'informations ou de paramètres écrasants ici, mais c'est quand même un bon exemple. Ensuite, c'est notre écran, Windows 10, et j'ai un peu changé son thème. Ce sont tous les paramètres, la gestion des couleurs, les appareils, les polices, les options Internet. Des centaines de paramètres que vous pouvez faire pour n'importe quel appareil connecté ou tous les programmes que vous avez installés. Vous pouvez les désinstaller ou les réinstaller, ou vous pouvez désactiver différents services. Ensuite, il s'agit de l'écran du système d'exploitation iMac ou Mac, les préférences système. Il y a beaucoup de choses que vous pouvez faire ici. Vous pouvez contrôler le dock, les économiseurs d'écran de bureau, les équipes, mode
d'économie d'énergie, l'affichage si vous avez plusieurs écrans, votre son, scanners, Bluetooth. Tous ces paramètres sont là pour que l'utilisateur puisse se sentir en contrôle et être satisfait que je possède cette application ou ce produit. Il s'agit de l'utilisateur en contrôle. J' espère que vous avez compris le concept, le besoin humain et la psychologie humaine derrière lui. Passons à la leçon suivante.
43. 9 Grouper et déconnecter avec des exemples: Vous avez peut-être lu beaucoup de livres, et vous vous êtes déjà demandé pourquoi ils divisent chaque livre en différents chapitres, et différentes sections, différents paragraphes avec des titres différents, ils sont plus faciles à numériser. esprits humains ils peuvent facilement consommer cette information et facilement la comprendre. Nous, humains, nous ne pouvons pas traiter beaucoup de données ou beaucoup d'informations à la fois, mais nous aimons mordre des morceaux d'informations de taille. Maintenant pourquoi devons-nous regrouper nos commandes, nos boutons ou nos options ? suffit de prendre un exemple, si je vous donne une machine à laver et il a comme un 100 boutons et contrôles et paramètres sur elle, vous serez submergé par ce que c'est ses fonctions, et vous ne préférez pas avec un lavage plus simple qui a seulement 10 boutons dessus. Ce que vous pouvez faire pour améliorer vos produits, vous pouvez regrouper les contrôles pertinents ensemble, ils ont un sens pour l'utilisateur que cet ensemble de contrôles va le faire. Laissez-moi vous montrer l'image de la machine à laver que j'utilise chez moi. C' est la machine à laver Samsung que j'utilise chez moi, et je vais vous montrer quels sont ces contrôles, et pourquoi le regroupement d'entre eux est logique. Maintenant, vous pouvez voir au milieu qu'ils ont regroupé ces deux, Power et Start. Ceci est un éteindre cette machine et pour le démarrer. Cela est très logique, ils font presque les fonctions similaires. Ensuite, nous avons tous les contrôles personnalisés sur le côté gauche. Vous pouvez voir ici, ce sont les trois contrôles personnalisés, puis la souris pré-faite où vous pouvez simplement sélectionner n'importe qui, et ceux-ci sont regroupés ici. Si je veux un lavage rapide, je vais sélectionner ceci et il va juste faire tous les paramètres pour moi. C' est une très belle mise en page de tous les contrôles d'interface et ils sont regroupés pour avoir un sens pour l'utilisateur. En outre, ils ne violent pas la fonction de contrôle interne. L' utilisateur veut toujours être en contrôle sur le côté gauche, et sur le côté droit ils ont des modes pré-faits et ils utilisent le regroupement pour disposer toute cette interface, cela a du sens. De même, si vous voyez des applications, il y a des tonnes d'applications, Mac, Windows, Systèmes
d'exploitation, même iOS Android, ils ont tous les paramètres regroupés en différentes zones. Ils sont empilés en différentes sections. Laissez-moi vous montrer quelques sections. Ce sont les paramètres Windows et vous pouvez voir ce sont paramètres
Windows 10 et vous pouvez voir qu'ils sont plus simples, et il y a sept ou huit catégories, et vous pouvez facilement aller avec l'une d'entre elles. Ils ont leur description sous eux, et vous pouvez faire le réglage et la personnalisation. Ils ont utilisé le regroupement pour accueillir un grand nombre de paramètres dans une seule catégorie. Ensuite, nous avons, voici la capture d'écran de Sketch App. C' est une application populaire pour les concepteurs d'interface utilisateur et vous pouvez voir comment ils utilisent le regroupement. Maintenant, ce premier groupe est pour l'alignement, l' autre est pour la prochaine chose, alors nous avons ces pour le positionnement. Ensuite, nous avons tous les contrôles de texte dans ce cadre, puis nous avons l'apparence et les effets ici. C' est ainsi qu'il est logique de regrouper différents contrôles en groupes. Ceci est également un autre exemple que vous pouvez, vous l'avez peut-être vu dans de nombreuses barres de navigation sur menus que tous ceux-ci sont regroupés en sections. Vous pouvez voir ceci est la première section pour les fichiers, et ouvrir les fichiers, en créant de nouveaux. Ceci est pour renommer et enregistrer et restaurer le fichier. Ceux-ci sont export et ce sont réduire le fichier et ceux-ci sont, ils l'ont groupé afin que l'utilisateur puisse facilement les comprendre et avoir un certain sens à leur sujet. Encore une fois, vous pouvez voir ici en haut, nous avons différents onglets. Si je clique sur l'un d'eux, désolé. Si je clique sur l'un d'eux, cela va m'amener aux paramètres de l'outil. C' est plus facile pour moi s'ils ont comme une longue page, et tous les paramètres qui résident sur cette page, il sera trop difficile pour moi de ne pas tout changer. Ceci est regroupé en deux catégories différentes et il est plus facile pour moi de modifier les paramètres du clavier. Ce sont les Préférences Système. Encore une fois, vous pouvez voir ce sont préférences système
Mac ou iOS et ils sont également dans différentes parties. Comme vous pouvez voir que c'est le premier, alors c'est le deuxième,
c' est le troisième bloc, et c'est le quatrième bloc, et c'est le dernier bloc. Ou vous pouvez voir les groupes d'utilisateurs, et les contrôles parentaux, et les contrôles supplémentaires, l'accessibilité, Siri, ils sont presque liés qu'ils sont ici. Aussi la date et l'heure. Les contrôles qui sont liés au partage de réseau, Bluetooth, tous sont dans cette zone, iCloud vous pouvez voir. Cela a du sens. Ils sont presque tous liés. Ce sont des périphériques matériels que vous pouvez voir dans cette zone, des imprimantes son, trackpad, souris, ce sont presque tous les hardwares. Ce sont les personnalisations de leur propre système d'exploitation comme Desktop, Dock, Mission Control, langues, sécurité, confidentialité. Toutes ces préférences système, elles ont du sens. Maintenant, c'est un très mauvais exemple sur Google Adsense. J' essayais de le faire disparaître. Ce qui s'est passé, c'est que je regardais ou lisais cette zone, et l'icône suivante apparaît un peu sur le côté droit, et il est beaucoup loin de cet écran, ce pop-up. Pendant cinq minutes, j'ai été incapable de faire ce que je devais faire ici, comment je peux fermer cette boîte contextuelle. Après avoir regardé autour de moi, j'ai vu que c'était là. Si quelque chose est loin de son contexte d'utilisation, j'utilise cette fenêtre. Ce prochain devrait être par ici, ou par ici, ou par ici, ils peuvent aussi placer un bouton ici. C' est logique. C'est à l'intérieur d'un groupe. Le regroupement a également du sens parce que l'utilisateur pense que ces choses sont liées. C' est une loi, est
ce qu'on appelle la loi de la Gestalt du groupement. Il y a plus de lois de la Gestalt. Je pourrais inclure une autre section à ce sujet, mais ce n'est pas dans mon plan. Quoi qu'il en soit, le regroupement a du sens, alors essayez d'utiliser le regroupement intelligemment dans vos interfaces utilisateur. Si vous avez des questions, posez-moi. Passons à la leçon suivante.
44. 10 humains ont des limites: Tous les humains sont limités. Nous avons des limites en termes de limites physiques et mentales. Nous ne pouvons pas utiliser ou utiliser un appareil ou une machine trop longtemps. Nous avons des limitations physiques et mentales. Chaque fois que vous concevez pour une application ou que vous développez un produit, vous devez garder toutes ces choses à l'esprit. Maintenant, si nous parlons des smartphones et des limites humaines, alors vous devez savoir qu'il ya une recherche par Stephen Hoober et Josh Clark et selon eux, 50 pour cent des utilisateurs tiennent juste leurs smartphones d'une main, et 75 pour cent de leur interaction est pilotée par le pouce, donc ils utilisent principalement le pouce pour appuyer sur différents boutons et pour commander quelque chose en ligne. Vous devez garder ces choses dans votre esprit. Ces limites physiques jouent également un rôle dans les UX industriels. Les personnes qui avaient l'habitude d'assembler différentes pièces ou des machines différentes ou des emballages différents qu'elles utilisaient pour emballer différents articles dans des boîtes différentes. Ils travaillaient pendant des heures et des heures des usines
industrielles qui étaient là pendant 10 heures ou 12 heures. Ça a commencé à rendre les gens malades. Ce qu'ils ont fait est les gars UX ils ont commencé ces choses ergonomiques que comment nous pouvons utiliser les humains et ne pas les utiliser comme une machine. Comment nous pouvons améliorer leur santé et leur espace de travail en utilisant l'expérience utilisateur et la facilité d'utilisation. De même, si vous concevez une chaise ou une porte, vous avez besoin de quelqu'un pour le tester pendant 8-10 heures ou peut-être plus que cela. Vous avez besoin de quelqu'un qui va le tester pendant peut-être des jours ou des semaines pour voir correctement si
cela génère des maux de dos, des douleurs aux jambes ou tout autre inconfort. Voici quelques articles et recherches sur ces modèles. C' est la façon dont les humains tiennent leurs smartphones et utilisent différents appareils. Ce sont les différents modèles de maintien bercé, tenir et toucher. Vous pouvez lire tout cet article. Je vais partager ces articles avec vous et ensuite nous avons ceci, vous pouvez voir ou entendre, dans ce modèle. C' est essentiellement la zone de sécurité où le pouce de l'utilisateur peut atteindre. C' est un smartphone. C' est la zone où l'utilisateur peut facilement taper avec son pouce ou son pouce. C' est la zone d'accord et ce pas de zone. Ici, si vous placez quelque chose ici, quelques boutons, ils ne vont pas l'atteindre. Vous avez peut-être vu la plupart des boutons se trouvent dans cette zone ici afin que l'utilisateur puisse facilement taper dessus. En outre, ces zones de confort sont différentes pour différents appareils. Vous pouvez lire cet article, vous pouvez voir ici, c'est la zone de confort pour tablette, plus grand mobile, ou peut-être le plus grand écran. Beaucoup d'entreprises comme Apple, ils ont pris cela en considération et vous pouvez le voir dans Apple iPhone 6 ou 7. Je pense qu'ils ont cette caractéristique d'accessibilité en matière d'accessibilité. Vous pouvez l'activer et il va déplacer toutes les applications ou
toutes les icônes de votre écran vers le bas vers cette zone. Vous pouvez voir qu'ils nettoient la zone où votre pouce ne peut pas atteindre, donc vous pouvez facilement l'utiliser, et il va activer quelque chose comme ça ici afin que vous puissiez revenir à l'écran et les paramètres que vous aviez. Maintenant, certains des concepteurs [inaudibles] et beaucoup de grands gourous de la convivialité, ils conçoivent des applications comme celles-ci. J' ai été vraiment surpris de voir que vous pouvez voir ici qu'ils ont laissé tout cet espace vide en haut. Pourquoi c'est ça ? Parce que le pouce des utilisateurs ne peut pas atteindre cette zone. Pour le rendre plus facile pour l'utilisateur, ils placent tous leurs contrôles en bas de l'écran. Vous pouvez voir ici, c'est un peu en haut, il y a une marge ici, un espace par ici, et ensuite ils ont répertorié tous leurs contrôles ou catégories ou tout ce qu'ils veulent faire. Tous ces paramètres sont comptés, tout est déplacé vers le bas. Ceci est fait intentionnellement pour soutenir l'utilisation du pouce, limitation
physique de l'utilisateur. Ce sont là des exemples de limitations
humaines et de la façon dont nous pouvons les utiliser pour améliorer nos applications ou nos produits quotidiens. Si vous avez des questions, demandez-moi. Passons à la leçon suivante.
45. Utiliser des motifs de conception: La seule chose où nos esprits humains sont supérieurs à n'importe quel superordinateur est de reconnaître les modèles de phase ou de conception ou les modèles qu'ils ont vus auparavant. Donc, nos cerveaux reconnaissent facilement les choses si nous avons vu ou si nous avons connu un modèle similaire dans le passé. Lorsque vous concevez un produit ou une application ou un site Web, si vous déviez beaucoup des modèles que les utilisateurs ont déjà vus ou que les utilisateurs ont des images de ces modèles dans leur cerveau, il leur sera difficile de le reconnaître. Juste un exemple, si vous inventez une voiture, n'essayez pas de mettre un avion comme des centaines de commandes dedans pour se déplacer. Il sera difficile pour les utilisateurs de reconnaître ces tendances. Donc, vous devez prendre ces modèles sous forme voitures
déjà faites et peut-être que vous pouvez les modifier ou les améliorer un peu. De même, dans la conception web, dans la conception d'applications mobiles dans les produits numériques, il y a déjà des modèles faits que les utilisateurs ont déjà utilisés, comme les barres de recherche, les différentes listes déroulantes, les accordéons. Avant de commencer à utiliser un modèle ou de créer un nouveau modèle, essayez de trouver le modèle similaire que les utilisateurs utilisent déjà. Donc, je vais vous montrer quelques sites web liés aux modèles de conception et pour les développeurs, il est vraiment nécessaire d'utiliser ces modèles déjà faits. Cela permet également d'économiser beaucoup de temps. Voici un site Web appelé patterns.com et pttrns.com et je vais partager tous ces liens pour les liens dans les ressources. Donc, ce que vous avez à faire est que vous pouvez voir sur le côté gauche il ya catégories.Donc, si je vais à ce modèle de cartes, vous pouvez voir cela est très populaire ces jours-ci. Il va filtrer et me montrer juste les modèles de cartes. Vous pouvez voir que c'est un et puis nous avons ces cartes, petites cartes, et puis nous avons ceci, vous pouvez voir dessus, si nous survolons, il va montrer ce qui est l'application et quelles sont les tags et les catégories qui y sont liés. C' est donc un moyen que vous pouvez trouver tous les différents modèles et vous pouvez voir si vous pouvez utiliser l'un de ces modèles déjà faits dans votre application. La deuxième est celle-ci. C' est aussi mobilepatterns.com et en ce moment j'ai ouvert la liste. Vous pouvez voir sur la liste de gauche, il existe différents formats de listes. Il y a différents styles. Vous pouvez voir qu'ils sont basés sur des images Liste un, deux, trois images avec des titres. Ensuite, nous avons ces listes de différentes critiques. Ceux-ci sont dans un format différent, et puis si nous descendons, vous pouvez voir ce sont aussi des listes. Ils ont un format différent. Sur le côté gauche, vous pouvez voir toutes les listes non notées, notées, appréciées. Donc, ce sont toutes les choses que vous devez trouver avant de commencer à
esquisser vos idées ou votre application ou les mises en page et si vous êtes un développeur, alors vous devriez utiliser des modèles et des bibliothèques déjà faits que vous pouvez facilement implémenter. Même il existe des modèles de conception codés ou des bibliothèques de conception. Vous pouvez les utiliser instantanément dans vos applications iPhone ou Android ou n'importe quelle application Web numérique. C' est un autre site, uipatterns.com, et il y a beaucoup de modèles avec différentes catégories, par exemple, si je vais à la fenêtre plus petite, il me montrera quel est le problème, pourquoi l'utilisateur en a besoin, et aussi quelques bons exemples que vous pouvez voir ici. Il m'a montré un exemple aussi son utilisation. Donc, c'est un autre site Web et il montre beaucoup de modèles de conception d'interface utilisateur différents. Ensuite, nous avons ici un autre site de bibliothèque de modèles, Welie.com, et vous pouvez voir qu'il ya encore différentes catégories. Allons à la recherche avancée et voyons quels modèles sont là pour la recherche avancée. Ça a l'air un peu vieux. Peut-être qu'ils ne l'ont pas mis à jour depuis quelques années. Mais vous pouvez aller sur ce site et voir quelques-uns des exemples. Je pense qu'ils sont très vieux, mais je pense que c'est bien que nous ayons un problème et une solution. Je pense que tu devrais t'en tenir à ces trois sites. Ils sont plus récents que celui-ci. C' est un peu vieux et je vais partager tous les liens avec vous. C' est Welie.com. C' est un peu vieux pour moi. Donc ces trois seront parfaits. Donc, tout est sur les bibliothèques de modèles et comment vous pouvez les utiliser. Nos cerveaux humains sont câblés pour reconnaître des modèles similaires, par
exemple, ces fenêtres modales. Je peux les reconnaître instantanément qu'il s'agit d'une fenêtre de modèle et c'est peut-être pour quelques informations ou peut-être que je peux cliquer dessus et si elle a un bouton, vous pouvez voir ici dans cet exemple, je peux cliquer dessus et effectuer une action. Si vous avez des questions à me poser, passons à la prochaine leçon.
46. Ne laissez pas vos utilisateurs: Tous les humains sont paresseux par nature, donc si vous leur rendez difficile d'utiliser quelque chose, ils vont abandonner. Ou si vous mettez beaucoup de stress sur leur esprit
ou leur donnez beaucoup de calculs difficiles ou de choses à retenir. Ils ne vont pas aimer ça. Le conseil ici est ne pas alourdir vos utilisateurs avec des calculs
difficiles ou de les laisser mémoriser des mots de passe longs ou difficiles. Essayez de résoudre tous les problèmes difficiles pour vos utilisateurs du côté du développement ou du côté de la conception. Voici quelques façons que vous pouvez utiliser pour rendre votre application, votre site e-commerce ou tout autre produit numérique plus facile à choisir pour vos utilisateurs. Résoudre un problème dur ne signifie pas que vous devez calculer des choses différentes, mais aussi il est lié aux mots de passe, à l'emplacement de l'utilisateur. Vous pouvez localiser automatiquement l'utilisateur par GPS, en le traçant automatiquement. Même les sites Web le font. Vous pouvez également afficher les mots de passe pendant que l'utilisateur tape afin qu'ils fassent moins d'erreurs. Il est adopté par l'application d'Amazon, et c'est le patron que j'ai trouvé. Je ne sais pas si Amazon a trouvé plus tôt que moi ou peut-être que c'est moi. En fait, j'ai inventé ce modèle de conception que lorsque l'utilisateur frappe, vous devez montrer le mot de passe de l'utilisateur dans un format très sombre, format gris
très terne afin que les autres ne puissent pas le lire, mais l'utilisateur peut le voir et le lire pendant qu'ils tapent. Donc ils savent ce qu'ils tapent, donc ils vont faire moins d'erreurs. C' est plus facile pour eux. Vous leur permettez de taper des mots de passe plutôt que de faire des erreurs, les supprimer encore et encore, taper encore et encore. Permettez-moi de vous montrer quelques-uns des exemples, comment vous pouvez calculer les choses par vous-même plutôt que de les laisser aux utilisateurs. Il y a quelques exemples comme ce podomètre Runtastic. Il existe de nombreuses applications. Ils peuvent calculer vos calories, puis la vitesse, fréquence, quelles étaient les étapes par minute aussi la distance, tout, même votre vitesse. Donc, les utilisateurs n'ont pas seulement besoin de s'inquiéter à ce sujet. Ils vont juste obtenir tout de ces étapes calculées automatiquement. Il s'agit d'une application de plus Walk avec Map My walk. Vous pouvez voir qu'il va prendre toute votre part avec la carte et aussi la distance, la durée, base
moyenne, les calories brûlées et le gain d'altitude, combien vous allez au-dessus du sol, et des choses comme ça. Ensuite, nous avons un autre exemple, c'est l'oreiller. Un oreiller personnalisé à votre cou. J' ai beaucoup de problèmes de cou et de douleur alors je suis allé sur leur site Web. Ils ont des vidéos comment mesurer différentes largeurs d'épaule et puis vous pouvez sélectionner ici, comme par exemple, j'ai eu ce 44, je suppose 43 ou 40. Ensuite, vous pouvez encoler la circonférence du cou. Ensuite, vous pouvez la hauteur du cou, qui est qu'ils ont montré comment le calculer. Ensuite, vous pouvez également choisir si vous dormez sur le côté ventre et le matelas ferme, vous pouvez cliquer ici. Il va vous conseiller quel oreiller correspond à vos largeurs et hauteurs. J' aime vraiment cet oreiller. Je crois que je vais l'acheter bientôt. Ensuite, nous avons ce login, qui est la connexion avec Facebook et Twitter plutôt que l'utilisateur mémorisant chaque mot de passe pour chaque site Web, ils peuvent facilement se connecter avec ces connexions sociales. Ensuite, vous pouvez voir ici, nous avons Uber app, et il y a trois presets déjà faits. Comme vous pouvez voir la salle de gym, la maison et le travail. Voici les trois adresses que vous auriez pu enregistrer. Je ne l'ai pas utilisé, même une fois, donc je ne sais pas. Mais il existe une option pour enregistrer vos préréglages ou vos itinéraires afin que vous puissiez facilement les utiliser plutôt que de les taper encore et encore. Ensuite, nous avons cette entrée téléphonique internationale très intelligente. Si vous sélectionnez l'un de vos pays comme l'Afghanistan, ou si je choisis mon pays, laissez-moi sélectionner le Pakistan. Vous pouvez voir le format de cet exemple de numéro de téléphone est changé à ce que j'ai au Pakistan. Tous les numéros mobiles sont dans ce format. C' est très soigné. Si vous allez aux États-Unis ou au Royaume-Uni, vous pouvez voir à nouveau le format change en plus 44, puis votre numéro de téléphone. C' est une entrée très intelligente et téléphonique. Ensuite, nous avons quelques exemples supplémentaires. Comme vous pouvez le voir ici Calculateur d'abordabilité de Zillow. Je pense que c'est à propos de l'hypothèque. Si vous changez votre niveau de revenu d'ici comme 60 000, cela va vous montrer combien de maison vous pouvez vous permettre, donc je peux me permettre d'aimer ça. Si j'ai une dette mensuelle de 800. Ça va tout changer d'ici. Si je change quelque chose d'ici, vous pouvez également aller aux rapports de ventilation des paiements anticipés, rapport complet. Ils sont très pratiques. L' utilisateur n'a pas besoin de calculer quoi que ce soit, ils le calculent pour vous. Il y a une autre calculatrice. C' est calculateur d'hypothèque par le même Zillow et vous pouvez calculer ici comme si j'avais. Cela va me montrer combien je dois payer chaque mois. Encore une fois, c'est un autre exemple, tylko. Vous pouvez personnaliser cette étagère entière. Par exemple, je veux utiliser la hauteur de 26 centimètres pour cette zone et pour cette zone je veux 38 centimètres. Alors je vais enlever cette note. Peut-être que je peux utiliser celle-là ou celle-là. Il y a beaucoup d'options. Vous avez juste besoin de sélectionner le matériau et vous pouvez changer la densité avec tout cacher d'ici. Vous n'avez pas besoin de calculer tout cela, juste besoin de sélectionner vos personnalisations et il va
faire une très belle étagère pour vous. Ensuite, nous avons cette application co et co, et c'est ainsi qu'ils créent un contrat. Si je sélectionne un client, donc je n'ai pas de clients. Juste un client à faire la ligne. Par exemple, mon client est Charlie. Ce sont toutes les choses que je peux mettre ici, contrat,
nom, email tout, et vous pouvez appuyer sur Continuer. Il va construire tout le projet et tout le contrat par lui-même. Je vais au projet X 002. Vous pouvez changer la devise et vous pouvez continuer. Vous pouvez aussi vérifier que mon travail sera le mien. Bref, je vais continuer. Vous pouvez voir maintenant qu'ils ont préparé l'ensemble du contrat. Vous pouvez voir ici, sont mes signatures et c'est mon adresse, et c'est l'entrepreneur. C'est très pratique. Je peux télécharger le PDF que je peux signer et envoyer ce contrat. C' est très gentil. Enregistrer en tant que brouillon, enregistrez-le en tant que brouillon. C' est un très bel exemple de calculs automatiques génèrent automatiquement des choses plutôt que de mettre tout ce fardeau sur mon esprit. Ensuite, nous avons une autre calculatrice, calculatrice
automatique sur ce site. Il vient d'Australie. Vous pouvez voir cela est également hypothécaire ou peut-être site de prêt, comment demander les prêts à vivre dans. Vous pouvez changer ces valeurs et tout ce qui suit va changer. Si je vais comme ça, ou si je vais comme
ça, ça va tout changer. Ce sont tous des exemples de calcul automatique et de chargement la charge sur l'esprit de vos utilisateurs et de leur capacité mentale. Si vous avez des questions à me poser, passons à la prochaine leçon.
47. Pourquoi les utilisateurs ont besoin de vitesse et comment afficher efficacement les retours ?: Nous, les humains, sommes impatients dans la nature, nous ne pouvons pas attendre longtemps. C' est pourquoi nous avons inventé des télécommandes, des smartphones qui sont des processeurs très rapides, des avions rapides. Donc, si vous voyez une file d'attente et qu'elle est très longue, il y a 200 personnes déjà dans la file, alors la plupart des chances sont que vous allez quitter cette file d'attente et quitter cette file d'attente. De même, dans les applications numériques et mobiles, les utilisateurs vont se comporter de la même manière. Si vous avez un site Web ou une application Web qui prend environ 15 secondes à charger. La plupart des chances sont que vos utilisateurs vont
quitter et qu'ils vont passer à une autre application ou à un autre site Web. Permettez-moi de vous montrer l'effet des retards sur la conversion et les utilisateurs. La conversion est essentiellement quand les utilisateurs passent d'une page à autre ou il a un but en tête et il a essayé de le poursuivre. Donc, ce qui se passe, c'est qu'il y a quelques statistiques que je vais discuter avec vous, que si vous avez un retard d'une seconde ou dans une réponse de page, cela peut réduire votre conversion de sept pour cent. Donc chaque seconde va vous coûter sept pour cent faible taux de conversion, qui va charger vos achats e-commerce et il va réduire vos utilisateurs rester sur votre site Web, donc il a beaucoup d'effets. Maintenant, les autres études que la BBC ont vu plus de 10 pour cent des utilisateurs quitter leur site Web, quand il faut une seconde de plus pour charger leur site Web. De même, AliExpress a réduit leur temps de chargement de 36 pour cent et a vu une augmentation de
10,5 pour cent des commandes et une augmentation de 27 pour cent de la conversion pour les nouveaux clients. Je vais partager les liens de ces statistiques, qui est le site Web de WPoStats qui est très bon. L' autre est Kissmetrics et vous devez voir ces sites Web. En outre, la vitesse et les retards ont un effet direct sur votre référencement. Donc la vitesse est fondamentalement notre facteur de classement SEO maintenant. Une autre enquête révèle que 79 pour cent les clients ne sont pas prêts à acheter à nouveau à partir d'un site Web de commerce électronique lent. Vous devez donc garder ce facteur dans votre esprit que les utilisateurs ne sont pas impatients et qu'ils ne vont pas attendre votre site Web, votre application ou votre site e-commerce se chargent. Peu de statistiques supplémentaires 83 pour cent des utilisateurs s'attendent à ce que le site Web se charge en trois secondes. C' est donc une norme d'or, donc le temps de charge optimal devrait être de une à trois secondes. Ne laissez pas votre site Web charger pendant plus de quatre secondes. Il devrait être dans les quatre ou trois secondes, car après cela, vous allez perdre vos clients. Amazon et Walmart ont tous deux signalé qu'ils constataient une perte d'un pour cent par 100 millisecondes de retard dans le chargement de leur site. Donc, c'est très grand pour ces sites Web. Donc, s'ils font même 100 millisecondes à leurs sites Web, ils vont obtenir un pour cent de plus de ventes. Sur le côté droit, vous pouvez voir qu'il y a un graphique de
statistiques Kissmetrics et vous pouvez voir qu'après quatre secondes, vous allez voir beaucoup d'abandon de panier 25 pour cent. Donc, avant quatre secondes, vous pouvez voir trois secondes, deux secondes est le pari sûr. C' est très important pour les développeurs que vous avez besoin de rendre votre site web super rapide. Vous devez utiliser ces technologies, ces API, ces back-end qui vont se charger plus rapidement et même pour les concepteurs, si vous concevez un site Web, vous devez garder à l'esprit qu'il devrait se charger très rapidement. Vous n'avez pas besoin d'utiliser des images très lourdes là-dedans. Maintenant, que se passe-t-il si vous voulez montrer aux utilisateurs que les retards, que vous étiez en train de charger quelque chose, ou que vous faisiez un calcul en arrière-plan, êtes-vous en train de traiter la caisse de commerce électronique ou de vérifier la carte de crédit. Vous devez montrer à l'utilisateur le temps d'attente. Vous devez aussi savoir combien de temps ils
vont attendre ou bien ils vont attendre une minute, ou ils vont attendre deux minutes. Aussi à cette méthode est que vous pouvez afficher le pourcentage de chargement par 56 pour cent chargé et vous devez le montrer si vous avez beaucoup de temps de chargement, si cela va prendre plus de trois secondes alors vous devez montrer le temps d'attente de l'utilisateur ou le pourcentage chargé. Maintenant, lors du chargement s'il y a des mises à jour, n'essayez pas d'interrompre la tâche actuelle de l'utilisateur. Comme vous l'avez vu sur Facebook. Si vous parcourez et passez par le poste et puis il y a de nouveaux messages il ne va pas automatiquement sauter en haut et vous montrer le nouveau post. Il vous donnera juste une notification qu'il y a quelques mises à jour, mais cela ne va pas interrompre votre tâche actuelle. En outre, si vous développez des applications, des sites Web ou des applications mobiles, le temps de réponse devrait être plus rapide ou dans les deux secondes. temps de réponse signifient que lorsque quelqu'un clique sur un bouton, alors il devrait donner la réponse avant deux secondes. Sinon, les utilisateurs vont cliquer à nouveau dessus. En-tête à travers des exemples, vous avez peut-être vu ce genre de barres de chargement ou de barres d'état sur sites de
commerce électronique que vous avez mis en place ceci et vous êtes très proche de votre cool. En outre, ceci est un exemple de barres de chargement en pourcentage, vous pouvez voir ici ce beaucoup a été chargé. Ensuite, vous avez peut-être vu une nouvelle barre de chargement sur YouTube en haut de la page qui montre que cela va prendre comme une ou deux secondes, la page est en train de se charger à la suivante. Pour que l'utilisateur ne continue pas à cliquer sur la vidéo encore et encore, c'est pourquoi cette vidéo ne se charge pas. Donc, ce sont toutes les choses que vous devez garder
à l'esprit que vous devez montrer l'état que vous chargez quelque chose et s'il est chargé très rapidement et que vous n'avez pas besoin de montrer quoi que ce soit. Si cela prend juste une seconde ou moins d'une seconde, alors vous n'avez pas besoin de montrer cet état ou ces barres. Il s'agit donc de la vitesse et des retards et de la façon dont vous pouvez utiliser différents modèles pour leur montrer que nous allons continuer.
48. Par défaut et puissance de Suggestion: La plupart des utilisateurs ne modifient pas leurs valeurs par
défaut ou les paramètres par défaut d'un produit lorsqu'ils essaient de l'activer ou essaient de l'utiliser. Par conséquent, les paramètres par défaut sont des valeurs définies lorsque vous commencez à utiliser n'importe quelle application ou n'importe quel produit hors de la boîte paramètres, nous les appelons principalement. Tous les téléphones mobiles, ils ont des sonneries et tous les autres paramètres qui sont définis sur les paramètres par défaut. Maintenant, les paramètres par défaut, pourquoi sont-ils importants ? Parce que les paramètres par défaut jouent un rôle essentiel et qu'ils aident
les utilisateurs à prendre des décisions et que nous prenons normalement de meilleures décisions pour les utilisateurs. Une étape de Jarod Spool sur les valeurs par défaut est inférieure à 5 % des utilisateurs vont modifier leurs paramètres par défaut. Pour les 95 % d'utilisateurs, ils vont utiliser votre application ou votre site Web selon les paramètres par défaut. Assurez-vous donc que vos paramètres par défaut vont bien jouer avec tous les utilisateurs. Maintenant, si vous avez utilisé vos téléphones intelligents, vous savez peut-être que la sonnerie lorsque vous démarrez votre smartphone, il est réglé sur 78 pour cent, et aussi il est automatiquement réglé pour vibrer. Que faire si vous sortez votre smartphone, Samsung ou iPhone ou toute autre marque et que vous commencez à l'utiliser, et alors vous savez instantanément qu'il n'y a pas de sonnerie définie par défaut, que vas-tu faire ? Cela joue donc un rôle très important dans l'expérience utilisateur. valeurs par défaut intelligentes sont que vous allez définir les paramètres
par défaut pour la plupart des utilisateurs pour les satisfaire. Ils vont donc couvrir la plupart de vos utilisateurs principaux. Quelques autres exemples de valeurs intelligentes par défaut sont le pré-remplissage des champs de formulaire avec l'emplacement de l'utilisateur, pays, le numéro de téléphone, les cordons de téléphone, même les adresses e-mail. Quelques autres exemples, ou vous avez peut-être vu des voitures ave fonctionnalité dans MS Word et Photoshop et aussi si vous avez Facebook, alors le Facebook devrait définir un bon niveau de confidentialité dans leurs paramètres par défaut pour tout utilisateur. Au début, je pense qu'ils ont eu quelques problèmes avec les paramètres de confidentialité par défaut. C' est pourquoi beaucoup de gens, ils se plaignaient à ce sujet. Ensuite, ils ont veillé à ce qu'ils invitent normalement les nouveaux utilisateurs à définir leurs niveaux de confidentialité. Donc, tout est à propos des valeurs par défaut intelligentes. Je vais vous montrer quelques exemples, alors voyons quelques exemples. Voici un écran de Qatar Airways et auparavant, j'ai utilisé leur site Web pour trouver différentes routes ou mon plan d'aller à San Francisco. Vous pouvez voir ici, il me montre quand je clique sur le de, il me montre mes recherches précédentes. Il a sauvé mes recherches précédentes que je veux aller, de Lahore à San Francisco et J.F Kennedy Airport à La Baule. Donc, c'est vraiment pratique. Ce sont des valeurs par défaut intelligentes. Ils vont utiliser ce que j'ai déjà utilisé. Ensuite, dans le paramètre Photoshop, si vous utilisez Photoshop, vous pouvez savoir qu'il a automatiquement enregistré les informations de récupération toutes les 10 minutes, ce qui est défini par défaut. C' est intelligent par défaut car tout le monde a besoin de cette fonctionnalité. Ce sont nos paramètres Android mobiles, volume
multimédia, le volume d'alarme et le volume d'anneau, définis sur les paramètres par défaut, et vous pouvez les modifier, mais ils ne sont pas muets. De même, c'est Microsoft Word et vous pouvez voir, il a également enregistrer automatiquement les informations de récupération toutes les 10 minutes. Réglez sur 10 minutes par défaut. Donc, si vous perdez ou que votre ordinateur
s'arrête instantanément sans raison ou qu'un plantage se produit, il va enregistrer votre document toutes les 10 minutes. Je vous ai montré ce site, Tylko Furniture et je pense que vous pouvez voir ici nous avons un autre exemple de défauts intelligents. Vous pouvez voir que la hauteur de la rangée est réglée sur 26 centimètres, ce qui est une bonne valeur par défaut. Il peut couvrir presque tout ce que vous pouvez voir ici. Aussi ces paramètres densité est un 100 pour cent de celui-ci est celui-ci, hauteur est celle-ci. Donc, ce sont pour les utilisateurs normaux. Vous pouvez voir ici, ce sont les paramètres par défaut, ils sont très puissants. Ensuite, j'ai cherché en ligne sur Google pour voir combien différents sites Web, différents sites de voyage, sites de recherche de billets utilisent des valeurs par défaut intelligentes. Vous pouvez voir que j'ai cherché des billets économiques de Lahore à New York. Vous pouvez voir que j'ai cliqué ici, Lahore à New York, celui-ci voyage CheapoAir. Je crois que j'ai cliqué sur celui-ci, kayak.com. D' abord, je vais vous montrer, par exemple, ceci est d'un voyage et ils ont déjà rempli de et vers les champs de cette recherche, ok, donc quand je clique sur « Lohore », vous pouvez voir que cela a déjà rempli. Mais c'est leur premier pas. J' ai besoin de sélectionner tous les paramètres avant d'aller n'importe où. Aussi, vous pouvez voir CheapoAir, ils ont déjà rempli ces aussi et je dois les choisir. Ici aussi, vous pouvez voir qu'ils ont rempli cette adresse, c'est très agréable. Mais j'aime beaucoup celle-là. C' est Kayak.com et vous pouvez voir Lahore ils ne m'ont pas seulement rempli, ils m'ont également montré les résultats. D' accord ? Je peux aller de l'avant et je peux changer les dates. Donc, ils sont juste pré-sélectionnés, date d'
aujourd'hui, le 21 août, et ils l'utilisent pour rechercher un billet pour adultes en classe économique, ce qui sera très probablement la plupart des utilisateurs vont les chercher,
mais ils peuvent le changer à tout moment. Je pense qu'ils devraient mettre en évidence cette zone un peu, peut-être une couleur d'arrière-plan sur ce, donc je sais que je vais changer les paramètres à partir d'ici. C' est vraiment sympa. C' est une grande utilisation des valeurs par défaut intelligentes. Le meilleur que j'ai vu parmi ceux-ci. Donc, tout est sur les valeurs par défaut intelligentes et la puissance des valeurs par défaut intelligentes, qui est également liée à la puissance des suggestions. Donc, ce site Internet l'utilise parfaitement. Si vous avez des questions, posez-moi, passons à la leçon suivante.
49. Guider et former les utilisateurs à chaque étape: Quand quelqu'un vous rend visite pour la première fois et qu'il vient chez vous, ne sait pas où se trouve la cuisine, où se trouve la chambre, où se trouve la toilette et il
en va de même les utilisateurs qui commencent à utiliser vos applications et sites Web. Ils ne savent pas ce qu'ils doivent faire avec ces sites Web, comment se connecter, comment s'inscrire. Vous devez guider vos utilisateurs, vous devez les former à chaque point, et vous avez besoin de leur montrer des vidéos, des illustrations, les
guider dans la direction, vous devez leur montrer différentes pop-ups sur différentes zones que cette va le faire et comment vous pouvez faire ou utiliser cette fonctionnalité. Vous avez peut-être vu beaucoup de ces images l'intégration lorsque vous commencez à utiliser une application. C' est ce qu'on appelle l'expérience d'intégration pour les nouveaux utilisateurs. Permettez-moi de vous montrer quelques-unes des façons dont vous pouvez améliorer l'orientation et la formation de vos utilisateurs. J' ai vu beaucoup d'applications ces jours-ci, ce qu'ils font est qu'ils envoient des e-mails périodiques sur différentes fonctionnalités de l'application ou du site Web. Ils ont des vidéos de formation en eux ou ils ont des guides sur la façon d'utiliser cette fonctionnalité. Aussi Adobe et beaucoup d'autres entreprises comme Sketch, Bohemian Sketch et d'autres logiciels populaires, ce qu'ils font c'est qu'ils ont des formations vidéo
gratuites sur leurs sites Web pour former de nouveaux utilisateurs. De même, si quelqu'un remplit un formulaire, vous pouvez lui donner un texte d'aide quand quelque chose tourne mal afin qu'il puisse facilement le corriger. Maintenant, voici quelques-unes de l'expérience d'intégration, vous pouvez également les appeler pas à pas, comment utiliser cette fonctionnalité sur la nouvelle application. Vous pouvez voir ceci est Carrousel et il montre à l'utilisateur que comment vous pouvez partager et garder des photos, tous les boutons. Il s'agit de différentes façons d'introduire de nouvelles fonctionnalités aux nouveaux utilisateurs. Vous pouvez voir ici nous avons sélectionné votre liste de lecture en fonction de nos histoires les plus populaires. Faites glisser la souris pour commencer la lecture. Donc, ce sont différentes façons de présenter votre utilisateur avec différentes fonctionnalités. Vous pouvez afficher des écrans pas à pas ou des écrans d'intégration au début de votre application, ou chaque fois que l'utilisateur tente d'utiliser une nouvelle fonctionnalité. Ceci est un autre écran de pttrns.com et il est également appelé écran d'intégration. Vous pouvez voir qu'il va montrer certaines des choses que vous pouvez faire, ainsi que certains des messages de bienvenue qui, « Bienvenue dans cette fonctionnalité ». Vous pouvez voir maintenant qu'ils ont utilisé pop-up sur cet écran ici, pop up sur différentes boîtes de réception, Aujourd'hui, à venir, Anytime, Someday, et les informations à ce sujet. Sur cet écran sur la gauche, vous pouvez voir qu'ils vous présentent deux boutons qui est la file d'attente suivante et la dernière file d'attente parce qu'ils sont des modèles inconnus ou de nouvelles icônes qu'ils ont
à présenter aux utilisateurs que ces icônes font cette fonctionnalité ou vous pouvez les utiliser comme ça. Adobe Experience Design [inaudible] est un nouvel outil et vous pouvez voir ici sur le site Web d'Adobe qu'ils ont le débutant et expérimenté les deux vidéos pour les deux niveaux. Si vous êtes un débutant, vous pouvez voir différentes vidéos pour commencer avec ce logiciel, et si vous êtes un utilisateur expérimenté, vous pouvez passer à l'expérience et voir différentes vidéos et vous entraîner. De même, j'ai montré ce site web avant, oreiller, et il montre différentes vidéos sur la façon de prendre des mesures de vos épaules, largeur du cou, des circonférences, et tout cela pour sélectionner votre oreiller. Maintenant, c'est un outil que j'ai acheté pour mes points de déclenchement et vous pouvez voir qu'ils
m'ont envoyé avec ce produit un guide de l'utilisateur où ils ont tout montré, comment l'utiliser et comment appuyer sur différents points de déclenchement et où ils peuvent être localisés. Ceci est une façon de guider avec ce numéro de retour. C' est vraiment utile. Beaucoup de produits donnent ces guides gratuitement avec leurs produits afin que l'utilisateur puisse commencer à utiliser leur produit instantanément. Il s'agit de former votre utilisateur et de les guider pour atteindre son objectif, si vous avez des questions ne me posez pas. Passons à la leçon suivante.
50. Réduire la barrière à l'entrée: C' est la nature humaine que nous, les humains, n'aimons pas les barrières ou s'il est très difficile pour nous d'obtenir quelque chose, nous allons la plupart du temps abandonner. De plus, si vous faites qu'il est très facile pour un humain d'obtenir quoi que ce soit, ils ne vont pas le faire. Ils se sentent plus accomplis lorsqu'il y a un équilibre entre la facilité et la difficulté. La plupart des applications et logiciels ou même des jeux vidéo utilisent cette technique. Si vous avez déjà joué à un jeu vidéo, quand vous démarrez le jeu, il va toujours commencer par le niveau facile ou un niveau moyen. Il ne sera jamais défini par défaut au niveau de difficulté
difficile parce que la plupart du temps les utilisateurs ne vont pas changer la valeur par défaut et s'ils voient beaucoup de difficultés et obstacles dans leur chemin pour atteindre des objectifs dans le jeu, ils vont cesser de le faire et ils ne vont pas l'aimer. Ce même fait s'applique également aux formulaires en ligne. Vous devez réduire les frottements dans les formulaires en ligne, sur les sites de commerce électronique ou sur les pages d'inscription. Vous devez réduire le nombre de champs afin faciliter l'inscription des utilisateurs à votre service ou site Web. Si votre utilisateur voit 15 champs à remplir, c'est une très grande barrière, ils vont vraiment s'enfuir. Laissez vos utilisateurs tester vos bonbons d'abord, puis demandez plus de détails. Un pari sûr est de trois à cinq champs de formulaire pour une conversion maximale. Voici un exemple de conversion ou cette nature humaine, les barrières que vous pouvez voir en action ici. Quand ils rendent le formulaire très court ; cinq champs leur conversion augmente de 13,4 pour cent. Quand ils le déplacent vers sept champs, il est maintenant en baisse de 1 ou 1,5 pour cent. S' ils le rendent très long, alors leur conversion tombe à 10 pour cent. C' est leur coût, vous pouvez voir le coût augmente également. Vous pouvez voir ici le coût est 31.24 quand ils utilisent cinq champs. Cela fait vraiment mal à beaucoup de votre conversion et c'est lié à notre nature humaine que s'il y a trop d'obstacles sur notre chemin ou trop d'obstacles à notre entrée, alors nous allons y renoncer. Si vous entrez dans un bâtiment et que vous voyez comme 15 points de contrôle et qu'ils vous vérifient encore et encore, vous allez quitter. Tu vas faire du shopping chez quelqu'un d'autre. Vous allez utiliser le service de quelqu'un d'autre plutôt que d'entrer dans ce bâtiment. Si vous voulez que vos utilisateurs soient heureux et que vous
voulez augmenter le niveau de satisfaction de l'expérience utilisateur, vous pouvez proposer aux utilisateurs d'essayer votre solution ou votre application dès maintenant pendant sept jours, 30 jours, voire trois mois. Toutes les grandes entreprises comme Adobe Sketch et toutes les autres entreprises font parce que c'est la nature humaine que les humains ont besoin de savoir ce qu'ils achètent ou de sentir qu'ils dépensent leur argent et pourquoi. Vous devez vous assurer qu'ils ont vraiment besoin de votre application ou de vos logiciels. Si vous remontez cinq ans en arrière, il y a beaucoup moins d'exemples. Il y a beaucoup d'obstacles à l'entrée et vous devez acheter la plupart des logiciels sans même les tester. La plupart des logiciels étaient juste des captures d'écran de ces logiciels et de ce qu'ils font et vous devez payer pour les télécharger. C' était un très grand obstacle à l'entrée, qui se charge de nos jours beaucoup, même la plupart des sites Web qu'ils utilisent juste l'e-mail pour commencer à utiliser cette application ou ce service. Permettez-moi de vous montrer un exemple. C' est un site que je viens de m'inscrire il y a un mois, et vous pouvez voir qu'ils ont juste une entrée e-mail pour commencer à utiliser leur application. Il s'agit donc de l'expérience utilisateur. Ceci est une application à je pense que ma facilité d'utilisation ou enregistrer différents écrans de votre site Web ou applications. Ils voulaient juste que je remplisse juste une adresse e-mail pour commencer et commencer à utiliser ça. Pour les mots de passe et tout le reste, ils vont m'envoyer un e-mail et quand j'ouvre mon G-mail ou mon e-mail, ils vont me demander de définir mon mot de passe et d'autres détails. C' est ainsi que vous n'allez pas demander beaucoup d'
informations à votre utilisateur ou mettre beaucoup d'obstacles dans son chemin
d'entrée dans votre produit, votre site Web ou votre application. Tout est question de friction et de barrières et pourquoi les humains ne les aiment pas. Si vous avez des questions, n'hésitez pas à me poser, passons à la leçon suivante.
51. Langage naturel plutôt que des codes avec des exemples: La plupart des humains qu'ils comprennent un langage simple. Si les mots ou le texte affiché à l'écran ou le titre de votre bouton sont mal compris par votre utilisateur, cela va le conduire à un résultat ou un but indésirable. Vous devez vous assurer que vos boutons sont correctement étiquetés. Vous utilisez des étiquettes correctes pour vos champs de formulaire. Vous tirez même vos pages Web correctement, vos billets de blog, et même vos messages d'erreur et notifications. Juste un exemple, si vous remontez cinq ans en arrière, chaque fois que vous avez rencontré une erreur sur un site Web, vous pouvez voir d'une manière comme celle-ci. Erreur Hashcode 449098 La fin SQL s'est produite. Tu n'as jamais compris ce qu'était cette erreur. Si vous ne pouvez même pas comprendre l'erreur, comment pouvez-vous la réparer ? C' est un très gros problème, très large problème. Si vous ne pouvez pas comprendre ce qui s'est passé et quelle était l'erreur, vous ne pouvez pas le corriger du tout. De même, nos utilisateurs, ils ont des esprits très simples, donc ils ne peuvent pas comprendre ces codes. Ces codes sont pour les développeurs ou les codeurs ou les personnes qui savent vraiment ce que signifie ce code, mais pour l'utilisateur normal qui visite votre site Web ou utilise votre application, c'est un résultat très indésirable. Il ne peut pas le comprendre. Un meilleur exemple est que vous pouvez voir n'a pas pu installer le pilote en raison de l'indisponibilité d'Internet. C' est une erreur très simple et j'ai vu beaucoup de développeurs utiliser cela et laisser ces erreurs sur leurs applications et sites Web. Essayez d'éviter ces applications. Utilisez un langage simple, un langage actionnable qui peut conduire à l'action et comment corriger cette erreur. Vous pouvez voir dans cet exemple, n'a pas pu installer le pilote en raison de l'indisponibilité d'Internet. Vous pouvez également ajouter, essayez de vous connecter à Internet. Un bouton avec cela, sorte que l'utilisateur peut prendre d'autres mesures pour corriger son problème. Un peu plus sur le langage naturel et la façon de l'utiliser efficacement dans vos interfaces, applications mobiles, boutons ou étiquettes, c'est que vous devez dire à votre utilisateur ce qu'il s'agit de ce formulaire,
ce qu'il s'agit de ce bouton, ce que fait cet article. Vous devez utiliser des étiquettes très descriptives pour vos boutons et pour vos champs de formulaire et tous les éléments de navigation. Au lieu d'utiliser soumettre, vous pouvez utiliser télécharger le fichier PDF. Ce bouton montre que si je fais cette action ou appuyez sur ce bouton, il va télécharger PDF Guide. Également sur vos formulaires de contact, si vous utilisez envoyer ou envoyer, il est préférable d'utiliser envoyer un message et c' est un message descriptif plutôt que d'envoyer ou de soumettre. Gardez toutes ces choses à l'esprit. Je vais vous montrer quelques exemples visuels de ces ajouter sur les pages et comment vous pouvez les rendre intéressants et même drôle pour vos utilisateurs. C' est l'un des anciens exemples de codes d'erreur et de messages d'erreur. Vous pouvez voir que le type SN ne correspond pas, code d'erreur 12. Je ne sais jamais ce que cette- en fait le code d'erreur 12 signifie. Je ne peux pas corriger cette erreur du tout. En outre, vous pouvez voir ceci est un autre exemple. Ceci est un éditeur Windows de- vous pouvez voir ce fichier
realmonitor.exe et vous pouvez voir le code d'erreur est 1142. Je ne sais pas pourquoi ce code d'erreur s'est produit ou comment je peux le réparer. C' est un bon exemple. Vous avez peut-être vu cela sur Google Chrome, que s'il n'y a pas d'internet, vous pouvez jouer à ce jeu de dinosaures. C' est un message d'erreur un peu intéressant et très descriptif, incapable de se connecter à Internet. Ceci est un autre message d'erreur, pas de connexion Internet, mais il n'y a aucun moyen de le corriger. Il doit y en avoir, mais je suis comme essayer à nouveau, essayer à nouveau après cinq minutes, quelque chose comme ça. Les utilisateurs peuvent facilement le corriger. Maintenant, c'est un très mauvais exemple de code d'erreur ou de message d'erreur. n'y a aucune action que l'utilisateur peut entreprendre. Vous pouvez voir ici, je ne reçois aucun détail ou aucun détail exploitable à partir de cela. Nous n'avons pas pu répondre à vos demandes. Quelle était ma demande, je ne me souviens pas. Peut-être que j'ai essayé d'ouvrir une application ou peut-être j'ai essayé d'utiliser outil pour me connecter en ligne ou peut-être partager ma photo. Veuillez réessayer dans un instant. Il ne me dit pas pourquoi cette demande n'a pas pu être complétée. J' ai besoin de la raison pour laquelle c'est arrivé. C' est un autre exemple, mais ce n'est pas très clair. Maintenant, je vais vous montrer l'évolution du
message d'erreur 404 qui était très commun sur les sites Web en ligne, que cette page n'a pas été trouvé. Ce sont les anciens messages qui apparaissaient auparavant et ils ne sont pas exploitables. Vous ne pouvez pas savoir ce qu'ils sont et bien qu'il y ait une page d'accueil, vous pouvez revenir en arrière, mais vous ne pouvez pas savoir pourquoi cela s'est produit. Il y a beaucoup de grands exemples, laissez-moi vous montrer. Ceci est la page d'erreur airbnb 404 et vous pouvez voir ou entendre une très belle illustration graphique, pour le rendre un peu plus engageant et vous pouvez voir, nous ne pouvons pas trouver la page que vous cherchez. C' est essentiellement le retour principal ou l'erreur principale qui dit à l'utilisateur, explique l'utilisateur ce qui s'est passé. Maintenant, le code d'erreur c'est [inaudible] un peu ennuyeux. Ensuite, il y a peu d'autres liens utiles. Peut-être que tu as besoin de
ça, de ça ou de ça. Il guide l'utilisateur. Peut-être que vous êtes à la recherche de ces liens. Peut-être que tu veux rentrer à la maison, peut-être que tu veux fouiller. C' est ainsi que vous allez amener votre utilisateur à prendre des mesures. Ensuite, on en a un autre. Vous pouvez voir cela est appelé 404 Diagramme Venn et il montre deux zones. On a cassé quelque chose ou tu ne peux pas taper. C' est un autre. Bien qu'il soit très créatif, mais il n'a qu'une chose. On est là, s'il vous plaît, emmenez-moi à la page d'accueil. Ensuite, c'est un autre, il utilise une très belle animation de 404 page et un très drôle, vous pouvez dire titre très drôle. Cette page n'est jamais revenue d'un voyage
dans le désert d' Atacama, donc vous pourriez avoir besoin d'aller sur le site Web de la maison. C'est un autre. C' est très drôle. C'est ainsi que vous transformez votre déception utilisateur en un peu de plaisir et laissez-le utiliser votre site Web pendant un certain temps. Bonjour, c'est moi que vous cherchez, donc c'est très drôle et rentre à la maison Lionel, vous êtes ivre. C'est un autre. Assurez-vous que vous donnez deux choses sur n'importe quel problème. La première est que votre message d'erreur est compréhensible par votre utilisateur. L' utilisateur peut facilement le comprendre et l'action qu'il doit prendre, qu'il puisse le réparer ou qu'il puisse retourner à la page d'où il vient ou essayer autre chose, ou peut-être que sa connexion Internet est faite. Vous devez lui dire ce qui s'est passé et comment le réparer et aussi essayer d'utiliser des langages naturels, un code en direct. J' espère que vous avez compris comment vous allez utiliser langage
naturel au lieu de codes d'erreur et de messages d'erreur complexes. Si vous avez des questions, demandez-moi. Passons à la leçon suivante.
52. Exemples de formes naturelles ou versantes: Il y a une nouvelle plate-forme émergente qui s'appelle Natural Language Form. Et j'aime vraiment ça. Il est lié à notre utilisation d'un langage naturel autre que le code. Ceci est la forme du langage naturel et ils se convertissent mieux. La recherche montre qu'ils convertissent mieux comme 25 pour cent, certains où 12 pour cent, autres où 50 pour cent mieux que les formes traditionnelles. Ce qu'ils ont fait, c'est qu'ils utilisent un langage de type conversation dans un formulaire. « J'ai envie de manger indien, français, japonais, alors peu importe, dans notre restaurant traditionnel ou n'importe quoi pour que je puisse choisir. Peut-être que j'ai besoin d'un restaurant standard ou d'un restaurant romantique à 21h00 à Los Angeles pour que je puisse taper ici, « Los Angeles » et vous pouvez voir qu'il va remplir mon formulaire. Ceci est un très bel exemple d'utilisation du langage naturel dans l'entrée des formulaires. Un autre exemple qui est en direct en ce moment et qui est utilisé sur Oscar Consulting, qui est une compagnie d'assurance et vous pouvez voir ici comment ils vont vous guider vers leur code. Je vais entrer le code postal d'un de mes amis. C' est le code postal de New York. Je voudrais couvrir pour moi, mon conjoint et mes enfants. J' ai 55 ans et mon conjoint a 38 ans, et mes trois enfants ont 20, 18 et 14 ans. Ma famille gagne chaque année avec cinq personnes dans ma maison. Vous voyez, en remplissant ce formulaire, ils m'ont montré très peu de valeurs étape par étape pour diminuer ma charge cognitive. charge cognitive signifie le calcul mental et le processus mon esprit va faire en remplissant ou en faisant n'importe quel calcul ou en remplissant ce formulaire. Ce sont de très bons exemples. Je vais appuyer sur « Suivant ». Et vous pouvez voir ici qu'ils ont encore quelques choses comme. Je m'attends à voir un spécialiste. Je gère une maladie chronique et c'est tout et obtenir du code. Vous pouvez voir maintenant qu'ils préparent mon devis personnalisé. C' est un très bon exemple de ce langage naturel et façon dont ils utilisent et simplifient ce processus en introduisant une étape à la fois.
53. Google et Hotjar pour en découvrir plus plus aux utilisateurs: Si vous êtes un développeur, vous pouvez être un atout majeur pour votre équipe d'expérience utilisateur de l'équipe UX en leur donnant des analyses et des antécédents utilisateur à l'aide de Google Analytics. Si vous en savez beaucoup sur Google Analytics et que vous pouvez l'utiliser à votre avantage. C' est un excellent outil qui peut en dire beaucoup sur vos utilisateurs, leurs appareils, leurs systèmes d'exploitation, leur emplacement, et même le temps passé sur une page, ou quelles sont les pages, ou où dans le processus de paiement l'utilisateur a abandonné. Ces flux utilisateur et déposer sur différentes pages peuvent vous raconter une très grande histoire ou peut-être un problème derrière cette page ou un certain contrôle. Ou cela peut vous dire beaucoup que cette page a un problème et nous avons besoin de quelques corrections à ce sujet. Il existe d'autres outils qui vous montrent ce que les utilisateurs font réellement sur votre application ou sur votre site Web. Ces outils vont enregistrer l'activité de vos utilisateurs où ils cliquent à l'aide d'une vidéo. Ils vont vous montrer l'activité réelle de l'utilisateur où l'utilisateur a un problème sur une page spécifique, et vous pouvez utiliser cet outil à votre avantage. C' est comme un test de convivialité. Vous pouvez facilement voir ce que l'utilisateur ou où l'utilisateur a un problème sur votre site Web. Des outils tels que Hotjar et UX scamp, ils peuvent créer des vidéos et des cartes de chaleur de votre activité utilisateur. J' ai déjà utilisé Hotjar avec mon site Web [inaudible] et j'ai enregistré comme 30 ou 40 sessions vidéo, et c'est un excellent outil. Vous pouvez utiliser ce type d'outils avec Google Analytics pour révéler beaucoup d'histoire à votre équipe d'expérience utilisateur, et vous pouvez être un très bon membre de l'équipe d'expérience utilisateur si vous avez une bonne expérience de l'utilisation de ces outils. Laissez-moi vous montrer ces outils en action. C'est Hotjar. J' ai inscrit leur compte gratuit et vous pouvez voir ici nous avons beaucoup
d'outils d'analyse différents comme les cartes thermiques, les enregistrements, les entonnoirs, les formulaires. Vous pouvez même créer des sondages et des sondages, qui peuvent être implantés sur votre page principale ou toute autre page de votre site Web. Vous pouvez obtenir beaucoup de commentaires de vos utilisateurs ainsi que ce qu'ils font réellement. En ce moment, je l'ai encore activé, donc il va enregistrer 300 enregistrements avec mon paquet gratuit ici. Je me suis inscrit gratuitement. C' est mon paquet de base. Si vous voulez aller avec plus d'enregistrements, vous pouvez aller avec eux. Voyons quelques-unes des données précieuses que nous pouvons collecter auprès de Google Analytics. Vous pouvez voir ici, ce sont les données Google Analytics de mon cours de freelance, et ce sont tous les pays. Mes utilisateurs sont les États-Unis, Inde, les 10 premiers pays. Ensuite, comme vous pouvez le voir, ce sont les canaux supérieurs d'où
provient la plupart du trafic. La plus grande partie de notre trafic est une voie. Ensuite, nous avons des recherches de références, de courriels , de
réseaux sociaux et de produits organiques. Ce sont tous les différents navigateurs que mes utilisateurs ou mes étudiants utilisent. Vous pouvez voir Chrome est le plus utilisé, Firefox, Safari, et Edge. Ce sont les trois meilleurs navigateurs que je devrais chercher. J' ai besoin de voir ou de tester mon site Web ou application dans ces navigateurs avant de
le lancer ou peut-être que certains utilisateurs ont des problèmes dans ces navigateurs ou mon CSS ou HTML ne fonctionne pas. Mon site Web ne fonctionne pas correctement, donc je dois le réparer. Ensuite, il s'agit de flux utilisateur. Ici, il vous montre combien cela dépose pour quand l'utilisateur quitte une page ou le dépôt de cette page, vous pouvez voir ici nous avons les différents pays et leur flux utilisateur et comment ils ont interagi avec mes différentes pages et les URL. Je ne suis pas un expert en référencement, donc je ne sais pas grand-chose sur ces sessions et tout cela, mais cet outil est vraiment utile si vous savez comment l'utiliser. Ensuite, vous pouvez voir ici sont les appareils mobiles. Mes étudiants utilisent Apple, Samsung, Xiaomi, LG
et Huawei, donc ce sont tous les appareils mobiles qu'ils utilisent. J' ai besoin de tester, ou peut-être votre démo besoin de tester sur Apple et Samsung, leurs applications et leurs pages Web qu'ils chargent correctement et que les utilisateurs peuvent facilement les utiliser. Il s'agit d'utiliser l'analyse et l'analyse, l'enregistrement d'écran et les cartes thermiques pour les développeurs. Si vous êtes un développeur et que vous êtes bon avec ces outils, vous pouvez être un très bon atout et très bon joueur d'équipe et équipe d'expérience utilisateur. Si vous avez des questions, demandez-moi. Passons à la leçon suivante.
54. Timings et perception: Parlons de la synchronisation et du placement des
notifications ou de toute interaction que les utilisateurs font sur votre site Web. Nos esprits vont percevoir les choses ou les interactions avec précision lorsque leur timing est précis ou parfait. J' ai vu beaucoup de sites Web où ils montrent des barres de progression ou quand je clique sur un bouton, l'état ne change pas instantanément, ou parfois il a changé si instantanément ou si brusquement que je n'ai remarqué aucun changement. Il doit y avoir un certain timing et placement de ces notifications pour que l'esprit de l'utilisateur puisse facilement le percevoir. C' est très important si vous êtes un développeur, j'ai vu beaucoup de fois que j'ai cliqué sur le
bouton « Ajouter au panier » et rien ne s'est passé pendant une seconde, puis j'ai appuyé à nouveau et après un retard de deux ou trois secondes, je vérifié mon panier et deux articles ont été ajoutés deux fois. C' est vraiment frustrant, si vous faites quelque chose comme ça, vous mettez à jour votre carte en utilisant Ajax ou n'importe quel type de technologies sont que vous mettez à jour sans rafraîchir votre page, alors vous devez garder ces choses à l'esprit, vous devez équilibrer le moment et le placement de ces notifications. Vous connaissez déjà les commentaires, mais c'est le timing est très important, est
ce qu'on appelle le timing d'interaction sur la façon dont nos esprits vont percevoir le timing, le son et les animations. Si vous développez un site e-commerce et essayez de
montrer à vos utilisateurs des animations de chargement ou une fois qu'ils cliquent sur un bouton, vous pouvez modifier le texte du bouton « Acheter à nouveau ». Je sais que j'ai déjà ajouté cet article au panier, laissez-moi partager avec vous mon histoire. Une fois que j'ai testé une application Web et qu'elle était destinée à la filature, donc chaque fois que j'appuie sur « Enregistrer », rien ne s'est passé, je me suis demandé ce qui se passe avec moi ? Est-ce vraiment sauver quelque chose ou mon document n'est pas enregistré en ce moment, puis j'ai regardé dans l'un des coins et là j'ai vu un très petit message enregistré et il apparaissait et disparaissait avec beaucoup de vitesse, c'était comme apparaître et disparaissant dans comme 0,1 seconde ou peut-être moins que cela, donc je ne remarquais pas ce changement. Donc, si certains changements se produisent hors de ma vision périphérique, je pense que nous en avons parlé et que quelque chose change avec beaucoup de vitesse, vous ne le remarquerez pas du tout. Maintenant, voici quelques façons d'améliorer vos commentaires ou vos notifications, ou vos messages sur les éléments interactifs. La première chose est que si cela se passe très vite, vous devez montrer quelques retards dans vos messages de rétroaction ou vos interactions. Le temps standard est de 0,2 seconde donc pas moins 0,2 seconde ou n'essayez pas de l'augmenter à la moitié ou une seconde, car après une seconde, les utilisateurs vont s'inquiéter. Essayez d'utiliser une couleur très différente, une couleur très nette, et un endroit un peu différent ou une bordure autour elle pour montrer qu'elle est différente de toute la page. Vous pouvez également utiliser certaines animations telles que fondu, déplacer et sortir sur des boutons ou des barres d'état ou des notifications de messages d'information. Gardez à l'esprit que vous devez faire correspondre votre vitesse de perception mentale humaine et la vitesse de votre interaction ou animation afin que les utilisateurs puissent facilement percevoir ce qui se passe. La façon de montrer aux utilisateurs que quelque chose s'est passé ou quelque chose a changé est un point de notification rouge, vous l'avez vu beaucoup de temps dans les applications Web, ils l'utilisent beaucoup. C' est la nature humaine que si nous voyons quelque chose irrégulier ou quelque chose dérange nos yeux, nous avons essayé de le réparer. Donc c'est une démangeaison humaine, vous pouvez dire que c'est notre démangeaison que nous devons aller à ce point rouge et appuyer dessus. C' est un autre bouton que nous pouvons utiliser pour dire à nos utilisateurs que quelque chose a changé. Voici quelques exemples, ceci est mon forum sur Udemy, vous pouvez voir que j'ai un nouveau message et c'est un cercle sur mon image de profil, et j'ai un œil démange, chaque fois que j'ouvre ce tableau de bord d'instructeur, Je vais toujours à ces messages ou à tout ce qui est nouveau ici. Aussi lorsque vous chargez quelque chose comme vous avez vu Facebook ou même LinkedIn, ils ont des barres de chargement, ils montrent des données très par défaut ici, vous pouvez voir qu'il y a quelque chose de chargement sur cette zone. Donc, vous devez vous assurer que vous utilisez quelque chose comme ça, c'est une forme de rétroaction. Ceci est un autre exemple avec LinkedIn, il charge également quelques choses ici en haut et vous pouvez voir qu'ils ont données de support de place ou des barres de support de place que quelque chose va venir ou va recharger ici. Voici le tableau de bord SKILLSHARE, si j'essaie d'enregistrer et de publier mon cours sur le partage de compétences, vous pouvez voir ici, si je change quelque chose, cela montrera que l'épargne, mais pour moi, je pense qu'ils peuvent le rendre meilleur. Ils pourraient le montrer ici ou peut-être près de l'endroit où je fais mon travail, par
exemple, si je change ces termes d'anatomie typographique en bas, et cela me montre que j'économise ici, ils devraient avoir une animation peut-être déplacer des portes ou quelque chose, pour que mes yeux puissent facilement le capturer et ma vision périphérique peut sentir que quelque chose bouge et quelque chose change. Voici un autre exemple, ceci est mon tableau de bord Udemy pour mon flux de travail de Modern Web Design cours, vous pouvez voir ici est un autre modèle que vous pouvez voir ceci est la notification de commentaires, ceci est un autre que j'ai un message, nouveau message, et c'est ma nature humaine que je vais essayer de planer dessus. Si je vais à ce nouveau coupon, laissez-moi vous montrer un autre exemple, Créer un nouveau coupon, maintenant si je clique sur ce « Créer un coupon », vous verrez quelle interaction va se produire, j'ai cliqué sur celui-ci et j'attends, maintenant vous pouvez voir rien ne s'est passé jusqu'à maintenant, c'est très long, vous pouvez voir en quelque sorte l'application a été arrêtée et il y avait animation en haut que vous êtes Coupon a été créé et je l'ai vu en haut. Mais cette animation devrait être très rapide et il devrait vous montrer le Coupon et la barre de messages près de ce Coupon ou près de ma zone d'interaction, bien qu'ils aient utilisé une animation en haut pour attirer
mon attention sur le succès dans votre but, que faites-vous ? J' ai donc créé ce cours Coupon, cette animation devrait être très rapide, il devrait être dans 0,2, 0,3 secondes pas plus lent que cela. Il s'agissait de la notification et de leurs horaires, calendrier des
commentaires et de la façon dont vous pouvez utiliser toutes les missions et les retards dans vos commentaires. Si vous avez des questions à me poser, passons à la prochaine leçon.
55. Conception anticipatoire ou axée sur les données: Vous avez peut-être vu beaucoup de sites Web, d'applications Web ou d'applications mobiles que vous utilisez, où ils vous montrent des films suggérés, vos livres suggérés, vos goûts suggérés ou vos données de recherche suggérées, ou ils vous ont donné des suggestions très précises que vous vraiment comme. C' est ce qu'on appelle la conception anticipative, ou il va utiliser les données de cet utilisateur en fonction vos textes de recherche que vous écrivez dans le Google ou les films précédents que vous avez regardés, ils vont voir que quel est le comportement de cet utilisateur, son comportement de navigation, comportement
d'achat, comportement de recherche, et ils vont utiliser ces données pour vous suggérer ou prendre des décisions pour vous. C' est ce qu'on appelle la conception anticipative, et il utilise le pouvoir de la suggestion. Voici quelques exemples de conception anticipée ou la suggestion avec quelques données. Certaines personnes peuvent appeler cela la conception axée sur les données ou la prise de décision axée sur les données. Netflix suggère du contenu en fonction de vos habitudes de visionnage et de vos évaluations. Amazon suggère également des articles en fonction votre historique d'achats antérieurs ou des catégories que vous souhaitez normalement rechercher. Thermostat Nest, très populaire, il apprend vos habitudes de chauffage et de refroidissement et
ajuste automatiquement la température de votre maison ou de vos pièces selon vos préférences. C' est l'une de mes conceptions anticipatives préférées ou la conception pilotée par les données, les captures d'écran Gmail ,
et ils viennent d'introduire cette nouvelle fonctionnalité, lorsque vous essayez de répondre à l'un de vos e-mails, vous allez voir trois suggestions basées sur le texte utilisé dans ce courriel. Vous pouvez voir sur le côté gauche il dit merci, je vais le regarder, sonne bien, et je suis disponible. C' est l'e-mail d'un de mes clients. Dans le second, il est dit : « Qu'est-ce que c'est ? » « Que s'est-il passé ? » « Merci pour votre e-mail. » C' était l'avertissement d'utilisation du disque. Je pense qu'ils sont à la recherche du sujet de l'e-mail et aussi du texte à l'intérieur pour constituer ces réponses anticipées de conception. Ceux-ci sont vraiment cool, ils sont vraiment bons, ils utilisent vraiment les données et le comportement de l'utilisateur de tous ses e-mails avec ce client. Permettez-moi de vous montrer quelques exemples supplémentaires de conception anticipée. Maintenant, vous pouvez voir que c'est une capture d'écran de Netflix et ils ont compris que je vis au Pakistan, en Inde ou en Asie, donc ils ont juste changé
leur écran ou leur capture d'écran principale derrière leur page Web pour certains films, Les films indiens et certains des drames et certaines des choses
les plus populaires que nous voyons dans cette région. Ce sont quelques-uns des livres suggérés que vous pouvez voir d'Amazon, et je cherchais beaucoup de livres, j'ai acheté beaucoup de livres sur le lettrage au pinceau ces jours-ci, donc vous pouvez voir qu'ils me donnent deux des livres suggérés, et je pense que j'ai acheté l'un d'eux, Lettrage à la
main pour la relaxation, je suppose, et aussi vous pouvez voir qu'il ya la conception de service qui est basé sur mon opportunité utilisateur. Aussi, je suis à la recherche de livres de lecture rapide, j'ai acheté un ou deux, bien que je ne suis pas un très bon lecteur de vitesse. Certaines des suggestions plus que vous pouvez voir ici recommandé pour vous. C' est le thermostat Nest dont je parlais, et il va voir vos modèles de comportement et vos modèles d'utilisation hors leur appareil et va s'y adapter automatiquement en fonction de votre comportement et de vos préférences. Il s'agit d'une conception anticipée ou d'une conception basée sur les données. Si vous avez des questions, demandez-moi. Si je reçois des mises à jour, je vais faire d'autres conférences. Jusque-là, à vous voir. Prenez soin et au revoir.
56. Projet d'étude - Trouvez les problèmes UX dans l'application GPTools: Le moment est venu de faire un travail et cela va mettre à l'épreuve toutes vos compétences que vous avez acquises jusqu'à présent. Vous avez connu toute la facilité
d'utilisation, l'expérience utilisateur, les problèmes et les principes qui les sous-tendent. Il est maintenant temps que vous pouvez appliquer ces compétences et vous pouvez réellement trouver les problèmes d'expérience utilisateur dans n'importe quelle application. Je vais vous donner quatre écrans d'une application médicale appelée GP Tools. J' ai été chargé d'améliorer cela en leur donnant des fils filaires, mais je vais vous donner juste une tâche simple. Vous devez voir chaque écran, il y a quatre écrans, et vous devez trouver un problème d'expérience utilisateur, au moins un dans chaque écran. Donc total quatre problèmes que vous devez soumettre, et aussi avec eux, vous allez soumettre les solutions à eux. Je vais vous montrer le modèle. Vous pouvez utiliser ce modèle ou ce format pour spécifier la solution dans le problème, et avec tout cela, vous allez également mentionner quel principe de convivialité ou d'expérience utilisateur il enfreint. C' est une mission et je vais vous donner la solution dans la prochaine vidéo afin que vous devez attendre. Laissez-moi vous montrer ces quatre écrans. Ceci est l'écran de connexion que vous pouvez voir sur la gauche et le premier écran, et puis nous avons cet écran Enregistrer un nouveau compte. Ensuite, après que les médecins vont se connecter. médecins généralistes sont essentiellement des médecins en Grande-Bretagne, au Royaume-Uni, au Royaume-Uni, et quand ils vont se connecter à leur tableau de bord, c'est
ce qu'ils vont voir. C' est la barre de navigation en bas et tout le reste. Après cela, c'est un écran de plus, bien que cela ait comme 12 ou 15 écrans, mais je vais vous en donner seulement quatre. C' est l'écran d'entrée où ils vont taper sur leur activité d'évaluation que cette application était essentiellement pour l'évaluation des médecins. Il s'agit donc de la date de début , de la date de
fin, du temps passé, nombre de crédits d'apprentissage que vous réclamerez, et ainsi de suite. Donc, ce sont quatre écrans que vous allez
trouver la facilité d'utilisation et des problèmes UX dans ces écrans. Trouvez le problème et mentionnez la règle de convivialité ou principe
UX qu'il enfreint ou le problème qu'il peut créer pour vos utilisateurs, puis suggérez une solution pour cela. Donc, une ligne sera un problème, la seconde sera la solution. N' oubliez pas de mentionner le nom de l'écran comme l'écran de connexion, ainsi que le problème et la solution. Enregistrer écran, problème et solution. Similaire avec tous ces écrans. Donc c'est tout au sujet de cette mission, et je vais vous montrer la solution dans la prochaine vidéo. J' attends votre mission. Alors soumets-le. Je vais donc l'examiner et je vais vous montrer plus de suggestions pour améliorer vos compétences. Alors commençons.
57. SOLUTION d'étude CASE - Problèmes UX dans GPTOOLS: C' est le moment de la solution, voyons comment je vais aborder ces écrans pour vous les gars, alors commençons. Maintenant, d'abord, je vais aller à cet écran de registre. Chaque fois que quelqu'un va vous confier une mission ou une tâche, ne pensez jamais que ce sera le premier écran. L' écran d'enregistrement va être le premier où un utilisateur va interagir. J' ai d'abord besoin de m'inscrire avant d'aller à cette connexion. Je vais donner une chance à celui-là. La première chose est que choisir un nom d'utilisateur. La première chose est qu'ils ont comme cinq champs assez standard, mais je pense que le nom d'utilisateur et l'e-mail, ces deux sont contradictoires. La plupart des sites Web et la plupart des applications, ils utilisent juste l'adresse e-mail pour se connecter. Il vaut mieux qu'ils suppriment ce champ et déplacent cet e-mail ici. Il va également réduire la charge cognitive sur
l' utilisateur parce qu'il n'a pas besoin de
se souvenir de deux choses comme le nom d'utilisateur et son adresse e-mail. Ils peuvent facilement se souvenir, c'est notre mémoire de travail ou notre mémoire à long terme. Nous allons réduire la charge sur la mémoire S, la mémoire de l'utilisateur. Juste e-mail, alors nous n'avons pas besoin d'utiliser cet e-mail de confirmation car le compte va être créé par e-mail et vous n'avez pas besoin de vérifier celui-ci. Vous pouvez envoyer un e-mail et tester que cet e-mail existe vraiment ou non. Vous pouvez tester cela avec votre programmation ou vous envoyez un e-mail factice à ce compte, vous pouvez le vérifier au backend de cette application. n'avez pas besoin d'utiliser cinq entrées, vous pouvez les réduire à seulement trois ou deux. Aussi, vous pouvez voir ici mot de passe et confirmer mot de passe c'est aussi un supplément. Vous pouvez simplement utiliser mot de passe et vous pouvez donner une icône d'oeil ici ou un indice en dessous comme show password et quand l'utilisateur clique dessus,
il va montrer leur mot de passe. Ils n'ont pas besoin de se souvenir ou ils n'ont pas besoin de vérifier leur mot de passe encore et encore. Un bouton de plus que je conseille beaucoup et je me soucie
vraiment de cela est que lorsque l'utilisateur tape le mot de passe, montrez-leur le mot de passe réel pas les mocks statiques. Ceci est un modèle très unique, nouveau modèle que j'ai vu application Amazon l'utiliser. Vous pouvez simplement montrer leur mot de passe dans un obscur comme trois caractères que j'ai inventé en premier. Maintenant, venir à ce nom d'utilisateur et mot de passe. Ici, nous avons seulement deux écrans et nous allons le remplacer par e-mail et le mot de passe sera mot de passe. Une autre chose est que si quelque chose tourne mal, je devrais avoir un moyen de sortir de l'écran. Je ne vois aucune flèche, je retourne en arrière ou j'ai oublié votre mot de passe ou quelque chose comme ça. Si je suis coincé à l'écran, je vais rester coincé à l'écran pour toujours. Il doit toujours y avoir une partie pour revenir en arrière ou corriger mon problème. Ici, nous allons utiliser e-mail et oublié votre mot de passe, ce sont assez standard. Maintenant, je vais à l'écran suivant, ce sera le tableau de bord. Sur l'écran de tableau de bord, l'essentiel est que c'est l'année, il est déjà sélectionné, vous pouvez ajouter quelques informations à ce sujet comme l'année d'évaluation 2015 et 16. Ce texte, juste cette année, n'a pas beaucoup de sens. Peut-être que cela a du sens pour l'utilisateur, mais vous devez toujours penser que l'utilisateur le plus stupide ou l'utilisateur qui ne sait pas grand-chose sur applications ou les ordinateurs utilisateur, ils peuvent facilement comprendre ce que votre interface dit. Il s'agit des heures, des heures d'évaluation et des crédits. Ils peuvent également ajouter le rendre plus descriptif, quelles heures ces sont liées ou quelque chose comme ça. Maintenant, le principal problème ici que je vois est cette navigation, donc la navigation en bas ou les icônes du bas ici comme la maison, CPD, ce sont quatre sections ici. La section mise en évidence est très étrange que vous pouvez voir ici. Ici, nous avons la couleur bleue qui est tapissable donc cela montre quelques informations. Ensuite, nous avons ici cette couleur blanche qui est mélangée dans ce fond. Je ne suis pas sûr que celui-ci soit vraiment pressé. Assurez-vous que votre état pressé est et que vos boutons ressemblent à des boutons. En ce moment, cette zone bleue et cette zone bleue sont les mêmes. Je me demande si celui-ci est un bouton parce qu'il est en forme de bouton ou celui-ci est un bouton. C' est très déroutant, c'est notre principe de cohérence de conception. S' il s'agit d'une information, elle devrait ressembler à une information. S' il s'agit d'un bouton, il devrait ressembler à un bouton pressable ou à un menu ou à une barre de navigation. C' est tout à propos de celui-là. Maintenant, on va à l'écran. C' est l'écran d'entrée. Ici, nous avons la date de début et la date de fin. Celle-ci est facultative, c'est bien. La plupart du temps, lorsque nous entrons la date, elle varie d'une date à l'autre. Vous pouvez facilement utiliser une fenêtre contextuelle de calendrier ici. Donc, vous n'avez pas besoin de ces deux champs, il suffit de les supprimer et d'entrer ici, sélectionnez la date. L' utilisateur va sélectionner la date dans une plage de dates à partir d'un calendrier. Alors on a le temps. Vous pouvez ajouter ici quelques compteurs plus et moins. Un utilisateur peut cliquer sur le plus et ajouter des heures comme deux heures, trois heures. Aussi, vous pouvez ajouter ici une liste déroulante si les heures sont comme 4-5 heures. Vous ne pouvez pas ajouter de liste déroulante ici si les options sont supérieures à cinq. Vous n'avez pas besoin d'avoir une liste déroulante s'étendant sur tout l'écran. Un contrôle s'appelle pas à pas. Stepper, vous avez peut-être vu qu'il a des icônes plus et moins des deux côtés et cliquez sur « Appuyez » ou appuyez sur la touche va l'augmenter. Aussi dans les crédits, vous pouvez également mettre un peu pas à pas tarder. Stepper est ici, peut-être un compteur pas à pas ou quelque chose comme ça ou peut-être juste un champ où un utilisateur peut facilement entrer juste les chiffres. Vous ne voulez pas qu'ils entrent autre chose que des nombres. Une autre chose, c'est que si tu regardes par ici, laisse-moi zoomer. Ici, dans ce domaine et dans ce domaine, il
s'agit essentiellement de mon domaine d'entrée. Vous pouvez voir que cette zone de saisie
n'a aucune possibilité que je puisse entrer des informations ici ou il s'agit d'un champ de texte. Il doit ressembler à un champ de texte. Laissez-moi vous montrer un exemple. Ça doit avoir quelque chose comme ça dans une ombre. Quelque chose comme ça et encore une chose, juste un petit détail. Ça va avoir quelque chose comme ça, un curseur par ici, quelque chose comme ça. Un utilisateur peut savoir que cette zone, je vais taper quelque chose ici. C' est un problème très majeur avec cette application et j'ai mentionné cela dans les wireframes que votre application ne
montre pas à l'utilisateur que cette zone, vous devez taper quelque chose ici, vous devez entrer quelque chose ici. Vous pouvez voir un utilisateur confus si vous les masquez, s'il va cliquer ici sur cette zone, cette ligne bleue. Assurez-vous que vous avez des choses standard qui peuvent spécifier un utilisateur que cet écran ou cet élément offre cette fonction. Un utilisateur peut instantanément voir que ce sera un champ de saisie, je peux entrer quelque chose ici. Ce sont les deux principaux problèmes avec cet écran. Il y a une autre chose qu'il
n'y a pas de bouton Enregistrer ici qui est également manquant de toute façon. Mais ce sont les deux principaux ; un est que vous pouvez améliorer la zone d'état, ces
deux champs, vous pouvez les supprimer et juste utiliser un, ce calendrier ici. Ensuite, nous pouvons utiliser certains significateurs pour soutenir notre capacité que les utilisateurs peuvent savoir que cette zone, ils peuvent taper quelque chose ou ceci est une zone d'entrée. Les principes de base que nous avons améliorés ici sont la charge cognitive, nous réduisons la charge sur la mémoire, nous avons la mémoire de travail, comme vous pouvez le voir ici, en supprimant les champs. C' est aussi notre principal qui essaient de réduire le fardeau sur l'utilisateur ou les obstacles dans le chemin de la barrière de l'utilisateur à l'entrée. C' est le point d'entrée sur l'application. S' inscrire est le point d'entrée dont vous avez besoin pour le rendre facile car les utilisateurs peuvent facilement y accéder. Ensuite, nous avons ici le nom d'utilisateur, nous supprimons simplement celui-ci, le
remplacer par e-mail. Nous avons ajouté comment nous pouvons supprimer ou récupérer des erreurs. C' est notre leçon de conception pour les erreurs et vous devez ajouter quelque chose pour que les utilisateurs ne soient pas pris dans une boucle sans fin. Ici, nous avons quelque chose qui s'appelle boutons. Les attentes des utilisateurs. Si l'utilisateur attend un bouton, il devrait ressembler à un bouton. Votre application doit toujours faire la distinction entre les actions principales ou secondaires ou le bouton principal, les boutons
secondaires ou les informations. Si c'est juste une information, ça devrait ressembler à une information. Ensuite, sur cet écran, nous avons également supprimé deux champs en un et nous avons fait un champ, c'est la charge cognitive ou la mémoire de travail. Nous avons supprimé la charge sur l'activité physique et l'activité mentale de l'utilisateur. Ils ont juste besoin d'appuyer une fois et de sélectionner une date, c'est tout. Alors, ici, nous avons un peu d'argent. Nous utilisons quelques significateurs pour prononcer ou rendre notre prix
apparente afin qu'un utilisateur puisse voir que cette action est possible avec cet élément, afin qu'il puisse entrer des entrées ici. C' est une solution à ces quatre écrans, j'espère que vous pourriez avoir trouvé
plus d' idées et j'espère que vous avez apprécié cet exercice ou cette étude de cas. Ce sont les vrais écrans d'une application que j'ai améliorée et finalement vous
leur donnerez les filaires améliorés de celui-ci parce qu'ils sont plus faciles à générer. J' ai utilisé la maquette de Balsamiq pour ça et c'est tout. Je vais créer une tâche de plus bientôt, jusque-là profiter de cela et j'espère que vous avez beaucoup appris.
58. Demande pour apprenants → Introduction en architecture d'information: Vous avez peut-être entendu le terme « architecture de l'information ». Beaucoup de gens, ils sont curieux à ce sujet. Ils veulent savoir ce qu'est l'architecture de l'information. Maintenant, l'architecture d'information est essentiellement la façon dont votre utilisateur va trouver des informations spécifiques sur votre site Web ou votre application mobile. Si quelqu'un cherche un produit spécifique, je cherche un appareil photo sur Amazon ou Walmart. Toute la partie que je vais prendre de la recherche, puis de la
recherche des résultats, puis de filtrer ces résultats vers la caméra spécifique dont j'ai besoin est tout au sujet de l'architecture de l'information. C' est ainsi que vous avez construit toute l'architecture d'information de votre site web, toute
la maison d'information de votre site web ou application mobile. Maintenant, vous pouvez créer des catégories, des
sous-catégories et la façon dont vos pages sont liées entre elles. Vous allez lier vos pages comment votre piste de navigation va conduire à ce produit. Si l'utilisateur veut revenir en arrière, s'il peut revenir à la première page ou la page de retour de la page dès maintenant d'ici. Toutes ces questions vont recevoir une réponse pendant que vous concevez une architecture d'information. Maintenant, comment vous pouvez concevoir cette architecture d'informations. Il y a des tests très simples. Je ne vais pas aller trop en détail, mais un test simple est que vous laissez votre utilisateur écrire toutes les catégories du site Web. Par exemple, si votre site Web porte sur des bijoux, vous écrivez un bracelet et des bagues ou quelque chose comme ça. Peut-être que votre utilisateur est à la recherche d'une catégorie comme les ventes de Noël ou les ventes d'été, quelque chose comme ça. Vous devez tester vos utilisateurs pour cela. Vous devez laisser vos utilisateurs essayer vos quelques croquis ou quelques prototypes, des prototypes simples. Ce que vous allez faire, c'est simplement créer quelques croquis à partir de vos premières pages votre navigation
et de vos sous-catégories hors de votre site web et de votre barre de recherche. Laissez vos utilisateurs essayer de trouver quelque chose et voir s'il va utiliser la barre de
recherche ou s'il essaie de trouver une catégorie spécifique. Par exemple, si je cherche un appareil photo qui a un appareil photo reflex numérique, et je ne connais pas le terme, que les appareils reflex numériques sont spéciaux ou quelque chose comme ça. Je sais juste que j'ai besoin d'un appareil photo numérique. Plutôt que d'obtenir une très grande catégorie de caméras reflex numériques, que le terme, je ne sais pas. Vous pouvez simplement écrire des appareils photo ou des appareils photo numériques. Si quelqu'un essaie de cliquer dessus, puis il y a une navigation déroulante. Avec chaque sous-catégorie comme les appareils photo numériques, appareils photo
sans miroir, vous affichez l'image de cette catégorie. L' utilisateur peut immédiatement reconnaître que cette catégorie, ou je suis à la recherche de cet appareil photo. C' est l'image. Oui, j'ai vu cette image. C' est ainsi que vous pouvez améliorer l'architecture de l'information. Si vous avez essayé d'acheter sur Amazon ou Walmart, vous pouvez voir que leurs résultats de recherche lorsque vous essayez de taper quelque chose ou de trouver quelque chose, leurs résultats de recherche sont très précis. Même si vous avez mal tapé l'orthographe, ils vont être très bons, par exemple lorsque vous ouvrez la page des résultats de recherche est revenue. Puis un processus de filtration. Il s'agit du prochain processus dans l'architecture de l'information. Vous voulez les organiser avec le prix bas à haut ou haut à bas. Tout cela est à l'intérieur de l'architecture de l'information. Que vous souhaitiez les classer par classement. Vous voulez tous les produits de notation cinq étoiles. Cela fait également partie de l'architecture d'information
que votre utilisateur va trouver et filtrer les informations dont il a vraiment besoin. Je vais montrer beaucoup d'exemples dans la prochaine leçon. Restez avec moi à la leçon suivante pour voir d'autres exemples sur l'architecture de l'information. Je vais vous montrer différentes parties et différentes portions. Simple, si vous voulez améliorer l'architecture d'information des sites Web, vous devez vous asseoir avec vos utilisateurs et essayer de leur donner des tâches. Les tests de convivialité vont révéler beaucoup que quels sont les problèmes avec vos informations. Vous pouvez également voir quels blocs d'information sont nécessaires. Par exemple, lorsque vous voyez une page de produit, vous voyez normalement une image ou une vidéo du produit, puis il est nommé sous-titre. Et puis toutes les différentes spécifications de ce produit, puis les commentaires. Ce que l'utilisateur cherche, s'il est vraiment à la recherche des commentaires, il va d'abord lire les commentaires. Vous allez déplacer les avis en haut de votre hiérarchie d'informations. Vous allez construire que cette information est plus importante que celle-ci, que celle-ci. Cela fait également partie de l'architecture de l'information. J' espère que vous avez beaucoup appris sur l'architecture de l'information. Je vais vous montrer quatre exemples dans la prochaine leçon. Passons à la leçon suivante.
59. Exemples d'architecture d'information (Meilleures pratiques): Maintenant, je vais vous montrer quelques-unes des meilleures pratiques et quelques bons exemples d'architecture de l' information et comment l'information est conçue sur différents sites Web et barre de navigation, sous-catégories de barres de navigation, d'accord ? Le premier site que je vais vous montrer est cet Adorama. Vous pouvez voir en haut que nous avons différentes icônes et ensuite nous avons des sous-menus avec ça, ok ? Boutique, il y a magasin, maison, loyer, usagé, affaires, imprimer et apprendre, ok ? C' est je pense que la navigation universelle. Il va rester ici, tout ce que j'ai cherché dans cette zone. Cette zone va être changée en bas. La navigation supérieure va rester ici, d'accord ? Ces informations sont vraiment nécessaires. Ils devraient être en haut de chaque page comme ces liens d'aide, ce numéro de téléphone, d'accord ? Des choses comme ça. Alors je pense que dans la leçon précédente, je vous ai montré que des offres. Vous pouvez voir ici dans le haut qu'ils ont des offres puis ils ont à nouveau ici offres en vedette, donc cela signifie que ces utilisateurs sont la plupart du temps à la recherche d'offres. Ok, donc c'est pour ça qu'ils ont montré de l'importance à ça. Il y a deux liens vers leurs offres. Ensuite, nous avons ici magasin par département. Il est un peu mis en évidence. Il est dans un peu plus de couleur bleu foncé et si vous passez la souris dessus, vous pouvez voir qu'il existe différentes catégories d'appareils photo, d'
objectifs et autres. Laisse-moi passer à une catégorie, les caméras et nous avons ici. Ceci est une autre forme d'architecture d'information, qui montre ces images avec différentes catégories que vous pouvez voir ici caméras sans miroir, appareils photo reflex numériques, appareils photo numériques point et shoot, accessoires, HSDSLR. Ce sont toutes les différentes catégories. En outre, ils montrent les mêmes catégories ici sur la gauche. Ensuite, nous avons plus de filtration comme
les marques en vedette et ensuite nous avons ces best-sellers, ok ? C' est ainsi que fonctionne ce site Web. Maintenant, si nous allons sur Amazon, il a un modèle de travail un peu différent, ok ? Il y a beaucoup de bonne filtration ici, ok ? Si je vais aux appareils photo reflex numériques ou quelque chose comme ça. Vous pouvez voir que j'ai mal tapé, mal orthographié cet appareil photo reflex numérique, mais ils vont me montrer les résultats pour appareil photo reflex numérique. Si je vais à ce reflex numérique, vous pouvez voir ici, sont des résultats et maintenant vous pouvez voir sur la gauche il y a beaucoup de filtration ici. Cela fait également partie de l'architecture de l'information. Appareil photo et photos, ce sont différentes catégories, d'accord ? Vous pouvez voir les 31 départements. Alors ça me montre, tu veux le transport international ? Je peux affiner ma recherche par ces marques d'expédition gratuite. Je peux simplement cliquer, par exemple, si je veux juste un appareil photo Canon, je peux cliquer ici et ce sont toutes les caméras Canon. Puis zoom optique, donc il y a beaucoup de personnalisations pour ma recherche et pourquoi ils sont ici parce que
la plupart des utilisateurs ne vont pas chercher 2 000 enregistrements ici, ok ? Vous pouvez voir ici encore j'ai 20 pages, donc plus de 200 dossiers ici pour différents produits. Si je veux les abaisser, je veux être ici juste cinq étoiles, quatre étoiles et plus, donc il me reste encore 20 pages, ok ? Allons à autre chose. Livraison gratuite par Amazon. Je filtrais mes résultats. Vous pouvez voir ici encore il y a 20 pages donc vous pouvez
aller plus loin par ça comme ça et ça va vous montrer moins de pages, ok ? Je ne sais pas combien de résultats ils ont retournés. Ok, donc ce sont les résultats en haut, un comme 16 000 disques. Il y a trop de produits là-dessus, donc ils ont besoin de ces filtres, ok ? Ensuite, nous avons ceci, vous pouvez voir si nous allons sur ce site, Walmart, vous pouvez voir que c'est notre navigation supérieure qui va rester ici à tout moment. Maintenant, comment ils vont nommer ces éléments ici, comme réorganiser les articles, connecter, ils vont tester
leurs utilisateurs en nommant ces liens et quels liens devraient être là, ok ? Vous pouvez voir ici qu'ils ont peu de liens supplémentaires. Ok, donc si je vais dans cette catégorie de jouets, ils montrent aussi cette catégorie avec une image. C' est vraiment cool. J'aime vraiment ça. Il est très facilement reconnaissable. Vous pouvez voir des motifs et des images. Vous pouvez les reconnaître facilement, les images instantanément, d'accord ? Vous pouvez voir ce que ici nouveau. Ensuite, nous avons des jouets et sur le côté gauche vous pouvez voir à nouveau nous avons une filtration, ok ? Par âge, par sexe et si je vais à ce 8 à 11 ans. Il ne me montre pas combien de résultats il a retourné, mais il change la page pour moi, ok ? Ensuite, nous avons plus, ces méga liste déroulante, Ces sont appelés Mega drop downs. Vous pouvez voir par ici. Ils ont des images, des catégories, des archives donc ce sont quatre très gros sites, ok ? Mais je pense que la plupart de ces sites comme Amazon et jouets, ils ne l'utilisent pas parce que leur moteur de recherche ou leur barre de recherche ou leurs résultats de recherche est très précis. Ok, maintenant un autre site Web, un exemple très simple, c'est le site Intel et vous pouvez voir qu'ils ont très peu de liens ici, donc il est plus facile de choisir. Le soutien est très important. J' ai entendu une histoire selon laquelle ils ont effectué des tests de convivialité UX sur leurs clients et ont constaté que le support sur Intel était utilisé la plupart du temps donc ils l'ont fait en haut de la navigation, ok ? Ensuite, nous avons des produits. Si nous allons aux produits, vous pouvez voir ici, nous avons différents produits, processeurs et encore vous pouvez voir il ya des images avec différentes catégories. C' est une très belle navigation. J'aime vraiment ça. Ok, donc je peux revenir en arrière et par exemple, si je veux aller à un réseau et E/S, il y a différents liens. Ok, donc c'est ce qu'on appelle des liens contextuels. Je suis sur cette page, processeurs
i7 et vous pouvez voir lié à cet article que j'ai sélectionné, il y a quelques autres liens ; 1, 2, 3, 4, 5, 6 qui sont tous au sujet de ce produit. C' est ce qu'on appelle la navigation contextuelle, OK ? Vous pouvez voir par ici. Ok, maintenant je vais vous montrer d'autres méga menus ici. Ils sont utilisés dans Magento. Il s'agit d'une autre solution de commerce électronique. Vous pouvez voir par ici. Images avec quelques liens même quelques vidéos ici. Ok, donc c'est un autre. C' est une belle que vous pouvez voir ici nous avons des icônes. Ils sont également facilement reconnaissables
plutôt que de trouver le texte, mais ils devraient être très bons. Ces icônes devraient être très bonnes afin qu'elles puissent être facilement reconnaissables ou vous pouvez instantanément voir que ces icônes signifie une chambre à coucher. Vous pouvez en voir un ici. Cette page que je vais partager avec vous, il y a beaucoup de méga menu ici. Ok, donc c'est un très beau site web et j'adore leur navigation. Laisse-moi te montrer, donc si je tiens à la cuisine, tu peux voir des éviers de cuisine, des
poubelles, des robinets de bar. C' est un très bon exemple de
la façon dont l'architecture de l'information devrait être conçue parce que ces images sont facilement reconnaissables, elles ont moins de catégories, 1, 2, 3, 4-5 6. Pas plus de sept objets ici. C' est une grande utilisation de la façon dont nous sommes limités dans notre mémoire de travail afin que nous puissions facilement les scanner, ok ? C' est un meilleur exemple que j'ai vu. C' est built.com et j'aime vraiment ça. Ok, donc un autre, vous pouvez voir qu'il y a de grandes icônes, des icônes simples, espaces de vie de la
chambre à coucher. C' est sliderobes.co.uk. Ceci est un excellent exemple de ce menu de navigation. Ok, donc ce sont tous des exemples d'architecture d'information. Maintenant, je vais vous montrer que c'est ce qu'on appelle le tri des cartes. C' est un test simple. Vous mettez simplement vos liens, les noms de votre site Web, sur un papier comme celui-ci et vous dites à votre client ou à votre utilisateur que vous testez pour sélectionner ou rechercher quelque chose, d'accord ? S' il aime ça, je voulais vraiment voir les fantaisistes. Ce site était à propos de Frox. Je faisais la recherche sur l'un des utilisateurs et vous pouvez voir sur la gauche ici, j'ai écrit la collection d'été, donc ce qui s'est passé est que mon utilisateur, elle était une fille. Elle recherchait une collection d'été
plutôt que des robes de fête ou des robes décontractées ou des grenouilles fantaisie. En dehors du parti et des fantaisistes, ils étaient aussi presque le même libellé, alors elle a choisi celui-ci. Elle a dit que les fous fantaisie ont plus de sens que de la robe de fête. Aussi, je lui ai montré à chercher différentes grenouilles et robes qu'elle aime. Ok, donc elle a essayé d'écrire des robes de barbie, ce qui n'était dans aucune de mes catégories. J' avais des robes Disney ou des robes de princesse, mais pas des robes de barbie. C' est une catégorie que je pensais que je devrais faire sur mon site, d'accord ? Ça va être dans mon prochain cours. Toutes ces recherches et comment faire ce tri de carte et différents prototypage, tests et convivialité et tous ces trucs. Il va être dans mon prochain cours où je vais créer une simple startup e-commerce de robes fantaisie ou toute autre idée comme ça. J' espère que vous avez apprécié cette leçon. Passons à la leçon suivante.
60. Test d'usabilité 5 seconde: Maintenant, nous allons faire un petit exercice qui s'appelle test de cinq secondes. Ce que vous allez faire est : c'est un test de convivialité, vous avez besoin d'une personne ou peut-être deux personnes de votre famille ou amis et ce que nous allons faire est juste de leur montrer la première page ou les premières pages de votre site Web ou application mobile. Pour eux, ce n'est que pour cinq secondes. Affichez cette page ou cet écran d'application pendant cinq secondes, puis posez-leur quelques questions après cela. Alors cachez cet écran et demandez-leur, que vous vous souvenez de ce site web ? Que pensez-vous que ce site fait ? Qu' est-ce que ce site web est ? Des questions comme, qu'aimez-vous de ce site web ? Qu' est-ce que vous détestez dans le design ? Si ce site Web concerne un site de commerce électronique ou s'il s'agit d'un site de don, vous pouvez leur poser des questions comme, souhaitez-vous faire un don via ce site Web ? La première question est de savoir ce qu'ils se souviennent de ce site, ce que fait ce site est la question de base. C' est la question principale de ce critère de cinq secondes. Le second est de vérifier leur confiance à ce sujet et la crédibilité de votre site Web ou application. Donc, la deuxième question est de savoir si vous souhaitez faire cette tâche sur ce site Web. C' est un test très basique de cinq secondes alors faisons-le. J' ai hâte de voir quelques exemples. Vous pouvez les poster dans les questions et vos conclusions. J' aimerais voir les conclusions. Faites ce test rapide de cinq secondes avec l'un de vos parents ou amis ou toute personne qui est assis autour de vous pour voir quelles sont leurs premières impressions et ce qu'ils se souviennent de votre application, site Web, service ou produit. C' est un test très basique. Vous pouvez le faire à votre maison ou dans le café. J' espère que vous avez beaucoup appris et que vous essaieriez de faire ce test de cinq secondes encore et encore. À bientôt dans une autre leçon.
61. Qu'est- Introduction: Aujourd'hui, nous allons parler d'Agile UX et Lean UX. Maintenant, quels sont ces termes ? Ils sont essentiellement utilisés dans les maisons de logiciels et où développement de
logiciels est le but principal. Ils doivent développer quelque chose qui fonctionne rapidement ou très rapidement. Cette technique est utilisée pour créer des prototypes de travail ou livrables de travail pour le client dès le début afin qu'il puisse le tester tôt dans la situation réelle. Ce qu'ils font, c'est qu'ils vont écrémer la partie de planification où vous allez concevoir différentes personnalités, ou vous allez interviewer vos utilisateurs. Ce qu'ils font, c'est qu'ils impliquent le client. Plutôt que l'utilisateur, ils impliquent une personne qui a plus de connaissances sur les utilisateurs. Ce client va écrire différentes fonctionnalités et différentes histoires client. Cela va se produire dans mon application. Une personne va le faire et le faire. Ensuite, les développeurs vont extraire les fonctionnalités et les fonctionnalités de ces récits clients. Ces histoires de clients sont essentiellement la base de leur planification. Ils vont beaucoup éplucher la partie planification. À partir de ces récits clients, ils vont créer une liste de fonctionnalités ou des fonctionnalités qu'ils veulent, et ils vont en discuter avec le client. Ils vont donner la priorité aux différentes fonctionnalités et fonctionnalités en fonction de ce qui est le plus nécessaire. En outre, ils vont évaluer le temps et le coût de développement de chaque fonctionnalité. Ils vont les classer avec difficulté et temps. Ce qu'ils vont faire, c'est qu'ils vont créer un produit minime viable qui s'appelle MVP. Vous avez peut-être entendu, en seulement sept jours ou dix jours. La plupart du temps, ils vont utiliser des sprints. Le sprint est essentiellement leur cycle de développement sonore d'une semaine et ils vont rapidement développer ce logiciel. Ensuite, ils vont le donner au client. Ensuite, le client va leur donner
les commentaires et ils vont utiliser ces commentaires pour itérer à nouveau. Ce qu'ils font, c'est qu'ils fonctionnent fonction par fonction ou fonction par fonction sur ce produit. Ensuite, ils combinent ces fonctionnalités pour créer un gros produit. C' est tout comme vous planifiez une maison dans la conception de l'expérience utilisateur classique, vous allez d'abord planifier, vous allez créer un plan de cette maison. Ensuite, vous allez planifier la structure et tout. Mais dans l'UX Agile, ils ne vont pas créer de plans ou de structures. Ils vont juste commencer à construire une pièce. Ils vont construire des pièces différentes rapidement. Tu veux la cuisine ? C'est la cuisine. Le client dit, « Ok, je veux ça ici ou ici » Ils le changent, et ils le finalisent et libèrent cette cuisine. Ensuite, ils vont créer d'autres pièces, et ils vont les combiner pour faire toute une maison. C' est ainsi que l'expérience utilisateur conventionnelle et Agile UX ou Lean UX ils diffèrent. Le Lean UX ou Agile UX qu'ils préconisent qu' ils ne devraient pas perdre leur temps dans la documentation de conception. Ils veulent un produit tangible ou un produit de travail dans les semaines ou peut-être 10 jours. Je travaillais pour une maison de logiciels au Royaume-Uni. Ils construisaient différents jeux, et ce qu'ils avaient, ils utilisaient Agile UX. Je viens de planifier leurs filaires. Ce qu'ils ont fait, c'est qu'ils ont pris ces filaires, et ils l'ont donné à leurs développeurs, et ils avaient le moteur pour exécuter ce jeu déjà compilé. Ils créent juste une interface factice, et ils le lancent juste. C' est ainsi que ces entreprises Agile UX, ils implémentent dans leurs maisons de logiciels. Leur cycle ou leur cycle de développement est très rapide. Maintenant, pourquoi avons-nous besoin de cette technologie Agile UX, et les choses évoluent rapidement ? Par exemple, si vous recherchez un jeu pendant trois mois ou six mois,
vous avez pris six mois pour interviewer les utilisateurs et tout,
et soudainement la nouvelle version d'iOS ou une nouvelle version de ce genre de jeu a été lancée, ou les gens ont déplacé leur attention sur ce point. Tous ceux-là. Cette recherche ou ces entrevues vont être un gaspillage. Ce qu'ils ont fait, c'est qu'ils continuent itérer le produit et le tester avec les utilisateurs séparément et essayer de l'itérer et essayer d'atteindre l'objectif du client et de l'utilisateur en un minimum de temps. C' est ainsi que cette UX conventionnelle et Agile UX ils sont différents. Permettez-moi de vous dire quelques-uns des problèmes avec Agile UX. Agile UX, comme vous le savez qu'ils commencent à construire rapidement, il y aura
donc des incohérences de conception parce qu'ils ne fonctionnent pas sur la conception ou l'interface de cette application. Ils commencent juste à le construire. Il y aura des incohérences de conception. Ensuite, le deuxième problème sera la collaboration en équipe. Tous les clients, les utilisateurs et leur département marketing, tout le monde ou un pour cent de ce département devraient être présents lorsque l'équipe fait le sprint. Le Sprint de sept jours, j'ai lu le livre. C' est un très bon livre Sprint. Vous pouvez dire qu'ils vont utiliser ces sept jours pour développer un prototype ou un prototype factice ou un prototype fonctionnel de ce logiciel en utilisant les connaissances du client, du service marketing et de toutes les personnes qui sont les parties prenantes de ce processus d'UX. Ils vont être dans une pièce. C' est très important. Ils devraient être ensemble toute la semaine. Si votre équipe est répartie dans le monde entier, vous ne pouvez pas utiliser Agile UX aussi bien. Ce sont différents problèmes qui sont liés à cet UX Agile. J' espère que vous avez beaucoup appris. Je pense que cette conférence est déjà longue. Je te le laisserai. Si vous avez des questions, demandez-moi. Passons à la leçon suivante.