(7) Conception visuelle pour les concepteurs d'UX

1. Introduction et aperçu: Je pense que la septième cause est que nous allons parler de design visuel et informationnel. Ce cours peut être suivi comme un cours autonome et peut particulièrement être utile pour les personnes qui font conception ou de la recherche UX et qui souhaitent en savoir un peu plus sur le design visuel. Il peut être considéré séparément, comme je l'ai mentionné, dans le cadre d'une série en dix parties. Ensuite, la planification des dix cours de cette série signifie que vous pouvez choisir de passer l'examen pour le certificat d'expérience utilisateur de la British Computer Society Foundation et de devenir un praticien UX accrédité. Bonjour, je suis en poste depuis Peak XD. Alors, un peu plus sur moi. Comme vous pouvez le voir, j'ai un tas de qualifications. Mais pour être honnête, la plupart de ce que j'ai appris, en travaillant sur le terrain pendant plus de 20 ans en tant que designer UX. J'espère donc que tout au long de ce cours, je pourrai transmettre certaines de ces connaissances à mes collègues, Sophie, qui passeront en revue certains des principes de conception avec vous. Notre mission chez Peak XD est donc de donner aux autres les moyens d'améliorer le monde grâce à une conception centrée sur l'humain. C'est un peu ce que nous faisons. Nous faisons de la recherche, de la cartographie du parcours, conception de services, où vous faites de la conception UX, wireframes, des tests d' architecture d'information et, bien sûr, nous organisons des formations UX Alors, que sait mon équipe de l'expérience utilisateur entre nous avec 500 projets UX achevés depuis 2003 ? Vous allez donc avoir des nouvelles de mon équipe et de moi-même aujourd'hui à propos de la conception visuelle et j'espère que nous pourrons vous transmettre certaines de ces connaissances sur la base de notre expérience dans le secteur et en matière de conseil. Ce cours s'appuie sur ce que nous avons abordé dans nos trois premiers cours sur la compréhension vos utilisateurs ou la compréhension de l'espace des problèmes avant de passer à l'espace des solutions. Dans un premier temps, nous avons également abordé tous les différents composants et vous devez savoir sur vos utilisateurs. Dans le cours 2.3, nous avons abordé méthodes de recherche sur les utilisateurs, puis la manière de documenter les résultats de vos recherches sur les utilisateurs afin de renforcer l'empathie avec vos parties prenantes Ensuite, dans le cours 4, nous avons parlé de la manière d' impliquer les utilisateurs et les parties prenantes dans le processus de conception, ainsi la phase d'idéation et que de la phase d'idéation et de l'importance d'un prototypage égal à cinq. Nous avons discuté de la manière de concevoir votre architecture d'information et votre navigation, tout en comprenant le modèle mental de votre utilisateur. Ensuite, lors de notre sixième cours, nous avons parlé de l'interaction et de la conception des mousses. Si vous ne savez pas comment comprendre vos utilisateurs, je vous encourage à suivre ces cours d'abord, je vous encourage à suivre car l'application méthode et de chaque principe de conception ne suffira à mi-chemin créer une bonne expérience en ligne. L'autre moitié consiste à comprendre vos utilisateurs, puis vos modèles mentaux. Alors, qu'allons-nous aborder dans ce cours ? Donc, tout d'abord, nous allons parler de la théorie de la Gestalt. Sophie va vous parler de certains principes de la perception humaine. Elle parlera également des principes de conception. Dans un premier temps, nous allons nous concentrer sur la hiérarchie et l'alignement. Ensuite, dans la deuxième partie, nous allons parler de répétition, de l'équilibre et du contraste. Nous allons donc également parler de certains éléments visuels, tels que la couleur, la typographie et l'iconographie. Ensuite, je parlerai de la cognition humaine et de la conception de l'interface utilisateur. Nous aborderons également des sujets tels que conception de l' information et la façon dont vous concevez les mots d'une page. Et couvrez également le processus de conception visuelle, du filaire à la conception visuelle. Maintenant, regardez ces côtés. Je veux que vous écriviez les sites suivants et que vous donniez à chacun d' entre eux 1 à 10 en fonction de leur crédibilité à vos yeux. Pour y jeter un coup d'œil, donnez-lui une note de 1 à 10 à la poitrine, votre première réaction intestinale pourrait être de le noter sur un post-it ou quelque chose comme ça. Qu'en est-il de celui-ci ? C'est l'un de mes sites Web, liens, voitures préférés. Comment écririez-vous cela sur dix chez c'est fiabilité et crédibilité. Qu'en est-il de celui-ci ? Comment écrirais-tu celui-ci ? Je peux donc probablement deviner ce que vos réponses rapporteraient. Mais sur quoi pensez-vous que vous basez votre évaluation de la confiance et de la crédibilité sur votre façon de procéder, sur la base des connaissances de l'organisation ? La plupart des gens portent des jugements sur la crédibilité d' un site Web en se basant en grande partie sur la conception visuelle. Il est donc très important d' avoir un site Web crédible. Cela contribue à renforcer cette confiance et cette crédibilité. Votre X n'est donc pas seulement une question de convivialité, il ne s'agit pas uniquement de cette facilité d'utilisation. Les utilisateurs prennent souvent des décisions et des choix prévisibles ou irrationnels. conceptions visuelles et esthétiques sont donc cruciales pour établir ce lien émotionnel avec vos utilisateurs et vraiment renforcer cette confiance et cette crédibilité. Alors, qu'est-ce que le design visuel ? design visuel consiste en fait Le design visuel consiste en fait à concevoir des grilles, des pages, à choisir palettes de couleurs et à développer des icônes. Cette définition peut vous être demandée si vous passez l' évaluation pour l'examen BCS. C'est donc la définition selon le BCS. Voici donc certains des principes fondamentaux du design visuel que vous devez vraiment connaître. Payez pour la proximité, l'alignement, répétition et un contraste sûr pour essayer de vous souvenir cet acronyme park avec un C PARCC pour vous aider à vous souvenir de ces choses. Ensuite, Sophie va vous parler de la théorie de la Gestalt. 2. Théorie de Gestalt: Bonjour, je m'appelle Selfie Smith et je vais vous présenter une théorie de la Gestalt dans cette leçon, qui contient certains principes de la perception humaine. Les principes de la Gestalt sont des principes ou des lois des perceptions humaines. Elles constituent la base de nombreuses règles de conception que nous connaissons et utilisons aujourd'hui. Ils décrivent comment, en tant qu' humains, nous avons tendance à regrouper des éléments similaires, reconnaître des modèles et à simplifier des images complexes. Lorsque nous examinons des objets, des sites Web ou des interfaces de toutes sortes. Dans les années vingt, c'est un groupe de psychologues allemands qui a développé une série de théories sur perception visuelle connues sous principes de la Gestalt ou théorie de la Gestalt. Ils étudiaient la façon dont les gens donnent du sens à toutes les informations qu' ils obtiennent à partir de ce qu'ils lisent, regardent, scannent et bouleversent. Et ils ont découvert que notre cerveau a tendance à organiser toutes ces informations de certaines manières que notre cerveau a tendance pour créer du sens. Ces principes nous aident à comprendre comment les humains tirent généralement des compréhensions significatives à partir de ce que nous voyons, qui nous aidera en tant que concepteurs d'expérience utilisateur. Parce que ce que nous voulons créer, ce sont des interfaces et des points d'interaction significatifs. Le principe clé de la théorie de la Gestalt est qu'en tant qu' humains, nous avons une capacité limitée à traiter les entrées et que nous chercherons toujours la manière la plus simple et la plus pertinente d' interpréter ce que nous voyons. La théorie de la Gestalt affirme que les humains recherchent des modèles, une structure, une logique et une forme lorsque nous examinons quelque chose. Et nous avons également tendance à organiser les contributions en groupes. Construisez le sens de l'ensemble en examinant les différentes parties. Mais en même temps, nous avons tendance à percevoir le tout comme plus que la simple somme des parties. Ainsi, lorsque nous examinons des sites Web ou des interfaces, nous les examinons simplement comme une seule interface. Au début, nous ne voyons pas tous les petits éléments. Ces principes sont très importants pour nous en tant que concepteurs d'expérience utilisateur. Nous pouvons les utiliser lorsque nous concevons des interfaces, car nous voulons que les utilisateurs puissent facilement comprendre ce qu'ils voient puissent facilement comprendre ce qu'ils voient et une idée de ce qu'ils peuvent faire de ce côté. Et nous pouvons concevoir des expériences plus efficaces lorsque nous comprenons comment les utilisateurs regroupent réellement le contenu qu'ils voient. Nous pouvons utiliser ces connaissances pour organiser le contenu ou sur des sites Web et d'autres interfaces. Il est donc facile pour les utilisateurs de le comprendre. Jetons un coup d'œil aux six principes. Ce sont la proximité, la similitude, la figure de fond, la fermeture, la continuation et l'enclos. Jetons un coup d'œil à la proximité. Tout d'abord, le principe de proximité stipule que les optiques sont perçues comme apparentées et font partie du même groupe si elles sont proches les unes des autres. Tout est donc une question de proximité. Nous pouvons tirer parti de ce principe en regroupant des informations similaires, telles que des sections similaires au sein d'une même page ou d'applications Web, boutons liés aux champs de saisie, etc. Lorsque nous effectuons des tests d'utilisabilité, il s'agit en fait de l'un des principes les plus bafoués que nous voyons. Tout d'abord, les choses qui se trouvent à proximité sur un site Web ne m'intéressent pas ou l'inverse. Éléments qui devraient être liés et déplacés trop loin sur une page Web. Page Web. Jetons un coup d'œil à quelques mauvais exemples. Tout d'abord, dans cet exemple, nous avons l'exemple d'un téléphone où les instructions sont trop éloignées des champs auxquels elles se rapportent réellement. Donc, si les utilisateurs recherchent de l'aide ou ne peuvent pas en avoir, ils ont un problème quelconque. Ils doivent ensuite monter. Ils ne peuvent pas le voir tout de suite ou à proximité. C'est un peu pareil. Nous avons un formulaire où toutes les instructions, il y a environ cinq instructions en haut, puis de nombreux champs de saisie. Et encore une fois, comme ils ne se rapprochent pas l'un de l'autre, l'utilisation de ne les percevra pas comme faisant partie de la même forme. Nous avons ici le revers de la médaille. C'est un exemple où des choses proches ne sont en fait pas liées. Donc, comme le bouton vert se trouve à proximité de la barre de recherche, nous supposons qu'ils sont liés, que nous pouvons appuyer sur le bouton vert et ensuite effectuer une recherche. En fait, ils ne sont pas du tout liés dans ce cas. Et lorsque les utilisateurs recherchent un fournisseur, ils saisissent les textes dans le champ de recherche, puis ils cliquent simplement sur le bouton vert car il est courant que vous ayez la barre de recherche et bouton d'action ici. Donc, le bouton vert, dans un meilleur design, aurait dû être retiré ou il aurait dû s'agir des véritables boutons de recherche. Réfléchissez ici au montant du soutien lombaire post-vie. C'est donc le pouf, du milieu vers la gauche. Quel en est le prix ? Est-ce le 3099 contre 5 ou le 44, 95 ? La plupart des utilisateurs supposeront en fait qu'il s'agit du 39, 95. Et le problème tient en partie au fait que le prix est proche de celui de l'article. Et comme le montre le principe de proximité la théorie de la Gestalt, atomes qui sont étroitement liés ou proches uns des autres sont perçus comme étant liés. Cela pose également d'autres problèmes . Nous avons la même couleur de fond que le prix l'article qui rétablit ce lien et le boîtier. Nous avons donc presque une bordure autour du prix et de l'article. Regardez les robes rouges de ce côté et essayez réfléchir à la description qui se rapporte à l'image. Est-ce celui d'ici, le monochrome, ou d'ici ? Ce texto ? La plupart des utilisateurs supposent donc qu' il s'agit de ce texte, comme vous le voyez dans cet exemple. C'est ainsi que notre cerveau les regrouperait parce que c'est proche des robes rouges. Cela crée en quelque sorte ce regroupement de contenus là-bas. En fait, en termes de contenu du site Web, c'est ainsi qu'il est censé être regroupé. Vous le voyez donc sur le côté droit. Alors, qu'est-ce qui aurait pu être fait ici ? Vous auriez pu ajouter un peu plus d'espace blanc et ne pas mettre d'en-tête entre les images et le texte, mais placer l'en-tête ici, les images, les prix, puis quelques descriptions. La proximité est ce qui aide les utilisateurs à comprendre le contenu. Et voici un exemple brillant d'Airbnb où l'entreprise a regroupé le contenu et nous avons instantanément compris comment les éléments s'assemblent. Sur cette page, il y a sections claires où le contenu est placé à proximité l'un de l'autre, créant ainsi cette relation entre les contenus. Ici, encore une fois, nous avons un exemple nouveau où ils ont utilisé sections claires pour les différents types de contenu sans rien lire, il suffit de le parcourir, nous avons l'impression des différents types de contenus. Le prochain principe de la Gestalt est la similitude. Et comment cela s'applique-t-il à la conception de l'interface utilisateur ? Eh bien, le principe de similarité stipule que les optiques sont perçues comme apparentées et comme faisant partie du même groupe si elles partagent les mêmes caractéristiques. Ainsi, lorsque nous concevons des interfaces et que nous voulons transmettre une relation entre des éléments, nous pouvons essayer de leur donner des caractéristiques similaires. Ainsi, par exemple, en utilisant des couleurs, des formes, des mises en page, de nombreuses personnes les percevraient comme faisant partie du même groupe, même s'ils ne se trouvent peut-être pas à proximité les uns des autres. Jetons donc un coup d'œil à quelques exemples. Qu'est-ce qui ne va pas ici ? Eh bien, il y a deux appels à l'action son côté qui font exactement la même chose. Oui, ils sont un peu difficiles à trouver. Le bouton orange Appliquer maintenant ne ressemble donc en aucun cas à un bouton. Tout d'abord, cela enfreint les conventions relatives à l'apparence d'un bouton. Et puis il y a le registre vert, bouton qui vous intéresse. Et comme ils ne se ressemblent pas, les utilisateurs ne créeront pas mentalement ce lien entre les deux, ce qui donnera l'impression que le site est plus encombré que nécessaire. Il s'agit là d'un autre exemple. Cela provient donc d'une page de vente de billets qui a été repensée. C'était donc avant la refonte. Ici. Pour comprendre le prix des billets et les options de sélection, les utilisateurs doivent consulter chaque section pour comprendre en quelque sorte ce qui se passe. Nous avons des couleurs différentes, numéros différents dans les champs de saisie et des prix différents. Cela crée donc ce look très confus. Voyons donc comment cela a été repensé. Il s'agissait d'un nouveau flux d'achat de billets repensé. Et nous avons utilisé le principe de proximité. Les options de prix sont donc proches les unes des autres. Et puis encore une fois, la similitude. Ils ressemblent à trois prix de billets prédéfinis. Comme les utilisateurs le comprendront facilement ces trois options sont liées. Ensuite, en dessous, vous avez la possibilité de saisir votre propre montant, qui est visuellement différent des prix prédéfinis, mais qui est toujours regroupé dans la même rubrique adaptée à l'écran, à savoir le choix d'un montant. Nous avons ici le principe de similarité utilisé. Il s'agit d'une section de prix où toutes les différentes options de prix sont alignées de manière similaire, ce qui vous permet de les comparer facilement. Le troisième principe que nous allons examiner est celui de la figure. Le principe de la figurine affirme que les humains ont tendance à séparer la figure du sol. Le chiffre principal est donc ce sur quoi nous nous concentrons. Le reste est perçu comme un arrière-plan. Dans la conception de l'interface utilisateur, nous pouvons aider les utilisateurs à se concentrer en surlignant quelque chose et traitant presque le reste comme un arrière-plan Nous devons créer ce point focal. Dans cet exemple, nous avons un principe rompu, un principe de base brisé. n'y a aucun élément de la page qui se démarque vraiment. Il y a beaucoup de couleurs, cases, il n'y a pas beaucoup d'espaces blancs. Les utilisateurs n'ont donc pas vraiment conseils quant à ce sur quoi ils doivent se concentrer. Cela peut entraîner une surcharge cognitive. Dans cet exemple, le design guide l'utilisateur en utilisant le principe de la figurine et en le mettant en valeur. Ainsi, lorsque nous savons que les gens perçoivent les éléments comme l'objet de l' attention ou comme l'arrière-plan, nous pouvons utiliser cela pour attirer l'attention sur un élément. Ici, les utilisateurs se concentreront sur le plan professionnel au premier plan et considéreront le reste comme arrière-plan. Et les concepteurs ici ont vraiment insisté sur le fait que la figure de fond est stable lorsque les objets se distinguent de l'arrière-plan et que l' arrière-plan présente ces intérêts. Le prochain principe de la Gestalt est la fermeture. Le principe de fermeture stipule que le cerveau comble les parties manquantes pour obtenir une figure complète, une image complète. Il doit y avoir suffisamment d'inflammation pour que les personnes puissent combler la partie manquante. Parce que nous nous sommes appuyés sur nos connaissances et notre expérience antérieures pour donner un sens à ce sentiment. Il faut donc que les gens reconnaissent quelque chose pour qu'ils puissent acquérir cette compréhension de l'ensemble. Nous avons ici un bon exemple de Netflix. Et même si nous ne voyons que les premiers films, nous comprenons qu'il y a plus d'options sur la droite. La clôture est donc en jeu ici parce que nous savons pas à quoi nous attendre au-delà des premiers films, nous avons de l'expérience, nous l'avons déjà vu cela suit également une convention. Outre la fermeture, la proximité et la continuité sont également en jeu. La fermeture peut être utilisée lorsque nous avons besoin de transmettre un message ou de renforcer un concept dans un espace restreint. Nous donnons aux utilisateurs des informations limitées, puis nous nous attendons à ce qu'ils comprennent et trouvent un sens ça. icônes, les notifications en sont des exemples. Il doit y avoir des éléments simples et réduits à ces éléments de base pour aider les gens à comprendre rapidement leur signification. Mais en même temps, nous ne pouvons pas supprimer trop d'informations, car il n'y en aurait pas assez pour que les utilisateurs créent eux-mêmes ce trou, cette fermeture. Le prochain principe dont nous allons parler est celui de la continuité. Le principe de continuité stipule que les objets placés sur une ligne ou une courbe sont perçus comme plus liés que ceux qui ne sont pas alignés. Dans l'interface utilisateur, la continuité est utilisée lorsque certains éléments suggèrent que nous devons concentrer notre attention sur un endroit ou une direction spécifique. Il peut s'agir par exemple de miniatures dans une galerie, d' une diapositive d'images ou d'un menu déroulant. Ainsi, lorsque vous voyez un groupe d' éléments tels qu'une galerie de photos, des curseurs, des onglets ou même de simples listes. Vous remarquerez peut-être maintenant qu'ils utilisent la continuation, ce principe de continuité. Objets. Nous pouvons l'utiliser dans l'interface utilisateur lorsque nous plaçons des objets à proximité , ce qui permet aux yeux de l'utilisateur de sauter de l'un à l'autre, de l'un à l'autre. Uber Eats en est un exemple, où nous avons une suite qui joue dans des lieux. Nous avons le menu en haut, s'il s'agit en quelque sorte de continuer à sortir de l'écran. Et puis encore une fois, le dernier Steal the restaurant and rewards et ainsi de suite. La continuation fonctionne non seulement pour les mouvements horizontaux, mais elle peut également guider l'œil verticalement à travers une composition, nous oblige à faire défiler et à visualiser les éléments. Donc, vous le savez sur Instagram et Facebook et de nombreux réseaux sociaux utilisent ce principe de continuité pour nous rendre accro. Dans cet exemple d'Airbnb, nous avons des éléments cohérents qui sont parfaitement alignés et regroupés sur des cartes, qui guident ensuite l'œil vers le bas à travers les annonces. Le dernier principe de la Gestalt est l'enfermement. Le principe de l'enclos stipule que les objets entourés d'une bordure sont perçus comme étant plus apparentés. Nous avons ici un exemple où les produits sont regroupés par public. Nous avons un public personnel et professionnel. Et la couleur est utilisée pour encadrer le contenu de chacun de ces groupes cibles. Comme le principe du boîtier est utilisé, le contenu du cadre peut avoir différentes expressions visuelles, tout en étant considéré comme lié en raison de cette enceinte globale du, que le contenu destiné à ce public en particulier. Sur mobile, on utilise souvent le principe du boîtier. Parce qu'ici, le contenu est souvent présenté sous forme de cartes, peut être présent sous forme de notifications , d'articles de presse ou sur les réseaux sociaux. Nous le voyons également. Du côté de l'actualité sportive, les enceintes sont utilisées de deux manières différentes. Nous voyons que dans les articles, les articles eux-mêmes sont entourés d'une bordure, indiquant ainsi que l'image et l'article vont de pair. De plus, le contenu du bas est entouré de couleurs. Vous avez l'impression que tout le contenu de la zone noire est lié. Vous n'avez pas besoin de lire l' en-tête pour le comprendre. Nous pouvons utiliser les principes de la Gestalt et ces connaissances sur la façon dont nous, en tant qu'humains, percevons objets et les éléments d'un site Web pour organiser le contenu et ainsi orienter les utilisations vers ce que nous voulons qu'ils voient. Nous pouvons les aider à atteindre leurs objectifs en fournissant ce signe qui réduit la charge cognitive et améliore ainsi la signification de l'interface globale. Dans la prochaine leçon, nous allons donc parler deux premiers principes de conception, à savoir la hiérarchie dans l'alignement. 3. Principes de conception - Hiérarchie et alignement: Dans certains cas, nous allons passer en revue cinq principes de conception, à savoir l'ouragan, l'alignement, la répétition, l'équilibre et le contraste. Dans cette leçon, nous allons parler de la hiérarchie et de l'alignement, deux principes de conception importants. Nous allons commencer par la hiérarchie. La hiérarchie est ce qui crée l'organisation et pourquoi est-elle importante ? Oui, les gens ont vraiment besoin d'aide. Se concentrer pour savoir où regarder en premier a aidé à comprendre ce qui est important de son côté. La façon dont les utilisateurs comprennent ou lisent le contenu passe souvent par la numérisation. Nous pouvons donc améliorer le comportement d'analyse en fournissant une hiérarchie claire pour aider les utilisateurs à se concentrer sur les tâches principales. Sur le côté, le cerveau se trouve. L'absence de hiérarchie visuelle empêche le cerveau de scanner et de zoner les zones d'intérêt. Si nous parvenons à comprendre rapidement ce que nous voyons, nous serons frustrés et risquerons de repartir. Eh bien, c'est un exemple un peu exagéré. Cela manque totalement de hiérarchie visuelle. Les éléments de cette page se disputent en quelque sorte l'attention de l'utilisateur. Et nous ne savons pas où chercher. quoi devons-nous concentrer Sur quoi devons-nous concentrer notre attention ? Qu'est-ce qui est important ? Nous n'en avons aucune idée. Et il ne faut pas oublier que les gens ne lisent pas. Ils scannent et essayent de trouver ce qui ressemble vaguement à ce qu'ils recherchent. Alors, comment concevons-nous la hiérarchie ? Tout d'abord, il s'agit d' organiser les éléments en fonction de leur importance. C'est la façon dont nous mettons l'accent sur les éléments afin inciter l'utilisateur à regarder et à interagir avec un élément en particulier. premier, un autre deuxième, et encore un troisième et ainsi de suite. Nous pouvons attirer l'attention des spectateurs en utilisant la taille, le poids visuel, la couleur et la position. Nous pouvons également créer une hiérarchie en regroupant des éléments similaires à proximité uns des autres pour suggérer cette relation entre les informations et les fonctionnalités. Ceci est basé sur le principe de proximité de la Gestalt. Nous savons que le cerveau perçoit le contenu qui se trouve à proximité l'un de l' autre comme étant lié. OK, quelles sont les informations clés de ce côté ? Imaginez que vous recherchiez appels d'offres gouvernementaux comme vous le faites. Que penses-tu pouvoir faire ? La plupart des utilisateurs nous ont en fait indiqué qu'ils téléchargeraient simplement les résultats. Peut-être qu'ils iraient en bas et y jetteraient un coup d'œil. Mais encore une fois, ils n' auraient pas vraiment d'endroit où aller. Encore une fois, nous nous souvenons que c'est la hiérarchie qui aide les utilisateurs à trouver les informations clés dans le bon ordre. Quelles sont donc les informations clés de cette page ? En fait, aucun résultat ne correspond à votre sélection. La conception de cette page ne guide pas l'utilisateur vers les informations clés. Le cas d'utilisation ici est celui les utilisateurs souhaitent acheter un billet pour une représentation. Lorsque nous avons testé ce côté, les utilisateurs sélectionnent tous la date puis l'heure, puis ils sont allés directement au bouton Continuer. Presque toutes les utilisations en manquent. Comment souhaitez-vous sélectionner vos sièges ? Comme on ne s'y attendait pas et dans le champ de vision alors qu'ils passaient de temps à autre sur le bouton. Voici un exemple de grande hiérarchie. Ce site Web ne contient que du texte, mais avec des tailles de police différentes, les lignes pour séparer le contenu, le regroupement de contenus similaires et, enfin, la couleur. La hiérarchie est claire. Sur ce site Web, le contenu associé est regroupé dans différentes sections cette sélection où ils sélectionnent leurs catégories de calendrier. Et toutes les catégories ont des en-têtes clairs, ce qui crée cette hiérarchie visuelle. Dans cet exemple AirBnB, le contenu associé a été regroupé. Chaque carreau avec une maison possède son propre groupe d'éléments ainsi que sa propre hiérarchie. C'est l'image qui nous attire. Ensuite, nous avons le titre de studio le plus difficile. Ils ont donc utilisé la taille pour nous attirer. Le prix est souligné et en gras. Les notes sont améliorées par la couleur. Les informations clés telles que le nombre d'invités et type de maison sont grisées, ce qui réduit la visibilité. Donc, les éléments visuels, ils ont vraiment travaillé, les différents éléments visuels, la topographie, la taille, les couleurs et le soulignement pour créer une hiérarchie claire, parlons de alignement suivant. L'alignement est ce qui crée un design net et unifié. alignement correct est l'un des meilleurs moyens de donner à vos conceptions un aspect professionnel et de donner l'impression que l'interface utilisateur a été délibérément conçue. De toute évidence, sur la gauche, nous avons un alignement assez médiocre. Et dans l'exemple à droite, nous avons un exemple de site Web bien aligné. Notre cerveau, nos modèles d'amour. Ainsi, l'alignement des éléments sur votre côté permet vraiment à l'utilisateur de voir facilement cet ordre et cette structure. Ceci est important lors de la réalisation de maquettes ou de la conception visuelle finale. Il existe différents types d'alignement. Vous pouvez vous aligner à gauche. Détectez ou pilotez, ou en bas ou en haut, Alonzo, votre contenu. Sur un site Web, nous aimons aligner les éléments les uns sur les autres afin que chaque élément, qu' il s'agisse de textes, d' images, de boutons etc., ait un lien visuel avec un autre élément de la page. Horizontalement ou verticalement. Il resserre le design et le rend moins salissant. Il peut également être utilisé pour créer un sentiment de connexion entre des éléments qui peuvent ne pas être proches les uns des autres. Vous n' y avez peut-être pas pensé. Mais à la base, chaque site Web est une lecture invisible, ou du moins ils devraient l'être. Et cela permet de créer cet alignement sur le site Web. La grille est toujours la même sur l' ensemble du site Web, mais elle peut être utilisée de différentes manières. Vous pouvez placer les éléments de différentes manières sur la même grille pour obtenir l'expression souhaitée. Qu'il s'agisse d'un croquis un plan filaire ou d'un design plus raffiné, est essentiel d'établir cette mise en page. Vous devez donc réfléchir à ce que devraient être les marges. Quel est le nombre de colonnes ? Quelle doit être la largeur de la gouttière ? B. Il s'agit donc également de cet espacement entre le contenu et la largeur de la colonne. Dans n'importe quel programme de conception tel qu' Adobe, Sketch ou Figma, vous pouvez configurer votre propre structure de grille. Vous pouvez essayer différentes configurations. Normalement. Pour un ordinateur de bureau HD, vous avez généralement une grille de 12 ou 12 colonnes. C'est donc en quelque sorte la norme, mais vous pouvez toujours vous en éloigner pour faire quelque chose de différent ou pour créer une autre expression. Parfois, vous travaillez sur un site Web qui possède déjà une structure de calamar établie. Donc, bien sûr, vous allez simplement utiliser celui-ci. Une fois que vous avez établi votre structure, vous pouvez commencer à ajouter des éléments à cette structure, en vous assurant que les éléments sont alignés avec les autres éléments de cette page. Jouez donc à placer les éléments pour créer cette couche efficace intéressante avec une hiérarchie claire. La distribution des éléments est un autre aspect de l'alignement. Nous avons donc ici quelques éléments. On dirait qu'ils viennent d'être jetés dedans. Il peut s'agir d'images, de texte, de boutons. Un moyen de renforcer cela consiste donc à utiliser cette fonction dans le programme de conception que vous utilisez. Donc cette distribution verticale et horizontale pour créer cet ordre et ce sens de l'organisation. Sur le côté, ici, nous avons un look beaucoup plus clair, plus épuré et plus professionnel. De ce côté, nous avons une expression un peu complexe. n'y a pas beaucoup d'éléments de contenu ou section qui correspondent aux autres éléments de ce côté. Vous pouvez donc voir que l'alignement horizontal ici est assez bon. Ensuite, nous passons à la section suivante. Est-ce que c'est aligné ? Nous avons donc les deux articles, mais ces trois voies ne correspondent pas vraiment au reste du contenu. Si nous examinons l'alignement vertical, nous avons les sections suivantes : la santé et le bien-être. Voyez si cela correspond à quelque chose qui ne correspond pas vraiment à ce qui se trouve en bas de la page. Une façon de renforcer ce design est donc de s'assurer que certains de ces éléments ci-dessus réellement alignés avec certains des articles ci-dessous, ce qui créerait une atmosphère beaucoup plus calme et plus ordonnée regarde. Dans cet exemple, ils ont en fait essayé de briser la grille. Il existe donc également une structure de grille sous-jacente sur ce site Web. Mais pour créer ce lien entre cette section ici et les autres types de contenu d'ici. Ils ont superposé les différentes sections pour créer ce flux et cette dynamique de ce côté. Faites donc défiler et ne faites pas défiler ici. C'est la question. Utiliseriez-vous le parchemin ici, feriez-vous défiler ? À partir de cet espace blanc horizontal, nous avons l'impression que la page se termine probablement là, nous avons cette impression d'achèvement. Il y a plus de contenu de ce côté. Donc, cet exemple montre simplement que nous voulons éviter cet espace blanc horizontal car cela crée un sentiment d' achèvement pour l'utilisateur. Euh, des études de 2018 ont montré que les utilisateurs passent environ 57 % du temps à visionner leurs pages au-dessus de la ligne de flottaison. 74 % du temps de visionnage a été consacré aux deux premiers écrans pleins. Les utilisateurs se sont donc arrêtés aux deux premières sections. Mais pour éviter cela, nous pourrions, comme nous l'avons vu dans l'autre exemple, essayer de faire en sorte que les éléments se chevauchent sur le site afin de créer un sur le site afin de créer un flux latéral au créer un sentiment d'achèvement. Ensuite, nous avons le reste des principes de conception. Et ce sont la répétition, l'équilibre et le contraste. 4. Principes de conception - répétition, équilibre et contraste: Dans cette section, nous allons aborder les principes de conception que sont la répétition, l'équilibre et le contraste. Commençons par la répétition. La répétition est ce qui unifie un design composé de nombreux éléments différents. Ainsi, le principe des répétitions ou des motifs signifie simplement que nous réutilisons les mêmes éléments, qui sont des éléments similaires, tout au long de la conception. La répétition de certains éléments de conception dans un design apportera ce sentiment clair d' unité, de cohérence et de cohésion. En répétant les éléments d'un design, vous créez immédiatement ce sentiment de familiarité ou d'identité et donnez aux utilisateurs un sentiment de cohérence et de cohésion. La répétition peut se faire de différentes manières. Vous pouvez répéter les mêmes couleurs, boutons, styles, motifs d' interaction, formes de police de caractères pour le style graphique ou d'autres éléments d'un dessin. Souvent, les entreprises ont un système de design qui définit les styles de boutons, les modèles d'interaction, les icônes, la typographie, etc. Ces éléments peuvent donc être répétés dans l'ensemble de leurs produits exactement pour créer ce sentiment de cohésion et d'identité dans leurs produits. La cohérence en est le résultat. Ainsi, lorsque vous répétez les styles, vous n'avez que des boutons ronds et non des boutons carrés. Vous avez le même collège, la même topographie et ainsi de suite. Vous évitez cette interface utilisateur désordonnée. Commençons par quelques mauvais exemples. Bon sang, c'est l'un de ces exemples de sites Web si mauvais qu'on pense presque qu'ils n'existent pas. Je l'ai inclus juste pour le fun. Pour faire valoir un point. L'absence de répétition et cohérence est tout simplement scandaleuse. C'est tellement incohérent. Il y a beaucoup de couleurs, beaucoup de fun. Il y a des lettres majuscules, des minuscules. Il y a des boutons et des appels à l' action partout. On dirait que tout cela a été ajouté. C'est faux à bien des égards. Quelle est la cohérence des boutons ici ? Jetez-y un coup d'œil. Nous avons donc trois boutons bleus différents qui, tout d' abord, ne sont pas alignés sur les champs de saisie associés. Mais ils ont des styles visuels différents, certains carrés en R, d'autres plus rectangulaires. Ils ont une topographie différente à l'intérieur. Et encore une fois, différents styles visuels des boutons. Nous avons déjà vu cet exemple. Il y a en fait deux boutons de ce côté. Le style du bouton orange ressemble donc en fait à l'élément visuel utilisé en bas ici. Explorons. Le bouton vert. On dirait un véritable élément interactif. cohérence du style serait utile pour l'utilisateur. Voici un autre exemple de site Web incohérent où les en-têtes sont différents, majuscules et en minuscules. textes qui ne sont pas des liens sont soulignés. C'est donc la convention selon laquelle texte est souligné est le lien qui n'a pas été utilisé. Et en gros, cela ne fait que créer cette impression très encombrée de ce côté. Nous avons ici un exemple simple mais bon de répétition. Il y a de la cohérence dans la palette de couleurs. Les styles de boutons sont tous similaires. Nous avons donc cette couleur dégradée, des boutons arrondis. Les motifs des cartes ont également des coins arrondis et sont cohérents en termes d' en-têtes et de corps du texte tout au long du dessin. Dans cet exemple, nous avons également un bon exemple de répétition. Nous avons les éléments visuels, les trois bandes qui se répètent sur tout le site. Nous avons une palette de couleurs cohérente, les mêmes polices utilisées, puis nous avons les boutons violets de don pour les dons. Et puis les autres boutons d'action sont jaunes. Donc, dans ce cas, ils utilisent le bouton violet pour le faire vraiment ressortir. Ils ont en fait rompu cette répétition des styles de boutons ici. Examinons le principe de l'équilibre. L'équilibre apporte de la stabilité à un design et a un impact sur l'attrait. Balanced joue un rôle important dans l' attrait exact d'un site Web. L'équilibre dépend du poids visuel des éléments que vous placez sur un côté. La façon dont nous mettons les éléments sur une page pour créer cette sensation d' équilibre, de calme. Nous ne voulons pas que le design ait l'impression de basculer au-dessus de r, car lorsque les sites Web sont équilibrés. Les utilisateurs ressentent ce sentiment de stabilité et de calme. Il existe deux principaux types d'équilibre. Nous avons un équilibre symétrique et un équilibre asymétrique. Conception symétrique, disposition des éléments sur un poids égal de part et d'autre d'une ligne centrale imaginaire. Cette forme d'équilibre met souvent côté une sensation d'harmonie. Et c'est le type d'équilibre le plus courant lorsqu'il s'agit de sites Web. L'équilibre par asymétrie se produit lorsque nous créons un équilibre en utilisant la tension. Nous ne plaçons donc pas délibérément les éléments sur un côté du centre, mais nous les plaçons d'une manière intéressante sur le site Web, créant ainsi une tension, tout en créant un sentiment d'équilibre. Ici, nous avons un site qui n'est pas très équilibré, il y a donc d'énormes espaces blancs. La seule image qui y a été mise, l'élément fait légèrement pencher le design. ai l'impression que ce n'est tout simplement pas très harmonieux. Il s'agit d'un exemple de site Web symétriquement équilibré. Tout ce qui se trouve de ce côté est une ligne autour de l'axe central. Même les textes sont alignés au centre. Autre exemple de symétrie équilibrée, même si tous les éléments sont alignés au centre, ce n'est pas obligatoire. Les en-têtes et les images des héros n'ont pas besoin d'être tous alignés au centre pour que site Web soit en quelque sorte équilibré. Vous pouvez toujours avoir un équilibre global par symétrie ou asymétrie. Il s'agit d'un exemple d' équilibre par asymétrie, peut être utilisé pour créer une expression plus dynamique. Ici, l'équilibre est atteint en utilisant des éléments de tailles et de poids différents combinés à des espaces blancs pour créer un design plus dynamique, conservant cette sensation d'équilibre. Ici, l'équilibre est atteint en poussant la structure de la grille. Nous avons en fait une sorte de section principale assez simple alignée à gauche. Ensuite, il faut jouer avec les polices pour créer un design plus percutant. Il s'agit donc d'un site Web d'industries innovantes. Ce sentiment de dynamique et d'asymétrie s'inscrit donc parfaitement dans l'expérience globale de la marque. prochain principe de conception que nous allons examiner est le contraste. contraste est le moyen le plus efficace de créer et souligner un impact avec votre design. Lorsqu'un design se démarque vraiment, ou que Dieu nous en préserve, comme certains diront, il y a fort à parier qu'il y a des contrastes. Le contraste joue un rôle important lorsqu'il s'agit d'organiser les informations sur une page. Il aide l'utilisateur à accéder au contenu et aux tâches importants. Le contraste est également très important lorsqu'il s'agit d'un design accessible. créant des designs accessibles et contrastés, il peut être difficile de lire le contenu, en particulier pour les personnes malvoyantes. Vous pouvez créer un contraste en utilisant deux éléments totalement opposés. Il peut s'agir de grandes ou petites tailles de police ou de petits éléments plus grands. Voici un exemple où l'en-tête est énorme par rapport aux trois types d'appel à l'action. C'est donc une façon subtile d'utiliser ce contraste pour créer cette première impression percutante. Encore une fois, nous avons ici un contraste de taille. Ils ont joué avec des textes de tailles différentes, des images pour créer du contraste. Le contraste est également utilisé lorsque nous mélangeons des fonds classiques et contemporains. Donc, ici, lorsque nous avons mélangé la police Serif, c'est le genre de police frisée entre deux polices et une police San Serif, ce type de police. C'est donc un contraste qui crée également une certaine dynamique. Mailchimp utilise ce procédé pour créer des phases de saisie dans ses conceptions. Ils ont donc obtenu leurs en-têtes sous forme de polices Cera, puis ils ont obtenu le corps du texte en tant que mosquée où la couleur de police sans empattement est également un moyen efficace de créer du contraste. Par exemple, des boutons d' appel à l'action qui se détachent ou colorent pour attirer l'attention sur un élément de la page. Ces sites ont tous deux utilisé des couleurs vives pour créer un impact. Exemple de bon contraste, principalement grâce à l'utilisation de couleurs. Dans l'exemple de Spotify, nous avons simplement obtenu le contraste grâce à l'utilisation de la couleur. Nous avons donc cette couleur de contraste verte qui se démarque du reste de l'arrière-plan. Nous pouvons également créer un contraste en utilisant des espaces blancs. Fondamentalement, l'espace négatif ou l'espace blanc, comme on l'appelle souvent, est la zone de la mise en page qui est laissée vide. Il peut être placé autour des objets, comme ici sur la droite, par exemple, autour de boutons ou de texte en général. Mais il peut également s' agir de l'endroit situé à l'intérieur du bouton, comme par exemple sur la gauche espaces blancs sont en quelque sorte une marge de manœuvre pour tous les objets que vous affichez sur votre page sur votre écran. Comme pour les autres éléments de l' interface utilisateur, vous devez, en tant que concepteur, comprendre le rôle joué par les espaces blancs. Ensuite, vous pouvez expérimenter pour trouver le bon équilibre qui s'adapte au reste des éléments. Mass to go de l'Interaction Design Foundation les espaces blancs sont comme une toile. C'est l'arrière-plan qui unit les éléments d'un dessin et leur permet de se démarquer. Le choc initial est presque trop fort pour beaucoup. De ce côté. C'est un exemple assez amusant, alors je l'ai inclus. Quoi qu'il en soit Le contenu et mise en page sont tellement accablants de ce côté. Et lorsque vous le décomposez, tout cela est dû au manque d'espaces blancs. y a donc aucun endroit où se concentrer et reposer vos yeux. Les utilisateurs sont partout et les éléments sur la toile sont tout simplement écrasants. Il est jeté dedans. Ici, nous avons une mauvaise utilisation des espaces blancs. C'est presque comme si un espace blanc avait été créé accidentellement à cause du manque d'articles en magasin. Mais cela crée néanmoins un déséquilibre dans le design. Voici quelques bons exemples de la façon dont espaces blancs permettent réellement au contenu de respirer. Tu n'es pas bouleversée. Vous pouvez en quelque sorte passer couramment d'une section à l'autre. Et un autre point à souligner est que l'espace blanc n'a pas besoin d'être large. Il peut s'agir d'une toile colorée. Ensuite, nous avons une section sur les éléments visuels. Nous allons passer en revue la typographie et l'iconographie en couleurs. 5. Éléments visuels - Couleur, typographie et iconographie: Dans cette partie du cours, nous allons passer en revue certains des éléments visuels que nous pouvons utiliser dans la partie visuelle du processus de conception. Voilà donc la couleur, la typographie et l'iconographie. Et nous allons commencer par la couleur. La couleur est un outil psychologique assez puissant pour impliquer les utilisateurs dans la conception d'un produit. La couleur indique quels éléments sont interactifs, comment ils sont liés aux autres éléments, ainsi que leur niveau d'importance. Les éléments importants devraient ressortir le plus, comme c'est le cas ici, où il est clair qu'il existe un appel à l'action. Un bouton jaune qui apparaît. Les textes et les éléments importants tels que les icônes doivent également répondre aux critères d'éligibilité lorsqu'ils apparaissent sur des arrière-plans colorés. Ils doivent donc toujours être lisibles et clairs. Les boutons, les icônes et tous les éléments que vous mettez réellement sur cette toile. La couleur définit également l' ambiance d'un design. Par exemple, nous avons ici trois sites Web différents, et il est clair qu'ils ont tous marque très différente en ce qui concerne l'utilisation de la couleur. Le premier, qui est très dynamique et très énergique. Et puis nous avons celui du milieu qui a une ambiance plus organique. C'est une sorte de couleur terreuse atténuée. Et puis il y a Lorna Jane, l'une de ses gammes. C'est une sorte de ton plus doux et féminin. Ainsi, vous pouvez créer une atmosphère d'élégance, de chaleur ou de tranquillité en utilisant la bonne palette de couleurs. Ou vous pouvez transmettre cette image de plus d'espièglerie et de jeunesse. Il y a de nombreuses considérations lors du choix des couleurs pour le design. Le succès des choix de couleurs dépend la compréhension et de l'appréciation des couleurs par les spectateurs, en fonction de leur origine, de leurs expériences passées. Ils goûtent aussi. Lorsque nous commençons à utiliser la couleur dans nos créations, nous devons être conscients des différences culturelles. Juste une expérience ici. Quelle couleur associeriez-vous à la mort ? Il est intéressant de noter que c'est très différent d'une culture à l'autre. Donc, dans les cultures occidentale et japonaise, cette couleur est le noir, alors que dans les cultures chinoise et hindoue, c'est pourquoi dans les cultures sud-américaines, elle est verte. C'est donc une façon intéressante de voir la couleur. Que signifie le rouge pour toi ? Encore une fois ? Dans les cultures occidentales, cela signifie danger. Cela signifie bon marché et une bonne affaire. Alors que dans la culture chinoise, cela signifie succès et richesse. Dans la culture occidentale, un marché des actions peut avoir des actions à la hausse affichées en vert, ce qui est une bonne chose, et celles qui baissent en rouge. Alors qu'en Chine, les actions dont la valeur a augmenté peuvent être affichées en rouge, car c'est un signe de succès. Et bien, c'est très intéressant ici, vous pouvez accéder à ce site Web et ensuite vous pouvez voir cet aperçu des différentes significations culturelles des différentes couleurs. Il est toujours bon de consulter cette page lorsque vous utilisez des couleurs. Lorsque nous concevons avec de la couleur, il est bon de savoir qu'il existe une science dans le fonctionnement de la couleur. Vous avez probablement tous déjà vu cela 100 fois, 1 000 fois dans les écoles primaires et jusqu'à présent. Mais nous allons simplement revenir sur les bases. Nous avons la roue chromatique, qui montre les couleurs primaires, jaune, bleu et rouge. Et puis il y a les couleurs secondaires, qui sont mélangées de manière égale entre les couleurs primaires. Ensuite, nous avons les couleurs tertiaires, c' est-à-dire les couleurs secondaires à moitié primaires. Encore une fois, les différentes gammes de couleurs chaudes, chaudes, et froides combinent les couleurs de la roue chromatique de différentes manières. L'un d'eux est donc d'avoir une palette de couleurs monochromatique. C'est pourquoi vous choisissez une couleur , puis différentes variantes de cette couleur. Vous pouvez également avoir une palette de couleurs sympathique. C'est à ce moment-là que vous utilisez des couleurs proches les unes des autres sur la roue chromatique comme dans le cas présent où nous avons couleurs terreuses dans les deux cas. Si vous souhaitez créer une expression plus dynamique, vous pouvez utiliser des couleurs complémentaires. C'est à ce moment-là que vous utilisez des couleurs directement opposées à celles de la roue chromatique. Et les couleurs s'intensifieront alors en quelque sorte . Nous avons deux exemples ici. Vous avez le dynamisme sur la gauche, puis vous avez la version la plus modérée, le ride. Ainsi, la couleur complémentaire peut être utilisée à la fois manière plus éclatante et plus lumineuse, mais aussi si vous l'utilisez avec une palette de couleurs plus atténuée. Il existe différents outils que vous pouvez utiliser pour vous fixer un objectif et jouer avec les différentes palettes de couleurs. Canva en a une intéressante sur son site où vous choisissez une, choisissez une couleur, puis choisissez si vous voulez qu'elle soit monochrome, complémentaire ou ce que vous voulez. Ensuite, il vous donne quelques exemples de combinaisons de couleurs basées sur cela. Vous pouvez donc y aller et y jeter un œil. Adobe propose un autre outil Hello, pick up a color dans lequel vous pouvez expérimenter les différentes combinaisons de couleurs que vous pouvez choisir si vous le souhaitez. Triade monochromatique analogique complémentaire. Comme vous l'avez vu, il y a beaucoup plus de combinaisons que j' ai examinées ici aujourd'hui. Donc, si vous voulez vous y plonger, vous pouvez vous rendre sur le site d'Adobe, jouer avec et voir quel type de pastilles en sort. La couleur est donc également importante pour l'accessibilité de nos designs, nous voulons garantir un bon contraste. Ceci est particulièrement important pour tout appareil destiné à être utilisé à l'extérieur. Pour une application mobile, un distributeur de billets, etc. Non seulement pour les malvoyants ou les personnes ayant d'autres déficiences. Nous voulons toujours placer des avant-plans sombres sur un fond clair ou inversement. En fait, un bon contraste est souvent créé en associant des couleurs complémentaires. Mais le truc, ou le plus délicat, c'est que si la saturation est trop élevée, elle peut créer cette vibration visuelle, comme vous le savez souvent avec le rouge et le vert. Nous voulons donc éviter le rouge et le vert ensemble ou un bleu vif sur fond rouge vif. Nous ne voulons jamais utiliser uniquement la couleur pour différencier les articles. Nous savons que dix pour cent des hommes sont daltoniens et qu'environ 1 % des femmes sont daltoniens. Donc, ici à gauche, nous avons une image de ces chapeaux. Et c'est ce à quoi cela ressemble pour la plupart des gens. Mais les images de droite sont ce à quoi ressemblent les personnes atteintes de différentes formes de daltonisme. Ils ne peuvent fondamentalement pas différencier les articles les uns des autres. Jetez un œil à ce design , puis réfléchissez à la manière dont vous pourriez l'améliorer en vous basant sur les connaissances que vous avez acquises jusqu'à présent en matière de couleur. Dans cet exemple, le rouge et le vert sont les seuls moyens d' indiquer si les iPhones sont disponibles dans votre magasin local ou non. Donc, si vous appeliez un aveugle, quoi cela ressemblerait-il ? Cela ressemblerait probablement à cela et vous ne seriez pas en mesure de le différencier. Donc, ce que nous pouvions faire pour rendre ce design plus accessible, nous pourrions non seulement l' afficher en rouge, mais aussi le montrer peut-être sous la forme d'une croix rouge, puis d'une coche verte. Vous aurez donc au moins deux variantes différentes, deux manières différentes d'afficher la disponibilité sur ce côté. En tant que concepteurs d'expérience utilisateur ou d'interface utilisateur, il est pratique de savoir qu'il existe différents systèmes de couleurs, même si vous n' allez probablement pas utiliser les deux, utiliserez-vous principalement le RGB ? Donc, en règle générale, le système de couleurs RGB n'est utilisé que dans les conceptions numériques et lorsque nous concevons pour le Web. Il s'agit donc d'un système de couleurs utilisé par des programmes tels que Figma Sketch, Adobe. Cela inclut la conception de sites Web, d'images et de graphiques pour les sites Web et les réseaux sociaux. Donc, tout est numérique. Pensez au RGB. C'est donc dans les paramètres. Si vous souhaitez utiliser ces dessins pour l'impression, vous devrez ensuite les convertir en couleur CMJN. Et si vous voulez approfondir ce sujet, et maintenant que vous savez qu'il existe, vous pouvez vous y intéresser davantage si vous voulez en savoir plus à ce sujet. Super, passons à la typographie. typographie est l'art de disposer les lettres et les textes de manière à rendre la copie lisible et claire et visuellement attrayante pour le radar. La topographie joue un rôle important dans la conception de l'interface utilisateur. Lorsque vous concevez un produit, il est essentiel de pouvoir communiquer clairement son intention et son objectif aux États-Unis. Et cela se fait généralement en utilisant du texte. Une bonne typographie permettra d'établir une hiérarchie solide. Il fournira un équilibre graphique au site Web et également au produit le ton général de la même couleur que nous. La typographie doit guider et informer vos utilisateurs, optimiser la lisibilité et l'accessibilité et garantir une excellente expérience utilisateur. Il existe donc différents types de polices de caractères, qui peuvent être des fontanelles. Il y a donc des empattements, sans empattements, et il y a plus de styles de scripts décoratifs puis il y a des empattements de dalles. Les polices empatantes ont donc ces petits traits décoratifs, également appelés empattements. Et puis nous avons la strophe du deuxième F. Envoyez-moi avec ce moyen sans en français. Les visages de type san serif sont donc ceux qui n' ont pas ces petites boucles. polices de caractères imitaient l'écriture manuscrite. Les lettres sont liées. Ensuite, nous avons l'empattement à dalles, qui fait essentiellement partie de la famille, mais qui ressemble à des empattements épais en forme de blocs. C'est un peu plus audacieux. Le surf remonte aux années 1400. Et la raison pour laquelle ils ont ces petits aliments est en fait à cause de la sculpture sur pierre. À l'époque, lorsque les gens avaient besoin graver des lettres latines dans la pierre, le designer les peignait généralement avec un pinceau. Ensuite, le tailleur de pierre devait découper dans ce tableau. Et cette sculpture sur pierre a créé ces empattements sur les lettres. Aujourd'hui. La plupart des livres ont des lettres empatentes, sont des polices serif parce que c'est plus facile à lire pour l'œil si nous nous sommes habitués à quelque chose à quoi nous nous sommes habitués. Alors que sur les sites Web, empattements ne sont pas si courants pour le corps du texte. Le seul endroit où nous sommes le plus souvent vus est sur les nouveaux sites. Ainsi, par exemple, sur le site web des Gardiens, nous avons une police serif utilisée à la fois comme en-tête et comme corps du texte. La police serif, l'ambiance est une police stable, respectable, intemporelle, formelle, traditionnelle et élégante. Et certains des exemples Times New Roman, Georgia, Palatina et Garamond, et certaines de leurs sous-familles. Le shérif a donc quatre types de familles différents. Il y a donc le style ancien, transitionnel, moderne et les empattements en dalles. Donc, si vous voulez, encore une fois entrer dans les détails, vous pouvez le faire. Voici un exemple de la façon dont les polices Cera ont été utilisées sur les sites Web, car elles sont plus détaillées ont tendance à mieux fonctionner avec des tailles plus grandes. Ainsi, comme ici, les titres fonctionnent bien avec copies Web plus petites créées avec une police sans empattement. Le san serif est simple, la face simple et sensible. Nous le savons en Helvetica. L'une des phases de conception les plus courantes, REL à Homer ou autre Diana, le capteur de encore une fois, possède quatre types différents. Ce sont le grotesque, le nouveau grotesque, l' humaniste et le géométrique. Et ils ont tous leurs propres personnages. En général, la plupart des sites Web utilisent les polices serif. C'est très neutre, facile à lire et souvent très lisible, et cela n'offensera personne si vous le souhaitez. Les sons que j'ai peuvent également avoir un aspect très net, car ici, la combinaison des espaces blancs et de ce contraste a vraiment un impact. polices de caractères imitaient l'écriture manuscrite là où les lettres sont connectées. Les scripts doivent être utilisés à petites doses cas échéant, car ils sont difficiles à lire. Il est donc préférable de l'utiliser comme décoration ou simplement comme élément graphique. La police de caractères Mood est plus féminine, personnelle, élégante et jolie. Mais encore une fois, c'est difficile à lire, il vaut mieux le mettre comme décoration. Les empattements en dalles, toute leur famille avec les empattements en blocs épais. Slap Sarah a été initialement développé pour les gros titres d' actualité afin d'en accroître la lisibilité et l'impact. Et c'est ce que ce laboratoire a ouvert des portes. Ils sont principalement utilisés pour les gros titres, mais rarement pour les prises de corps. Donc, comme vous le voyez ici, un titre percutant et puis encore une fois un corps de texte de Sarah. Mais ce titre sort vraiment du lot. L'ambiance qui règne est assez importante. Il s'agit de montrer un design audacieux, percutant et son intention de saisir certaines polices de caractères. Nous le savons. écrire américaine, les alphas lab et les slap de scellage, utilisant à la fois des polices san serif et sans empattement est désormais une pratique courante , est désormais une pratique courante dans la conception de l' interface utilisateur pour conserver l'interface dessus et la garder un peu plus rationalisé. Nous ne voulons pas utiliser plus de trois fonds au maximum. Et nous voulons réduire au minimum les polices décoratives. N'oubliez pas, comme toujours, les meilleurs choix de police sont ceux où le lecteur ne l' est pas réellement, non , ne remarquez pas la police mais le message. Très bien, jetons un coup d'œil à cet excellent exemple. Combien de polices différentes voyez-vous dans cet exemple ? Nous avons des polices de caractères Script. Nous avons même obtenu Comic Sans, ce qui est interdit à tous les designers. Nous avons vraiment, juste utilisation incohérente des polices ici. Donc, utiliser les mêmes fonds permettrait vraiment de renforcer cette conception et de créer une meilleure hiérarchie. Certaines directives évitent les majuscules car les majuscules, comme les ponctuations, les minuscules, sont plus faciles et plus rapides à lire. Ne rendez pas les choses plus difficiles qu'elles ne devraient l'être. N'utilisez pas de script. Toutes les majuscules sont plus lentes à scanner. Et de nombreux textes sous-jacents sont également difficiles à scanner. Il est également important de prendre en compte la taille du texte. Une bonne règle de base est de doubler ou moitié la taille lorsque vous changez de taille fixe. Par exemple, si vous utilisez 32 pixels pour l'en-tête, alors vous utilisez 16 pixels pour le corps du texte afin de créer un contraste. Ou du moins, c'est un bon point de départ pour doubler l'en-tête. Nous voulons également prendre en compte la hauteur de la ligne. Donc, à gauche, le dessin semble un peu exigu et cette phrase montre vraiment qu' il est important d'obtenir bonne hauteur de ligne dans vos dessins. L'espacement des lettres ou crénage est l'espace entre les lettres. Il est important d'utiliser la bonne quantité d' espacement entre les lettres dans votre dessin afin qu'il ne soit pas trop encombré et qu'il soit difficile à lire aux États-Unis. La longueur de ligne est également très importante. Et la largeur, la largeur de vos zones de texte, il vaut mieux avoir des lignes plus courtes pour améliorer la lisibilité. , il est plus rapide et plus confortable à lire. Une longueur de ligne suggérée pour l'écran est de 60 à 80 caractères sur la base d'une taille d'écran de 1 440 pixels et d'une taille de police de 16. Pour une utilisation plus mobile, il doit environ 35 à 45 caractères par ligne. Alignement. Nous en avons déjà parlé. Nous souhaitons aligner à gauche pour une meilleure lisibilité. Si c'est votre centre, ça va. Si vous n'utilisez pas plus de trois à cinq lignes, lorsque cela devient plus long, vous pouvez voir comment se diriger vers la gauche. Nous avons cet alignement central et cela le rend vraiment difficile à lire. Alors que sur la droite, nous avons cette meilleure lisibilité. La justification est particulièrement importante pour les personnes dyslexiques. textes parfaitement justifiés peuvent créer ces fleuves d'espaces blancs, ce qui les rend difficiles à lire. Donc, c'est bon pour l'impression. Par exemple, des journaux à coller, où vous pouvez ajuster le crénage, mais pas en numérique. Parlons de l'iconographie. Nous avons déjà parlé d' iconographie lorsque nous avons étudié le principe de la Gestalt de. Ainsi, lorsque nous utilisons des icônes, c'est souvent pour transmettre un message ou communiquer une idée dans un espace limité. Lorsque nous faisons cela, il y a certaines choses dont nous devons être conscients. Nous devons toujours appuyer les icônes avec des mots pour en améliorer le sens. Ainsi, par exemple, sur votre téléphone, vous avez toutes les icônes de vos applications, mais vous avez toujours cette étiquette en dessous, qui vous indique le sujet de cette application. Ils doivent également être pertinents pour la plupart des utilisations. Il doit transmettre suffisamment de sens pour que les utilisateurs puissent établir ce lien et mettre fin ce que signifie ce qui est simple. Nous avons donc ici une liste de tâches, un exemple de liste de tâches, où elle ressemble à trois points sur un cercle rouge, ce qui ne traduit pas vraiment le sens d'une tâche. Au lieu de cela, nous pourrions le concevoir comme un papier avec un stylo. Il faut également tenir compte du fait que les symboles ou les icônes sont souvent spécifiques à une culture. Ils peuvent avoir des significations différentes selon les cultures. Ainsi, par exemple, en Australie, une compagnie aérienne a lancé un vol vers la Corée et a distribué cette fleur d'œillet blanche. Mais ils n'ont tout simplement pas pensé au fait que dans la culture coréenne, cette fleur est un symbole de mort. Donc ça ne s'est pas très bien passé. Enfin, l'icône ne doit pas être trop détaillée car, comme l'essentiel, il s'agit d'avoir un message simplifié dans un peu d'espace. Alors, simplifiez-vous les choses. De nombreuses icônes sont universellement adoptées comme c'est le cas avec ces icônes que nous avons ici, nous avons le verrou pour des raisons de sécurité, nous avons le bouton de lecture, nous avons la disquette, qui pourrait avoir a perdu la connexion à l' élément d'origine d'une disquette. Mais nous savons que cela signifie économiser. Même les plus jeunes savent que même s'ils n'ont jamais vu cet objet auparavant, il existe d'autres icônes qui sont moins bien comprises. Voici donc quelques exemples : nous avons le menu des hamburgers. Et puis à côté de ça, il y a un autre type de menu appelé menu kebab. Tu as le burger et le kebab. Même s' ils sont couramment utilisés, ils ne sont pas toujours bien compris. Nous avons ici un bon exemple de l'utilisation d'icônes où elles sont claires, lisibles et avec cette étiquette en dessous. Ensuite, nous avons une leçon cognition humaine et la conception de l'interface utilisateur. 6. cognition humaine et conception d'interface utilisateur: Dans cette leçon, nous allons aborder cognition humaine et la conception de l'interface utilisateur. Parlons donc du concept d'abordance. Ce concept est donc essentiellement celui où les caractéristiques physiques influencent ou impliquent la manière dont l'objet peut être interagi avec. J'ai donc ici une photo d'un joystick. Vous pouvez donc le donner à un enfant de trois ans sans vraiment avoir besoin de donner des instructions. La façon de l'utiliser est assez intuitive et évidente. Les caractéristiques physiques indiquent où vous placez votre main lorsque vous appuyez sur des objets comme ça. Ainsi, lorsque nous parlons de conception de sites Web et conception d'interfaces utilisateur et de systèmes, nous constatons que ce concept d' accessibilité fonctionne de manière assez évidente pour l'utilisateur. Ce que tu dois faire disparaître. Vous devez vous baser sur les caractéristiques de cet objet. Voici donc un exemple de pauvre ou de quatre mois. Je suis allé sur ce site la semaine dernière. Je cherchais quelque chose et je ne pouvais pas. Je ne pouvais pas travailler sur la façon d'interagir avec une recherche. Alors je clique dessus en me disant  : Oh, quand je clique dessus, il apparaîtra avec une petite boîte blanche dans laquelle je peux parler. Et ce n'est que lorsque je suis entré dedans et que j'ai cliqué dessus que j'ai réalisé que, oh, c'est là qu'il faut le surpasser. Il y avait donc peu de moyens financiers. ne savais pas où je devais taper cet exemple. Imaginez maintenant que vous êtes allé à G Internet Banking un jour et que je vous ai demandé Voulez-vous répondre à l'enquête ? C'est donc un écran et on m'a présenté. Et réfléchissez à ce sur quoi pensez-vous que vous êtes susceptible de cliquer sur cet écran ? Alors jette un œil, vois ce que tu en penses. Où pensez-vous pouvoir cliquer ? Donc, si tu es comme moi, tu as cliqué sur le gros bouton Fermer parce qu'il n'y a qu' un seul bouton, non ? Tu ne peux pas te tromper. Tu n'as pas à te décider. Vous n'avez pas besoin de vraiment lire le bouton car il n'y en a qu'un parmi lesquels choisir. C'est donc un bon exemple de sa bonne abordabilité. Mais dans ce cas, c'est un peu trompeur et le flux visuel de la page indique même que cette grosse flèche géante pointe vers les boutons. Donc, mon attention et moi sommes vraiment concentrées sur ce bouton. Je n'ai donc pas vraiment besoin de le lire car ce qu'il faut faire est assez clair. Mais en fait, le bouton permet de fermer l'enquête. Donc, en fait, vous deviez cliquer n' importe où sur cette bannière qui nous aiderait à vous aider, et c'est là que vous feriez le sondage. Donc, l'exemple que je viens de vous montrer est un exemple de flux visuel où votre œil se déplace en quelque sorte sur la page et où il est attiré. ce qui concerne le flux visuel, le flux naturel de l'écran pour plupart des personnes dans le monde se fait de gauche à droite, de haut en bas. La plupart des utilisateurs commencent donc sur une page Web un écran ou un système, et je vais en haut à gauche de la page et ils travaillent comme ils le font pour que je lise tout de haut en droite, de gauche à bas. Mais ils fonctionnent naturellement sur cette page et se retrouvent généralement en bas à droite. Donc, si vous pensez à quelque chose comme un formulaire, votre endroit logique pour avoir un bouton suivant ou un bouton d'envoi se trouve généralement en bas à droite de l'écran. Pour certaines cultures, par exemple l'arabe, où elles peuvent se déplacer de droite à gauche, cela peut être un peu différent. Mais pour la plupart des cultures, la plupart des cultures occidentales et de nombreuses cultures asiatiques, c'est de gauche à droite, de haut en bas. Jetez donc un coup d'œil à cet exemple. C'est un site que nous avons testé. Comment pensez-vous que les utilisateurs peuvent naviguer sur cette page ? Ainsi, par exemple, dans cet exemple, ils ont dû choisir la date et l'heure de la représentation. Donc, une fois que j'ai choisi la date, puis l'heure, 20 h 00, que pensez-vous qu'ils ont fait ? Vous avez probablement raison si c'est le cas, ils sont tous passés directement de ce but IPM, directement au bouton doré Continuer en bas. Mais ce que la plupart des gens ont oublié, c'est qu'en bas à gauche, comment aimeriez-vous sélectionner vos sièges ? Heureusement, ce n'était pas un gros problème car la plupart des gens le ratent. Mais le choix par défaut était ce que la plupart des gens voulaient faire de toute façon, c' est-à-dire choisir leur propre siège. Mais la plupart des gens rejettent cela. Alors réfléchissez à l'endroit où vous pourriez le déplacer ? C'était donc dans ce flux visuel. Vous pouvez donc potentiellement déplacer la façon dont vous souhaitez sélectionner vos sièges en dessous de l'heure à laquelle ils ont mangé après-midi), de sorte que vos yeux se déplacent réellement à travers cela et que vous soyez plus susceptible de le remarquer lorsque vous vous dirigez vers le bouton Continuer. C'est donc une solution assez simple. Voici un autre exemple. C'est un bel exemple de bonne fluidité visuelle. Ainsi, dans cet exemple, les gens recherchent un membre du personnel. Maintenant, beaucoup de gens veulent simplement saisir un nom et cliquer sur Rechercher. Mais tels qu'ils sont, comme ils l'ont enseigné dans leur nom, leurs yeux doivent parcourir ces autres domaines, les mots clés, la division, l'emplacement. Maintenant, ils peuvent simplement les ignorer s'ils le souhaitent, mais ils peuvent même les aider à affiner leur recherche afin que les yeux qui les traversent soient plus susceptibles de les remarquer. C'est donc un exemple de bon flux visuel. J'aimerais parler du skeuomorphisme. Maintenant, c'est là qu'un objet dans logiciel imite son homologue du monde réel. Voici donc un exemple de morphisme des compétences. Dans cet exemple, nous avons l'ancienne application Notes d'Apple iOS. Ici, le bloc-notes ressemble à un véritable ancrage dans le monde réel. Il essaie de simuler l'expérience du monde réel. Nous avons donc un carnet jaune. Il y a des lignes à ce sujet, comme dans le monde réel. Et en gros, ce que vous devez faire est assez clair. Cela fonctionne comme si dans le monde réel la nouvelle application de notes était à peu près un écran vide avec quelques outils et icônes en bas. Il n'est donc pas du tout intuitif de l'utiliser. Voici donc un exemple sur la gauche, un skeuomorphisme. Parfois, ces métaphores sont aussi appelées métaphores habituelles. Et l'utilisation de métaphores visuelles présente certains avantages . métaphores peuvent mettre des concepts abstraits en termes concrets et clarifier un peu plus quelque chose comme le paiement des billets si vous ne l' avez jamais utilisé auparavant. Et permet aux utilisateurs de comprendre plus facilement comment l'utiliser ou interagir avec celui-ci. Cela lui donne de la familiarité, si vous le souhaitez, c'est plus confortable. Et cela rend également un système un peu plus facile à mémoriser. Et cela peut être un peu plus motivant, un peu moins intimidant si vous le souhaitez, et encourager l'action parce que c'est plus intuitif. Mais il y a quelques inconvénients. Je veux donc les passer en revue également. Cela peut être utile, mais uniquement pour les utilisateurs inexpérimentés. Donc, cet exemple d' application de notes sur iOS, eh bien, la plupart des utilisateurs d'un iPhone Apple connaissent assez bien le fonctionnement des notes maintenant. Vous n'avez donc pas vraiment besoin de toutes ces lignes, de ce désordre et de ces couleurs supplémentaires. L'autre problème est qu'il peut créer des limitations fonctionnelles dictées par l' objet du monde réel. Sur un bloc-notes. Lorsque vous arrivez au bas de la page, vous devez tourner la page pour commencer une nouvelle page. Donc, avec l'application Notes, vous pouvez simplement continuer, mais les utilisateurs peuvent penser : « Eh bien , attendez, je suis en bas de page. Je dois peut-être créer un nouveau fichier ou une nouvelle page ? Ainsi, les limites auxquelles ils peuvent s' attendre s'appliquent parfois dans le monde numérique alors qu'ils l'ont fait. Cela ajoute également de l'encombrement aux dessins. Vous avez donc toutes ces lignes et ces couleurs supplémentaires, beaucoup de bruit qui ne sont pas aussi nets si vous le souhaitez. Et il se peut qu'elle ne traverse pas non plus les cultures, les langues, les âges ou les générations. Mon exemple préféré est la disquette. Une partie de celle de mon enfant est que je vais avoir l'air de l'argent, c'est l'icône de sauvegarde imprimée. Il s'agit essentiellement d'un exemple de métaphore visuelle. de nombreuses années, nous utilisions des disquettes pour enregistrer des choses. C'est donc devenu une métaphore de l'épargne et c' est une icône encore largement utilisée depuis 100 ans. Ils vont probablement y aller, est quoi ce truc de toute façon ? Mais c'est une norme si elle devient une convention et c'est une métaphore pour sauver des choses. L'autre chose dont je voulais parler maintenant est réduire ce que nous appelons la charge cognitive, mais ne me faites pas penser, euh, explique Steve Krug, dans cette idée, c'est que l'utilisateur ne devrait pas avoir à se souvenir des informations d' une partie du système à l'autre. Voici donc un exemple de jouet. Trouvez un organisme de formation pour localiser un organisme de formation enregistré, enregistré pour offrir le certificat quatre en célébrant. Consultez leurs coordonnées, rendez-vous sur training.gov et entrez le code de qualification CHC 46. Oh, mec, il y a beaucoup de choses à retenir ici. Pensez-vous que la plupart des gens pourraient se souvenir de tout cela en cliquant sur ce lien ? Probablement pas. Vous ne devriez donc pas obliger les utilisateurs à se souvenir de nombreuses informations de ce type parce qu'ils seront tout simplement pas en mesure de le faire. Et cela met simplement beaucoup de stress sur l'utilisateur. Ce n'est pas nécessaire. Ne me faites pas réfléchir, comme le dit Steve Krug, voici également un exemple. Je suis allé chercher ma facture pour mes péages à des fins professionnelles. Je suis donc entrée et j'ai regardé mon numéro d'étiquette et j'ai regardé le numéro d'étiquette de mon mari. OK. Oui, je sais lequel c'est maintenant. Ensuite, je suis passé à l'export parce que je voulais le télécharger. Ensuite, je suis entré ici et il y avait essentiellement le numéro d'étiquette que j'ai dû mettre. Cela ne m'a donc même pas permis de sélectionner parmi les tags disponibles et leur compte. J'ai dû y retourner. Et puis je me suis dit : « OK, maintenant c'est réglé. Je vais y retourner et je vais le copier, mais il ne me laisserait même pas le copier. J'ai donc dû me souvenir du numéro lorsque je n'exportais pas. C'est donc un mauvais exemple. Vous ne voulez pas avoir à faire en sorte que les utilisateurs se souviennent d'un très grand nombre et qu' ils aient à le saisir ou à se rappeler quel est un candidat. Pourquoi ne me laisserais-je pas encore créer un surnom ? J'ai dit à mon mari que c'était la titularisation ou quelque chose comme ça. Ensuite, laissez-moi simplement sélectionner dans une liste déroulante, afin de réduire la quantité de réflexion que j'ai à faire. Donc, ce que nous voulons faire, c'est présenter les informations en morceaux distincts et significatifs. Nous allons donc regrouper les éléments en morceaux qui ont du sens pour les utilisateurs. Et nous voulons rendre les outils et les informations de soutien facilement disponibles. Des choses comme des convertisseurs de devises ou certains sites. Maintenant, dites simplement « Bonjour », nous avons remarqué que vous êtes en Australie. Aimeriez-vous tout dire en dollars australiens ? Et contrairement à Génial, cela signifie que je n'ai pas besoin de sortir une calculatrice ou utiliser mon cerveau pour la convertir chaque fois que je clique sur un élément. Donc, les choses qui réduisent la quantité de réflexion que vous allez utiliser doivent faire l'affaire. Maintenant, je veux que vous regardiez qui suit et que vous me disiez ce que vous remarquez. Imaginez que vous souhaitiez souscrire une assurance voyage. Vous souhaitez partir pour quelques jours au Vanuatu. Et comment réfléchir à ce à quoi vous vous attendez. Vous entrez ici, vous sélectionnez votre destination. Vous sélectionnez votre date de début, votre date de fin. Que pensez-vous qu'il va se passer lorsque vous cliquez sur le bouton Obtenir un devis ? Alors, pensez-vous que cela reviendrait sur une nouvelle page ? Tu crois qu'il ferait voler quelque chose ? Alors jetez un coup d'œil et voyez. Très bien, c'est fait, c'est fini. Que s'est-il passé ? Rien ne s'est passé ou n'est-ce pas ? Vous n'avez peut-être pas remarqué au milieu de l'écran ces valeurs de trois dollars en rouge étaient mises à jour juste au moment où vous cliquiez sur Obtenir un devis. Donc, si je reviens un peu en arrière, pourquoi ce dernier petit moment encore, voir si je remarque que cela les a changés. Voici donc un exemple de cécité au changement, où les utilisateurs ne remarquent souvent pas les changements d'état, les petites choses ou les parties de la page mises à jour qu'ils ne remarquent pas. Ils sont souvent confus lorsqu'ils font quelque chose dans la page qui ne semble pas changer. Nous avons effectué des tests sur des sites financiers et ils ont changé les choses et les utilisateurs ont dit choses, comme si quelque chose se passait ou s'ils avaient modifié cette option dans l'assurance et cela indique un Je suppose que cela pourrait affecter le prix, mais ce n'était pas clair. Voici donc un exemple de cela. Alors pourquoi ? Je voudrais maintenant parler un peu de ce que nous appelons vision fovéale et périphérique. Notre vision fovéale est donc notre vision centrale. Il fait de un à cinq degrés que vous regardez, où tout semblait vraiment net et où les couleurs étaient vives. Ensuite, nous avons des éléments de notre vision périphérique qui sont sur le côté. Et les choses dans ce genre de vision périphérique, peut-être un peu plus ternes, colorées et floues , donc vous pouvez tenir un livre à côté de vous, mais vous ne serez probablement pas vraiment capable de le lire livre. Notre vision périphérique oriente donc notre attention et entre souvent en concurrence sans vision fovéale centrale. La conception implique donc que nous voulons éviter déplacer ou de faire défiler les textes car ceux-ci interfèrent avec leur attention. Vous essayez donc de vous concentrer sur quelque chose au milieu et sur quelque chose qui clignote sur le côté. Nous voulons également utiliser des modèles familiers afin qu'ils soient détectables par la vision périphérique. Donc, si je cherche une barre de recherche, par exemple, je cherche une petite loupe ou un bouton à côté de nous dans une boîte blanche où je vais être en haut d'un terme de recherche. C'est donc un schéma que mon cerveau connaît bien. Je ne peux pas voir les détails de ce motif, mais je peux en voir assez sur sa forme. À Dieu, j'y prête attention. Nous voulons également minimiser le bruit visuel. Toutes ces choses sur la page doivent avoir un but, car elles rivalisent pour attirer l'attention. L'implication de conception ABA se produit lorsque nous l'utilisons dans les onglets de page. Ainsi, les utilisateurs ne remarquent souvent pas les onglets sur une page. Voici un exemple de site Web que nous avons testé il y a quelques années. Dans cet exemple, nous avons demandé aux gens de s'adresser à quelque chose qui les obligeait à souscrire une assurance. Judy dirige désormais normalement les personnes qui correspondent lors d'une session de test. Mais nous voulions prouver que même lorsque nous les menions, ils n'arrivaient toujours pas à le trouver. Beaucoup de personnes viennent de parcourir cette page et je n'ai tout simplement pas vu l'onglet sur le bon directeur général de l'assurance. Et la raison en est la suivante. C'est essentiellement à cela que ressemble le cerveau. Donc, lorsque vous regardez un écran d'ordinateur, supposons que vous vous trouvez à environ 45 cm de l'écran, un à cinq degrés. La mise au point équivaut à environ 4 cm sur l'écran avec une mise au point nette. En fait, c'est ce que voit votre cerveau. Vous pouvez donc comprendre, en regardant ce type de simulation, pourquoi les utilisateurs peuvent facilement passer à côté de ces onglets alors qu'ils ne sont pas colorés en gras parce qu'ils ne les recherchent pas. Alors, qu'est-ce que cela signifie pour les designers ? Cela signifie que nous voulons les présenter sous forme de CTA ou d'appels à l'action. Les choses pour lesquelles vous voulez vous en servir sont vraiment importantes. Nous voulons avoir des boutons robustes. Utilisez de puissants repères visuels. Vraiment, très bon rapport qualité-prix, de gros boutons aux couleurs vives et audacieuses qui ont vraiment une forte hiérarchie. Nous voulons également nous assurer que les onglets sont bien visibles et qu'ils sont si proches de cette vue vieille de cinq ans, de cette vue centrale. J'aime donc inverser le traitement des couleurs des onglets. Dans l'exemple de gauche, vu de côté, je vais juste vous le montrer. Les gens ne trouveraient pas ces tests d'éligibilité qui associent les inondations au milieu de l'écran. Ce serait donc mieux en tant que bouton s' il était vraiment important que vous vouliez qu'ils le fassent. Et les onglets sur la gauche, je n'ai pas dit ça. Sur l'exemple de droite, il s'agit de l'ancien site de la National Australia Bank, mais c'est un bon exemple de la façon dont les onglets sont utilisés. La couleur est inversée. Donc, l' onglet actif que celui qu'ils sont sur sa montre, et les autres onglets qu' ils peuvent potentiellement choisir un onglet sombre afin qu'ils correspondent plus susceptibles d' être remarqués par votre vision périphérique. En ce qui concerne la vision périphérique, quel pourrait être, selon vous, le problème ? Vous êtes donc entré ici et vous y avez jeté un coup d'œil. Alors, quel genre de film sur les bords de l'écran pourrait manquer aux gens ? Donc, en gros, à part le menu de gauche, cette petite icône pour la recherche sur la droite est facilement oubliée par les gens pour leur vision périphérique car elle est très petite et ce n'est pas un schéma que les gens connaissent bien. Paypal est un set et un familier avec ce que nous appelons le menu burger. Et ils ont vraiment l'habitude de l'utiliser sur un mobile. Mais sur un grand écran d'ordinateur, je n' utiliserais généralement pas ce menu de hamburgers. C'était donc évidemment un problème parce qu'ils ont mis cette petite chose, une solution. Saviez-vous que vous pouvez utiliser la fonction de recherche ? Eh bien, ce n'est pas une bonne solution. Il suffit d'utiliser la convention d'un brevet. Placez une petite boîte blanche à côté. C'est une solution, mais pas géniale. Cela signifie que nous voulons utiliser des modèles familiers détectables par une vision périphérique. Donc, des choses comme une zone de saisie de texte à côté du bouton de recherche et évitez de nombreux hamburgers sur les grands sites. Maintenant, je voudrais parler un peu confiance des utilisateurs et de la saisie de données personnelles. Les utilisateurs doivent donc utiliser l'application en toute confiance. Il y a beaucoup de scans qui, maintenant, les gens sont de plus en plus nerveux et fatigués de saisir leurs informations personnelles. Vous devez donc renforcer cette confiance. Alors, comment s'y prendre ? Nous pouvons utiliser des éléments tels que des iconographies ou des images pour montrer que le site est sécurisé. Beaucoup de personnes ne savent pas comment déterminer si un site est sécurisé à déterminer si un site est sécurisé l'aide du HTTPS ou de petites icônes de cadenas dans le navigateur. Parfois, des navigateurs comme Chrome vous indiquent si le site n' est pas sécurisé et ils vous donnent un gros avertissement et les gens paniquent parce que leur certificat a expiré. Donc, de votre côté, c'est peut-être sécurisé, mais cela peut ne pas être clair pour les utilisateurs. Voici donc un exemple de banque par Internet. Nous avons organisé le groupe de discussion E il y a quelques jours et les gens ont adoré le petit cadenas des services bancaires en ligne. Et c'est comme si c'était une banque en ligne pour une grande banque, bien sûr, c'est sécurisé. Mais cette petite photo de cadenas sur cette bûche les a juste réchauffés et flous, leur a donné cette assurance. Voici un autre exemple intéressant où ils vont saisir les informations de leur carte de crédit pour ce site de loterie à prix réduit. Les gens peuvent être un peu nerveux à ce sujet. Les personnes âgées sont particulièrement moins averties. Encore une fois, il faut savoir comment nous sécurisons vos informations et vous les survolez dans une petite boîte, vous obtenez des instructions. Cela ne signifie peut-être pas grand-chose pour les gens, mais le fait de disposer de toutes ces informations permet simplement de vous assurer que vous prenez la sécurité au sérieux. Désormais, lorsque vous demandez à des personnes de saisir des informations personnelles, vous devez fournir une proposition de valeur claire. Si vous leur demandez d'enregistrer des informations détaillées au fur et à mesure, accord, qu'est-ce que je retiens de cette transaction ? Voici donc un exemple, pas génial, où j'utilise parking de l'aéroport lorsque je voyage pour le travail. Et toutes mes coordonnées sont enregistrées, je me connecte en tant que client. Et quand je suis entré ici, il m'a demandé mon téléphone, a enseigné toutes mes autres informations dont je me souviens, sauf mon type de téléphone. Et je me demande : pourquoi ai-je besoin m'amuser et d'apprendre à préparer ma voiture ? Qu'est-ce que je n'aime pas ? Je ne vois aucune raison valable pour laquelle ils en auraient besoin. Quel ensemble d'effets je leur confie. Je me demande : « Que vas-tu faire de cette information ? Pourquoi avez-vous besoin de ça ? Ce n'est pas clair pour moi. Voici un bel exemple quand je vais ici, mais en gros, vous pouvez taper n'importe quelle adresse et les gens disent : « Attends, je tape une adresse peut ne pas être à l'aise ». J'examine la valeur des propriétés pour connaître l' historique des ventes de propriétés. Maintenant, vous pourriez dire, Oh, je ne suis pas sûr de cela, mais il dit ici, pourquoi devons-nous aborder maintenant dans ce cas, ils sont réellement tenus par les autorités gouvernementales enregistrer les détails de qui ils publient également ces données. Il y a une raison valable pour laquelle réglementation gouvernementale en a besoin. Encore une fois, ils n'ont qu'à m'expliquer pourquoi ils ont besoin de cette adresse. Il serait probablement préférable que ce soit en haut de la page. Mais au moins ils ont cette information. L'autre chose que nous pouvons faire est ce que nous appelons un engagement progressif. Donc, en gros, demandez à quelqu'un de vous épouser d'avance. Nous voulons construire progressivement cette relation et établir cette confiance. Ensuite, nous devons leur fournir une raison pour laquelle ils fournissent leurs coordonnées. Je suis donc allé sur un site Web appelé tent world. J'ai acheté du matériel de camping. Add ne voulait pas vraiment se connecter ou s'inscrire et il se peut que je ne veuille pas le faire. Je vais juste partir en tant qu'invité. Mais à la fin, cela me donne une option qui dit : «  Hé, activez votre compte. Je me demande, pourquoi voudrais-je faire ça ? Cela me donne quelques raisons valables pour lesquelles je peux vérifier l'état de ma commande et revenir plus rapidement la prochaine fois. Cela me donne donc des idées raisonnables les raisons pour lesquelles je devrais m'inscrire. Et tout ce que j'ai à faire, c'est de cliquer sur un bouton et de mettre un mot de passe, c'est fait. Ce n'est donc pas trop un engagement , alors je vais me demander d' avance de m'inscrire. C'est ce que nous appelons un engagement progressif. Dans notre prochaine leçon, nous allons parler de la conception de l'inflammation. 7. CONCEPTION DE L'INFORMATION: Dans cette leçon, nous allons parler de la conception de l'information et nous allons nous concentrer sur le contenu Web Riley et la lisibilité. Voici donc un diagramme qui montre à peu près le flux d'informations. Il comporte de nombreux éléments différents. Vous pourriez penser : « Oh, nous allons simplement mettre les mots sur une page les gens les liront et ce sera une bonne chose. Mais cela ne fonctionne pas de cette façon. Vous pouvez donc mettre des mots sur une page. Mais tous ces éléments différents influent sur la façon dont ils l'interprètent, leur perception du sujet, sur l'environnement technique et physique dans lequel ils opèrent, sur l'environnement social, les objectifs, toutes ces choses peuvent affecter façon dont ils interprètent ou traitent ces informations. Donc, si vous pensez à quelque chose comme les informations sur la vaccination contre la COVID, lorsque celles-ci sont sorties pour la première fois, vous vous souvenez probablement qu'il y avait beaucoup de controverse à ce sujet. Pensez donc à toutes les choses, façon dont ces éléments changent pour ce sujet particulier. Donc, perceptions du COVID, informations sur la vaccination. Lorsque cela est sorti, les gens avaient des perceptions différentes sur des idées désormais préconçues. Il existe différents environnements physiques. Beaucoup de choses se passaient. Les gens ont pris des mesures différentes, donc des environnements sociaux différents. Certaines personnes vivaient dans des communautés où il y avait beaucoup d'anti-vaxxers. D'autres ont peut-être vécu dans l'esprit, peut-être une sorte de foyer scientifique. Leurs prédispositions auraient donc pu être différentes. La circulation de l'information n'est pas toujours telle que nous l'entendons. Sachez simplement qu'il comporte de nombreux éléments différents. Je veux donc maintenant parler de la façon dont les utilisateurs visualisent le contenu. Donc, les gens sont généralement lus, ils scannent. Et nous voulons améliorer cette numérisation en fournissant des liens clairs, des titres, des phrases et des phrases courtes et de nombreux paragraphes courts. Quand les gens disent de gros paragraphes de texte sur un écran presque vraiment avec horreur. Nous ne voulons donc pas cela. Nous voulons leur permettre de le scanner facilement et de trouver ce qu'ils recherchent. Ceci est extrait du livre de Steve Craig, Don't make me think. C'est un vieux livre, mais excellent. Ce pour quoi nous avons conçu. Parfois, nos parties prenantes sont les seules à mettre tous ces mots sur la page que nous avons conçue pour que tout le monde lise de gauche à droite, de haut en bas. Mais la réalité, c'est qu'ils sautent sur toute la page. Ils ne regardent donc pas toujours le contenu que vous souhaitez qu'ils consultent. Ils recherchent souvent des liens et des mots clés. Maintenant, parfois, lorsque les gens lisent, ils ont des habitudes de lecture différentes. L'un des éléments les plus courants à connaître est ce que nous appelons le motif en forme de F. Donc, comme je l'ai mentionné, les gens ne lisent pas, ils scannent, mais ils scannent souvent un motif en forme de F. Je pourrais lire la première ou les deux premières lignes de textes. Alors je pourrais scanner vers le bas. Ils lisent quelques mots du suivant, puis je pourrais simplement scanner vers le bas et voir les mots clés. Voici donc quelques exemples de ce motif en forme de S. n'est pas le seul modèle de lecture, mais il est très courant, en particulier pour les pages de résultats de recherche. Vous pouvez voir ici, grâce au suivi oculaire , comment les gens perçoivent la douleur. Maintenant, vous pourriez dire, oh, débloquez les données biographiques du contenu Web, je dois faire ce segment. Toutefois, il se peut que vous soyez encore en train de rédiger des instructions pour une application ou un logiciel. Ainsi, lorsque nous avons des instructions, nous voulons nous assurer de déplacer des éléments tels que des instructions vers des infobulles. Quelques points d'interrogation sur le côté ou de l'aide. Ou même les messages d'erreur parleront de message d'erreur plus tard. Mais parfois, nous avons encore besoin de formuler ces instructions de manière à ce que les gens puissent les comprendre. Nous ne voulons pas non plus inclure d'instructions inutiles. Ne dites pas aux gens comment sucer des œufs. En gros, les gens ne sont pas stupides. Ils connaissent certaines conventions communes. Donc, ne dites pas aux gens d'utiliser comment utiliser les choses quand c'est assez évident. Nous voulons donc nous assurer que le design lui-même indique quelles actions sont disponibles pour les utilisateurs. Les designs doivent parler d'eux-mêmes. L'utilisateur ne devrait pas avoir à lire les instructions sur la façon d' interagir avec cette conception ou cette interface utilisateur. Voici donc un exemple pour accéder au site, entrez votre nom d'utilisateur et votre passe dans les champs prévus à cet effet. Non, je n'aurais jamais eu ça de cet animal de compagnie. Voici donc un exemple. La plupart des gens connaissent un modèle de connexion. Je ne vous suggère pas de le faire, mais vous pourriez probablement même vous débarrasser des étiquettes, du nom d'utilisateur et du mot de passe et le papier saura toujours quoi taper parce que c'est un schéma très familier. Il suffit donc de perdre les instructions sur la façon de se connecter. Peut-être juste mettre un titre et ce à quoi ils se connectent. N'incluez donc pas ce que j' appelle des instructions superflues qui ne sont pas vraiment nécessaires et ajoutez simplement du bruit visuel et de l' encombrement à la page. Vous pourriez donc penser que les gens ne lisent pas les instructions, ce qui est souvent vrai, mais qu'ils lisent les instructions lorsqu'ils sont bloqués. Réfléchissez donc à votre propre situation. Avez-vous déjà acheté un meuble chez Ikea ou un jouet pour votre enfant et que vous essayez de l'assembler la veille de Noël et vous vous dites  : « Oh, je n'avais pas besoin de lire le manuel, je peux le faire sans ça. Et puis tu commences à tout assembler et puis tu te dis : « Oh, je suis bloqué. Que faites-vous alors ? Ensuite, vous prenez le manuel. Les gens cherchent donc de l'aide, mais uniquement lorsqu'ils sont bloqués. Donc, lorsqu'ils accèdent à un formulaire Web, ils y vont, je n'ai pas besoin de lire les instructions. Je vais simplement remplir ce formulaire en ligne. Ensuite, ils se retrouvent bloqués et cherchent de l'aide. Et ils cherchent de l'aide au point de semer la confusion. Parfois, cependant, nous voulons leur donner des conseils ou des choses qui les aideront dans ce processus. Avant qu'ils ne commencent. Et c'est vraiment difficile parce que si vous mettez ces instructions en haut d'un téléphone, gens les ignoreront tout simplement. C'est donc un bon exemple de site Web asic. Quand nous avons changé le nom de notre entreprise. En gros, c'est ce qu'on m'a présenté. Donc, avant de commencer à établir les prix, il y avait une liste de choses, de choses à savoir, parce que c'est un site Web gouvernemental pour enregistrer votre entreprise. Il pense que je devrais probablement lire ces choses. Et le fait d'avoir une case à cocher m'a permis de les lire beaucoup plus probablement. Voici donc les choses dont vous devez être conscient. N'importe qui pourrait parcourir et cocher à peu près toutes ces cases sans les lire. Mais en cochant la case ici , vous acceptez ces choses. Vous lisez donc chacune de ces instructions, vous cliquez sur les cases à cocher et cela ne vous permettra pas de continuer. Le bouton est grisé jusqu'à ce que vous cochiez toutes ces cases. C'est donc un bon exemple de la façon dont vous pouvez parfois fournir des instructions sur le style d'un processus, en particulier s'ils ont besoin de certains documents ou s'ils doivent avoir fait certaines choses avant lancez ce processus. Maintenant, lorsque nous écrivons du contenu, nous voulons utiliser ce que l'on appelle la pyramide inversée. Nous voulons donc mettre les choses importantes au premier plan. C'est donc presque le contraire de la rédaction académique, où nous avons notre introduction, notre méthode ou notre approche, nos résultats et notre discussion et nous aboutissons à une conclusion. Avec la rédaction de contenu Web. Nous voulons inverser la tendance. Nous voulons commencer par la conclusion. Qu'est-ce que les gens veulent savoir, alors que voulez-vous qu'ils sachent ? Quelles sont toutes les autres petites choses légales que vous devez inscrire dans leurs termes et conditions, des choses comme ça. J'ai donc les éléments vraiment importants en haut de la page qui aideront les utilisateurs à atteindre leurs objectifs. Et évidemment, cela revient à savoir quels sont les objectifs de l'utilisateur et qui sont les utilisateurs de cette page ? Pensez donc toujours à cela lorsque vous rédigez du contenu. Qui est le public de cette page ? Et qu' essaient-ils de réaliser ? Je vais vous montrer une petite vidéo maintenant. C'est tellement propre. Vous aimez les steaks ? questions que je pose fréquemment, il suffit de les poser pour continuer, cela ne le dit pas vraiment dans cette section. Vous serez en mesure de répondre à ceci et cela, en vous basant sur les passes décisives et cliquant ici pour cette dernière question. Comme vous pouvez le voir ici, il y a beaucoup de texte superflu. Il s'agit d'une question fréquemment posée. Ils reçoivent 1 000 appels par jour. Oui J'espère donc que votre FAQ ou votre base et tous les appels certaines de vos questions ont déjà reçu une réponse. OK. Où y répondent-ils ? Si vous ne trouvez pas l' information, passez à l'acte. Eh bien, bonne chance. J'essaie de lire des informations provenant d'une loi gouvernementale. Et puis, tout en bas de la page, se trouvent les trois petits liens où se trouvent les questions les plus fréquemment posées. La majeure partie de ce texte est donc superflue. Gf est mon label scientifique pour ce GF superflu. Ci-dessous, nous redessinons cette page. Nous avons maintenant les trois liens vers les FAQ parce que j'en avais tellement qui étaient classées selon le moment où elles commençaient ou mettaient fin à une tendance. Il y avait plein de petites choses comme comment changer une ampoule ? Qui doit payer pour cela ? Donc beaucoup de petites questions spécifiques. Mais en les catégorisant, c'est pourquoi ils l'ont fait. Nous avions donc d' abord ces trois liens , puis si vous ne les trouvez pas, rendez-vous à ces endroits. Une autre chose que vous pouvez faire avec le contenu est d'utiliser ce que nous appelons développer, réduire ou afficher des panneaux de masquage. Ce sont des moyens très utiles, fonctionnent particulièrement bien sur mobile, car l'utilisateur a contrôle du contenu qu'il dit et de ce qu' il aimerait voir étendu. C'est donc un bel exemple. Voici un autre exemple de panneau extensible. Il s'agit du portail de découverte de données Turn sur lequel nous avons travaillé. Encore une fois, nous avons fait de nombreuses recherches sur les utilisateurs. Nous avons parlé à des écologistes et à des chercheurs. Et nous avons découvert que l'une des choses que les scientifiques veulent savoir dans les universités concerne les métadonnées ou les données concernant les données. C'est donc un endroit où je peux trouver toutes les données écologiques. Et ce que nous avons découvert, c'est ce qu'ils voulaient tous savoir. Nous avons mis là en haut de la page, puis les choses que j'ai besoin que certains utilisateurs voulaient savoir, nous avons cliqué sur ces panneaux d'expansion ou de réduction. Encore une fois, assurez-vous de mettre des étiquettes dessus , comme « Afficher » et « Masquer » pour des raisons d'accessibilité. Et assurez-vous qu'il y a un indice visuel fort, comme s'il permettait de cliquer sur l' ensemble de la zone, comme une bordure autour de celle-ci, un ombrage ou une couleur, etc. Voici donc des exemples de panneaux extensibles. Je voudrais maintenant parler un peu alphabétisation et de la lisibilité. Je trouve que c'est un peu tragique, mais environ 14 % des Australiens sont très peu alphabétisés, et c'est très courant dans d'autres cultures occidentales également. Cela ne veut pas dire qu' ils sont stupides ou stupides. Quoi qu'il en soit, c'est juste que les gens ont origines différentes ou qu'ils peuvent avoir des troubles d'apprentissage qui peuvent les empêcher de lire ou des choses comme la dyslexie, des choses comme la dyslexie, des choses comme ça. Les sites Web destinés au grand public. Cela signifie que nous voulons généralement écrire ce contenu destiné à un niveau de sixième année, qui parle de nous d'un enfant de 12 ans. Cela semble donc assez effrayant. Mais pensez simplement si vous avez un public en général. Donc, si vous avez un site Web bancaire ou un site Web gouvernemental pour l'aide gouvernementale, vous devez vous assurer que ce contenu cible environ la sixième année. Dans le gouvernement australien, le guide de style du contenu Web indique qu'il s'agit d'un niveau de cinquième année. Cela peut donc être difficile à faire. Alors, comment évaluez-vous cela réellement ? Il existe donc différentes échelles de lisibilité, que nous appelons, qui déterminaient la lisibilité des textes. Voici donc l'un de ces exemples appelés frites. Dans cet exemple, vous prenez trois paragraphes de textes. Vous faites la moyenne du nombre de syllabes de plus de 100 mots et du nombre de phrases par cent mots. Ensuite, vous discutez de cela pour les trois paragraphes cette grille sur ce graphique. Et puis cela vous montre que c' un niveau collégial qui est universitaire, ou qu'il s'agit d'un élève de cinquième année, etc. C'est donc une façon de procéder. C'est la manière la plus difficile de le faire, mais c' est la théorie de base qui la sous-tend. Il s' agit de quelques autres outils que vous pouvez utiliser, même simplement Microsoft Word de base. Si vous allez dans les options, vous pouvez cliquer sur les statistiques de lisibilité , puis effectuer une vérification orthographique. Et à la fin, il apparaîtra et vous donnera le score de facilité de lecture. Il s'agit donc d'utiliser une méthode appelée Flesch-Kincaid au lieu de frites. C'est l'un de mes outils préférés. C'est ce qu'on appelle l'application Hemingway. Beaucoup de rédacteurs utilisent un outil. Avec cet outil, vous obtenez vos textes depuis votre site Web ou tout ce que vous souhaitez tester et vous collez dans cette zone centrale. Et la seule chose que je n' aime pas dans cet outil, c'est que ce n'est pas une façon parfaitement claire de coller vos textes. Vous collez donc votre texte juste au-dessus du texte qui s'y trouve déjà. Ensuite, il vous donne automatiquement un score sur le côté droit. Ce texte est donc une lisibilité de sixième année. Et ce qui est vraiment utile, c'est que vous pouvez le modifier en ligne. Donc tu peux entrer ici et tu vas lire, d'accord, cette phrase en rouge foncé, c'est très difficile à lire. Laisse-moi y aller et changer ça. Ensuite, vous pouvez voir en temps réel comment cela évolue. Ensuite, tu peux y aller, d'accord, je vais le ramener au niveau de la cinquième année en supprimant quelques gros mots. Il est donc parfois difficile de le comprendre si vous avez des mots comme gouvernement australien, ce sont de grands mots. Et je vais affecter la lisibilité, mais ça ne peut pas aller avec. Si vous l'appelez Ozzie et Gov, ce n'est probablement pas la meilleure façon de le faire. Il y a donc des termes comme ça que tu ne pourras jamais éviter. Ensuite, nous allons passer par le processus de conception visuelle. 8. Processus de conception visuelle - de la filière à la conception visuelle: Nous allons maintenant parler du processus de conception visuelle, principalement de la façon dont nous pouvons utiliser le mood board pour passer du filaire en noir et blanc à un véritable design visuel. Nous nous concentrerons sur le mood board afin d'établir un style visuel pour nos designs. Nous parlerons également des guides de style en tant qu' outil dans le processus ou en tant que moyen de documenter ces styles. mood boards sont des collections de matériel visuel qui présentent des idées et des concepts. Ce n'est pas quelque chose que nous connaissons très bien en UX, mais c'est une technique populaire dans le monde du design au sens large et dans d'autres domaines créatifs. mood boards sont parfaits pour créer des orientations visuelles pour votre design et vous permettre de partager efficacement ces idées avec les autres. Ils voulaient transmettre la bonne ambiance et mettre avant les aspects les plus émotionnels du design. Contrairement aux maquettes et aux prototypes, les moodboards ne donnent pas image détaillée d'un futur projet. Mais encore une fois, ces couleurs émotionnelles et plus larges, la topographie, l' imagerie, etc. Alors pourquoi s'embêter avec les moodboards ? Tout d'abord, il s'agit d'économiser du temps et efforts en quelques heures, voire moins. Les concepteurs peuvent créer ce guide visuel pour les clients. Lorsque nous présentons un concept. Et le mobile peut facilement être modifié, ce qui permet d'économiser du temps et des efforts. C'est également un bon moyen d'impliquer les clients dans le processus. Nous pouvons recueillir des idées auprès des clients et essayer de comprendre ce qu'ils attendent du projet. Ils peuvent participer activement à la sélection des styles et des échantillons. Et c'est une technique simple qui peut également être utilisée si vous n'êtes pas designer. Vous pouvez également le faire pour comprendre le projet. Vous pouvez donc faire du mood board sur le client. À quoi ressemble la marque aujourd'hui ? La démographie, peut-être ajouter à votre personnalité. Quels sont les styles visuels ? Qu'est-ce qu'ils adorent ? Qu'est-ce qu'ils utilisent ? Qu'est-ce qu'ils voient ? Peut également créer un mood board sur les concurrents du client. Alors, à quoi ressemblent les sites concurrents pour éviter de faire de même ? Donc, surtout, nous nous ennuyons pour nous inspirer et établir cette direction visuelle. C'est un bon moyen de trouver des idées et l'inspiration pour la direction visuelle de votre design. concentrez sur la bouche, votre mood board , plus votre processus de conception visuelle sera facile. En tant que designers UX, nous pouvons créer un mood board pour les éléments d' interface, pour l'iconographie, pour la topographie d'une couleur. Jetons un coup d' œil à quelques exemples. Mood Body nous aide donc à comprendre comment passer du wireframe au design visuel. Ce n'est donc qu'un exemple, une sorte d'exemple simple. Nous avons le wireframe sur la gauche et nous avons une sorte d' interface utilisateur contenant plus de fichiers sur la droite. Essayons de le décomposer un peu. Jusqu'à présent, en matière d'UX, nous nous sommes concentrés sur les aspects fonctionnels du design. De quels types d' éléments d'interaction avons-nous besoin ? Quel est le flux du site que nous allons appeler à l'action ? Devons-nous inclure, lorsque nous commençons le mood board, nous commençons à établir cette direction visuelle pour notre design ? Et il s'agit d'un simple wireframe pour un site Web de recherche d'animaux de compagnie. Et voyons comment le processus de mood board a contribué à orienter ce design. Donc, tout d'abord, quelques mots clés ont été définis, donc ils étaient joyeux et fluides dans le rétro. Ce site était un site Web pour animaux de compagnie destiné aux familles avec de jeunes enfants qui recherchent un animal de compagnie pour rejoindre leur famille. C'est pourquoi, ces flux très joyeux, votre ambiance rétro ont été choisis. Voici un exemple de mood board d' une page. Sur la base de ces mots-clés. Sur la base de ces mots-clés, nous pouvons commencer à trouver de l'inspiration. Il s'agit donc d'une collection de captures d'écran provenant d'autres sites Web. Certaines photos indiquent cette direction visuelle du design. Cela n'a pas besoin d'être très compliqué. Vous pouvez prendre quelques photos. Cela ne doit pas prendre beaucoup de temps, mais il un peu d'inspiration avant vous sera utile de trouver un peu d'inspiration avant de commencer à créer votre design. Une fois que vous avez recueilli cette inspiration, vous pouvez commencer à décomposer et analyser le design. Ensuite, utilisez-le comme guide. Ainsi, par exemple, nous ne voulons pas copier le design, nous ne voulons pas copier les sources d'inspiration que nous avons trouvées. Nous voulons comprendre ce qu'ils ont fait et pourquoi ils l'ont fait, puis copier cela, puis faire cela. n'ai donc pas pu faire une petite analyse. Il y en a donc eu. Ils ont utilisé de grands blocs colorés comme toile de fond pour chaque section. Ils l'ont fait. Les lignes droites sont séparées par des éléments superposés. Dans ce cas, les chaussettes qui choisissent coulent partout. Et puis ils ont des boutons arrondis dans le design. Et puis l'utilisation de blocs de couleur, on n'utilise pratiquement pas de blanc. D'accord, alors comment ce mood board pourrait-il nous aider à créer cette interface utilisateur pour ce site Web ? Nous avons donc cette structure en noir et blanc , puis nous allons appliquer les différents éléments que nous avons vus dans un mood board. Nous avons donc appliqué les grands blocs colorés comme toile de fond pour chaque section du site Web pour animaux de compagnie sections en lignes droites Les sections en lignes droites sont divisées par des éléments qui se chevauchent, dans ce cas des formes et quelques chiens. Nous avons utilisé ces boutons arrondis et ces carreaux arrondis. Ensuite, nous avons utilisé des blocs de couleur. n'y a pratiquement aucun moyen. C'est donc le résultat d' un simple exercice de mood board , puis appliqué à ce wireframe. Tout est également résumé dans un guide de style très bref et simple, où nous retrouvons les styles des boutons, les titres , les couleurs, puis quelques éléments visuels utilisés. OK, alors décomposons le processus avec un peu d'éthanol. Vous pouvez réfléchir à trois mots-clés visuels. Il peut donc y avoir des valeurs de marque, essentiellement des mots clés qui reflètent la marque et vous donnent une orientation. Ainsi, au cours de vos recherches et analyses UX, vous avez probablement découvert de nombreuses informations auprès de vos utilisateurs sur ce qu'ils aiment, sur la marque. Quelle est l' ambiance que lui donne la marque et qu'est-ce qu' elle est censée faire ? Et nous pouvons utiliser cette recherche lorsque nous décrivons ensuite ces mots-clés. Nous pouvons faire une cartographie mentale, des associations de mots ou un remue-méninges sur des mots. Ensuite, avec ou sans celui d'un client, nous pouvons déterminer ces mots-clés. Voici quelques exemples de mots-clés émotionnels. Joyeux, compétent, joyeux, curieux, etc. Ensuite, nous voulons décider des moodboards dont nous avons besoin. Avons-nous besoin d'éléments d'interaction, ou est-ce déjà établi ? Avons-nous besoin de couleurs, d'une nouvelle palette de couleurs, typographie ou d'un mood board sur la mise en page ? Souvent, il peut y avoir un guide de style complet, auquel cas nous n'avons probablement pas besoin de grand-chose pour faire du mood board. Mais d'autres fois, je pourrais être à moitié. Nous avons ce bouton, styles de boutons, cette palette de couleurs, mais il n'y en a pas eu, il manque encore des éléments. Oui, donc s'il manque quelque chose, c'est une bonne idée de trouver de l'inspiration, de simplement créer et créer un mood board d'exemples reflétant ces mots-clés. Nous pouvons faire une capture d'écran, nous pouvons obtenir des photos. Et n'oubliez pas qu' un mood board ciblé est un peu plus efficace que de simplement avoir de nombreuses sources différentes pointant dans des directions différentes. C'est donc une bonne idée d' affiner les options le meilleur résultat possible. Donc plutôt trois références ciblées qu'un tas d'idées différentes. Enfin, nous voulons analyser un mood board. Nous voulons le décomposer et comprendre ce qui fait de ces exemples de bons exemples. Qu'est-ce qui caractérise cette source d'inspiration que nous avons puisée ? Nous ne voulons pas copier le design, mais nous créons notre propre design en nous basant sur de bonnes idées. en page pourrait donc en être un exemple. Il a de larges marges ou des marges étroites. Savons-nous quel type de topographies utiliser si cela présente un intérêt ? Cela peut être dû à l' équilibre du site ou à la hiérarchie que nous aimons. Donc oui, nous pouvons, nous pouvons trouver cette inspiration, puis la décomposer. Jetons un coup d'œil à un autre exemple. Encore une fois, il s'agit de transformer quelque chose de joué en quelque chose de plus émotionnel et visuel. Passer du noir et blanc à quelque chose de plus coloré. C'est comme un véritable sketch UX, tout premier croquis décrivant simplement ce microsite et les éléments qu'il contient. Ensuite, nous passons à la phase filaire où nous passons à Figma ou à Sketch. Ensuite, nous commençons à placer nos éléments sur la grille que nous avons tracée. Ensuite, nous pouvons commencer à créer ces mots clés qui sont liés à la marque. Dans ce cas, excentrique, bibliothèque et dynamique sont quelques-uns des mots utilisés. Ensuite, nous pouvons commencer à faire le mood board. Voici donc un mood board pour les éléments de l'interface utilisateur. Donc, un peu d' inspiration pour cela. Nous avons des sortes de boutons caricaturaux et des cadres colorés avec des espaces blancs, etc. Nous le décomposons donc. Il y a une certaine inspiration dans la mise en page et les images utilisées. Et puis les couleurs. Encore une fois. Dans ce cas, nous avons une imagerie en deux couleurs. L'utilisation de couleurs fluo vives pour évoquer ce sentiment d' émotion et de sentiment. C'est un peu plus d'émotion et un peu plus de sentiments, de sensations dans cette phase du processus. Maintenant, sur la base de ceux qui analysent cette analyse, nous pouvons commencer à appliquer ce style visuel à notre structure filaire. Nous pouvons le faire section par section. Nous commençons donc par le haut, puis nous descendons. Au cours de cette phase, nous pourrions également établir un guide de style en même temps. Je vais donc parler un peu plus des guides de style innovent également au cours de cette phase. Il existe de bonnes ressources que vous voudrez peut-être utiliser. Les images gratuites peuvent donc provenir d'Unsplash, pixabay pixels, de nappy.co et de stock snap. Juste pour mentionner quelques icônes pour utiliser des icônes dans un design. Il y en a plein de gratuits sur le marché. Le Noun Project D, je peux le dire, et les colonnes ioniques ne sont que quelques exemples. Et encore une fois, les polices, si nous voulons avoir une police personnalisée ou simplement une police adaptée à notre marque et à ce que nous voulons faire passer, nous pouvons télécharger des polices depuis Google Font, Font Fabric, Adobe Fonts, et il y a il y en a plein d'autres. Parlons des guides de style. guides de style définissent les motifs cohérents, les éléments d'interface et les styles visuels tels que les polices, les couleurs, l'iconographie utilisés dans les designs. Les clients ont souvent des guides de style. Parfois, ils sont plus étendus, parfois il n'y en a pratiquement pas. Parfois, en tant que concepteur d'interface utilisateur, vous devrez travailler avec le client pour développer un guide de style plus complet. Il existe différentes manières d'aborder et interpréter ces guides de style. S'il existe déjà un guide de style et des éléments définis, c'est par là que vous devez commencer. Un homme de grande taille peut aussi être une œuvre en cours à côté de votre wireframe, pourquoi vous testez des styles et vous affinez progressivement au fur et à mesure. C'est donc presque comme si vous faisiez allers-retours depuis votre structure filaire et que vous deviez en quelque sorte concevoir des éléments , concevoir des éléments interactifs. Ils l'utilisent également comme fin du processus pour ensuite documenter le design pour que d'autres puissent l'utiliser. Il peut donc s'agir d'un livrable avec votre wireframe. Et vous avez des conceptions plus visuelles qui peuvent être très spécifiques et montrer mesure parfaite au pixel près pour certains éléments. Ils peuvent également être plus souples et proposer des directives plus générales. Avec des exemples visuels, il n'existe pas de bonne ou de mauvaise façon de réaliser ces guides de style. Il faut juste qu'il soit compris par les autres. Il est important de se rappeler que ce sont des actifs vivants et qu'ils continuent évoluer avec le design. Voici un autre exemple de la façon dont les gros titres et l'imagerie jouent également un rôle dans le design. J'ai les icônes, l'utilisation de l'imagerie pour savoir quel est le style d'imagerie utilisé, ainsi que les codes couleurs et le style des citations. D'autres fois, il existe un guide de style plus complet, comme ce guide de style de Médecins Sans Frontières, qui contient directives de marque en ligne. Comme il est indiqué ici, le système d'identité visuelle est un moyen de garantir cohérence tous les canaux de communication que nous utilisons. Il s'agit donc d'une marque mondiale qui possède une sorte de hub local. Donc, juste pour garantir cette cohérence à travers le monde, ils ont développé cette directive de marque discrète et complète. Il contient donc des ressources téléchargeables similaires. Nous avons donc les logos , puis la manière dont ils sont appliqués. Quand utiliser des logos, quand utiliser des symboles, ce qu'il ne faut pas faire dans le design et que faire. Il a aussi de la couleur. L'une des couleurs principales et quelles sont les couleurs secondaires et tertiaires ? Il y a la typographie , puis la composition aussi. Structure, images, cartes, pictogrammes et exemples de la façon dont tout cela se combine pour communiquer la marque. En tant que designer de ce projet, vous devrez donc consulter cette page, télécharger les ressources, puis les parcourir et assurer de leur conformité avec les directives de la marque. Donc, dans ce cas, vous ne feriez probablement beaucoup de mood board. Tu pourrais juste y aller, y aller directement. La prochaine étape va vous donner un petit résumé des leçons que nous avons apprises. 9. Résumé et principales leçons: Meilleur travail de synthèse maintenant, pour le cours 7 sur la conception visuelle et informationnelle. Alors, qu'est-ce que le design visuel ? Tu te souviens de cette définition ? Il s'agit de la pratique qui consiste à concevoir des grilles, disposer des pages, à choisir palettes de couleurs et à développer des icônes. Et c'est la définition selon le BCS. Donc, les principes fondamentaux de la conception visuelle, les plus importants dont vous devez vous souvenir si vous êtes assis là, le BCS, l'examen, la proximité, l'alignement, la répétition et le contraste. Vous vous souvenez donc de l' acronyme Park PARCC ? Encore une fois, ce sont les éléments fondamentaux selon le BCS, sont probablement d'autres également, mais ce sont ceux qu'ils considèrent comme les plus importants. Sophie a parlé des principes de la Gestalt, des principes de proximité, de similitude, de figuration, fermeture, de continuité et d'exclusion. Elle a également parlé d'autres principes de conception tels que la hiérarchie et l'alignement, répétition, l'équilibre et le contraste. Sophie a parlé des éléments visuels de la couleur, de la typographie et de l'iconographie. J'ai ensuite abordé le concept d'abordabilité. C'est là que les caractéristiques physiques influencent ou impliquent une fonction. Donc, quelque chose comme un joystick est vraiment évident pour un enfant de trois ans sur la façon d'interagir avec cela. Nous avons abordé la métaphore et le skim office où un objet dans un logiciel imite son homologue du monde réel. Souvenez-vous donc également de ces termes. Et en réduisant la charge cognitive. Et j'ai dit que l'utilisateur ne devrait pas avoir à se souvenir des informations d'une partie du système à l'autre. Laissez-moi tester le flux d'informations et la rédaction de contenu Web. Il a donc expliqué que le flux d'informations comporte de nombreux éléments différents. Ensuite, nous avons parlé de la conception de l' information en termes de rédaction de contenu Web, attachant à la littératie et la lisibilité et à la manière de les mesurer Nous avons parlé de certains des principes d'écriture rouge du Web concernant la façon dont les utilisateurs lisent le contenu. Et nous avons parlé du motif en forme de F. Sophie a ensuite parlé du processus passant de la conception filaire à la conception visuelle et de la façon dont nous procédons. Dans notre prochain cours, numéro huit, nous parlerons de l'évaluation de la convivialité, y compris de l'heuristique de conception.