Choix des lecteurs
Articles populaires
Travailler avec la couleur est une compétence essentielle pour tout concepteur de sites Web. Une bonne connaissance de celui-ci peut apporter le succès au site, et même une petite erreur dans la création de l'échelle peut causer beaucoup de problèmes à l'avenir. Dans cet article, nous examinerons 10 erreurs que les concepteurs commettent lorsqu'ils travaillent avec la couleur sur un site Web et vous expliquerons comment les éviter.
Par exemple, l'orange est une excellente couleur de motivation pour les achats. Transmet parfaitement les appels à l'action, adapté aux magasins en ligne.
Le vert symbolise la confiance, et quoi de plus important que la confiance en matière de nourriture ?
Même si vous aimez vraiment un site, réfléchissez avant de commander "exactement le même, mais à propos de mes produits".
Nous vous recommandons d'utiliser au moins une roue chromatique lors du choix d'une palette de couleurs. Lorsque vous choisissez des couleurs avec, vous devez vous rappeler que les couleurs voisines et celles qui sont opposées se combinent bien les unes avec les autres.
Nous vous recommandons également d'utiliser des sites spécialisés. Ici, vous pouvez créer votre propre gamme ou utiliser l'une des gammes prêtes à l'emploi.
Dans le premier exemple, 3 couleurs sont utilisées pour décorer le texte, dans le second seulement deux. C'est la deuxième option qui a l'air mieux et le texte dessus est plus facile à lire.
Par exemple, deux boutons ayant le même objectif sur un même site. Mauvaise Décision.
Ces deux tendances de la mode sont souvent incompatibles. Vous ne pouvez pas vendre sur la base des émotions si votre site ne crée pas ces mêmes émotions lorsqu'il est consulté.
Mais cela ne signifie pas qu'une page de destination émotionnelle de vente doit briller de toutes les couleurs de l'arc-en-ciel.
Nos habitudes, comme les méthodes des spécialistes du marketing, migrent des supermarchés vers l'immensité d'Internet, par exemple, le site Web d'une entreprise de bijoux, fait en noir, a l'air élégant et cher :
Vous ne devriez pas utiliser beaucoup de noir sur votre site Web comme arrière-plan si vous fournissez des services dans un segment de prix bas ou vendez des produits bon marché. Les impressions des visiteurs du site ne correspondront pas à votre proposition de vente.
Votre vision peut être aussi belle que vous le souhaitez, mais laissez le designer suggérer la sienne. Si, après plusieurs tentatives, le concepteur ne peut toujours pas montrer quelque chose que vous aimez, alors seulement vous devez lui définir des cadres rigides dans la sélection de couleurs.
Autre exception : si vous êtes sûr que votre palette de couleurs est bien pensée et que vous pouvez justifier ce choix par vous-même. En règle générale, les clients ne tiennent pas compte de ce que le concepteur prend en compte - la lisibilité du texte, la luminosité suffisante des boutons et le nombre optimal de couleurs.
Par exemple, nous avons flouté le premier écran d'Aviasales.ru - l'attention est attirée sur les blocs des éléments 1, 2 et 3. Après avoir lu le titre, c'est-à-dire la formation des bonnes attentes chez l'utilisateur, il (rappelez-vous les règles de contraste) se penchera sur les éléments nécessaires du choix des paramètres et du call-to-action.
Et regardez comme l'action principale du site Web ostrovok.ru se démarque clairement de l'arrière-plan flou.
Si vos interfaces réussissent ces tests avec succès, d'autres améliorations du site doivent être effectuées sur la base d'une compréhension de la psychologie de l'utilisateur, c'est-à-dire analyser les retours d'utilisateurs réels. A l'aide de questions comme : « Où avez-vous regardé en premier : quels sont les 3 éléments du site, et dans quel ordre ? Où voulez-vous cliquer en premier et pourquoi ?" dans AskUsers, vous pouvez comprendre non seulement comment l'attention des utilisateurs est distribuée, mais aussi pourquoi les utilisateurs regardent certains éléments. Ces informations aideront à identifier un certain nombre de problèmes dans l'interface actuelle et à trouver les meilleures options pour les résoudre.
N'oubliez pas que la forme obéit au contenu. La conception des couleurs sert d'outil qui vous permet de concentrer l'attention de l'utilisateur sur des informations importantes pour l'utilisateur et le propriétaire du site.
Avec HTML, vous pouvez définir les couleurs de tous les liens d'une page, ainsi que modifier les couleurs des liens individuels.
Les couleurs des liens sont définies en tant qu'attributs de balise
... Les attributs sont facultatifs et s'ils ne sont pas spécifiés, les valeurs par défaut sont utilisées.lien - définit la couleur des liens sur la page Web (la couleur par défaut est le bleu, # 0000FF).
vlink - la couleur des liens déjà visités. La couleur par défaut est le violet, # 800080.
En HTML, les couleurs sont généralement spécifiées sous forme de nombres en code hexadécimal, sous la forme #rrggbb, où r, g et b désignent respectivement les composants rouge, vert et bleu. Chaque couleur se voit attribuer une valeur hexadécimale de 00 à FF, ce qui correspond à une plage de 0 à 255 décimal. Ensuite, ces valeurs sont combinées en un seul nombre, précédé du caractère # (exemple 1).
Exemple 1. Définition des couleurs de lien
Contenu du site
La couleur n'a pas besoin d'être spécifiée en hexadécimal ; des mots-clés peuvent également être utilisés. Dans cet exemple, la couleur d'arrière-plan de la page Web est définie sur le noir et la couleur des liens est définie sur le rouge.
Il est plus pratique d'utiliser CSS pour changer la couleur des liens. Pour définir la couleur de tous les liens d'une page Web, les pseudo-classes suivantes sont appliquées et ajoutées au sélecteur A.
visité - Le style du lien visité.
active - Le style du lien actif. Le lien devient actif lorsque vous cliquez dessus.
L'exemple 2 montre comment modifier la couleur des liens sur une page Web à l'aide de styles. Pour ce faire, nous allons utiliser la propriété color style, elle définit la couleur d'un texte spécifique, en l'occurrence des liens.
Exemple 2. La couleur des liens spécifiés via les styles
Contenu du site
La méthode ci-dessus pour définir les couleurs fonctionne pour tous les liens d'une page Web. Cependant, il devient parfois nécessaire d'utiliser différentes couleurs en même temps. Les couleurs claires, par exemple, pour les zones sombres d'une page Web, et les couleurs sombres, respectivement, pour les zones claires. Vous pouvez également utiliser des styles pour cela.
Pour changer la couleur du lien, utilisez l'attribut style = "color: #rrggbb" dans la balise où #rrggbb est la couleur en notation hexadécimale. Vous pouvez également utiliser des noms de couleur ou spécifier une couleur au format : rgb (132, 33, 65). Les valeurs décimales du rouge, du vert et du bleu sont indiquées entre parenthèses (exemple 3).
Contenu du site
Marketing en ligne
Convivialité
Cet exemple montre trois manières différentes de définir la couleur à l'aide de styles.
Quelle couleur de bouton a la conversion la plus élevée est une vieille question philosophique à laquelle beaucoup de gens connaissent la réponse. "Rouge" - les commerçants débutants répondront. "Contraste" - les spécialistes du marketing expérimentés répondront. Nous avons testé 21 666 utilisateurs pour ce sujet. Et ils sont arrivés à des conclusions assez intéressantes.
Au début de l'article, vous devez ajouter une intrigue et des faits troublants afin d'attirer l'attention. Sur la base de ces conseils, je peux dire qu'en pratique, nous avons obtenu une augmentation de la conversion jusqu'à 65% en changeant simplement la couleur du bouton. Dans cet article, nous allons expliquer les résultats et comment le faire.
Je ne vous dirai pas que nous avons inventé la pilule magique pour la gestion des conversions. En cas de conversions croissantes, je suis arrivé à une conclusion simple. Il n'y a pas de déclaration à cent pour cent qui fonctionnera toujours pour tout le monde. Des pilules magiques aussi. Plus tôt, nous avons écrit sur la façon dont, dans certains cas, le mot « gratuit » réduit la conversion. Que pouvons-nous dire des autres vérités "à cent pour cent".
Alors, dans quelle mesure pouvez-vous améliorer les conversions simplement en changeant les couleurs des boutons ?
Nous avons obtenu jusqu'à 65% d'augmentation des conversions. 65% était le score le plus élevé au test. La moyenne était de 11 %. Mais même une telle augmentation de la conversion est un très bon résultat. Considérant que cela peut être réalisé en changeant la couleur du bouton.
De nombreux tests d'experts disent que le bouton rouge a la conversion la plus élevée. Pourquoi? Nous savons que chaque couleur a ses propres associations et évoque certaines émotions. Le rouge représente l'arrêt, le danger et la passion. Et dans la plupart des cas (comme on le croit), cela conduit à de meilleurs résultats dans le marketing Internet.
Ci-dessous l'algorithme de création de tests A/B :
1. Création d'un widget dans le constructeur
Pour créer un widget, vous devez être enregistré auprès du constructeur.
Le processus de création comprend 3 étapes :
Vous pouvez regarder cette vidéo sur la création d'un widget. Chaque étape est détaillée ici. Des instructions textuelles pour créer un widget sont situées.
Je voudrais noter qu'il y a beaucoup plus d'options de personnalisation dans le constructeur. Par exemple, lors de la visualisation d'un certain nombre de pages, par jours de la semaine, par source de référence, fréquence d'affichage et bien plus encore. Mais d'abord, je vous conseille d'utiliser les paramètres de base, puis d'expérimenter les autres.
Après avoir créé le widget, vous devez en faire une copie. Pour apporter des modifications au nouveau widget et passer le test A / B. Pour ce faire, vous cliquez sur l'icône "Copier" dans le widget créé.
Il est automatiquement activé sur le site. Maintenant, nous devons le désactiver, car il n'a pas été modifié. Pour ce faire, modifiez le statut.
Allez maintenant dans ses paramètres en cliquant sur l'icône "Vers l'éditeur".
Modifiez ici l'élément que vous souhaitez tester. Par exemple, changeons la couleur du bouton. Cela se fait en un clic. Il vous suffit de choisir une couleur différente pour le bouton.
Cliquez sur "Couleur du bouton" et sélectionnez celle que vous voulez.
Après cela, nous sauvegardons le widget. A la 4ème étape, vous ne pouvez rien laisser pour quitter les paramètres du widget précédent. Pour ce faire, cliquez simplement sur le bouton "Enregistrer".
Vous avez maintenant créé 2 widgets avec des couleurs de boutons différentes. Vous pouvez procéder à la création d'un test A/B. Pour plus de commodité, il ne reste plus qu'à changer le nom dans le deuxième widget.
3. Créer un test A/B
Pour créer un test, allez dans le menu "Tests A/B". Et cliquez sur le bouton "Créer un test".
Ici, vous avez besoin de :
Choisissez un site - écrivez le nom du test
Sélectionnez le type de test
Concernant le type de test. KEPLER LEADS propose 2 types de tests A/B différents : Classique et Individuel. La différence est de montrer les widgets aux visiteurs qui reviennent. Si vous souhaitez montrer la nouvelle version du widget au visiteur qui revient, sélectionnez Test classique. Si vous souhaitez que l'utilisateur qui revient ne voit pas une autre version du widget (la première affichée est mémorisée et seule elle est toujours déclenchée, en fonction des paramètres d'affichage), alors sélectionnez Individuel.
Après avoir sélectionné le type de test, cliquez sur le bouton "Ajouter". La dernière étape restera - sélectionnez les widgets pour le test. Pour cela, cliquez sur la cellule "Widgets" et sélectionnez-les.
Après avoir sélectionné les widgets, vérifiez s'ils sont tous actifs. S'il y a des widgets inactifs, vous pouvez les activer ici.
Tout! Le test a été créé. Vous pouvez voir tous les résultats dans les statistiques du test. Pour cela, cliquez sur l'icône "Afficher" à droite du nom du test. Recommande d'effectuer des tests sur un trafic total de 1 000 impressions ou plus (cela peut être vu dans la colonne "Vues"). Après cela, prenez la décision de commencer le prochain test.
Votre travail ne s'arrête pas là. Vous devez maintenant suivre les résultats, et après avoir atteint des données significatives (nous recommandons 1000 visiteurs ou plus), tester d'autres hypothèses. Ceux-ci peuvent être des titres, des textes d'appel à l'action, des propositions de valeur, des images, etc. Nous parlerons d'autres tests A / B dans les articles suivants. Partagez vos résultats dans les commentaires.
Je continue à publier des nouvelles intéressantes et, à mon avis, utiles du grand et immense monde. Référencement... Segolna, parlons des couleurs du design du site... Oui, exactement des couleurs. Eh bien, commençons. Couleur (coloration) du design du site affecte le taux de clics publicitaires, estiment des psychologues de l'Université d'Oxford aux États-Unis.
Des scientifiques américains ont calculé qu'un utilisateur moyen passe environ 2 minutes sur un portail Internet. Parmi ceux-ci, les 4 à 7 dernières secondes sont décisives pour nous, spécialistes du référencement, bien que cela s'applique également aux concepteurs. c'est durant cette période que l'utilisateur quitte le site ou clique sur les publicités qui lui sont proposées. Le choix dépend de couleurs du site Web et des blocs d'annonces... L'option "pire" (indésirable et non cliquable) conception de site Web- Il s'agit de concevoir un site aux couleurs grises ou rouges. Le trafic approchera de zéro (taux de clics), l'efficacité des publicités postées sur la ressource Internet aussi. Le confort et le calme sont ressentis par les utilisateurs qui se trouvent sur des sites où le blanc domine. Ils cliquent bien sur les bannières, ils ne sont attirés par la publicité PPC que si les titres sont (très) lumineux et contrastés de manière inattendue, et que le texte et l'URL sont de la taille maximale. La même chose se produit avec les conceptions écologiques.
Les sites au design bleu et design inspirent confiance (les réseaux sociaux "VKontakte" et "Facebook" viennent immédiatement à l'esprit). Il est intéressant de noter que la publicité fonctionne ici si elle est placée sur un fond blanc et que les en-têtes sont de couleur 2 nuances plus foncées (et encore une fois, cela correspond à notre bien-aimé VKontakte et Facebook). Le plus gagnant couleur de conception de site Web, selon les psychologues britanniques, jaune. Le rapport visites/clics est ici de 1 à 2,5, car de nombreux internautes visionnent 2 à 3 publicités à la fois. Mais les bannières sur tous les sites jaunes sont inefficaces. Une autre bonne couleur pour la conception de portails où les blocs d'annonces et les bannières sont cliqués n'est pas le brun contrastant. Ici, le résultat pour la bannière publicitaire est de 1 clic pour 3 visites, pour la publicité contextuelle il est d'environ 1 à 2.
PS. Résumons. D'abord, c'est gênant que, bien sûr, le public qui a été testé ne soit pas russophone, nous avons une mentalité différente. Néanmoins, les résidents de la CEI ne sont pas résidents d'Amérique ou d'Europe. Les sites russes se sont toujours distingués par des couleurs et des nuances arc-en-ciel dans leur conception, contrairement aux ressources Internet européennes et américaines restreintes (un exemple frappant est le site d'Apple). Deuxièmement, en rapport avec cela, la publicité est "cliquée" par nous (notre propre observation), lumineuse et contrastée. Au détriment des sites et portails jaunes, on peut ne pas être d'accord - ils n'inspirent pas confiance aux internautes nationaux (je ne dirai même pas tout de suite du grand portail jaune - aucun ne vient à l'esprit), sauf peut-être pour les petits enfants (bien que cela c'est mon avis) ! En général, vous aurez probablement besoin de faire un petit test, dont je vous parlerai dans la section "expériences".
Vous n'avez pas besoin d'essayer de deviner la couleur des publicités sur lesquelles les visiteurs sont plus susceptibles de cliquer. Vous devez essayer de diffuser des annonces dans différentes couleurs. Et sur la base de ses résultats, nous découvrirons les préférences des visiteurs de votre site Web. Cependant, à l'extérieur des fenêtres, il y a le 21e siècle. Par conséquent, nous écrirons un petit script qui fera tout pour nous.
Dans mon expérience, j'ai choisi trois couleurs primaires : le bleu, le rouge et le vert. J'ai pris chacun d'eux avec différents degrés de luminosité. Et je leur ai ajouté une autre couleur - la couleur des liens sur mon site. Ainsi, sept couleurs participeront à mon expérience.
Comme base, je prends le script pour afficher les publicités de YAN (Yandex Advertising Network), qui m'a été donné par le COP Profit-Partner. Ajoutons-y un changement de couleur automatique. Créons une étiquette unique pour chacune des couleurs. Pour qu'à l'avenir, à l'aide de ces tranches, vous puissiez analyser quelle couleur des publicités sur votre site est la plus attrayante pour les visiteurs.
Exécutons le script et commençons à collecter des données. Les tranches créées par notre script apparaîtront dans les statistiques.
L'expérience doit être réalisée 24 heures sur 24 pendant au moins une semaine. Pour prendre en compte toutes les dépendances horaires et les particularités des week-ends et jours ouvrables. Il est important que chaque schéma de couleurs soit affiché au moins 1000 fois.
Si vous choisissez parmi trois couleurs primaires, alors sur mon site, il n'y a pas de leader clair. Une différence de quelques pour cent peut être due à une inexactitude. Mais la tendance générale coïncide avec les recommandations des spécialistes CSP de Profit-Partner - la couleur la plus cliquable est le rouge.
Si nous considérons en détail les sept couleurs, alors le groupe suivant évoque les préférences des visiteurs : rouge foncé (# 990000), vert clair (# 00CC00) et bleu foncé (# 000099).
Je vous conseille de ne pas regarder mes statistiques, mais de mener votre propre expérience pour sélectionner la conception des couleurs des publicités dans le réseau publicitaire Yandex.
Si vous avez plusieurs sites, alors pour chaque site, vous devez effectuer sa propre expérience.
Si vous avez modifié la conception, essayez à nouveau l'expérience.
Si vous avez plusieurs blocs d'annonces comme le mien, vous devez également effectuer votre propre test pour chaque bloc d'annonces. Vous seriez surpris, mais sur mon site, les préférences des utilisateurs diffèrent dans les blocs d'annonces au milieu et à la fin de l'article.
L'expérience doit être réalisée 24 heures sur 24 pendant au moins 7 jours.
Articles Liés: | |
Quels formats et tailles de photos existe-t-il, comment choisir la bonne ?
Comment JPEG a révolutionné les formats en son temps... Ce que l'extension de nom de fichier indique exemple
Que vous écoutiez de la musique sur votre ordinateur, ... Extension de partition Mac OS
Afin de partitionner un disque sous MAC OS, vous devez aller dans "Finder" -... |