Psychologie dans la conception Web : comment créer une section de héros qui convertit

1. Introduction: Salut à tous, bienvenue et merci de vérifier le cours. Mon nom est Rinaldo et numéro de gestion votre site web conception et optimisation du taux de conversion, AUC, depuis plus de quatre ans maintenant, à travers mon agence, j'ai travaillé avec des entreprises et vous enregistrez des start-ups comme Airbnb, Samsung, SoftBank, 3M, SAP, EA, et bien d'autres encore. Toutes ces grandes entreprises ont un gros budget est dépensé pour essayer d' optimiser leurs sites Web afin qu'ils puissent générer plus de prospects et de clients, et ils le font tout le temps. Mais qu'en est-il de quelqu' un qui est une entreprise individuelle ou peut-être une petite entreprise ou une créatrice, nous essayons simplement d'obtenir leurs services et leurs produits. Ils ne disposent pas d'un budget marketing ou d'une expertise préalable dans le domaine n'est pas une bonne excuse pour ignorer les bases de l'optimisation des taux de conversion. Une course unique solide à travers votre section héros peut être un investissement digne pour une entreprise de toute taille. Et c'est pour ça que j'ai créé ce cours. Cette classe est conçue pour vous aider à optimiser rapidement votre section de héros en appliquant les meilleures pratiques du champ d'optimisation des taux de conversion ou tout budget marketing ou connaissances antérieures de leur domaine. Ici ou section est la partie d'un site Web qui est visible sans défiler. Si vous vous demandez pourquoi cette classe est seulement sur une section de héros quand un site Web habituel ou une page de destination a plus de sections dessus. Eh bien, il s'avère qu' une étude montre qu'il faut 50 millisecondes ou 0,05 seconde pour qu'un visiteur se forme une impression sur un site Web. Donc les gens jugent les sites Web par sa couverture, et c'est un fait. Et la première impression d'un site Web sur ses visiteurs dépend en grande partie de la section héros ou de ce qui est dans l'industrie appelé au-dessus du pli. C' est ce qui précède le pli parce que dans les jours de journaux, une annonce ou une histoire qui a couru sur la première page au-dessus du pli a obtenu une visibilité maximale. Et si cette histoire n'attirait pas l'attention, les journaux ne se vendaient pas. Donc, naturellement, beaucoup de concepteurs de sites web, Margaret est dans les rédacteurs, passent beaucoup de temps à réfléchir à ce qu'il faut mettre sur la section héros parce que c'est la première chose que vos visiteurs voient quand ils viennent sur votre site Web. Et c'est très important car 100% de vos visiteurs verront cette action de votre site web. Et c'est mon travail dans sa classe de vous aider à les faire rester dans cette classe, nous allons couvrir tous les éléments d' une section de héros et tous les éléments de l'hétérosexuel récupérer. Nous le ferons en trois parties. Tout d'abord, nous allons nous concentrer sur le principe psychologique que nous essayons d'utiliser. Deuxièmement, nous allons créer un exemple en utilisant les meilleures pratiques du champ d'optimisation du taux de conversion. Et enfin, nous allons Style élément en utilisant l'interface utilisateur moderne et les pratiques d'expérience utilisateur. Dans ce cours, j' insiste fortement sur la raison pour laquelle on fait quelque chose que l'on fait, on le fait. Nous allons utiliser la recherche en psychologie cognitive et comportementale pour essayer comprendre et de prédire comment un utilisateur se comportera dans un certain contexte sur notre site Web. Et une fois que nous comprenons ce comportement, nous pouvons facilement modifier sont conçus pour stimuler nos conversions et finalement générer plus de prospects et de clients. Chaque leçon de cette classe est divisée en étapes concrètes faciles à suivre, basées sur des cadres scientifiquement éprouvés. Et si vous passez par toutes ces étapes, d' ici la fin de cette classe, vous aurez une toute nouvelle section de héros que vous pouvez utiliser dans votre entreprise ou votre propre projet. Je vous garantis que cette nouvelle section de héros fera exploser vos anciens taux de conversion. Je suis excité, j'espère que vous êtes excité et commençons. 2. de l'en psychologie en tête: Salut, bienvenue à la première leçon de la classe. Dans cette leçon, nous allons parler des titres, psychologie et de l'écriture de votre titre. Rédiger une copie pour votre site Web est difficile. Écrire copie persuasive est encore plus difficile lorsque vous avez besoin de persuader quelqu'un par l'écriture, vous pouvez vous sentir perdu. Quels mots devriez-vous utiliser ? Comment devriez-vous encadrer votre offre ? Comment vendez-vous, mais paraissent morne ? Bien que ces soucis soient compréhensibles. Heureusement, la rédaction est un art et une science. Dans cette vidéo, vous apprendrez sept conseils d'écriture de coton basés sur recherches académiques qui maximiseront la persuasion de la rubrique de votre site Web. frustration n'est pas le seul objectif du droit d'auteur. Vous apprendrez également à transmettre votre message de la manière la plus claire et la plus efficace possible. À la fin de chaque tactique que j'esquisse, je vais fournir mon exemple qui fera référence une section de héros hypothétique et imaginaire pour une application de productivité que je crée dans cette classe. Parce que des exemples lointains vous aideront, espérons-le , à appliquer ces techniques à votre propre projet, qu'il s'agisse d'une application ou d'autre chose. Pour le faire ici, un titre de section est simple. Il obtenir les visiteurs de votre site Web pour comprendre que vous pouvez résoudre leur problème. Si vous pouvez obtenir un clin d'œil immédiat à virtuel lorsqu'ils atterrissent sur votre page d'accueil, vous aurez beaucoup plus de chances d'amener vos visiteurs à passer à l'étape suivante lorsque vous lisez est inutilement complexe. Les lecteurs vous perçoivent comme moins intelligent. Nous avons un directeur psychologique appelé la fluidité du traitement, pour remercier pour cela. Si vous avez de la difficulté à traiter du contenu écrit, expériences cérébrales et des émotions négatives, il manque alors les attributs de cette émotion négative au contenu que vous lisez. Pour améliorer la fluidité de votre copie et éviter ces évaluations nuisibles, vous devez simplifier votre message. Donc, tout d'abord, vous apprendrez trois techniques de recherche pour améliorer la clarté et la persuasion, ou vous écrivez tactique une. Utilisez des cadres positifs. Les cadres négatifs décrivent une absence, qu'est-ce qui ne se passe pas ? Les cadres positifs, d'autre part, décrivent quelque chose de plus tangible. Donc, le cadre négatif ne serait pas en retard alors qu'un cadre positif serait arrivé à l'heure. Un autre exemple est de ne pas boire trop. Comparé à un cadre positif, buvez de manière responsable. Le cadre négatif serait de ne pas utiliser de cadres négatifs et un cadre positif serait utilisé des images positives. Puisque nous avons besoin de plus de ressources mentales pour traiter les cadres négatifs, ils réduisent la compréhension et dégradent l'impact de votre message. Vous pouvez parfois utiliser des images négatives, c'est tout à fait normal, mais vous devez utiliser des cadres positifs pour la majorité de votre copie sur le site Web. Voici un autre exemple pour mon application de productivité imaginaire. Cadre négatif serait notre application ne perturbera pas votre routine quotidienne. Alors qu'un cadre positif serait notre application si s'intègre parfaitement dans votre routine quotidienne. Tactique pour transmettre des concepts intangibles à l'aide de métaphores. Compte tenu de l'importance des caractéristiques concrètes, vous remarquerez un problème en matière de marketing. J' ai essayé de visualiser les fonctionnalités suivantes. Qualité, puissant, fiable. Tu as des ennuis ? Eh bien, vous ne pouvez probablement pas visualiser les concepts intangibles et vos lecteurs ont partagé la même difficulté. C' est nos métaphores peuvent aider. Par exemple, les compagnies d'assurance-vie utilisent des idées associées à divers symboles tels que les parapluies, les voyageurs, rochers, Prudential Insurance Company, et donc tous les États pour transmettre des qualités de protection, de robustesse et de soutien. Métaphores, tangibles et intangibles qu'ils fournissent à leurs lecteurs auraient une image mentale concrète. Améliorer l'impact et la persuasion de votre message. Voici un exemple potentiel pour mon application de productivité. Notre application est très puissante. Je passe d'une description intangible de la puissance à notre application, a Zeus comme la puissance, qui est une métaphore qui décrit clairement l'idée de notre application étant puissante. Tactique 3, transformer les revendications génériques en termes concrets. Les revendications génétiques doivent jouer leur partout. Chaque autre site Web que vous consultez, vous trouverez des déclarations comme notre équipe de support est très rapide, nos clients nous aiment, ou les logiciels sont fiables. Ne vous méprenez pas. Les messages sous-jacents sont géniaux, mais on dirait que vous vendez plutôt que de dire. Regardez ce qui se passe lorsque vous transformez ces revendications génériques en termes concrets. Nous vous donnerons une réponse dans les 24 heures. 568 entreprises adorent nos logiciels. Vous bénéficierez d'une disponibilité garantie à 100 %. Soudain, votre message devient plus crédible et persuasif. Dans ce cas, vous dites plutôt que de vendre, notre application peut vous aider à être plus productif, ou l'application peut doubler votre productivité. Je suis passé d'une revendication générique, a pris et Crète terme de doubler votre productivité. Nous venons de passer deux ou trois techniques pour améliorer la clarté de votre écriture. Avec une plus grande facilité de traitement, vos lecteurs ont indirectement ressenti une émotion positive qui sera manquée attribuée à vous et à votre contenu ou à la technique suivante, vous apprendrez un conseil de rédaction pour déclencher directement un émotion dans votre lecteur. Si vous avez déjà essayé d'apprendre la rédaction, vous avez probablement entendu le conseil, n'est-ce pas. Copie claire et directe. Protégez donc l'affaire. Pourquoi voyez-vous rarement des réclamations directes en ligne ? Si vous parcourez un magazine, vous ne verrez jamais une annonce disant que marée nettoiera vos vêtements très bien. Bien sûr, vous pourriez argumenter que ces mots n'attirent pas l'attention, et c'est vrai. Mais les revendications directes sont également moins convaincantes. Pourquoi ? Eh bien, la réponse implique inférences auto-générées recherchées par ma requête et Philips en 2005. Les revendications directes sont explicites, il n'y a pas d'autre interprétation. Toutefois, les revendications indirectes, telles que les métaphores, doivent être interprétées. Nous en déduisons un sens, et c'est la clé. En faisant une inférence, nous générons un sens. Comparez ces titres. Direct un, titre, nettoie vraiment bien vos vêtements. Indirect, la fraîcheur du plein air. Maintenant sous forme liquide avec un titre direct, il n'y a pas d'autres significations. Donc besoin de compter sur la source d'information, qui dans ce cas est l'enchère annonceur biaisée à titre indirect, vous construisez le sens. Vous pouvez imaginer le plein air associant une émotion vive et rafraîchissante à la marée. Quelle que soit votre conclusion, vous générez le sens, vous deviendrez la source. Donc votre cerveau place plus de confiance dans l'information. Vous n'avez pas besoin d'utiliser des métaphores ou un langage figuratif. Vous avez juste besoin d'ajuster votre syntaxe. Par exemple, si je voulais lancer ma newsletter où j'envoie du contenu comme celui-ci, par exemple direct serait ma newsletter est bourrée, serait un contenu exploitable. Un exemple indirect serait que ce cours est bourré de contenu exploitable et que la newsletter n'est pas différente. Dans le premier exemple, je l'ai dit dans ma newsletter est bourré serait contenu actionnable. C' est une revendication directe. Il n'y a pas d'écart manquant. En second lieu, j'utilise la revendication indirecte afin que vous puissiez extraire des conclusions ou de l'auto. J' utilise un raisonnement logique pour extraire une conclusion auto-générée. Je dis essentiellement qu'a égal B, qui dans ce cas est classe égale droit à action. Et C est égal à un, qui est lettre d'information égale classe. Pour impliquer enfin, le C est égal à B ou la lettre d'information peut donner lieu à une action en utilisant une revendication indirecte pour générer du sens. Votre solution devrait toujours soulager un type de douleur que le lecteur éprouve. Si vous voulez que les lecteurs apprécient votre solution, vous devez leur rappeler la douleur. Donc piqué une blessure, a montré que ça fait mal avant de révéler votre solution, agiter le problème sous-jacent. Pourquoi est-ce important ? Pourquoi est-ce problématique ? En quoi cela affecte-t-il négativement vos visiteurs ? Alors révélez votre solution. Nous sommes biologiquement structurés pour éviter la douleur. Donc, si vous pouvez déclencher ce sentiment de douleur, vos lecteurs seront plus susceptibles de chercher votre solution. Je vais vous décrire trois techniques et conseils pour agiter le problème. Tactic 5 a mis l'accent sur leur dédain pour le problème. attitudes opposées peuvent être plus fortes que les attitudes de soutien. Par exemple, bizarre un mesquin trouvé à nous montrer un soutien plus fort pour les candidats politiques lorsque notre attitude est présentée comme opposant candidat getter, plutôt que de soutenir le candidat original. Au lieu de brûler les lecteurs sur les avantages de votre solution a souligné leur mépris pour le problème sous-jacent. Si nous exécutons copie pour promouvoir votre produit ou service, ne commencez pas par les avantages, commencez par les émotions négatives que les lecteurs éprouvent lorsqu'ils rencontrent un problème que vous résolvez. Par exemple, si j'écrivais copie pour promouvoir une application de productivité hypothétique sur la construction, au lieu de commencer par des avantages, je commencerais par les émotions négatives que lecteurs éprouvent d'un manque de productivité, vous vous sentez stressée et submergée. Si vous voulez, il n'y a pas assez d'heures dans la journée, vous avez manqué des échéances importantes. Votre patron pense que vous êtes incompétent, vous passez moins de temps avec votre famille. Les lecteurs commencent à accepter ces descriptions. Ils s'imaginent vivre ces émotions négatives. Ils deviennent frustrés par ces problèmes. Une fois qu'ils ont développé cette opposition, alors présentez votre solution. Si vous êtes une copie commence, qui sont la solution, vous allez tuer ce processus d'empathie. Nous deviendrions fermé d'esprit, résistant à tous les avantages que vous offrez. Donc, commencez toujours par souligner le mépris de vos lecteurs pour le problème sous-jacent. Par exemple, être productif est important. Être improductif est stressant. Tactique six, démontrent un impact sur les autres. Vous pouvez obtenir un effet puissant en démontrant un impact sur d'autres personnes, surtout lorsque l'impact est négatif. Considérée aux messages qui ont été présentés à l'hôpital. Cadre. L' un était l'hygiène des mains vous empêche d'attraper des maladies. Cadre deux était l'hygiène des mains empêche les patients d'attraper des maladies. Le deuxième cadre a influencé un plus grand nombre de membres du personnel hospitalier à se laver les mains dans une expérience a couru Grant et Hoffman en 2011. Donc, lorsque cela est impossible, expliquez comment d'autres personnes seront affectées négativement si les visiteurs ne se terminent pas ou n'appellent pas à l'action. Voici mon exemple. Notre application vous permet de gagner du temps plutôt que de passer plus de temps avec votre famille et vos proches. Lequel semble le mieux ? Tactiques sept, étiqueter vos visiteurs, mais un nom. Noms Janvier à des préférences plus fortes et plus stables. Par exemple, Walton et Banaji en 2004, a donné aux participants diverses déclarations comme, boissons Jennifer, café, beaucoup, Jennifer passe beaucoup de temps à l'intérieur. Jennifer regarde beaucoup le baseball. Ces déclarations mettent l'accent sur les verbes. Ils ont répondu à la question : que fait Jennifer ? Et les chercheurs ont fait des déclarations différentes à d'autres participants. Par exemple, Jennifer est un buveur de café, Jennifer et la personne de soutien. Jennifer est fan de baseball. Ces déclarations ont souligné maintenant qu'ils répondent à la question, qui est Jennifer ? Les deux ensembles de déclarations ont le même sens. Cependant, la deuxième série a eu un impact plus fort. Avec des noms. Ces traits semblaient au centre de l'identité de Jennifer. Comment peux-tu utiliser cette astuce ? D' une part, vous pouvez étiqueter votre public avec un nom funky. L' exemple le plus connu est probablement les croyants, mais vous n'avez pas besoin d'aller aussi loin. Il est juste une idée plus simple pour toi. Si vous êtes un créateur de contenu, au lieu de remercier les lecteurs de faire quelque chose comme la lecture de votre contenu. Remerciez-les d'être quelque chose, par exemple, un fan de votre contenu. La deuxième image générera un impact plus important sur leur attitude envers votre contenu. Par exemple, si vous aimez être productif, vous allez adorer notre application. Si vous êtes un flux de productivité, vous allez adorer notre application. Dans le deuxième exemple, j'étiquette mes visiteurs mais non possédés. Nous venons de passer plus de sept cadres. Vous n'auriez pas à les utiliser tous pour votre cap. Vous pouvez combiner un couple d'entre eux sont simplement en utiliser un. De plus, si vous pensez que votre message sera plus clair, vous pouvez ajouter un sous-titre à votre titre principal et avoir un message secondaire de cette façon. Voici à quoi deux d'entre eux peuvent ressembler combinés ceci, l'exemple que je vais utiliser ma section héros plus tard, je combine deux des tactiques et des exemples que j'ai créés précédemment. Mon titre dit : doubler le temps que vous passez avec vos proches. Et mon sous-titre dit, AP s'intègre parfaitement dans votre routine quotidienne. La première est la démonstration et l'impact sur les autres. Et le second utilise un cadre positif sorte de visiteur ne le considère pas comme juste une autre application inutile qui perturbe sa vie quotidienne. Maintenant, c'est ton tour. Ouvrez n'importe quel éditeur de texte simple et en utilisant les cadres que j'esquisse, écrivez vos idées avec les étapes concrètes et les exemples qui ont fourni. Vous avez juste besoin de les ajuster afin de s'adapter au contexte ou à ce que vous vendez. Écrivez-le avant de passer à un autre élément de la section héros dans la leçon suivante. Mais quelques petits changements, vous pouvez avoir un grand impact sur la persuasion de votre message. On se voit dans la leçon suivante. 3. Psychologie d'appel à l'action: Il est maintenant temps de parler de la copie d'un bouton d'appel à l'action. Call to action ou CTE boutons sont les boutons que vous utilisez sur votre site Web et sur vos pages de destination pour guider les utilisateurs vers votre objectif est la partie de la section héros sur laquelle l'utilisateur doit cliquer afin de prendre l'action que vous voulez qu'ils prennent. Quelques exemples courants de boutons d'appel à l'action sont les boutons d'ajout de cartes, les boutons d'inscription d'essai gratuit et les boutons de téléchargement. Certains marketeurs sont obsédés par leurs boutons, même si une partie de cette obsession est injustifiée, il y a beaucoup de mérite à se concentrer sur votre bouton CTA parce que la plupart des conversions dans votre entonnoir proviennent d'un seul clic. Et si vous augmentez le taux de conversion au début de votre entonnoir, vous augmenterez les conversions à chaque étape de votre entonnoir. La première tactique sur laquelle on se concentre par écrit une copie du bouton est d'utiliser le libellé à la première personne. Il y a beaucoup d'articles de blog et d'études de cas d'optimisation des conversions en ligne qui prétendent avoir augmenté les conversions en utilisant l'enracinement à la première personne pour le texte d'appel à l'action. Par exemple, commencez votre essai gratuit ou commencez mon essai gratuit. Le second semble mieux performer, et cet effet semble cohérent dans mon expérience aussi. Alors, qu'est-ce qui cause l'ascenseur constant ? Deux facteurs, la stimulation mentale et la fluidité perceptuelle. La recherche montre que les gens développent une attitude plus favorable envers le stimulus si elles interagissent mentalement avec elle. Pour une fluidité perceptuelle, la recherche montre que vous êtes plus susceptible d'accomplir une tâche si vous pouvez envisager d'effectuer cette action à l'aide de la première personne et de la formulation, vous appliquez les deux Insights. Tout d'abord, vos visiteurs ont évalué mentalement l'appel à l'action en fonction de leur utilisation personnelle. Et avec le routage à la troisième personne, ils considèrent votre appel à l'action d'un point de vue à la troisième personne, ce qui n'est pas aussi fort. Deuxièmement, parce qu'ils envisagent d'exécuter cet appel à l'action, ils connaissent un niveau plus élevé de fluidité conceptuelle. Ils peuvent se voir effectuer cette action, sorte qu'ils deviennent plus susceptibles de le faire. Cependant, les balises de bouton ne doivent pas continuer et allumer. Il est bon d'utiliser un texte de bouton orienté action spécifique. Vous êtes peut-être tenté d'étirer vos ponts de boutons, mais ce serait un mauvais geste. Idéalement, vous voudrez garder ce texte de bouton à deux ou cinq mots. Par exemple, regardons ce que le camp de base utilisait. Les boutons ont dit Donner une nouvelle tentative de camp de base. C' est gratuit pendant 60 jours. Ce bouton d'appel à l'action est probablement correct, mais il approche de la zone rouge. Vous pouvez mettre toutes les informations supplémentaires que vous avez sous un bouton. Désolé, si vous voulez donner à vos visiteurs des informations supplémentaires sur la livraison gratuite, aucune carte de crédit requise s'inscrire, ou lui dire combien d'abonnés sont déjà sur votre liste de courriel. Vous pouvez l'ajouter à une étiquette de texte sous votre bouton. Et c'est exactement ce que le camp de base a fait après les tests AB. Il est préférable de garder la copie du bouton court et de prendre des informations supplémentaires et de l'ajouter sous le bouton. Voici un conseil bonus pour votre bouton à votre appel à action est un bouton et vous en avez besoin pour ressembler à un. Donc, en ajoutant un étroit à votre appel à l'action qui vous aidera à le distinguer clairement comme un bouton qui est là pour être cliqué pour passer à l'étape ou à la page suivante, en indiquant de cette façon qu'un appel à l'action est cliquable le rendra beaucoup plus facile pour les gens de voir automatiquement quelles parties de la page sont interactives et peuvent les amener à s'engager sans aucune frustration. L' utilisation d'une flèche donne également le sentiment d'aller de l'avant et de progresser dans le processus, ce qui donnera également aux gens un sentiment de satisfaction et les encouragera à s'engager dans la tâche. Le principe qui repose derrière ce comportement, Il est appelé file d'attente visuelle et a été longuement étudié par de nombreux scientifiques. Notre cerveau, à partir de la majorité des images que nous voyons et aimons recevoir une direction sur ce sur quoi nous concentrer. Donc, en utilisant des repères visuels comme des flèches, a aidé à attirer l'attention sur certains éléments vos visiteurs cerveaux seront immédiatement attirés vers des éléments visuels familiers, dans ce cas, des flèches, comme ils ont remarqué et comprennent ces visuels plus rapidement que toute autre information sur la page. Et l'utilisation de ce type de stimulus visuel est donc un moyen efficace d'attirer immédiatement l'attention sur votre appel à l'action, ce qui augmentera les chances et fera tourner vos visiteurs vers l'action désirée. Par exemple, en cliquant sur un bouton, boutons d'appel à l'action effectués correctement, peuvent augmenter considérablement les conversions sur votre site Web. Dans cette leçon, nous avons abordé la formulation à la première personne, ajoutant des informations supplémentaires dans l'étiquette et le bouton, et en utilisant des flèches et le bouton. Voici la copie de mon bouton pour mon application de productivité imaginaire. On en a fini avec la partie rédactionnelle de la classe. Donc, avant d'aller plus loin, vous devriez avoir votre copie de titre et de bouton d'appel à l'action ou une copie de sous-titre et votre copie de bouton étiqueté est facultative si vous ne l'avez pas encore fait, ouvrez tout simple éditeur de texte ou prise de notes et écrivez vos idées en utilisant les cadres nous fournissent jusqu'à présent. se voit dans la leçon suivante. 4. Psychologie d'image d'héros: Une image de héros est la première photo principale ou graphique que vous voyez en haut d'un site Web. L' objectif de l'image du héros est d'attirer immédiatement les visiteurs et de leur montrer ce que sont votre site et votre contenu. Nous allons couvrir deux tactiques psychologiques qui vous aideront à choisir une photo ou un graphique pour motiver le visiteur de votre site à agir. Didactique One est d'encourager l'interaction mentale. Si vous ne vous souvenez qu'd'une chose de cette leçon, souvenez-vous de celle-ci. Cette tactique est très puissante, facile à mettre en œuvre un pratiquement inutilisé par la plupart des entreprises. Lorsque les entreprises créent des images de produit, le dépeint souvent un produit sans trop réfléchir. À partir de maintenant, toujours les produits d'image afin que vous atteigniez un objectif sous-jacent pour encourager l'interaction mentale. Voici un exemple. Frère et Krishna en 2012, j'ai montré aux participants une annonce pour une tasse de café. Et il s'avère que les participants étaient plus susceptibles d'acheter la tasse lorsque la poignée, mais l'espacement vers la droite vers la main dominante de la plupart des gens. Les chercheurs attribuaient à 5'10 une augmentation de simulation lorsque les poignées étaient orientées vers la droite, les participants interagissaient mentalement avec un produit dans une plus grande mesure. Dans d'autres expériences, cet effet a disparu lorsque les participants transportaient quelque chose. Lorsque les participants ont leur main dominante disponible, cette représentation visuelle du produit conduit à des intentions d'achat plus élevées. En bref, l'échevin Krishna a fondé l'interaction mentale suscite plus d'achats. En d'autres termes, lorsque les participants envisagent d'interagir avec un produit, ils deviennent plus susceptibles de l'acheter. Maintenant vous pensez peut-être, c'est génial Rinaldo, mais mon produit n'a pas de poignée. Pas de soucis. Les chercheurs ont mené d'autres expériences et trouvé un soutien pour d'autres types de simulations. Voici quelques idées. La recherche a également trouvé un appui pour les exemples suivants. Orienter S produits symétriques vers la droite, vers la main dominante de la plupart des gens. Placez des instruments ou il tend à ceux sur la droite. Orientation des ouvertures de produits vers le spectateur. Retirer les produits de leur emballage. Affichez une vidéo ou un graphique de la personne qui utilise réellement le produit décrit. Publiez une capture d'écran de votre application. Si vous vendez des logiciels, publiez une capture d'écran et je ne peux pas vous dire combien de fois j'ai regardé le site Web du logiciel et je n'utilise pas une seule capture d'écran de leur application ou de leurs fonctionnalités. Par exemple, puisque je crée une section de héros pour une application de productivité, je vais non seulement utiliser une capture d'écran d'une application, je vais créer une liste de tâches dans l'application ou éléments que les gens ont régulièrement. Et de cette façon, je souligne l'interaction mentale des visiteurs avec l'application. Ils s'imaginent utiliser cet outil et créer ces éléments et les croiser pour énumérer tous les exemples donnés aident à créer une stimulation mentale de l'utilisation du produit. Les recherches suggèrent que la représentation visuelle ou les produits encouragent l'interaction mentale et entraînent une augmentation des intentions d'achat. Les visiteurs peuvent se visualiser eux-mêmes à l'aide de ce produit. Ils se sentiront plus enclins à l'acheter parce qu'il est facile pour eux d'imaginer le produit comme une partie de leur vie. Tactique de, est d'orienter les regards vers votre appel à l'action. Nous possédons un trait évolutif pour suivre les regards des gens, pour diriger l'attention vers votre appel à l'action. Ou nous intentons des images de personnes afin qu'elles regardent votre bouton. En tant qu'humains, nous avons connu une tendance innée à suivre les regards des gens. Ce commerce a aidé nos ancêtres à découvrir les menaces plus facilement. Et grâce à l'évolution, ce trait est encore gravé dans notre amygdale. Tu vas appliquer la tendance dans ta section de héros. Si vous êtes ici, une section contient des photos de personnes qui les orientent vers votre appel à l'action. Vous attirerez plus d'attention sur ce domaine. Vous devriez généralement éviter d'orienter les gens dans les images vers le spectateur car ces images frontales attireront l'attention sur la personne plutôt que sur les parties importantes de la section ou de la page de votre héros. Bien que l'intention accrue soit due au regard suivant, le désir accru est dû à la fluidité du traitement. Généralement, plus vite et plus facilement, nous sommes en mesure de traiter l'information, plus v évaluer positivement la formation de dendrite et dit que c'est un héritage évolutif de suivre les regards des gens. Nous traitons ces informations facilement et naturellement en positionnant les personnes dans les photos vers votre appel à l'action, les visiteurs de votre site Web seront naturellement attirés vers ces domaines et ils auront un plus grand désir de conversion. Dans cette leçon, nous avons abordé deux tactiques pour se produire. C' est une interaction mentale. Orientez le regard si vous utilisez des modèles dans votre imagerie. Sur la droite est l'exemple que je vais utiliser dit que je suis créer une section héros pour une application de productivité imaginaire. J' ai choisi une capture d'écran exemple lui devait de faire une étape a échoué, mais de vraies tâches. Avant de passer à autre chose, le sélecteur crée une image ou un graphique que vous utiliserez votre section héros en fonction des deux tactiques que nous avons abordées dans cette leçon. Vous pouvez également utiliser ces principes partout sur votre site Web, comme par exemple, une page produit. Non seulement la section héros, mais elle s'applique également à chaque leçon de cette classe de toute façon. se voit dans la leçon suivante. 5. Psychologie en Layout: Jusqu' à présent, nous avons créé tous les éléments dont nous avons besoin pour notre section héros. Nous avons notre titre, la copie du bouton d'appel à l'action et notre image. Certains d'entre vous peuvent également avoir un sous-titre et une étiquette pour un bouton d'appel à l'action 2. Maintenant, nous voulons les positionner ensemble d'une manière ou d'une autre, mais cette leçon ne porte toujours pas sur le design, mais nous y reviendrons plus tard. Il y a quelques principes de la recherche en psychologie que nous pouvons appliquer à notre mise en page T2. Et nous devons garder ces principes avant de commencer à concevoir notre section de héros. Le premier principe est l'effet de convivialité esthétique. L' étude Eesthetic Usability Effect réalisée par Don Norman en 2002 indique que plus un produit est esthétique, plus il est perçu comme utilisable, et plus il est probable qu'il soit utilisé indépendamment de sa fonctionnalité. La raison de cet effet d'utilisabilité esthétique est que lorsqu'un produit ou un service est esthétiquement agréable pour un consommateur, il construit une relation émotionnelle avec lui. Cette relation suscite un sentiment de loyauté et les consommateurs s'en tiennent à leur choix même s'ils rencontrent des problèmes. Mais cela peut être attribué en partie à la fluidité du traitement que nous avons mentionnée précédemment. Selon le bloc, l'apparence visuelle est la première chose qu'un acheteur potentiel remarque sur un produit. Et ils sont plus sympathiques aux défauts sont des échecs si un design est esthétiquement agréable, les conduisant à croire que la meilleure prudence est la meilleure option globale. Par exemple, de nombreuses études ont montré que techniquement, les produits Apple ne sont pas aussi utilisables que les autres sur le marché, ce qui signifie que les gens sont déclenchés plus fréquemment et ont plus de mal à comprendre comment utiliser le produit qu'avec d'autres dispositifs similaires. Cependant, les utilisateurs d'Apple ne remarquent pas ou ne s'en soucient pas parce que les produits Apple sont si esthétiquement agréables. Le même concept a été trouvé vrai pour les Mini Cooper qui ont beaucoup de bizarreries, comme le compteur de vitesse étant situé ou leur radio devrait être et l'horloge trouvée au plafond. Mais les gens pardonnent ces anomalies mineures simplement parce qu'ils aimaient les regards de poids. Ce principe a de nombreuses applications ont jusqu'à la conception lorsqu'un client visite votre site Web qui sont susceptibles de préférer les sites Web qu'ils aiment regarder et se sentent bien à utiliser, même s'ils n'effectuent pas les tâches aussi efficacement que ils l'ont fait sur un site web, ils perçoivent comme étant plus moches. Maintenant c'est puissant. Pour cette raison, il est très important de favoriser une attitude positive envers votre site web en utilisant un design web statique. Et les leçons de conception à venir, nous allons travailler pour atteindre cet effet. Mais pour l'instant, il est important que nous comprenions les raisons pour lesquelles. Je veux également partager un autre principe, positionner les images et les graphiques sur la gauche. Lorsque vous percevez des stimuli vers une soudure, votre champ de vision, est-ce que l' hémisphère opposé de votre cerveau traite cette information ? Un stimulus présenté dans le champ visuel gauche est initialement reçu et traité par l'hémisphère droit. Et le stimulus présenté dans le champ visuel droit, initialement projeté pour terminer le processus par l'hémisphère gauche. En raison de cette structure neuroanatomique, votre hémisphère droit traite les informations présentées à bord d'une section de héros restante. Et ces hémisphères opposés sont la clé parce que l'hémisphère droit est mieux adapté au traitement des images. Et celui de gauche est plus logique et verbal. placer l'image sur le côté gauche du texte améliore le traitement de l'ensemble du message. Que cela est très intéressant parce que vous avez probablement remarqué que la majorité des sites Web et aligner la position di contenu graphique sur le côté droit de leur section héros. Pourquoi c'est ça ? Eh bien, je ne sais pas. C'est dur à dire. Peut-être que c'est plus naturel pour les créateurs de ces sites. C' est peut-être quelque chose qu'on a l'habitude de voir. Mais maintenant, nous savons que la recherche prétend le contraire. Alors voici notre chance de vous différencier. Ce phénomène est appelé latéralisation cérébrale, et il est attribué à l'asymétrie hémisphérique humaine, qui a été étudiée par Helga en 1990. Et diverses études ont montré une influence significative du mécanisme de latéralisation et plusieurs cas, participants à la recherche ont décrit l'apparition d'un élément important comme plus beau si elle était dans le bon champ visuel que a été étudié par b ou plus en 1985. Les participants à la recherche ont également mieux évalué les produits et les logos en fonction de leur positionnement. Ceci a été étudié en obtenant le ski ECF en 1990. Les participants se souviennent que la DLM est meilleure si elle était positionnée suivant les suggestions des règles d'assymétrie cérébrale hémisphérique. Ceci a été recherché par Betty et Brewer entrer 1000. Je tiens également à souligner que certains chercheurs ont obtenu des résultats qui ne sont pas en accord avec l'hypothèse ou la latéralisation cérébrale. Mais il semble que les résultats peuvent dépendre des dimensions des images et du texte et même certains facteurs culturels, par exemple, ils ont trouvé et certains des pays asiatiques, ces règles n'étaient pas applicables. Donc, selon ces deux principes à l'esprit, dans la leçon suivante, il est temps de plonger dans FISMA et de commencer à créer notre mise en page. Si vous n'avez pas déjà le nombre de tapis épais, allez chercher my.com et inscrivez-vous pour un compte gratuit. Il est complètement gratuit et facile à utiliser. Aussi, ne vous inquiétez pas si vous ne l'avez jamais utilisé auparavant. Si vous utilisez déjà d'autres outils comme Sketch, Adobe XD, vous pouvez totalement continuer à utiliser les données. Tous ces outils peuvent faire ce dont nous avons besoin dans les leçons à venir. Nous n'utiliserons donc aucune des fonctionnalités et fonctionnalités complexes. Alors je te verrai dans la leçon suivante. 6. Conception de mise en page: Maintenant, nous commençons à concevoir notre section héros. Rappelez-vous comment, dans la dernière leçon, nous avons compris l'importance du principe de convivialité esthétique. Eh bien, il y a une façon importante conception heuristique que nous pouvons utiliser pour atteindre notre site Web à la recherche plus esthétique. Et c'est pourquoi l'espace, ou pour être plus précis, commençant par trop d'espaces, laissez-moi vous expliquer. C' est ainsi que la plupart des spécialistes du marketing, concepteurs, des encodeurs le font. Les autres éléments. Et puis ils commencent à ajouter un peu de marge et un peu de remplissage aux éléments, cinq pixels puis dix pixels. Et ils se retrouvent avec quelque chose qui semble vraiment à l'étroit lors de la conception pour le web, espaces blancs presque toujours ajoutés à un design. Et si quelque chose qui semble un peu trop à l'étroit, vous ajoutez un peu de rembourrage marginal, puis vous l'ajoutez à nouveau jusqu'à ce que les choses paraissent mieux. Brown avec cette approche est que les éléments ne sont donnés le minimum de salle de lecture nécessaire pour maintenant regarder activement mauvais. Pour faire quelque chose en fait de faible qualité, vous avez généralement besoin de plus d'espaces et vous pensez, alors voici une excellente suggestion pour vous. L' une des façons les plus simples de nettoyer un design est de donner simplement à chaque élément un peu plus d'espace pour respirer. Les espaces blancs doivent être supprimés et non ajoutés. Une meilleure approche consiste à commencer par donner quelque chose de trop d'espace, puis à le supprimer et à vous dire heureux des résultats. Vous pourriez penser que vous finiriez avec trop d'espace blanc de cette façon. Mais dans la pratique, ce qui peut sembler un peu trop quand on se concentre sur un élément individuel finit par être plus proche juste assez dans le contexte d'une interface utilisateur complète. Alors entrons dans sigma pour ajuster notre mise en page et commencer à travailler sur notre section héros. J' ai ouvert FISMA et j'ai commencé un nouveau projet. Je n'ai que la copie pour mes éléments ici que j'ai écrit dans cette classe jusqu'à présent. Et si vous n'avez pas déjà le vôtre, ce serait un bon moment pour les radios. Avant d'aller de l'avant, dans la dernière leçon, j'ai expliqué pourquoi il est important de positionner éléments graphiques sur la gauche et pourquoi il est important de positionner le sous-taux de texte. Donc je vais le faire d'abord. Avant qu'on puisse faire quoi que ce soit. J' ai besoin d'un cadre. Dans un sigma. Je peux créer un cadre en appuyant suffisamment sur mon clavier ou en allant ici et en cliquant sur le cadre. Et une fois que je fais cela, j'ai beaucoup d'options ici et dit que je suis en train de concevoir pour le web. Je vais juste cliquer sur le bureau. Et maintenant, j'ai mon cadre et je peux commencer. Puisque nous nous concentrons uniquement sur la section héros à pas nécessairement la navigation et le logo. Cela va être un peu trop haut pour que nous puissions diminuer sa hauteur, mais nous pouvons le faire plus tard aussi. Donc, nous avons dit élément graphique sur la gauche. Donc, je vais juste apporter mes éléments ici. Et les éléments textuels du texte sont sur la droite. Donc c'est la cardiologie. Et on va être là. Je vais juste diminuer. J' en ai eu un peu. D' accord. Maintenant, évidemment, nous allons changer la taille de ceux-ci dans les leçons ultérieures. Maintenant sont juste de positionner notre contenu et de se préparer à partir. Même si nous allons changer la taille de ces éléments plus tard, j'ai déjà placé trop d'espace blanc entre les deux, sorte que plus tard nous ne tomberons pas dans un piège où nous avons deux petits espaces blancs entre les éléments. Une dernière chose quand je conçois pour le bureau est que je vais aller sur un cadre et que je vais aller sur la grille de mise en page. Et on va le changer en une grille de colonnes. Et je travaille habituellement avec 12 colonnes. Je l'étire. Je laisse aussi cela avec auto et j'utilise une marge 128 et une gouttière de 16. Cela sert un but que votre contenu ne mène pas hors du bord de ces colonnes. Parce que, généralement, lorsque vous concevez pour le Web, vous voulez que tous les éléments des sections les plus anciennes de votre site Web suivent un certain alignement. Ces colonnes de but serveur afin qu'il puisse allier mon contenu dans ces colonnes et peut les désactiver et en cliquant sur ce petit i ici. Maintenant, je peux les voir et maintenant je peux les voir quand j'en ai besoin. Alors maintenant, c'est votre tour et juste la mise en page de votre propre section de héros de sigma. Et n'oubliez pas d'ajouter beaucoup d'espaces, puis de commencer le supprimer lorsque vous créez votre mise en page. Maintenant, nous avons notre mise en page afin que nous puissions passer à nos prochains éléments dans la leçon suivante. 7. Conception d'en tête: Bien que cette leçon soit intitulée conception de titre, nous allons essentiellement styliser tous nos éléments de texte. Dans cette leçon, nous allons choisir une police et créer une échelle de polices avec des milliers de polices différentes à choisir. Séparer le bien du mal peut être une tâche intimidante et est certainement un effort subjectif. Si vous avez déjà certains de vos visages préférés, allez-y avec eux. Mais développer une Nia pour tous les détails qui font une bonne police peut prendre des années et vous n'avez probablement pas d'années. Je vais donc partager quelques astuces que vous pouvez utiliser pour commencer à choisir des polices de haute qualité tout de suite. Avant d'entrer dans des suggestions concrètes, je vais vous donner quelques directives générales lors du choix des polices. La première consiste à ignorer les polices de caractères avec des poids inférieurs à fi. Ce n'est pas toujours vrai, mais en règle générale, caractères qui présentent beaucoup de poids différents ont tendance à être fabriquées avec plus de soin et d'attention aux détails que les polices avec moins de poids. De nombreux répertoires friands comme Google Fonts vous permettront de le filtrer par nombre de styles, ce qui est une combinaison des poids disponibles ainsi que des variations métalliques, tous ces poids convenu façon de limiter le nombre d'options que vous avez à choisir est maniveller cela jusqu'à dix plus pour tenir compte de l'italique sur Google Fonts spécifiquement, qu'il coupe 85% des options disponibles vous laissant avec moins de $0.50 serifs à choisir, et que cela vous empêchera de vous sentir dépassés. La deuxième suggestion est de faire confiance à la sagesse de la foule. Si une police est populaire, c'est probablement une bonne police. La plupart des répertoires friands vous permettront de trier par popularité. Cela peut donc être un excellent moyen de limiter vos choix. Et cela est particulièrement utile lorsque vous essayez de choisir quelque chose d'autre qu'une police neutre, choisir un joli serif serait une certaine personnalité, par exemple, peut être difficile. Donc, tirer parti du pouvoir de décision collectif de milliers d'autres personnes peut rendre les choses beaucoup plus faciles. Chaque design ou police a une sorte de personnalité. Un site bancaire pourrait essayer de communiquer, sécuriser, et professionnel, tandis que la tendance dans votre startup pourrait avoir un designer se sent amusant et ludique Sur la surface, donnant un design en particulier, personnalité pourrait sonner abstrait, mais beaucoup de celui-ci est déterminé par quelques facteurs concrets solides. Et la topographie joue un rôle énorme dans la détermination des champs de conception. Si nous voulons un look élégant ou classique, vous pouvez incorporer une police Serif dans votre design. Où je regarde ludique, vous pourriez utiliser un Sans Serif arrondi. Et si vous allez pour une boucle plane ou chaque fois que vous comptez sur d'autres éléments pour fournir une personnalité et un taux de travail sensoriel neutre. Et depuis que je crée une section de héros pour une application de productivité fictive, et je veux dépeindre les sentiments d'inefficacité communiste. Je ne vais pas trop dévier et je vais utiliser un nouvel outil, sans serif plus tard quand j'entrerai dans FISMA, choisir des tailles de police sans système est une mauvaise idée pour deux raisons. Cela entraîne des incohérences gênantes dans vos conceptions et ralentit votre flux de travail. Alors, comment définissez-vous un système de type ? Pour la conception d'interface, une approche pratique consiste simplement à choisir des valeurs à la main. La plupart des concepteurs utilisent une échelle linéaire ou modulaire. Je n'entrerai même pas là-dedans. Mais de cette façon, en faisant cuire les valeurs à la main, vous n'auriez pas à vous soucier des erreurs d'arrondi des sous-pixels. Et vous avez le contrôle total sur les tailles qui existent au lieu d'externaliser travail de dette à une formule mathématique. Voici un exemple d'échelle qui fonctionne bien pour la plupart des projets, j'ai toujours ces tailles prêtes à l'emploi. Donc nous sommes dans les gémissements de figues, voici ma compétence étrangère. J' utilise habituellement 1214161820243036486072 taille de police de pixels. Cela devrait suffire à couvrir tous vos besoins pour la conception complète du site, sans parler du design hétérosexuel. Donc, il est juste assez limité pour accélérer ou prendre des décisions, mais il n'est pas si limité que vous avez l'impression de manquer une taille utile. Et maintenant que nous avons choisi une police et créé une échelle, appliquons-la à notre section héros. J' ai dit que je vais utiliser un San Serif neutre et qu'on va utiliser Rubato comme mon choix parce que c'est un san-serif neutre. Alors appliquons-le. Pour ma direction. Je peux maintenant regarder ma belle habileté. Et je pense que je vais aller pour 36 pixels de mon titre, appliquer 36 pixels. On y va. Maintenant, vous pouvez voir pourquoi j'ai activé la grille de mise en page dans la leçon précédente. Je l'allume maintenant. Et maintenant, je sais que mon contenu doit être dans ces mises en page. Et vous pouvez voir que c'est, c'est un peu trop pour la première ligne. Oui, ça devrait être assez bon. Désactivons notre couche groupée. Ok, pour ma sous-rubrique, je vais m'en tenir. Mais pour la taille, je pense que je vais aller avec le texte de 16 boutons ronds. Je vais y aller avec le robot O2. Et il va aller et choisir une taille de police 16, cependant, est toujours ne ressemble pas à un bouton et nous allons le comprendre dans une future leçon. Et pour l'étiquette de mon bouton, je vais prendre un douv. Et vous pouvez voir, je vais, ces tailles sont là, donc c'est comme ça que j'ai choisi ça. les regardant, je peux voir que je peux atteindre une certaine hiérarchie visuelle en termes de taille en choisissant 36 dans un titre, puis 16 dans un sous-titre, et 12 pour mon texte d'étiquette. Je veux aussi établir une hiérarchie visuelle entre le titre principal et le sous-titre. Donc, pour la sous-position, j'ai choisi une taille plus petite que celle d'une erreur de cap. Veuillez garder à l'esprit que trop compter et la taille de la police, la hiérarchie du contrôleur est une erreur. Cela conduit souvent au contenu principal trop volumineux et au contenu secondaire trop petit. Vous pourriez dire que ces deux-là, celui-ci est beaucoup plus grand que celui-ci. Donc peut-être que nous pouvons avoir celui-ci à 18 que j'essaie de faire est, au lieu de laisser tout le levage lourd à la taille de la police seule, essayez d'utiliser le poids de la police ou la couleur pour faire le même travail. Par exemple, faire un élément primaire Balder vous permet d' utiliser une taille de police plus lisible assez et fait un meilleur travail de communication. C' est important de toute façon. Donc, je vais définir le poids de la police de titre à 700 ou gras. Et je vais aussi faire tout ça. Alors allons ici et faisons tout ça des bouchons. Maintenant, c'est en trois lignes. Je n'en veux pas. Voyons s'il saigne plus. Ces très bien. Super. Donc, nous pouvons utiliser la police, le poids ou la couleur pour faire le même travail pour représenter la hiérarchie visuelle. Donc, par exemple, je vais rendre ma sous-position régulière, mais je vais changer sa couleur et nous allons la changer pour un quatrième ou 3D 4D, et il devrait être gris. C' est génial. Maintenant, vous pouvez voir une hiérarchie évidente dans cet élément et celui-ci, vous n'avez pas besoin d'utiliser ce qu'il pixels et plus haut pour la taille de titre que la plupart des sites Web font, parce que c'est ainsi que la plupart des gens pensent que vous devez atteindre une hiérarchie visuelle où faire quelque chose de bien plus grand que l'élément à suit ce grand élément. Mais ce n'est pas le cas que vous pouvez voir. Celui-ci n'a que 36 ans. La plupart des sites Web utilisent 42 et plus. Donc il est 36 et celui-ci est 18. Et vous pouvez clairement voir lequel est le plus important, lequel est primaire, dans lequel l'un est secondaire. Donc, je vais utiliser gras ou 700 pour mon index fesses dû. Et puis à la fin pour mon, pour mon étiquette de bouton. Et nous allons revoir aussi vraiment la libido, nous n'avons pas changé cela et je vais utiliser l'italique. Je vais choisir la même couleur ou quatre f, quatre d 4D, la même couleur que mon sous-titre, en utilisant une couleur plus douce, une couleur plus douce pour les textes de support, comme le sous-titre à l'étiquette débitée au lieu d'une petite taille de police, il indique clairement qu'un texte est secondaire tout en sacrifiant moins sur la lisibilité. Maintenant, vous pourriez argumenter que ce texte est minuscule, C'est vrai. Mais alors gardez à l'esprit que ce dx sera sous le bouton et nous ne voulons pas distraire ou distraire les utilisateurs et nos visiteurs trop de ce bouton puisque ce sera nos principales actions appelées. Donc, nous soutenons simplement ce bouton par ce texte et il est toujours lisible quand, quand l'utilisateur ouvre le laboratoire du site Web comme celui-ci. Donc, pour résumer, essayez de coller à deux ou trois couleurs sont de couleur foncée pour le contenu primaire, comme le titre principal. Convenir pour le contenu secondaire comme le sous-titre. De même, deux poids de police sont généralement suffisants pour le travail de l'interface utilisateur. Un poids de police normal, 400 ou 500, en fonction de la police pour la plupart du texte et un poids de police plus lourd, 600 ou 700 pour les attaques. Voulez-vous souligner ? Restez à l'écart des poids de police inférieurs à 400 pour l'interface utilisateur car ils fonctionnent pour un gros en-têtes, mais ils sont trop difficiles à lire dans des tailles plus petites. Donc, si vous envisagez d'utiliser un poids plus léger à un peu de texte mis en évidence, utilisez une couleur plus claire ou une taille de police plus petite à la place. Maintenant, c'est ton tour. Ajustez le choix de la police , la taille, le poids et la couleur sont de bons éléments de texte et FISMA et vous voir dans la leçon suivante. 8. Conception de Call-to-Action l'action: Nous avons appliqué une taille, une échelle et une police histoires à notre bouton dans la dernière leçon. Alors choisissons une couleur pour cela. Maintenant. Il y a beaucoup de signes sur la psychologie des couleurs. Mais en pratique, vous avez vraiment juste besoin de faire attention à la façon dont les différentes couleurs vous alimentent. bleu, par exemple, est sûr et familier. Personne ne se plaint de bleu. L' or pourrait dire cher et sophistiqué. Le rose est un peu plus amusant mais pas si sérieux. Alors que je pourrais mettre en place une psychologie Orvieto complète ou des couleurs et tel, ce n' est tout simplement pas super pratique même lorsque nous divisons le test pour les colliers de boutons dans les coulisses, encore plus aléatoire peut se produire. Donc, beaucoup de cela est juste à propos de ce qui semble bon et se sent bien pour vous. Mais une chose que vous ne devez pas oublier, et c'est de vous assurer de choisir une couleur de bouton de contrat. Mackey aujourd'hui, nos ancêtres ont acquis un trait important et c'est la capacité de détecter le contraste dans l'environnement environnant. Ils avaient besoin de ce trait pour détecter les prédateurs sont des stimuli mortels. Sans le commerce de la dette, les gens mourraient. Donc, grâce à la sélection naturelle, vous possédez toujours cette capacité. Votre attention est naturellement attirée vers les stimuli visuellement les plus visibles. Donc, utilisez cette perspicacité, a augmenté l'importance visuelle de votre bouton d'appel à l'action. Choisissez les couleurs des boutons qui contrastent avec le reste de votre page. Et ce contraste attirera naturellement l'attention, mais c'est assez évident, non ? Évidemment, les contrastes attireront plus d'attention alors qu'il y en a plus ici aussi. Et encore une fois, il s'agit de la fluidité du traitement. Nous avons mentionné dans les leçons précédentes, la fluidité du traitement, la facilité et la rapidité avec laquelle nous traitons la recherche d'information par Alter et Oppenheimer en 2009 indique que chaque fois qu'un concept entre dans notre esprit rapidement et facilement, un produit sensation agréable dans notre cerveau. Ensuite, nous attribuons faussement ce plaisir à notre évaluation du stimulus et nous évalués comme stimulus plus favorablement simplement parce que nous avons pu le traiter plus facilement. Alors, comment cela se rapporte-t-il aux couleurs des boutons ? couleurs contrastées des boutons augmentent la fluidité du traitement. En raison du contraste. L' acte de cliquer sur votre bouton entrera plus facilement dans l'esprit des visiteurs. Cela va alors générer une sensation agréable dans leur cerveau. L' acte de cliquer sur votre bouton, nous verrons plus attrayant, sorte qu'ils seront plus susceptibles de le faire. Alors choisissez une couleur de bouton contrastée. Pour ma couleur de bouton, je vais juste lire, puisque ma capture d'écran d'application a déjà beaucoup de cette couleur dedans. Donc, je voulais correspondre, mais je suis prudent que d'obtenir l'effet contrastant, bien sûr. Nous allons donc changer la couleur de ma police en blanc après avoir créé mon bouton. Donc, je peux appuyer sur sont sur mon clavier ou simplement aller ici et sélectionnez Rectangle. Et je vais juste créer un enchevêtrement de rang que je peux faire glisser et déposer ici pour que je puisse placer mon texte à l'intérieur. Voyons si son texte, son central à l'intérieur. Oui, on dirait ça. Je dois faire attention qui a obtenu l'effet de contraste entre la couleur du bouton et l'arrière-plan. Mais en même temps, je dois faire attention à choisir l'effet contrastant, à savoir mon texte dans le bouton et l'arrière-plan du bouton. Donc je veux dire, juste aligné pour diviser mes titres. Donc, pour ma couleur de bouton, je vais choisir un dB de quatre, C, trois, F. C'est la même couleur. Comme la couleur de la route et une capture d'écran. Et à partir de ma couleur de police, je vais changer ça en blanc. C' est ça a l'air bien. Aussi petit détail que ça en a l'air. Si et combien vous êtes. coins arrondis dans votre design peuvent avoir un grand impact sur la sensation globale d'un petit rayon de frontière est assez neutre et ne communique pas vraiment beaucoup de notre personnalité et elle est propre. Un large rayon de bordure commence à se sentir plus ludique. Alors que le faible rayon de frontière semble beaucoup plus sérieux ou formel, quel que soit votre choix, il est important de rester cohérent. Mélanger des coins carrés avec des coins arrondis dans la même interface semble presque toujours pire que de coller avec l'un ou l'autre. Donc maintenant, nous allons ajuster nos bordures de boutons sur, par exemple, en supposant que cet outil est pour les équipes marketing et créatives au sein d'accompagner. Donc, puisque je ne vends pas aux particuliers mais aux entreprises, je vais ajouter un peu de frontière, mais pas trop. Je ne trouve pas trop ludique. Je pense que le rayon de cinq pixels devrait faire l'affaire. L' option de rayon de bordure est ici. Je vais juste ajouter cinq pixels. Oui, ça semble juste assez à mon avis. Si vous voulez aller pour un look plus ludique, vous pouvez aller pour 25 border-rayon et tableau de bord devrait faire l'affaire. Mais je vais rester divisée. D' accord. Maintenant, nous allons ajouter un bouton de visite d'ombre. Nous voulons créer un effet comme le bouton est levé hors de la page. Il sera donc plus facile pour le visiteur de le remarquer et de cliquer dessus. La création de cet effet peut sembler compliquée au début, mais cela ne vous oblige à comprendre qu'une seule règle fondamentale. La lumière vient d'en haut. Alors passons à FISMA et ajoutons un peu d'ombre. Comme les bords supérieur et inférieur de ce bouton sont tous les deux plats, il serait impossible de les voir tous les deux en même temps. Et les gens regardent généralement légèrement vers le bas vers leur écran. Ainsi, un élément surélevé bloquera une partie de la lumière d'atteindre la zone au-dessous de l'élément. Nous pouvons obtenir cet effet en sélectionnant notre rectangle. Puis ajouter une petite ombre sombre avec un léger décalage vertical, car nous voulons seulement que l'ombre apparaisse sous l'élément. Donc, cela peut aller ici pour vous affecter ou comment avez-vous une ombre portée sélectionnée par défaut ? Et nous pouvons maintenant ajuster ses paramètres. Nous voulons juste un léger décalage vertical, je pense que les pixels devraient faire pour tromper. Ne vous laissez pas emporter par le rayon de flou. Quelques pixels, c'est beaucoup. Et ce genre d'ombres devrait avoir des bords assez pointus. Au bas du bouton est tranchant lui-même. Et puis pour la propagation, je peux aller à 20%. C' est ça. Voyons deux différents, vous pouvez certainement voir une ombre subtile sous le bouton. Et c'est exactement l'effet que nous voulions faire. Pendant que nous écrivions copie pour un bouton d'appel à l'action, nous avons utilisé une flèche pour transmettre le mouvement. Et nous avons parlé de l'importance de créer un sentiment d'aller de l'avant et de progresser dans le processus, ce qui donne aux visiteurs un sentiment de satisfaction et les encourage à s'engager dans la tâche. Donc maintenant, nous pouvons styliser notre élément d'erreur deux et l'ajouter à une certaine importance visuelle supplémentaire. Et à la fin, ajoutez-le à notre bouton. Ici, j'ai un élément d'erreur que j'ai téléchargé en ligne. Je peux maintenant changer sa couleur en blanc puisque nous allons le mettre sur ce bouton avec la même couleur de fond. Je suis moi. Je vais sélectionner l'élément de proportions contraintes, qui signifie que chaque fois qu'une diminution de la hauteur ou de la largeur de cet élément aigu comme rapport d'aspect intact, ce qui est fondamentalement ce dont j'ai besoin puisque je voulais le réduire pour tenir sur notre bouton. Allons zoomer ici. Permet de sélectionner et d'élargir un peu notre bouton. Ça devrait suffire. C' est encore trop grand. Il devrait y en avoir assez. Excellent. Maintenant, appuyez également sur o sur notre clavier, ou allez ici et appuyez sur ellipse. Et vous cliquez dessus. Nous allons à nouveau restreindre les proportions et diminuer sa hauteur pour que je l'obtienne même cercle. Je vais le mettre ici, peut-être un peu trop, plus. Et on va le mettre en arrière-plan derrière mon vecteur. C. Déplace-le ici. Ça a l'air bien. Pour la couleur de cet élément d'ellipse global. Je vais sélectionner ces mêmes couleurs que pour mon arrière-plan de bouton, mais je vais le faire glisser légèrement vers le bas vers la gauche, donc il devient un peu plus sombre, donc c'est un peu plus important. Et ça a l'air bien. Peut-être que nous pouvons simplement regrouper ces deux éléments ensemble, les faire glisser un peu plus près, puis diminuer avec l'ensemble de l'élément. Ça a l'air bien. Je pense juste que ce bouton est un peu. Je vais juste augmenter la fosse haïda juste un peu. Et nous allons envoyer à, envoyé aux éléments. Et je vais rendre ces deux éléments centraux. On y va. Maintenant, ça a l'air un peu mieux. Et je vais positionner cet élément central sur le bouton, puis un peu plus près afin que les utilisateurs puissent identifier que ce message dans une étiquette de texte est connecté à ce bouton et appeler à l'action. Maintenant, c'est ton tour. Nous avons presque fini avec la classe, alors assurez-vous que votre bouton d'appel à l'action est stylé et prêt à vous voir dans la prochaine leçon. 9. Conception d'image de héros: Nous avons déjà choisi notre élément graphique à écouter au-dessus de cette écologie de l'image de héros, mais maintenant nous pouvons l'augmenter un peu plus. Et une façon de demander un peu d'excitation à tout l'arrière-plan de la section héros est de simplement changer sa couleur. Cela fonctionne très bien pour mettre l'accent sur un panneau individuel comme une section de héros, ainsi que pour ajouter une certaine distinction entre les sections entières de la page. Pour un look plus énergique, vous pouvez même utiliser ce dégradé tardif. Alors, allons dans Sigma. Essayons donc d'atteindre cet effet. Sélectionnez mon cadre et je vais copier coller. Et maintenant je vais cliquer sur ce petit plus dans la première section. Il est déjà sélectionné. Le gradient linéaire va profondément, s'il vous plaît. Je vais le faire glisser sur le côté parce que je veux que le gradient passe de gauche à droite. Ok. Et pour ma couleur, le premier dégradé va sélectionner cinq soixante huit cinquante cinq. Et pour le second, je peux sélectionner 98075. Et puis une centaine. Évidemment, je peux garder les mêmes couleurs de l'autre police sur ce fond. Donc je vais changer ça pour attendre. Je vais changer ma sous-rubrique deux large deux. Je vais juste lui donner un peu moins de capacité, donc c'est plus dans la hiérarchie visuelle. Alors je vais faire la même chose pour mon label. Et maintenant ce contraste nous avons dit que nous devons toujours garder à l'esprit et utiliser une couleur contrastée pour le bouton. Et ce n'est pas le cas, ce n'est pas suffisant. Donc, nous pouvons peut-être choisir une couleur noire pour le bouton. Alors faisons ça. Créons, faisons-le celui-là. Ça semblait juste un peu plus comme ça. Super. Ça a l'air bien. Et maintenant, nous pouvons juste expérimenter et essayer différentes itérations. Peut-être que vous préférez si le gradient était plus proéminent sur le contraste était meilleur de l'autre côté. Donc on peut les changer ici et ici. Peut-être que cela semble mieux pour, vous savez, ajouter une forme ou une illustration simple. Et cette technique est un favori de la mienne que j'utilise très souvent dans mes conceptions, est bien décorer votre fond entier. Vous pouvez également essayer d'inclure un graphique individuel ou deux dans des positions spécifiques. Et vous pouvez utiliser des formes géométriques simples pour cela. Par exemple. Ce sont les trois formes géométriques que vous pouvez soit Creative, ils ont Mara, juste trouver tout le fer très facilement et vous pouvez utiliser des similaires ou tout autre que vous enroulez, vous pouvez utiliser la flore graphique si c'est votre truc, ce que vous voulez. C' est là que vous pouvez simplement créer en ajoutant ces éléments dans votre section héros. J' ai également changé le sous-titre de tous les veaux pour envoyer ce cas a augmenté la marge entre le bouton et l'étiquette de texte. Donc, un ajout d'éléments E3, ils viennent juste rafraîchir le design un peu et cela suffit. Mais si vous aimez le fond de couleur, vous pouvez le combiner avec un, avec un dégradé que nous avons défini plus tôt, mais alors bien sûr, vous devez changer. Vous devez changer la couleur de vos polices afin qu'elle corresponde en contraste, l'arrière-plan est une autre idée pour la conception finale. Et bien sûr à la fin, jaune fournit toujours un bon contraste avec le noir et le rouge. Donc, c'est tout, ce cas d'utilisation est pour une application de productivité. Le vôtre peut être différent et vous pouvez utiliser différentes tactiques. Il y a plein de tactiques. Ce sont les trois conceptions finales pour l'application de productivité D. Personnellement, j'aime cet un des plus que je suis toujours trouvé dans les conceptions propres qui ne distraient pas autant et attirent l'attention là où l'attention doit être. Voici donc, c'est votre dernière étape. Mettez en forme votre section de héros, image et arrière-plan à votre goût et vous êtes prêt à partir. 10. Réflexions finales: Excellent travail pour terminer le cours. Merci de rester à travers et j'espère que vous avez beaucoup appris. Toutes les tactiques que je partage avec vous dans cette classe sont déjà fondées sur des recherches psychologiques concrètes. Vont-ils travailler à chaque fois ? Eh bien, pas nécessairement, mais s'il vous plaît rappelez-vous que ce ne sont pas des idées aléatoires et des tests divisés que nous avons tirés de l'air mince plus souvent qu'autrement, ils devraient vous fournir un coup de pouce positif. Et avec cette approche analytique à l'esprit et les tactiques de conversion que nous venons d'apprendre, vous devriez être en mesure de mettre à l'échelle la valeur de votre site Web plus efficacement. Le moment est venu d'utiliser un conseil communautaire dans cette classe pour poser des questions, démarrer des conversations et partager votre projet. reddition de comptes est la colle qui lie les engagements aux résultats. Si vous avez suivi toutes les étapes de ce cours, vous avez maintenant votre toute nouvelle section héros et prêt à partir. Veuillez donc le télécharger dans la galerie du projet. Ce serait un plaisir de vous faire part de vos commentaires. Il peut aussi me dire ce que vous pensez de cette classe. En laissant votre avis, vous pouvez rester à jour. Et mes nouvelles classes et ressources en me suivant ici sur la part de l'école. Mon intention était de faire ce cours plein de contenu exploitable et de mes newsletters, aucune différence. Ainsi, vous pouvez vous abonner Arnaldo dot email si vous êtes intéressé. Merci beaucoup d'avoir suivi ce cours. J' ai hâte de voir ou d'entendre une section prendre vie jusqu'à la prochaine fois.