Introduction au design UX : Principes d'utilisabilité pour les designers UX/UI (+Figma Wireframe Exercise)

1. Promo: [MUSIQUE] Aujourd'hui, nous allons en apprendre davantage sur les principes de convivialité. Dans ce cours, je combine exemples conceptuels et réels pour m'assurer que vous pouvez les appliquer immédiatement à vos conceptions et à vos filaires. Nous découvrirons pourquoi des références réelles sont à la base de votre configuration, quels sont les modèles mentaux et comment les créer. Je vais vous présenter des principes clés comme Jacobs Law, Hicks Law, et je vous dirai pourquoi quatre est le numéro magique. Nous découvrirons la cohérence, état du système et les raisons pour lesquelles le désencombrement est essentiel. Je vais vous montrer des modèles de numérisation courants qui porteront votre conception à un autre niveau. Enfin, nous aborderons l'un des sujets les plus importants, mais souvent négligés la conception UX, la prévention des erreurs et la gestion des erreurs, afin de garantir que votre expérience utilisateur fonctionne sans problème. En fin de compte, je vous dis le petit secret qui explique pourquoi les médias sociaux sont si addictifs. Ce cours est fait pour vous si vous êtes un débutant ou un concepteur expérimenté et que vous souhaitez approfondir vos compétences UX. Il s'agit d'un cours de molearning.io. 2. Démystifier : Qu'est-: Veuillez noter qu'il s' agit d'un cours en deux parties. Par conséquent, vous pouvez soit regarder la partie sur les principes UX, soit celle sur les principes de l'interface utilisateur, idéalement vous combinez les deux. Quoi qu'il en soit, je veux m' assurer que vous êtes très clair sur les deux termes différents et ce que signifie les combiner. Une fois que vous commencerez à plonger plus profondément dans le monde de l'UX/UI, vous remarquerez qu' il y a beaucoup de bruit et de discussions autour de ces termes. Ce qu'ils incluent exactement, que l'UX et l'interface utilisateur doivent ou non être combinées en un seul terme. Permettez-moi de faire la lumière là-dessus de mon point de vue et de mon expérience. Sans aucun doute, le design UX est l'endroit où vous commencerez le voyage. Que comprend la conception UX ? En bref, vous allez essayer de comprendre les schémas généraux, le comportement et les attentes. Tout cela pour créer une structure globale et un ordre de fonctionnement du produit. En conséquence, vous avez généralement une sorte de squelette et une forme de cadres filaires et d' organigrammes qui décrivent un produit ou une fonctionnalité que vous suggérez. Une autre tâche très importante de la conception UX consiste à tester et à itérer tout au long du cycle de vie d'un produit. n'y a jamais de produits finis en ligne. Alors que l'expérience utilisateur, comme le nom l'indique, tente d'améliorer l' expérience globale de l'utilisateur, conception de l'interface utilisateur traite des éléments de mise en page réels. Maintenant, le diagramme de flux et les cadres filaires précédemment conçus prennent vie. Un bon concepteur d'interface utilisateur a généralement une excellente idée de ce qui se passe pendant le processus UX et vice versa. Au cours du processus d'interface utilisateur, vous définissez ensuite les guides de style, la couleur, typographie, les composants et la mise en page générale de toutes les conceptions réactives. Vous allez probablement créer un prototype qui sera testé, c'est là que vous reconnectez à la conception UX. Tout comme nous travaillons main dans la main de l'UX à l'interface utilisateur, vous devrez faire de même de l'interface utilisateur au développement. En ce qui concerne le développement, vous entendrez parler de deux grandes parties. Développement frontal, où CSS et HTML, appelés balisages, sont écrits, et c'est là que l'interface que nous voyons est créée. C'est ce qui nous intéresse en tant que concepteurs d'interface utilisateur. Ensuite, il y a ce que l'on appelle le back-end. C'est ici que le code est écrit. Cela peut être JavaScript, Java, Python ou n'importe quel autre langage. Cela ne nous dérange pas vraiment en tant que designers. C'est là que se déroule toute la logique derrière les coulisses. Nous, concepteurs d'interface utilisateur, avons rarement beaucoup à voir là-dedans. front-end et le back-end sont évidemment connectés et il peut y avoir frameworks qui traitent de front-end comme ReactJS. Mais tout cela peut être laissé en toute sécurité à l'équipe de développement. Vous n'avez pas besoin de coder vous-même. Vous devez cependant comprendre les exigences techniques et les principes de base de la conception frontale en tant que concepteur d'interface utilisateur. Cela vous aidera à configurer correctement vos fichiers et vos conceptions . Désormais, dans une grande entreprise ou un projet chargé, vous pouvez simplement traiter de la conception de l'interface utilisateur. Vous pouvez simplement configurer des designs dans Figma et c'est tout. Cependant, vous aurez toujours des chevauchements avec la conception UX ainsi que le développement et vous devez connaître vos bases. Vous pouvez également travailler en tant que concepteur UX uniquement. Dans ce cas, vous n'effectuerez probablement aucun travail de conception, mais vous serez occupé par la recherche, stratégie et les tests, ainsi que la définition de nouvelles fonctionnalités. Toutefois, vous devez toujours savoir comment les décisions de conception d' interface auront impact et une influence sur l'expérience utilisateur. Si vous travaillez dans des recherches approfondies sur les utilisateurs, vous pouvez simplement le faire en fait, mais généralement vous aurez tellement de chance et dire bonjour au designer de temps en temps. Dans certains cas, cependant, en particulier dans les petites entreprises ou les projets indépendants, vous pouvez porter de nombreux chapeaux. Lorsque nous parlons de conception UX/UI, c'est généralement ce type de zone que vous voyez surligner ici. Vous commencerez probablement par des recherches, la mise en place de personas et la configuration de vos propres filaires. Vous allez ensuite traduire ces filaires en conception et les remettre au développement. La plupart des concepteurs UX/UI ont tendance à perdre un peu la partie approfondie de la conception UX. C'est vrai. Mais ce n' est pas grave dans les petits projets simples. C'est également le domaine que je vais aborder pendant ces deux cours. Veuillez noter que la recherche UX approfondie ne fait pas partie de ce cours. Il est vrai que dans certaines offres d'emploi, le terme UX et UI sont souvent confus. Vous pouvez voir une conception UX annoncée, mais ils vous demandent de configurer n'importe quoi, des filaires à la gestion des fichiers finis. En cas de doute, suffit de dessiner ce diagramme simple ici sur une feuille de papier, montrer à votre client ou de votre employé potentiel où vous opérez et assurez-vous que c' est le domaine qu'il recherche également, et pas seulement un mot à la mode qu'ils utilisaient. Aussi, soyons honnêtes, ce n'est généralement pas un processus simple où les choses sont transmises. De plus, dans la plupart des entreprises, ils n'ont même pas l'intention de le faire. Ils feront toujours beaucoup de va-et-vient et beaucoup de discussions. C'est en fait une bonne chose car ce n'est que lorsque l'UX, interface utilisateur et le développement fonctionnent main dans la main, très bons produits prennent vie. N'écoutez pas les gardiens. Trouvez votre passion et profitez du chevauchement et de l'apprentissage des différents domaines du design numérique. 3. Introduction: Aujourd'hui, nous examinerons les principes clés de conception UX d'une manière très pratique afin que vous puissiez les utiliser immédiatement sur votre filaire et vos conceptions. Maintenant, les principes que je vais vous présenter aujourd'hui sont basés sur la fameuse heuristique d'utilisabilité de Nielsen, ainsi que sur ma propre expérience de plus de 10 ans d'expérience utilisateur, de conception d'interface utilisateur et de nombreux livres et recherche. Avant de commencer, je voulais mentionner une chose. Il y a toujours beaucoup de discussions sur la question de savoir si l'UX, interface utilisateur est une chose qui va de pair ou deux tâches complètement séparées. Je suis fermement convaincu que l'interface utilisateur, l'expérience utilisateur le développement frontal sont une grande histoire d'amour et ne sont pas du tout un fan de la garde d'accès. Dans ce cours, vous constatez vraiment que nous examinons les domaines dans lesquels la conception UX et l' interface utilisateur se chevauchent. Même si dans votre travail, vous aurez probablement un objectif principal. En fin de compte, nous livrons un seul produit à l'utilisateur. Si c'est pour vous, nous examinerons ensemble les sujets suivants. Nous allons examiner les références réelles et les raisons pour lesquelles elles créent des modèles mentaux. Nous allons parler de la loi de Jakob et d'autres pages. La cohérence est essentielle, la loi de Hick et les choix de limitation. Pourquoi le chiffre magique est vraiment quatre. Modèles de positionnement et de numérisation des pages. Nous parlerons des commentaires et des données système , de la gestion des erreurs, de la prévention des erreurs et, en fin de compte, je vais vous parler un peu cette chose magique appelée dopamine. 4. Références du monde réel et modèles de pensée: Même si nous concevons des produits numériques, les références réelles sont cruciales. Les références réelles sont un sujet important dans les heuristiques dites de Nielsen. Il indique essentiellement que la correspondance entre le système et une convention réelle est nécessaire à la logique et à la compréhension. Lorsque nous parlons de référencer le monde réel, cela va bien plus loin que d'utiliser simplement des symboles familiers. Dès 1943, bien avant Internet et l' heuristique normande de Nielsen, Kenneth Craig, philosophe et psychologue, écrivit la nature de l'explication, où il parlait d'une chose appelé modèle mental. Un modèle mental est essentiellement l'idée de la façon dont quelque chose va fonctionner. Les gens créent des modèles mentaux basés sur des expériences passées et les stockent comme un concept dans leur esprit. Ils s'attendent à ce que des expériences nouvelles et similaires suivent le même schéma. S'il y a une inadéquation entre un modèle mental et le modèle soi-disant conceptuel du produit que vous construisez, les utilisateurs ne le comprendront pas vraiment ou ne demanderont pas beaucoup d' efforts. pour le faire, et dans le pire des cas, ils pourraient simplement le rejeter. Si vous parvenez cependant à découvrir ces schémas familiers, qui se font généralement par des recherches ou des recherches, vous pouvez les utiliser et créer une transition en douceur entre le mental et le modèle conceptuel. Ils ne seront pas identiques, et c'est très bien. Vous perdrez une partie de l' ancienne et ajouterez une partie du nouveau, mais vous aurez ce noyau familier sur lequel vous devez vous appuyer. Un bon exemple de cela est le processus d'enregistrement. Vous avez peut-être déjà eu ça avant. Vous téléchargez une application, et la première chose que vous obtenez est un écran d'inscription pour remplir toutes les informations et parfois même les détails de votre carte de crédit avant même d'en avoir vu une seule. chose. Qu'est-ce que ça vous a fait ressentir ? Imaginez que vous alliez dans un magasin et à la porte avant même d' entrer, vous êtes arrêté. Il vous est demandé de renseigner vos données personnelles et de donner votre numéro de carte de crédit. Ils vont vous dire qu'ils veulent le voir juste au cas où vous vous assurerez que tout est couvert au cas où vous décidiez d'acheter plus tard. Vous trouverez probablement cela un peu étrange et inconfortable, et franchement dit, tout simplement inutile. Parce que dans votre modèle mental, cela fonctionne comme ça, vous entrez dans un magasin, vous regardez autour de vous et choisissez un produit. Une fois que vous avez choisi ce produit, vous décidez de payer ou de vous inscrire, dans notre cas, afin de recevoir ensuite le produit ou le service que vous avez choisi. C'est une approche beaucoup plus naturelle inscrire rapidement dans boutique en ligne une fois qu'un utilisateur a décidé d' acheter ou de tester quelque chose. Pour rester avec notre exemple de boutique, il est important de noter que le modèle mental n'est pas seulement un comportement strict, mais aussi des règles sociales que nous avons apprises. Si j'entre dans un magasin et que l'assistant de magasin est occupé, ils me feront probablement un clin d'oeil ou un sourire juste pour me faire savoir qu'ils m'ont vu et qu'ils finissent ce qu'ils font. Dans notre boutique en ligne, cela pourrait être traduit par une simple barre de progression pendant que notre contenu est toujours en cours de chargement. C'est la même chose pour les formulaires déjà remplis, choses qui sont placées dans mon panier, puis sont allés examiner autre chose. Je m'attends à ce qu'on se souvienne de cela simplement parce que dans la vraie vie, j'ai appris que cela fonctionne de cette façon. Assurez-vous également d'utiliser un langage réel plutôt que la terminologie technique. Au lieu de cliquer pour soumettre, utilisez quelque chose comme, achetez maintenant. Si votre contenu est trop précieux, donnez au moins un petit coup d'œil aux gens. Vous voyez qu'avec de nombreux portails d'informations, vous pouvez parcourir les gros titres, mais pour lire plus loin, vous êtes invité à acheter un abonnement ou à payer autrement. Surprise, comme un kiosque à journaux. Il est maintenant important de noter que l'utilisation conventions réelles ne signifie pas qu'il faut imiter la vie réelle. Comme vous l'avez vu dans notre exemple de boutique, nous n'utilisons que le modèle mental. Nous ne recréons une boutique dans toute son apparence en ligne. De plus, veillez à ce que les modèles choisis soient basés sur des recherches et des tests solides. Je ne peux pas assez insister sur cela. Ne présumez jamais que votre modèle de compréhension ou de mental correspond à celui de l'utilisateur. Cependant, il se peut que vous ayez parfois des raisons jeter par-dessus bord toutes ces conventions, ou votre produit peut être si radicalement nouveau que vos recherches montrent qu' il n'y a pas vraiment de choses un modèle mental fort sur lequel s'appuyer. Dans ce cas, vous créez essentiellement un nouveau modèle mental. Cela se fait généralement par la formation. La formation peut être très simple, comme l'intégration d'écrans ou de didacticiels vidéo. C'est peut-être quelque chose de très petit ou un cours intensif. Vous continuerez d'utiliser des éléments tels que la langue de l'utilisateur, les règles sociales et certains modèles mentaux intégrés. Comme d'habitude, tout est possible, mais vous devez être conscient du chemin que vous recherchez. Pour résumer, utilisez des références réelles. Basez votre conception sur des modèles mentaux existants. Les références réelles ne signifient pas imiter le monde réel. S'il n'existe pas de modèle mental sous-jacent , assurez-vous de former, éduquer et d'intégrer l'utilisateur pour créer un modèle mental. 5. La loi de Jakob, d'autres pages: Outre Realworld, d'autres sites Web et applications sont le principal endroit où les gens créent des modèles mentaux sur façon dont les choses sont censées fonctionner. loi de Jakob, inventée par Jakob Nielsen, stipule que les utilisateurs ont passé la majeure partie de leur temps sur d'autres sites. Par conséquent, ils préfèrent que votre site fonctionne comme n'importe quel autre côté auquel ils sont déjà habitués. Disons que je vous demande de trouver une personne sur Facebook ou LinkedIn ou toute nouvelle page similaire de la communauté. Vous n'avez pas utilisé cette page auparavant, mais vous cherchiez probablement toujours une barre de recherche. Vous savez à peu près à quoi cela ressemblerait, à savoir un endroit où taper et un bouton pour appeler l'action de recherche. Parfois, vous n'avez peut-être même pas besoin de ce bouton car vous avez déjà appris que vous appuyez sur « Entrée » pour activer la recherche. Maintenant, nous demandons à votre grand-mère de 90 ans de faire de même. y a de fortes chances que vous soyez plus aise et beaucoup plus rapide dans l' accomplissement de la tâche, car tout vous est déjà familier. Si tous les sites suivent une certaine convention, mais que vous ratissez ces conventions à trop d'endroits sur votre page, alors vous demandez à l'utilisateur de consacrer un peu de temps pour comprendre comment les choses se passent. travailler. Ne transformez pas vos utilisateurs en grand-mère de 90 ans sans raison. Jetons un coup d'œil à une structure typique. Habituellement, nous commençons par l'en-tête qui contient des informations telles que le logo et d'ailleurs, nous avons appris que chaque fois que nous cliquons sur ce logo, nous revenons à la maison. En outre, l'utilisateur recherchera la navigation dans l'en-tête, choses comme un symbole de recherche, des boutons de connexion, boutons d' achat maintenant et de la caisse et, bien sûr, s'attendrait des choses comme changer la langue de la page entière en tant que fonctionnalité dans l'en-tête. Il est évident que vous n' avez pas à mettre tout cela dans votre en-tête si ce n'est pas pertinent. Si vous vendez un petit produit quelque part sur votre page, vous n'avez pas besoin d'un bouton Commander dans votre en-tête. Parfois, vous pouvez également constater que des personnes ajoutent informations de contact ou quelque chose pour configurer un appel vidéo à l'en-tête. Si c'est le but principal de leur entreprise, il est vraiment important de l' avoir dans l'en-tête. Vous pouvez jouer avec, mais vous devez respecter les règles de base. Juste en dessous de l'en-tête, nous trouvons généralement une zone appelée zone de héros ou notre principale introduction. Ce que cela fait, il communique l'idée principale de votre page. C'est l'espace pour vraiment briller, expliquer votre idée, produit ou votre service et vous proposerez également un appel à action demandant aux utilisateurs d'acheter ou de s'inscrire dans ce domaine. C'est aussi l' endroit où se déchaîner. Ici, vous pouvez être vraiment créatif. Vous pouvez avoir des vidéos, des animations, des images ou du texte étonnants, mais c'est l'endroit où votre marque arrive en direct. En dessous de la section héros, vous trouverez le contenu. Ce sont tous les détails, toutes les informations et tout ce dont vous voulez parler à l'utilisateur. Ici encore, nous suivons toujours la loi de Jakob. Cela signifie que si j'ai un texte et que je souligne un mot dans le texte, l'utilisateur supposera que je peux cliquer dessus et que c'est un lien. Si je montre un accordéon, je m'attends à ce qu'il s'ouvre et se ferme. Formulaires, les utilisateurs essaieront de remplir et ainsi de suite. Mon conseil serait de m'en tenir à ces règles de base du comportement appris, ainsi qu'une hiérarchie visuelle solide. Dans ces limites, vous pouvez vraiment faire ce que vous voulez. À la fin de votre page, vous trouverez le pied de page. Le pied de page est toujours le dernier élément. Ici, vous verrez à quel point la loi de Jakob est puissante , car les utilisateurs s'attendent toujours à des informations telles que des coordonnées ou des informations qu'ils n'ont pas trouvées dans l'en-tête à la fin du pied de page. La plupart du temps, ils vont simplement faire défiler vers le bas si, par exemple, ils recherchent votre emplacement. C'est pourquoi l'ajout de Google Maps directement au-dessus du pied de page est généralement une bonne idée. C'est également un endroit idéal où les gens recherchent des liens vers des pages telles que l'offre d'emploi à propos la section au cas où vous n'avez pas inclus cela dans votre en-tête et, bien sûr, des liens vers des pages telles que sous forme de conditions générales et d'empreintes légales. signifie pas que vous ne pouvez pas rompre ou jouer avec ces conventions ou inventer quelque chose de complètement nouveau. Vous devriez même les casser sinon, toutes les pages seraient identiques. Mais faites-le avec délibération et objectif pour répondre aux besoins de vos utilisateurs. simple déplacement de votre panier et de la barre de recherche en bas à gauche n'est peut-être pas si révolutionnaire, mais simplement déroutant. Avant de finir, regardons un exemple réel. Ici, nous avons le site Web de Slack et vous pouvez voir que voici l' en-tête et, par exemple, parlez aux ventes et essayez gratuitement comme points de menu principal. Vous pouvez voir, vous pouvez vraiment enterrer ça. Ensuite, nous avons ici nos sections de grands héros où nous voyons ce qu'est Slack, nous recevons un appel à l'action pour essayer ou pour vous connecter et en faisant défiler vers le bas, nous obtenons le contenu et nous pouvons voir que c'est vraiment agréable animations expliquant différentes fonctionnalités. Ici, nous avons de petits tutoriels pour commencer, et nous terminons ici avec le pied de page, où nous avons encore une fois, des liens vers toutes les parties importantes de la page. Résumons. Les utilisateurs passent plus de temps sur d'autres pages Ils s'attendent donc à ce que votre site fonctionne comme les autres. Utilisez des modèles auxquels les utilisateurs sont habitués. Ces modèles peuvent être structurels, comme la structure de la page ou la mise en page globale, ainsi que comportementaux. Par exemple, ces boutons sont cliquables. N'hésitez pas à briser ces schémas, mais faites-le avec délibération et objectif pour répondre aux besoins de vos utilisateurs. 6. La cohérence est clé: La cohérence est un principe clé de la conception UX. La cohérence signifie que les mêmes mots, éléments et actions doivent signifier la même chose et suivre les mêmes conventions pour être prévisibles et compréhensibles pour l'utilisateur. Il existe deux types de cohérence dans la conception UX : la cohérence interne et externe. Un exemple de cohérence externe sera une convention savante dans votre domaine. Comme dans un magasin, vous verriez un petit panier d'achat et attendez à y trouver vos produits sauvegardés. Un bouton, vous vous attendez à ce qu'il soit cliquable et exploitable. Un menu de hamburgers, pour vous montrer d'autres options de menu. De plus, comme nous le savons de Jacobs Law, nous avons non seulement appris ce qu'ils font, mais nous avons également appris où les attendre. Tout comme le panier d'achat et notre menu de hamburgers, nous nous attendons à ce que cela se trouve dans le coin supérieur droit de notre navigation. La cohérence interne, par contre, concerne tout ce que nous concevons au sein de notre propre site Web et de notre propre marque. Par exemple, un bouton, vous avez peut-être choisi une couleur de surbrillance spécifique Dans cet exemple, nous utilisons un orange comme couleur de surbrillance, donc nous apprenons quelque chose à nos utilisateurs ici. Nous lions essentiellement la couleur à une action, donc si vous utilisiez maintenant cet orange pour un titre qui n'est pas cliquable, cela confondra l' utilisateur et nous réduirions également la force de ce sens de la couleur du signal. Si vous souhaitez toutefois l'utiliser sur un lien dans un texte, cela aura beaucoup de sens car ce lien est exploitable et cliquable. Sur votre page, vous recevrez de nombreux appels aux actions Nous devons donc nous assurer qu'elles sont cohérentes en apparence et en termes de formulation. Nous pouvons également créer un bouton comme bouton principal comme vous le voyez ici dans notre couleur de surbrillance et une version secondaire affaiblie pour quelque chose que nous voulons toujours mettre en évidence, mais qui n'est pas notre principal priorité. Cette cohérence concerne l' ensemble de votre conception et se situe généralement dans les feuilles de style de notre conception. Il s'agit d'éléments tels que la couleur, la typographie, hiérarchie et l' espacement, ainsi que éléments de mise en page généraux tels que des cartes, des icônes ou des images. Cette cohérence garantit que notre interface utilisateur est prévisible et apprise par l'utilisateur. On pourrait affirmer que cette cohérence est vraiment développée dans les feuilles de style de notre conception d'interface utilisateur et non dans l'UX. Cependant, je suis fermement convaincu que cette cohérence et le système derrière elle doivent être au cœur de votre conception UX. Résumons que les mêmes mots, éléments et actions doivent signifier la même chose. La cohérence externe désigne les conventions déjà établies par l'utilisateur. cohérence interne signifie la cohérence visuelle et fonctionnelle de votre produit. Assurez-vous de créer un système de conception contenant des guides pertinents pour définir la cohérence dans tous les domaines. 7. La loi de Hick – Choix et limitation: Pour ne pas submerger les utilisateurs, il est important de minimiser les choix. loi de Hick stipule que plus il y a de choix proposés, plus il faudra de temps pour prendre une décision. Ce temps de décision augmente de façon logarithmique. De toute évidence, nous n'avons pas tous le même temps de réaction. Cela dépend beaucoup de choses comme notre QI, si la configuration de la page est familière, ou même si nous l'avons déjà utilisée auparavant. Mais en un mot, moins c'est plus rapide. Notez que la loi de Hick ne s'applique qu' à une prise de décision rapide, comme le choix d'un produit dans des produits similaires. S'il s'agit d'une prise de décision approfondie qui implique des recherches, telles que la voiture que vous achèteriez ou le cours universitaire que vous suivriez, loi de Hick ne s'applique pas. L'autre exception concerne les listes commandées avec des articles connus, comme le choix d'un pays ou d'une langue. Tant qu'il est dans l'ordre alphabétique ou numérique, et qu'il est familier à l'utilisateur, il sera facile de naviguer car l'utilisateur recherchera un élément spécifique. Par conséquent, la loi de Hick ne s'applique pas. Pour éviter toute surcharge, exécutez toujours votre configuration à travers cette liste de contrôle dans votre tête. Nettoyer. Est-ce que j'ai vraiment besoin de cet article ? Cluster. Regroupez des articles similaires ensemble. Considérez également qu'un groupe d'éléments similaires peut être déplacé vers une nouvelle page ou une page de sous-menu. Cacher. Peut-il être stocké jusqu' à ce que cela soit nécessaire, comme dans un bouton Afficher tout ? Ce concept s'appelle la divulgation progressive. Un bon exemple est celui des blocs de prix. Toutes les informations inutiles sont nettoyées, et vous ne donnez que quelques options pertinentes. Nous disposons d'un ensemble de trois gammes de prix différentes et dans ces fourchettes, nous avons une hiérarchie claire. Nous voyons évidemment le plus dominant, le prix, puis nous voyons certaines des fonctionnalités incluses et l'appel à l'action pour chacune d'elles. Une fois que vous êtes intéressé par l'une des offres, vous pouvez cliquer sur le petit lien indiquant « plus », et toutes les informations supplémentaires masquées jusqu'à présent s'affichent . Quand on parle de limiter le choix, il peut être tentant d'en offrir un. Ils peuvent être définis dans certaines situations. Cependant, le choix, lorsqu'il est présenté de la bonne manière et de la bonne quantité, donne également à l'utilisateur le sentiment d'être en contrôle. un excellent exemple de réduction choix de contenu mixte que vous pourriez utiliser un peu sans même trois petits points constituent un excellent exemple de réduction du choix de contenu mixte que vous pourriez utiliser un peu sans même le remarquer. Vous les trouverez dans votre navigateur, ou bien souvent dans des articles ou sur les réseaux sociaux. Si vous cliquez dessus, vous obtenez plus d'options que vous n'utiliserez probablement pas tout le temps , mais qui sont toujours pertinentes. Cependant, il se peut que vous ayez parfois une page où vous devez inclure toutes les informations et tous les détails. Cela peut être dû à des raisons légales, ou parce qu'il s'agit d'un achat tel qu'un contrat téléphonique ou l' ouverture d'un compte bancaire, où vous voulez vraiment que l'utilisateur soit au courant de ce qu'il achète et qu'il assurez-vous qu'ils obtiennent le bon. Cette page est un excellent exemple façon dont cela pourrait être fait. Encore une fois, je n'ai aucun lien avec cette marque ou cette page. Je vous montre simplement cela parce que je pense que l'expérience utilisateur est excellente. Ici, vous pouvez vraiment voir le principe du cluster propre et de se cacher. Vous pouvez voir qu'une grande partie de ce qui a déjà été nettoyé ici en effectuant ces listes déroulantes, puis il a été regroupé dans ces trois modèles parmi lesquels nous pouvons choisir. Ensuite, ici, vous pouvez toujours voir qu'il y a beaucoup d'informations, mais tout a été très bien regroupé, avec un titre, et vous pouvez voir que dans chacune de ces catégories, il n'y a peut-être pas plus de cinq articles. Ensuite, nous avons le troisième aspect de la peau. C'est un très bon exemple de divulgation progressive, et vous pouvez cliquer et vous pouvez voir qu'elle me donne, une fois que je suis intéressé, toutes les informations supplémentaires que je cherche. En résumé, plus il y a de choix, plus il faut de temps pour prendre une décision. Cela ne s'applique pas à la prise de décision complexe, ni aux listes ordonnées comportant des éléments connus. Essayez toujours de suivre la méthode de nettoyage, de cluster et de masquer pour optimiser. 8. Le numéro de magie est de 4 !: Combien de choses pouvons-nous réellement nous souvenir ? Tôt ou tard, lorsque vous travaillez en UX, vous rencontrerez la loi dite de Miller qui stipule notre mémoire de travail peut, en moyenne, contenir sept éléments, plus ou moins deux. Eh bien, pas vraiment. En fait, la loi de Miller est un peu une légende urbaine. psychologue Alan Baddeley, en 1994, a passé en revue le travail de Miller car il estimait qu'il y a quelque chose d'étrange. Surpris, il a constaté que ce n' était pas en fait un journal, mais un discours de Miller qui a inventé la fameuse loi. C'était plutôt comme si Miller réfléchissait à haute voix à cette théorie qu'il avait. Il n'était pas basé sur des recherches solides. Baddeley et d'autres, comme Nelson Cowan, sont retournés et ont fait d' autres recherches. Ce qu'ils ont découvert, c'est que le chiffre magique était quatre. Quatre est la quantité de choses qu' une personne moyenne peut stocker dans sa mémoire de travail. Un bon exemple de cela est celui des numéros de téléphone que nous regroupons généralement en trois ou quatre. Examinons quelque chose de plus lié à l'UX. Voici une navigation et il y a huit points de navigation, donc il a l'air assez bondé. Selon la loi de Miller, ce serait toujours correct. Mais soyons honnêtes. C'est juste un peu trop à saisir et à se souvenir. Voyons ce qui se passe lorsque nous appliquons notre nouvelle règle. Je l'ai décomposé au minimum de points dont j'ai besoin pour que ma navigation fonctionne. Maintenant, j'ai encore fini avec cinq. Cela semble déjà beaucoup mieux, mais je pense que nous pouvons encore l'améliorer. Nous pourrions, par exemple, ajouter une certaine hiérarchie. Ce que j'ai fait ici, c'est que j'ai pris contact et j'ai décidé que c'était mon point le plus important dans la navigation et que j'en ai fait un appel à l'action. En passant, lors du positionnement de ces éléments, les utilisateurs ont tendance à se souvenir le mieux du premier et du dernier élément. C'est une constatation non pas de moi, mais de Hermann Ebbinghaus, qui a appelé cela l'effet de position en série. Parfois, il se peut que vous ne soyez pas en mesure réduire strictement les choses à quatre. Par exemple, si vous disposez d' une barre d'outils dans un logiciel. Ce que vous pouvez faire ici à titre d'exemple, c'est que vous les regroupez, ajoutez des espaces blancs et ajoutez également des icônes. Maintenant, dans notre exemple ici, si vous deviez ajouter d'autres points de navigation au calque supérieur, vous pouvez le faire en ajoutant un peu plus ici à gauche avec le logo, laisser de l'espace dans le au milieu, puis placez votre navigation sur la droite. L'important, c'est qu'il existe une sorte de structure ou de stratégie sur la façon dont ils sont regroupés. Dans notre exemple, cependant, j'ai décidé de les ajouter comme sous-menu. C'est également beaucoup plus clair car maintenant j'ai tout ce qui concerne le service en un seul point. À ce moment-là, l'utilisateur peut oublier le reste de ma première navigation de couche et se concentrer là-dessus. De plus, si je voulais ajouter autres points de navigation plus tard, cela ne poserait pas de problème et je n'aurais pas à modifier toute la configuration de ma navigation. Si cela devient trop long, j' ajouterais quelques icônes ou une structure pour donner une meilleure orientation. Résumons. Sept plus moins 2, appelée Miller's Law, est un peu une légende urbaine. En moyenne, notre mémoire de travail peut contenir quatre éléments. Utilisez la hiérarchie visuelle pour créer des groupes de quatre maximum. Par exemple, les espaces blancs ou l'ajout d'un appel à l'action peuvent être une bonne façon de le faire. L'ajout d'icônes ou d'images peut être une bonne solution pour les éléments de liste plus longs. 9. Positionnement de page et motifs de numérisation: Des recherches menées par le groupe Nielsen Norman ont révélé que 80 % des utilisateurs n'ont scanné que les nouveaux sites Web qu'ils ont rencontrés. Grâce à la technologie de contrôle oculaire, différents modèles de balayage ont été identifiés. Ils dépendent de différents facteurs, tels que le contenu que vous affichez, l'arrière-plan de l'utilisateur et ses connaissances. J'aimerais vous présenter certains de ces modèles aujourd'hui. Vous n'êtes pas obligé de suivre ces schémas. Il existe d'autres sites Web à succès qui utilisent une approche complètement différente. Vous devez cependant être conscient des motifs car ils se familiarisent, ce qui peut être un moyen très simple d' introduire un utilisateur dans ce qui peut être un moyen très simple d' introduire un votre page, ce qui permet de mieux se concentrer sur le contenu réel. car la structure globale est familière. Avant de commencer par les schémas réels, il est important de mentionner la direction de lecture. Lors de la lecture dans une langue qui se déplace de gauche à droite, les utilisateurs commencent également à analyser de cette façon. S'ils lisent de droite à gauche , c'est juste un contraire. Comme la plupart des langues sont écrites de gauche à droite. C'est l' approche la plus populaire en ligne. C'est aussi la langue que je connais le plus et que je conçois le plus, donc je vais utiliser celle-ci pour mon exemple. Néanmoins, si vous ciblez une autre direction de lecture spécifique, assurez-vous de vous adapter. Les utilisateurs scannent généralement des passages d' information avec le motif Z, par lequel ils scannent de gauche à droite, puis descendent puis scannent à nouveau de gauche à droite. Voici un exemple de motif Z. Vous le trouverez beaucoup dans les sections des héros. L'important est de toujours finir par un appel à l'action. Vous trouverez de nombreuses pages comme celle-ci avec un appel à l'action sur le côté gauche. Vous pouvez maintenant interpréter cela comme un motif Z étendu, qu'on appelle un motif en zigzag. Toutefois, les recherches suggèrent que, parce que les utilisateurs s'attendent à ce que le logo et la navigation soient en haut à gauche, il est souvent ignoré dans la première vue, de sorte que les utilisateurs se concentrent directement sur le contenu. Cela pourrait conduire à quelque chose comme celui-ci appelé le Triangle d'Or. Que vous utilisez une technologie de contrôle oculaire, vous ne saurez pas si c'est l'un ou l'autre, mais l'important est qu'elles soient basées sur le même principe et qu'elles finissent avec exactement le même principe. design. Notez également que nos points de numérisation sont composés de texte, imagerie et d'appel à l'action, un trio fait au paradis. , dans les pages lourdes de texte telles que les articles Cependant, dans les pages lourdes de texte telles que les articles, nous numérisons selon le motif F. Cela signifie que nous recommençons par le haut, scannons vers la droite, puis nous descendons, scannons à nouveau vers la droite, mais pas aussi loin que la première fois, et à partir de là, nous scannons verticalement. Le motif F est un peu mal compris. Il ne s'agit pas de numériser des pages entières. Il s'agit vraiment de pages qui contiennent beaucoup d'informations, telles que des articles, en particulier sur appareils plus petits comme les téléphones. Le dernier, mais l'un des motifs les plus importants que j'aimerais vous montrer, est ce que l'on appelle la numérisation de gâteaux en couches. Cela montre une fixation sur les titres, les sous-titres et les images, de sorte que tout ce que vous effectuez est envoyé par hiérarchie visuelle. Selon Nielsen Norman Group Research, c'est le moyen le plus efficace pour les utilisateurs de numériser une page. Encore et encore, un bon exemple de la façon dont l'UX et l'interface utilisateur vont vraiment de pair. En entrant sur cette page, ce qui attirera probablement votre attention, c'est le gros titre qui vous indiquera immédiatement de quoi il s'agit d'un sujet. Vous verrez également un appel à l'action dans la couleur de surbrillance afin que vous puissiez vous abonner à quelque chose. Vous avez ensuite un texte avec des mots surlignés. Si vous faites défiler, vous obtiendrez petits blocs pour qu'ils vous indiquent qu'il y a des principes UX, Figma et des bases du code. Ensuite, au fur et à mesure que vous effectuez une analyse, vous obtiendrez plus de morceaux. Ici, par exemple, vous obtenez les morceaux du titre, puis les informations révélées. La façon dont vous allez numériser cela va probablement de la plus grande fonctionnalité la plus importante aux petits détails une fois que vous êtes intéressé par les gros titres. Passons en revue étape par étape. Quels sont les éléments que nous pouvons utiliser pour générer le schéma de numérisation et attirer l'attention ? Eh bien, l'étape 1 consiste à utiliser les gros titres. Cela signifie des titres forts en termes de libellés, très clairs et aussi hiérarchiques, comme s' assurer qu'il existe une hiérarchie déjà définie dans UX, quelles sont les choses importantes et quelles sont les catégories. En dessous ? Ce n'est qu'en scannant les gros titres je devrais déjà savoir tout ce qui se passe sur votre site Web. La prochaine chose est de mettre en évidence les mots-clés. Assurez-vous également d' utiliser des liens descriptifs ici, par exemple. Ne faites pas de trucs comme cliquez ici, puis soulignez simplement pour utiliser réellement les informations et les faire ressortir. Utilisez des puces, des icônes et d'autres raccourcisseurs graphiques. Présentez d'abord une conclusion, ce qu'on appelle les paragraphes inversés. Assurez-vous que l'utilisateur arrive et qu'il bénéficie déjà du grand avantage s'il est toujours intéressé, il continuera à numériser. Pour résumer, nos modèles, le modèle Z est destiné au contenu informatif, comme les sections de votre héros, ou l'introduction, le modèle Z est destiné au contenu informatif, comme les sections de votre héros, ou l'introduction, tout ce qui est rapide et un seul coup d'œil et généralement où vous voulez un appel à l'action. Le modèle F est destiné aux pages riches en contenu, mais il parle ici d'articles, informations lourdes en texte, en particulier sur les petits appareils comme les téléphones mobiles. numérisation des gâteaux de calque consiste vraiment à structurer toute votre page de haut en bas et il s'agit créer une hiérarchie. 10. Feedback et statut du système: état visible du système nous aide à autonomiser nos utilisateurs. L'utilisateur doit toujours être informé de ce qui se passe et recevoir des commentaires immédiats sur toute action. Considérez ça comme un bouton d' ascenseur. Imaginez que vous appuyez dessus et que rien ne se passerait absolument. Vous allez appuyer à nouveau dessus et le considérer cassé. Cependant, simplement en s'allumant, vous comprenez que votre action a été comprise et que l' ascenseur est en route, cela va prendre un peu de temps. C'est la même chose , voire plus en ligne. Chaque action nécessite un retour d'information. Ce feedback peut être une rétroaction visuelle, comme un feedback audio, un bip, un feedback haptique, c' est-à-dire lorsque votre téléphone vibre, lorsque vous recevez un message ou qu'il peut s'agir d'une rétroaction visuelle. Les commentaires sur l'état du système peuvent être divisés en quatre catégories : rétroaction constante, retour d'information sur les possibilités , retour d'action et retour d'information habilitant. Regardons le numéro un, une rétroaction constante. Par là, nous entendons des commentaires qui sont toujours communiqués pour éviter la frustration ou le moment de surprise. Par exemple, la connexion Internet, l' autonomie de la batterie ou le temps restant pourrait être le temps restant. Les banques, par exemple, l'utilisent lorsque vous êtes connecté, car elles vous verrouilleraient automatiquement après avoir été inactives pendant un certain temps. Le deuxième type de rétroaction est ce que l'on appelle la rétroaction possible. Cela met en évidence toutes les interactions que l' on pourrait avoir avec la page. Il s'agit de choses comme si vous survolez un lien ou un bouton et cela change légèrement de couleur pour indiquer qu'il est cliquable. Il peut également s'agir d'une boîte entière qui change apparence comme la couleur ou l' ombre lorsque vous survolez, ce qui indique une interaction possible. Ou des éléments comme un champ de saisie sur lequel vous pouvez cliquer ou icône de calendrier lorsque vous le survolez, il se développerait. Le troisième formulaire est un retour d'action classique, exemple lorsque vous cliquez sur un menu déroulant ou sur un bouton qui soumet un formulaire. Quel que soit le résultat, vous devez tenir l'utilisateur informé. résultat possible peut être le suivant , indiquant le temps d'attente, exemple une barre de chargement ou un compte à rebours ou quelque chose de similaire indiquant qu' il se passe quelque chose , mais qu'il ne faut qu' une seconde. chargé. C'est vraiment important que vous ayez cela en arrière-plan, même si dans votre test, les choses sont super rapides et qu'il n'y a presque pas de temps pour le chargement. Cela peut être très différent sur d'autres appareils ou d'autres connexions Internet. Un autre résultat pourrait être que l'action est terminée. Cela peut être évident comme si une nouvelle page s'affiche ou qu'une liste déroulante s'ouvre. Mais parfois, ce n'est pas si évident, comme lorsque vous soumettez un formulaire. Ensuite, il vous suffit de montrer un court message de réussite de confirmation qui peut être aussi simple qu'une coche, un bien fait ou un merci. Le troisième résultat est que quelque chose ne va pas. Dans ce cas, vous devez en informer l'utilisateur. Vous devez afficher un message d'erreur et ils suggèrent une solution pour résoudre ce problème. Maintenant, le dernier type de feedback est un peu différent, je vais appeler cela le feedback responsabilisant. Cela signifie essentiellement qu'à n'importe quel stade, nous indiquons à l'utilisateur où il se trouve, comment avancer et reculer, et comment quitter n'importe quelle situation. d' Un fil d'Ariane cliquable indique où nous en sommes. Lors d'une commande ou d'une inscription, vous verrez également les étapes en surbrillance du processus indiquant à l' utilisateur la position actuelle. Il y a plus de raisonnement psychologique derrière le fait de le faire de cette manière et tout briser en petits morceaux. Cependant, il est également très bon pour l'orientation. Comprendre ce qui se passe à chaque étape du processus permet non seulement à vos utilisateurs de se sentir en contrôle, mais crée également un sentiment de confiance qui donne la liberté d'explorer plus avant votre produit. Résumons. Il existe quatre catégories principales de commentaires : rétroaction constante, c'est quelque chose comme communiquer l'état actuel de la batterie, rétroaction de la possibilité, j' indique une action possible à l'utilisateur, comme si je montre quelles zones sont cliquables sur mon site Web, commentaires sur les actions, commenter l'action d'un utilisateur, donc c' est une fois que l' utilisateur a pris des mesures, rempli un formulaire, cliqué sur le bouton, je suis communiquer le succès ou l'erreur, par exemple, donner du pouvoir aux commentaires, où suis-je ? Indique toujours clairement où se trouve l'utilisateur et comment naviguer vers n'importe quelle zone souhaitée. 11. Prévention des erreurs: prévention des erreurs est l'une des heuristiques d'utilisabilité les plus importantes. Il est souvent négligé, mais cela fait toute la différence. Quels sont les moyens courants d'éviter les erreurs ? Je veux vous montrer trois catégories. Le premier est rappelé à prévenir, le second, suggestions et les contraintes, et le troisième confirmant les actions. Commençons par le numéro 1, rappelez-vous de prévenir. Cela signifie qu'avant qu'une erreur ou un résultat désagréable ne se produise, vous lancez un petit cri à vos utilisateurs. Par exemple, votre téléphone vous rappelle que votre batterie est faible avant qu'elle ne soit réellement épuisée. Notez également qu'ici, plus de revenir en arrière et de recharger votre téléphone, on vous propose une autre solution, comme le mettre en comme le mettre en mode basse consommation si vous êtes en déplacement. Cette solution en un clic est vraiment utile et nous en apprendrons davantage lorsque nous parlerons de la gestion des erreurs. Rappeler à prévenir peut également ressembler à un rappel qu'un cours auquel vous vous êtes inscrit commence ou que vous devez confirmer un rendez-vous. Allons-y en face. Les fenêtres contextuelles sont ennuyeuses, donc vous ne voulez l' utiliser que si votre utilisateur perdrait l'accès ou manquait quelque chose. Idéalement, donnez aux utilisateurs la possibilité de s'inscrire et de ne pas recevoir de tels rappels. Numéro 2, suggestions et contraintes. Sans s'en apercevoir beaucoup, vous l'utiliserez tout le temps vous-même. Examinons un exemple de réservation simple. Comme d'habitude, j'utilise simplement cet exemple sans rapport avec l'entreprise. Je vous montre juste une super expérience utilisateur réelle. Ce que fait la suggestion automatique, c'est vraiment génial lorsque je commence à taper. Disons que je vais aller sur cette place de Berlin, et je ne sais pas très bien comment ça s'appelle, quelque chose comme Branden, et puis je vois déjà ce que ça pourrait être, donc c'est Brandebourg. Supposons que je tape toujours ce texte de la mauvaise façon. J'ai mis brandinbur et ça va encore arranger ce que je cherche. C'est vraiment génial parce que sinon je l'aurais juste mis, écrit de la mauvaise façon, et je me serais retrouvé sans résultats de recherche. Les résultats suggérés font partie d'un système qui fonctionne en arrière-plan. Vous n'avez pas besoin de définir quelles sont les suggestions, mais vous devez concevoir l'espace pour elles dans votre filaire, puis vous assurer que la conception et le développement planifient et testez cette fonctionnalité en conséquence. Choisissons cela et passons à notre prochaine chose, qui est les contraintes. À présent, un calendrier est un bon exemple de contraintes. Parce qu'ici, je dois choisir une date de début et une date de fin. La date de fin de ma réservation ne peut plus être antérieure à ma date de début. Eh bien, cela semble vraiment évident. Mais pour être honnête, c'est quelque chose où beaucoup d'erreurs se produisent si vous laissez simplement les gens taper les dates. Nous passons ensuite au dernier filtre qu'ils nous ont donné et ici vous pouvez également voir que je n'ai pas besoin de taper juste un chiffre, mais je peux déjà filtrer. Par exemple, si j' ajoutais des animaux domestiques, il pourrait automatiquement filtrer tous les appartements où les animaux domestiques ne sont pas autorisés. Je n'obtiendrai que les résultats avec lesquels je peux vraiment travailler. C'est un excellent exemple d' expérience utilisateur fluide qui évite beaucoup de frustration par la suite. Notre dernier est de confirmer les actions. En cliquant sur un bouton, vous confirmez généralement déjà une action. Cependant, il existe des mesures qui ont des conséquences plus importantes. Vous voulez donc vraiment vous assurer que votre utilisateur est au courant de cette action. Ici, par exemple, j'ai la page sur laquelle j'héberge mon site Web et ils ne veulent évidemment pas que les gens suppriment accidentellement leurs sites Web. Ce qu'ils font si vous allez à la tête, c'est qu'ils appellent tout d' abord zone de danger pour que cela soit assez clair. Ensuite, si je clique sur Supprimer ce site, ils me demandent d'entrer le nom de la page que je vais supprimer. Je ne clique ici qu'une fois que j'ai entré un nom, je l'appellerai simplement mon test de page ici. Le bouton Supprimer devient alors actif. Un autre exemple consiste à envoyer quelque chose comme des bulletins d'information où vous obtiendrez un résumé de ce que vous allez envoyer et du nombre de personnes, puis vous devrez confirmer. Ces dialogues sont excellents , mais veillez à les utiliser pour des actions très sélectives. N'utilisez-les que lorsque les choses peuvent vraiment mal tourner et avoir un impact important. Maintenant, dans la plupart des cas, vous pouvez couvrir l'évidence et prévenir la plupart des erreurs. Ceux qui se produisent encore, vous pouvez travailler dessus et les gérer de manière appropriée. Mais vous concevez peut-être produits où la prévention des erreurs est cruciale. Comme un produit financier ou plus encore un appareil de santé. Dans ce cas, la prévention des erreurs doit être une priorité absolue et vous devriez avoir une stratégie claire vous éloigner des zones où la plupart des dommages pourraient être agréables à avoir ou à une facilité d'utilisation fluide. Les correctifs peuvent être assez petits mais efficaces. Quelque chose comme une alerte disant : « Voulez-vous vraiment transférer montant X s'il dépasse un certain seuil ? Il est également très efficace de fournir aux utilisateurs un résumé à confirmer avant d'acheter. C'est ce que font beaucoup de compagnies aériennes par exemple. Ce n'est pas seulement agréable pour l'utilisateur car il a une vue d'ensemble et ne réservent pas un vol erroné et doivent gérer tout le stress lié au changement, mais c'est également vraiment génial pour le marchand parce que des choses comme les rétrofacturations et la gestion des clients sont une tâche très coûteuse et laborieuse. Cartographiez vraiment votre prévention des erreurs en tant qu'équipe. La prévention des erreurs commence par une bonne expérience utilisateur. Il est conçu pour dans votre interface utilisateur et exécuté en cours de développement. Vous devez être dans le même bateau. Résumons. Utilisez les alertes pour éviter les erreurs, mais uniquement si les utilisateurs perdent l'accès ou manquent d'accès. Soyez prudent avec celui-là. Utilisez des suggestions telles que le remplissage automatique et les contraintes pour guider les utilisateurs et éliminer les bordereaux. Ajoutez une couche de confirmation lorsque vous faites face à des actions destructrices ou à de grandes distributions marketing. Créez une hiérarchie de prévention des erreurs pour les produits sensibles aux erreurs, tels que les produits médicaux. 12. Gestion des erreurs: possible, nous concevrons pour éviter les erreurs. Il n'y a cependant aucun moyen de s'en débarrasser complètement. Planifions donc les éventualités et aidons à récupérer les erreurs. gestion des erreurs est pratiquement partout sur votre page, mais les formulaires, les filtres et toutes sortes d'entrées et d' interactions sont les domaines critiques à surveiller. J'aimerais vous présenter le plan en trois étapes de gestion des erreurs introduit par le groupe Nielsen Norman. étape 1 est reconnue, l'étape 2 est le diagnostic et l'étape 3 est récupérée. Passons en revue étape par étape et commençons par reconnaître. Je vais utiliser un simple formulaire de connexion ici pour mon exemple, mais vous pouvez utiliser cette méthode sur pratiquement n'importe quoi pour gérer les erreurs. Notez que le formulaire est déjà configuré de manière à éviter d' éventuelles erreurs. Par exemple, je montre déjà dans l'e-mail et quel format il devrait être entré. Mais disons que l'utilisateur saisit toujours une erreur. étape 1 consiste maintenant à reconnaître cette erreur, signifie que j'informe clairement l'utilisateur qu'une erreur s'est produite. Il existe différentes façons de le faire, et il est en fait recommandé de combiner plusieurs signaux de reconnaissance d'erreurs. Dans mon exemple, non seulement le contour devient rouge, mais il devient légèrement plus épais. J'ajoute également une icône d'avertissement supplémentaire. Pourquoi ? Parce que même si le rouge, pour la plupart d'entre nous, est le signe le plus évident d'une erreur, nous devons également concevoir pour les personnes qui ne voient peut-être pas la couleur. Par conséquent, l' épaisseur de la bordure du champ change et j'ai ajouté une icône d'alerte. Étape 2, diagnostic de l'erreur. Dans cette étape, je dois dire clairement à l'utilisateur ce qui a mal tourné. Je dis donc que l'e-mail saisi n'est pas correct. Il est très important d'utiliser un langage simple et simple à cette étape. Cependant, je peux encore faire mieux. Voyons ce que nous pouvons améliorer avec l'étape 3. Récupérer signifie, au lieu de simplement dire à l'utilisateur c'est faux, je peux dire à l'utilisateur, hé, pourquoi ne pas le résoudre comme ça ? Donc, mon avertissement d'erreur pourrait être quelque chose comme ça. e-mail doit inclure un symbole @. Une fois que l'utilisateur a trié l'erreur, notre message d'erreur disparaîtra et nous pouvons même ajouter une petite coche supplémentaire pour montrer que tout fonctionne bien maintenant. Une autre zone que chaque page doit avoir pour récupérer des erreurs est la page 404. Si vous débutez dans ce domaine, 404 est une page par défaut vers laquelle les utilisateurs sont envoyés lorsqu'ils cliquent sur quelque chose qui n'existe plus, comme un lien mort ou s'ils entrent une URL incorrecte. Il fonctionne selon le même principe en trois étapes. Premièrement, reconnaissez, votre page n'a pas été trouvée. Deuxièmement, diagnostiquez, et ce n'est pas si crucial ici parce que cela va un peu de pair avec la reconnaissance, mais vous pourriez dire que quelque chose comme la page que vous recherchez n' existe plus ou a été déplacée. Trois, récupérez. C'est vraiment important. Affichez toujours votre menu en haut, afin que les utilisateurs puissent revenir à l' endroit où ils veulent aller ou proposer un appel à action qui ramène les utilisateurs à votre page d'accueil. Il y a aussi des exemples vraiment amusants sur 404 pages, comme cette mignonne ici de Pixar. Comme vous pouvez le constater, vous pouvez être créatif avec elle. Restez simple, mais faites-le vôtre. Résumons. Des erreurs se produiront, alors assurez-vous de concevoir une gestion appropriée des erreurs. Suivez les trois étapes de la gestion des erreurs. Reconnaissance, il y a une erreur ; diagnostiquer, quelle est l'erreur ; et récupérer, comment puis-je me remettre sur la bonne voie ? Essayez d'utiliser plusieurs moyens d'identifier les erreurs. Par exemple, la couleur seule ne suffit pas, car tous les utilisateurs ne peuvent pas la voir correctement. N'oubliez pas votre page 404. 13. Un mot sur la dopamine et la conception éthique: façon dont vous configurez votre conception pour déclencher libération de dopamine joue en fait un rôle majeur. Découvrons-en un peu plus. Qu'est-ce que la dopamine ? Je vais expliquer cela très brièvement et simplifié car, comme vous pouvez l'imaginer, il y a suffisamment de matériel pour un doctorat ou plusieurs doctorats en ce qui concerne la dopamine. dopamine est un produit chimique produit par notre cerveau qui joue un rôle majeur dans les comportements motivants. dopamine est libérée lorsque, par exemple, vous mangez des aliments réconfortants, terminez une tâche, entretenez une interaction sociale gratifiante ou accomplissez quelque chose. Est-ce que ce sentiment est bon, heureux ou gratifiant que vous ressentez ? La dopamine vous fait désirer des choses et vous donne envie de les répéter. Presque tout ce que vous faites libère de la dopamine, même en vous brossant les dents. Mais c'est le niveau de dopamine qui fait la différence. En bref, plus votre cerveau attend de dopamine d'une activité, plus vous êtes motivé à le faire et à la répéter. En ce qui concerne la conception UX et la dopamine, il existe trois principaux domaines d'intérêt pour nous. L'un est en train de célébrer les petites victoires, deux sont en train d'accomplir une tâche, et trois sont la prédiction dite de récompense. Commençons par l'évidence. n'y a pas de domaine pour mieux montrer l'effet de la dopamine dans les UX que les médias sociaux. Les neuroscientifiques cognitifs ont montré que les stimuli sociaux enrichissants, tels que les visages rieurs, reconnaissance positive à travers des mentions J'aime et des messages, nous donnent presque une poussée de dopamine. Tout comme sur les réseaux sociaux, c'est comme une petite victoire et libère de la dopamine. Les gens peuvent être vraiment accro à cela. De plus, le défilement sans fin des images sur Instagram, par exemple, vous laisse avec cette envie de terminer la tâche et de vouloir encore plus de dopamine. La recherche sur l' apprentissage des récompenses et la dépendance montre également un modèle appelé prédiction de récompense. Quelque chose qui a réellement été utilisé dans les casinos et qui est maintenant de plus en plus utilisé en ligne. Lorsque nous recevons une récompense inattendue, nous recevons une forte dose de dopamine. Nous apprenons également que dans certaines situations, il y a une possibilité de cette récompense et nous commençons à anticiper. En fait, la recherche sur les analyses cérébrales a montré que l'anticipation d'une victoire stimule notre cerveau plus que la victoire réelle. C'est ce moment célèbre dans un jeu de roulette où le bol tourne en rond avant de remporter la victoire. Vous pouvez voir que dans beaucoup de films, ils ont mis des mouvements lents pour prolonger ce sentiment d'anticipation. Maintenant, ce qui se passe, c'est que vous obtenez déjà la dopamine en phase de récompense pendant que jouez au jeu et que vous n'avez même pas encore gagné. , si vous perdez trop de fois Cependant, si vous perdez trop de fois, la dopamine diminue et vous arrêtez. machines à sous, par exemple, sont conçues de manière à vous garder accroché à cet endroit idéal entre anticipation, amour et victoire, juste assez pour continuer. Désormais, de nombreuses applications utilisent le même modèle pour rester engagé. Si nous pensons qu'il pourrait y avoir une récompense aléatoire, nous continuons à revenir pour de plus en plus. Par exemple, c'est exactement ce que fait la petite bulle de votre message de chat. Nous décrochons nos téléphones tout le temps parce que nous connaissons éventuellement ce petit être et que cette petite bulle sera là. Certaines applications de médias sociaux disposent même d'un algorithme qui retient les « J'aime ». Vous êtes irrité, continuez à vérifier, et c'est incroyable quand ils sont tous libérés soudainement. Vous tenez cette anticipation comme avec la machine à sous, puis boom, votre prix est un afflux d'évaluations sociales. Ça a l'air un peu effrayant ? Oui, je pense aussi. Lorsque le produit est conçu de manière à tromper l'utilisateur, nous appelons cela des UX sombres ou des motifs sombres. Il y a d'autres exemples tels que masquer les coûts, les cases à cocher par défaut, etc. Pourquoi est-ce que je vous dis tout cela alors ? Eh bien, parce que vous, en tant que concepteur UX, pouvez également jouer un rôle dans la conception des produits. C'est génial de savoir et même important de savoir ce qui fait cliquer les utilisateurs, car vous pouvez l'utiliser de manière appropriée. Il existe maintenant un mouvement fort qui appelle ce que l'on appelle un design éthique. Je vous recommande fortement d'approfondir ce sujet et de trouver l'endroit où vous vous sentez à l'aise. Voici quelques ressources gratuites : humanebydesign.com, humanetech.com et darkpatterns.org. Comme d'habitude, je n'ai absolument aucun rapport avec ces pages. Je trouve juste qu'ils ont du contenu très précieux à partager et qu'ils sont absolument libres de commencer vos recherches. Vous verrez également que vous pouvez utiliser un effet dopamine de manière très agréable juste pour rendre petites tâches fastidieuses un peu plus agréables. Permettez-moi de vous donner un exemple. Il n'est pas aussi spectaculaire que Facebook ou Instagram, mais très efficace. Lorsque nous donnons des commentaires comme des commentaires d'erreur, il s'agit généralement d'une rétroaction négative comme si quelque chose s'est mal passé ici. Il y a cependant beaucoup de puissance dans la rétroaction positive. Par exemple, il est vraiment ennuyeux d'avoir toutes les règles concernant les mots de passe. Habituellement, vous saisissez un, puis vous obtenez une erreur pour un symbole oublié ou un mot trop court, vous le nommez. C'est une façon très intelligente de résoudre le problème ici. En donnant immédiatement des commentaires positifs chaque fois que vous répondez à l'une des exigences, les utilisateurs se sentent accomplis et le processus devient beaucoup plus fluide. Vous créez essentiellement de minuscules versions de « J'aime ». Résumons. Certaines conceptions UX peuvent déclencher la libération de dopamine, principalement en célébrant de petites victoires, en accomplissant une tâche et en prévision des récompenses. dopamine incite l'utilisateur à revenir pour en savoir plus. Les commentaires positifs sont un excellent moyen d'aider l'utilisateur dans les tâches nécessaires mais fastidieuses. Envisagez toujours des solutions de conception éthique. 14. Télécharger le matériel de cours: Vous voudrez peut-être travailler à mes côtés, alors j'ai préparé quelques fichiers pour que vous puissiez les télécharger. Dans le cours, vous accédez simplement à Project and Resources, vous trouverez toutes les informations et le lien où vous pouvez télécharger le matériel. Vous pouvez également accéder à mon profil où vous trouverez également un lien direct vers la page de téléchargement. Sur cette page, vous trouverez une variété de téléchargements. Vous pouvez simplement choisir le cours que vous suivrez actuellement, puis cliquez simplement sur « Télécharger » et il téléchargera automatiquement le fichier pour vous. Pour ouvrir un fichier Figma que vous avez téléchargé, il est important que vous ayez un compte Figma. Dans votre compte, accédez à nouveau et appuyez sur « Importer » Vous pouvez ensuite choisir un fichier que vous souhaitez ouvrir. Cela peut prendre un moment car ils sont assez volumineux, mais une fois que vous les avez importés, ils seront sur votre compte et vous n'avez pas besoin de répéter ce processus. Je travaille avec les polices Google pour la plupart de mes créations, donc si vous travaillez avec l'application Figma, vous n'avez pas besoin de faire quoi que ce soit. Toutes les polices Google sont préchargées automatiquement. Si vous voulez travailler avec Figma dans le navigateur, il vous suffit de rechercher la police qui vous montre manquante, par exemple Poppins que j'utilise beaucoup, puis vous pouvez télécharger directement cette police, installez-le sur votre ordinateur et vous êtes prêt à partir. Toutes les ressources sont gratuites pour les étudiants existants et vous n'avez pas besoin de saisir d'informations supplémentaires. Vous pouvez bien sûr également télécharger n'importe quel autre fichier au cas où vous êtes intéressé, donc en général, j' ajoute toujours tout ce qui pourrait être utile, donc il y a par exemple, un modèle Bootstrap et puis une liste avec des liens pour l'inspiration, livres et des blocs qui sont vraiment parfaits pour la conception de l'interface utilisateur UX. Cette liste de téléchargements ne cesse de croître, alors assurez-vous de revenir et jeter un coup d'œil de temps en temps. 15. -> EXERCICe : Rassembler l'image de l'espace de travail: Mettons toute cette théorie en pratique. J'ai préparé un dossier Figma pour vous. Dans ce fichier, vous trouverez l'exercice lorsque vous l'ouvrez sur la première page. Notre exercice est que nous allons construire une structure filaire pour un petit espace de co-working de bureau ouvert. Dans le bref, vous trouverez un aperçu des choses qu'ils proposent, exemple les prix et les différentes sections souhaitées par le client. Dans la vraie vie, nous aurions évidemment beaucoup plus de personnalités de recherche, informations approfondies, en particulier sur les utilisateurs avant de commencer le filaire. Cependant, il s'agit d'un exercice qui consiste à mettre en œuvre vos principes donc nous prendrons un raccourci et je vous donnerai toutes les informations contenues dans le mémoire, et nous prendrons cela pour acquis dès maintenant. Vous pouvez également voir une première configuration d' un filaire pour le projet dont notre client était très mécontent car l'expérience utilisateur n'était pas correcte. Nous sommes donc là pour améliorer l'expérience utilisateur du filaire donné. Comme nous n'avons pas d'autres résultats de recherche, nous allons purement nous appuyer sur les principes que nous avons appris aujourd'hui. N'hésitez pas à remanier, ajouter, supprimer, bouger ou recommencer complètement à zéro. Essayez vraiment d'en faire un premier brouillon avec lequel vous pourriez revenir au client pour en discuter et commencer quelques tests. Sur la deuxième page du fichier, vous trouverez la solution que j'ai préparée pour vous. Maintenant, il est important de noter qu'il n'y a jamais une solution parfaite dans le design. La solution que vous avez trouvée pourrait être tout aussi bonne ou même meilleure que la mienne. Ce que je vous fournit ici n'est qu'une source d'inspiration pour que vous voyiez comment je gérerais ces problèmes et solutions que je suggère. Vous pouvez vraiment considérer cela aussi critique ou curieux que vous le souhaitez. 16. Partie 2 : conception UI: Si vous avez apprécié ce cours et l'exercice, je vous recommande de vous lancer dans la deuxième partie de ce cours ici sur Skillshare, chercher simplement l'apprentissage de la lune et vous trouverez tous les cours. Vous trouverez tout en bas le cours de conception de l'interface utilisateur, qui constitue la deuxième partie de l'introduction de l'interface utilisateur UX. Dans ce cours, nous allons donner vie à la structure filaire que vous venez construire et en apprendre davantage sur tous les principes de la conception de l'interface utilisateur. 17. Merci: Bravo pour avoir terminé ce cours. N'hésitez pas à nous contacter sur moonlearning.io. Nous sommes toujours intéressés à connaître vos commentaires. Vous nous rendrez également un grand service si vous pouviez juste prendre une minute et laisser un avis ici. Si vous avez apprécié ce cours , assurez-vous également de jeter un coup d'œil à nos cours supplémentaires. Chez moonlearning.io, nous abordons tous les sujets, depuis les fondements mêmes de conception UX/UI jusqu'à Figma et même quelques bases du code. Assurez-vous de visiter notre site web moonlearning.io où vous pouvez également vous inscrire à notre newsletter.