Calcul du coût par Lead / coût par Acquisition d’un client sur Internet

Posted in: Analyse et tracking, E-commerce, E-marketing, News- jan 19, 2011 3 Comments

Pourriez-vous acquérir des clients en ligne pour moins de 25 €, soit la moyenne du cout d’acquisition d’un client off-line ? Peut-être, mais cela dépendra toujours de ce que vous vendez sur Internet. En général, plus vos produits ou services sont vendus chers sur le web, plus les couts d’acquisition des e-clients sont élevés…

Avant de rentrer dans les détails, nous souhaitions faire un petit rappel sur ce que sont vraiment le « lead » et l’acquisition du client:
En e-marketing, ou plus spécifiquement en E-CRM (electronic consumer relationship management, GRC en français), la démarche d’attraction du prospect s’appelle le lead (ou « acheminement », en français), mais ce mot signifie surtout une démarche web marketing stratégique et appliquée, visant à faire venir des internautes à un endroit précis, pour effectuer une action de tout type, sauf un achat (ndlr: création de profil membre, réponse à un sondage, téléchargement de coupons…).

Si le prospect effectue une action d’achat sur le site, nous parlons alors d’acquisition (ou transformation, puisque justement, le prospect est « transformé » en client). Notez que les stades de « Prospect » et « Client », ne sont pas les seules étapes dans l’évolution du « customer », car celui-ci peut devenir client fidèle, récurrent, recommandeur ou prescripteur. Parfois même il se transforme en contributeur ou en apporteur d’affaire… le must.

————————————————————————

Et les autres couts ?

CPC = Cout Par Clic (En anglais, Cost per Click OU PPC, soit Pay Per Click).

CPM = Cout Par Mille (En anglais, Cost per thousand, CPT)
Cout pour un affichage publicitaire unique, calculé sur la base de 1000 affichages, vues ou auditions. On parle parfois de e-CPM car le CPM provient historiquement du offline.

CPI = Cout Par Impression (En anglais, Cost per Impression), utilisé pour quantifier le prix d’un et un seul affichage publicitaire. Il est notamment utilisé pour des affichages éphémères en prime time ou en événementiel.

CPD et CPW = Cost per Day / Cost Per Week, sont utilisés pour des affichages facturés au temps. Certaines régies les utilisent par exemple pour estimer le cout d’un habillage de page ou un interstitiel.

CPL = Cout Par Lead OU Cout Par Acheminement OU Cout Par Action (En anglais, Cost Per Lead)

CPA = Cout Par Acquisition OU Cout Par Transformation (En anglais, Cost Per Acquisition). Il est utilisé pour quantifier le montant de budget nécessaire au déclenchement du premier achat sur un site.

CPS = Cout Par Vente (En anglais, Cost Per Sale). Permet d’évaluer le budget pour générer une vente unique, potentiellement répétée).

CPO = Cout par Commande (En anglais, Cost per Order). A ne pas confondre avec le CPA ou le CPS ! il correspond aux frais de fonctionnement in compressibles, permettant de rendre effectif l’ordre d’achat (frais de maintenance techniques, commissions bancaires…)

CAPPING : Le capping est une fonctionnalité proposée par les serveurs de publicité qui permettent de limiter le nombre maximum de fois qu’un internaute est exposé à une publicité durant une période de temps définie. Par exemple : 3 vues/visiteur/24 heures veut dire qu’après avoir vu la même publicité 3 fois sur un site internet, le visiteur ne la reverra plus apparaître dans les prochaines 24 heures.

————————————————————————

Après ce bref recadrage, définissons concrètement la formule de calcul du cout par lead sur Internet:

Il faut diviser le montant global de votre budget e-marketing (incluant tous les couts internet et e-marketing mais aussi les frais structurels et humains) et diviser cette somme par le nombre d’internautes ayant effectué l’action escomptée. En cas de vente en ligne, pour calculer le cout par acquisition il faut diviser le même budget par le nombre de client uniques ayant effectivement validé un achat.

Les formules de calcul du Lead et de l’Acquisition :

Cout par lead (CPL) total = Somme des couts e-marketing / Nombre total de leads

Cout par lead marginal (CPLm entendez, par mois) = moyenne mobile des couts e-marketing / Nombre total de leads du mois.

Soit CPLm = [ (Cost marketing Mois-1 + prévisionnel du Cost marketing Mois+1) / 2] / Nombre total de leads du mois

Cout par Acquisition (CPA) total = Somme des couts e-marketing / Nombre total de visiteurs ayant effectué un achat

Cout par Acquisition marginal (CPAm entendez, par mois) = moyenne mobile des couts e-marketing / Nombre total de visiteurs ayant effectué un achat dans le mois.

Soit CPLm = [ (Cost marketing Mois-1 + prévisionnel du Cost marketing Mois+1) / 2] / Nombre total de visiteurs ayant effectué un achat dans le mois.

Notez que les couts marginaux sont surtout utilisés pour sanctionner des performances de ventes ponctuelles, en général mensuelles. Les couts globaux sont plus utiles pour effectuer des bilans trimestriels ou annuels.


e-marketing calcul cout par acquisation trinity advise

Concrètement, avec des chiffres :

Si vous dépensez 100 € en Campagne de liens commerciaux chez Google Adwords, au CPC, pour obtenir 20 inscription à votre newsletter, le lead vous aura coûté 100 / 20 = 5 € par prospect acheminé sur site et ayant effectué une action.
Continuons. Si seulement deux personnes parmi ces 20 inscrits continuent à surfer sur votre site et y achètent finalement un produit, le CPA sera de 100 / 2 = 50 € par client acquis.

Ce CPA peut sembler important pour certains et dérisoire pour d’autres, mais l’essentiel est de le comparer au panier moyen, c’est à dire aux montant moyen d’achats effectués sur votre site. Le cas échéant, si le panier moyen est de 250 €, Un seul acte d’achat pourra en moyenne rembourser votre campagne de liens commerciaux, vous permettre d’acquérir deux nouveaux clients et dégager une marge brute de 150 € (Chiffre d’Aff. 250 € – 100€ de Campagne au CPC).

Nous en venons au seuil de performance de campagne de lead ou d’acquisition, qui permet de savoir si une campagne e-publicitaire est rentable, voire profitable. Il se calcule de la façon suivante:

Chiffre D’affaire généré par la campagne – Cout total de campagne

Si cet indicateur est positif, l’action est envisageable. En revanche, s’il est négatif, vous devez impérativement déclencher une révision de votre tunnel d’achat, le dysfonctionnement pouvant se trouver sur toute la chaine d’approvisionnement, dans des options du mix e-marketing (prix, distribution…), ou même un dysfonctionnement graphique de votre site.

Petite remarque en guise de conclusion : en général, sur Internet, le cout d’acquisition d’un nouveau client est trois fois plus élevé que le cout de fidélisation sur la première année de relation avec l’acheteur. Attention cependant, la fidélisation sur le long terme inversera inéluctablement ce rapport. C’est à ce moment que rentrent en jeu les programmes de fidélisation sur Internet, dont nous parlerons très prochainement dans les publications de Trinity Advise.

Signification des couleurs en E-marketing et en Ergonomie Web

Posted in: Dossiers thématiques, Ergonomie web, News, Web Design- jan 18, 2011 15 Comments


.
Sur la demande de plusieurs clients et stagiaires, les consultants-rédacteurs de Trinity Advise se sont mobilisés pour vous proposer un dossier complet sur les codes couleurs web et la signification des couleurs pour Internet. Vecteurs de cohérence graphique, les couleurs dictent de nombreux comportements à l’inconscient de l’internaute. Elle génèrent des réactions et des émotions que nous ne savons pas concrètement évaluer et chiffrer en e-marketing, sauf avec les nouveaux outils de test d’ergonomie web (eye tracking, mouse tracking, neuromarketing). Comment sont perçues les couleurs sur Internet, quel est leur impact sur la navigation et comment influencent-elles les internautes dans le tunnel d’achat ? Voici quelques explications issues de nos travaux de recherche, qui permettront d’apporter des éclaircissements sur ce sujet.
.

.
————————————————–

Sommaire :


1. Signification et choix des couleurs pour sites web (vision occidentale)

2. Approche multi-culturelle et religieuse

3. Combinaisons et contraste

4. Jouez avec les couleurs

Annotations et explications complémentaires [x]

En savoir plus

————————————————–
.
Quelle que soit l’approche e-marketing, la plupart des sites à fort trafic ont un objectif de vente de produits, services ou informations. Or le mode de construction « traditionnelle » de sites internet veut que les entreprises fassent appel à des agences, des freelances ou des compétences internes. Dans chacun de ces cas, le projet commence par des propositions de maquettes graphiques internet [1], que ce soit pour un nouveau site ou un remaniement de page.

En complément d’études d’Eye Tracking (cf. notre dossier complet sur l’eyetracking en ergonomie, ici), deux, trois ou quatre maquettes au plus, sont présentées au responsable internet, qui décide au feeling du meilleur template et jette son dévolu sur ce qui sera le futur web-design. eye-tracking couleurs trinity adviseParfois, la charte graphique Internet [2] de l’entreprise vient mettre son grain de sel dans ce processus, pour imposer des couleurs, des formes ou des interpolations de mouvement assez contraignantes face à une lecture sur écran, voire tout à fait inexploitable sur certains supports digitaux.

En tout état de cause, le choix de la colorimétrie demeure aujourd’hui très subjectif car il ne dépend souvent que des goûts d’un seul comité de décideurs. Pourtant, un site Internet est une interface de communication et de promotion dont il faut surtout optimiser le pouvoir d’attraction vis à vis des internautes cibles.

A ce sujet, quelques rares entreprises mettent en place des tests utilisateurs et font appel à des ergonomes pour valider en amont l’efficacité de leurs maquettes. Une tendance très positive puisqu’avant de confronter les templates aux internautes testeurs, il est primordial de connaître le sens des couleurs, des formes et des contrastes perçus sur un écran d’ordinateur. Nous pouvons ainsi qualifier des graphismes déjà optimisés, tant pour l’image de l’entreprise que pour ses clients en ligne.

Le conseil de Trinity Advise pour choisir les couleurs de votre site :

Afin de préserver une certaine sobriété, nous vous recommandons de ne pas utiliser plus de trois couleurs différentes pour la charte graphique de votre site. De plus, le choix des couleurs devra correspondre le plus possible aux couleurs de l’entreprise (cf. couleurs du logo). Nous conseillons d’établir une couleur prédominante, représentant la majeure partie de la page web, et une ou deux couleurs secondaires plus dynamiques (plus vives), afin de mettre des composants de la page en exergue.

Enfin, notez que les couleurs possèdent une symbolique implicite et influent sur le comportement des visiteurs. Il est donc essentiel de les choisir en connaissance de cause, avec l’aide des explications proposées dans la suite de notre dossier : panorama des bons usages et des significations des couleurs pour vos usages sur Internet.

1. Signification et choix des couleurs pour sites Internet (vision occidentale)

Codes couleurs webLes couleurs doivent trouver un équilibre fonctionnel basé simultanément sur quatre niveaux. D’abord du point de vue technique, les couleurs choisies doivent être aussi précises que possible. Etant donnée la haute définition des écrans de nos ordinateurs, il est tout à fait envisageable de définir des codes pantone ou CMJN, qui octroient une identité unique au portefeuille graphique. Deuxièmement, le choix des couleurs doit véhiculer un message cohérent par rapport aux objectifs du site, tout en trouvant un bon compromis avec la charte graphique existante. Ensuite, le mix des couleurs doit sublimer les éléments structurels du site, de façon à optimiser les effets de navigation et de perception spatiale. Quatrièmement, en tant que vecteur d’esthétisme, les couleurs doivent apporter une harmonie à l’univers visuel, pour rendre le site plus confortable et donc améliorer l’intérêt des internautes cibles. Les couleurs web primaires, secondaires et tertiaires (cliquez sur l’image pour zoomer)

Répartition des couleurs le long du cercle chromatique

types de couleurs tertiaires internet Pour notre dossier des couleurs sur Internet, nous classerons les couleurs en trois catégories simplifiées : couleurs primaires, secondaires et tertiaires. Dans les procédés numériques utilisés sur Internet, les trois couleurs primaires sont le rouge, le vert et le bleu (RVB). Une couleur Secondaire est ainsi obtenue par le mélange à parts égales de deux couleurs primaires, tandis qu’une couleur tertiaire est obtenue par le mélange à parts égales d’une couleur primaire et d’une couleur secondaire.

1.1. Les couleurs primaires (mode RVB)

. Le rouge est l’une des trois couleurs primaires en synthèse additive [3]. Signe d’énergie ou d’urgence, il est stimulant mais contradictoire. Amour ou colère, courage ou danger, ardeur ou interdiction, cette couleur touche les sentiments et communique aussi des notions de chaleur et d’énergie. Pour ne pas tomber dans le piège de ses significations négatives, il est important de l’utiliser avec tact et parcimonie sur vos pages web. Trop de rouge sang donnera une impression de violence, mais un rouge riche ou un bordeaux généreux pourront parfaitement donner une impression de force et de passion positive s’ils sont équilibrés avec des touches de marrons, de noirs ou de blancs.

Significations :

Amour, passion, chaleur, sexualité, ardeur, triomphe, fête, joie, chaleur, ego, puissance, connaissance, amitié.

Violence, colère, danger, urgence, interdit, sang, enfer.

Représentations :

Feu, lave, sang, fruits rouges (tomate, fraise), fleurs (coquelicot).

Domaines :

Luxe, mode, érotisme, sport, médias, humanitaire, communisme, vin et gastronomie.

Sites exemples :

La croix rouge, rouge agence de com, expo rouge bnf, label rouge, red design

Vidéo d’explication (anglais) :

Retour – haut de page

Si une couleur est tendance, c’est bien le vert. Signe de nature, de force végétale et de santé, les communicants ayant besoin d’affirmer une appartenance au courant écolo-bio l’utilisent sans hésiter pour ajouter une touche de verdure et de nature à leurs sites Internet. En outre le vert apaise et rafraîchit, ses nuances sont assimilées à la chance et à l’espoir. Pas étonnant donc, que l’on retrouve beaucoup de vert sur les sites de l’univers pharmaceutique et médical. Il est bien sûr incontournable, couplé avec du marron, pour toutes les pages web dont le contenu se positionne sur le créneau du respect de l’environnement et du développement durable. En ce qui concerne les valeurs négatives, le vert peut parfois être porteur d’échecs et d’infortune. Cette signification superstitieuse touche surtout le monde la culture, car Molière serait mort sur scène en portant un habit vert sapin. Trop de nature, tue la nature… ?

Significations :

Écologie, partage, patience, concentration, équilibre, repos, sécurité, confiance, tolérance, charité.

Malchance, oppression, orgueil, solitude.

Représentations :

Pharmacie et médication (herbes), Arbres (sapin), légumes (haricots, courgettes et petits pois), Plantes (fougères, aloé véra).

Domaines :

Découverte et aventure, nature, voyage, éducation, environnement et écologie.

Sites exemples :

Expositions à la BNF, green peace, économie solidaire, pharmacie en ligne.

Vidéo d’explication (anglais) :

Retour – haut de page

Historiquement le bleu est associé aux garçons, contrairement au rose pour les filles. Il est couleur d’uniforme et donc signe d’autorité. Notez qu’il fut choisi par l’Union Européenne pour son drapeau mais aussi comme couleur officielle du tri sélectif (les poubelles bleues sont destinées aux journaux pour le recyclage du papier). Dans une autre dimension, à la fois ciel et mer, le bleu et ses nuances sont étroitement liés à la sagesse, à la sérénité et au rêve. Couleur de communication, il crée une sensation de confiance, de vérité et de sécurité, ce qui explique pourquoi de nombreux sites de banques et de conseil l’utilisent. Couleur préférée des occidentaux, il est aussi écho de la vie, de l’intuition et de la découverte, et peut avoir un côté rafraîchissant qui le rend très pertinent pour les pages web du secteur de l’agro-alimentaire ou du voyage. Ses aspects de pureté risquent toutefois d’être amenuisés si son teint est trop foncé et son utilisation est trop récurrente. Dans ce cas, il est conseillé de trancher avec un peu de blanc, de pastels beiges, roses ou azur pour l’alléger.

Significations :

Sérénité, protection, sérieux, rêve, sagesse, vérité, loyauté, fraîcheur, pureté et paix.

Autorité, colère, peur, dirigisme, mélancolie.

Représentations :

Eau et pureté (océan et sources), ciel, fleurs (lys, bleuet).

Domaines :

Univers « corporate », aéronotique, informatique et nouvelles technologies, environnement, voyage, croyances.

Sites exemples :

France bleu, LCL, France.fr, Nations Unies, Ifremer, Ushuaia, Agence de l’eau, gan

Vidéo d’explication (anglais) :

Retour – haut de page

.

1.2. Les couleurs secondaires (par synthèse additive numérique, cf. [3])

. Soleil et bonheur, le jaune est une couleur joyeuse et stimulante qui apporte du mouvement et véhicule la notion de fête. Pour mettre en avant votre communication évènementielle ou pour booster des promotions, le jaune vif sera idéal, car il est la couleur de l’ouverture et du contact social. En revanche, évitez de sur-utiliser le jaune pastel car il est synonyme de maladie et de morosité. Par ailleurs, trop de jaune signifie le mensonge et la traitrise. Pour atténuer son effet, préférez du marron franc, du noir ou de l’orange.

Mix de couleurs :

Rouge + Vert (synthèse additive, cf. [3])

Significations :

Créativité, curiosité, espoir, fête, joie, chaleur, puissance, richesse, immortalité, amitié.

Lâcheté, égoïsme, mensonge, jalousie, orgueil, alerte.

Représentations :

Poste et coursiers, or, sable, soleil, œuf, fleurs (marguerite).

Domaines :

Tourisme, agro-alimentaire, assurance et crédit, musique, information.

Sites exemples:

Cofidis, yellowprod, pages jaunes, pastis.fr, rencontre.fr

Vidéo d’explication (anglais) :

Retour – haut de page


Aimé ou détesté, le violet est la couleur par excellence des rêveurs, des musiciens et des personnes spirituelles. Parfois appelé mauve, cette couleur apporte des valeurs d’assurance et de sérénité, elle suggère la douceur, le rêve et l’épanouissement. Contradictoirement, de nombreux hommes occidentaux perçoivent dans le violet de l’inquiétude, de la malhonnêteté et de l’instabilité, tandis que les femmes sont plus positives à son égard et voient en cette couleur des signes de réussite sociale et de fortune. Cette teinte est donc à double tranchant et peut être difficile à accorder avec d’autres couleurs que le blanc, le noir ou le marron. Préférez là pour un usage secondaire dans un site internet, pour que des touches de mauve apportent une sensation d’apaisement dans votre charte graphique.

Mix de couleurs :

Bleu marine + Rouge

Significations :

Délicatesse, intelligence, passion, discrétion, modestie, délicatesse, amitié, méditation.

Mélancolie, excentricité, tristesse, solitude, deuil, insatisfaction, vanité.

Représentations :

Électricité, fruits (raisin, myrtilles, figues), légumes aubergine), fleurs (violette, iris, bougainvilliers).

Domaines :

Art et Culture, luxe, musique, études, croyances, affaires (business) et féminité.

Sites exemples :

Violet studio, villa violet, blog culturel.

Vidéo d’explication (anglais) :

Retour – haut de page

.

C’est la couleur du cliché : pour les filles qui « voient la vie en rose » (en opposition au bleu des garçons). Signe de rencontre et de séduction, il fait surtout référence à la romance et aux souvenirs des friandises acidulées de l’enfance. Utilisé comme couleur principale sur un site, le rose portera de fortes valeurs de bonheur et de féminité, tandis que s’il est dispersé par petites touches, en contraste avec des univers plus sombres en fond de page, il apportera une touche de délicatesse et de dynamisme. Soyez prudent avec cette couleur, qui peut rapidement devenir criarde et impliquer des effets contraires à ceux initialement escomptés (kitch, trop féminin, trop enfantin).

Mix de couleurs :

Rouge + blanc

Significations :

Charme, intimité, beauté, féminité, romantisme, séduction, bonheur, tendresse, jeunesse.

Rétrograde, naïveté, indécision, immaturité.

Représentations :

Amour, flamants roses, barbie.

Domaines :

Enfance, confiserie et pâtisserie, loisirs, art et peinture, femmes.

Sites exemples :

Théatre de chaillot, barbie, rencontre en ligne.
Retour – haut de page
.
. .
.

1.3. Les couleurs tertiaires

Définition : En synthèse additive, une couleur tertiaire est une couleur obtenue par le mélange à parts égales d’une couleur primaire et d’une couleur secondaire.

.

Tonus, fraîcheur et fruité, l’orange porte bien son nom. Elle est une couleur forte, riche et acidulée, qui véhicule de fortes valeurs de communication et de créativité. Utilisée sur les sites Internet, elle apporte de la bonne humeur, de l’optimisme et de l’ouverture d’esprit. N’hésitez donc pas à utiliser cette couleur très dynamique pour ensoleiller vos pages et vos textes. A bonne dose, les sites web de nombreux assureurs, organismes de crédit et fabricants de produits agro-alimentaires ont bien compris que l’orange insuffle du positif dans le tunnel d’achat, surtout lorsqu’il est utilisé en contraste avec des petites touches de rouge ou de jaune. Attention cependant, une overdose d’orange peut générer un effet d’agression visuelle ou carrément faire tourner votre graphisme à la mode 70′s.

Mix de couleurs :

Rouge + Jaune

Significations :

Loisirs, santé et vitalité, optimisme, créativité, communication, honneur, joie, sécurité.

Feu, alerte, agression, kitch.

Représentations :

Fruits et fraîcheur (abricot, orange, melon), soleil, fleurs (tournesol).

Domaines :

Divertissement, sport, forme et fitness, communication et mobilité, agro-alimentaire (fruits).

Sites exemples :

Orange telecom, orangina, club fitness, jusdorange.org

Vidéo d’explication (anglais) :

Retour – haut de page

.

Le marron est une couleur de mélange, neutre, imprécise mais riche, qui peut toutefois signifier la sagesse et le temps, à travers la terre et le bois. Maternelle voire rassurante, le marron trouve ses racines dans tous les éléments de la nature, ce qui lui insuffle de fortes valeurs de développement durable et d’écologie. Elle est aussi un référent incontournable de la volupté et de la douceur culinaire à travers les univers du chocolat et du café. Son avantage principal est qu’elle peut être mariée en fond de page (taupe, beige, crème) avec presque toutes les autres couleurs (surtout le blanc, noir, rose, violet et bordeaux). Attention cependant de ne pas faire des maquettes qu’en dégradés de marrons, ce qui conférerait à votre site un contre-effet de désuétude.

Mix de couleurs :

Rouge + Vert + Bleu

Significations :

Calme, philosophie, terroir, nature, recyclage, douceur, neutralité.

Saleté, déjections, boue, vieillesse.

Représentations :

Terre, bois, chocolat et café.

Domaines :

Culture, histoire, environnement, confiserie, luxe.

Sites exemples :

Ferrero chocolats, herodote, chacun son café, promod.

Retour – haut de page


1.4. Autres couleurs

D’un point de vue optique, le blanc n’existe pas en tant que couleur, puisqu’il est la synthèse chromatique de toutes les longueurs d’ondes de couleurs. Pur, équilibré, neutre, le blanc véhicule surtout des valeurs positives en occident. Il est notamment lié au mariage, à la virginité et à la religion. Vous pouvez utiliser le blanc comme couleur de fond ou comme couleur de police si votre teinte principale est assez sombre. Nous vous recommandons d’essayer de le remplacer par des couleurs en pastels ou crèmes, car le blanc peut rapidement générer un effet de vide ou de contenant creux. De plus, trop de blanc générera automatiquement un affaiblissement de l’identité visuelle sur Internet.

Significations :

Pureté, innocence, liberté, paradis, propreté, fraîcheur, richesse, virginité.

Vide, absence, solitude, peur.

Représentations :

Lait, neige, lumière, Dieu.

Domaines :

Religion, hiver, mariage, mode, actualités.

.

Retour – haut de page


Teinte hybride, mélange de noir et de blanc, le gris n’est pas tout à fait une couleur, historiquement associé à des univers de tristesse, de vieillesse voire de mort. Il suffit aussi de constater les éléments qui le représentent (poussière, souris, béton) pour s’apercevoir qu’il n’est pas très positif au regard actuel des occidentaux. Pourtant, il se marie très bien avec de nombreuses couleurs vives et peut apporter un bon équilibre de sobriété ou d’élégance s’il est dispatché par petites touches de sérieux et de rigueur. Autres aspects positifs, le gris signifie de la neutralité et du respect. Attention cependant, une surabondance de gris implique systématiquement une impression de tristesse et de mélancolie.

Significations :

Neutralité, respect, calme, douceur, rigueur.

Tristesse, anonymat, solitude, monotonie, mélancolie.

Représentations :

Béton, égouts, pluie, poussière, animaux (souris, éléphants).

Domaines :

Construction, design, école, univers « corporate ».

.

Retour – haut de page

Mix saturé de toutes les couleurs, le noir n’est pas vraiment une couleur, mais se marie très bien avec toutes les teintes. Il porte de valeurs fortes et profondément ancrées dans les mentalités occidentales. Le noir peut être assez dévalorisant dans certains contextes, puisqu’il est lié au deuil, à la peur et à la tristesse. En revanche, il peut aussi apporter des aspects valorisants aux compositions graphiques de sites Internet, puisqu’il peut les rendre élégantes, stylées et haut de gamme. Notre conseil : évitez de l’utiliser seul ou accompagné de gris en fond de page, et préférez des couleurs vives en complément (hors mis le rouge vif qui signifierait alors le sang et la mort !).

Significations :

Neutralité, sobriété, volupté, douceur, luxe, nuit, mystère.

Mort, deuil, obscurité, tristesse, monotonie.

Représentations :

Nuit, espace, corbeau, satin, smoking et robe de soirée.

Domaines :

Cinéma, art, photographie, interdit, luxe.

2. Approche multi-culturelle et religieuse :

Selon les régions du globe, les couleurs ne sont pas interprétées de la même façon. Or aujourd’hui l’Internet brise les barrières géographiques et ouvre les frontières de l’information à de nouveaux horizons.

Il s’agit alors de communiquer ou vendre auprès d’univiers socio-culturels étrangers, souvent très méconnus, mais lorsque les sites web internationaux sont construits pour s’adresser à des internautes cibles ayant des visions tout à fait différentes de nos perceptions occidentales, gare aux erreurs de colorimétrie.

Pour mieux comprendre et interpréter les grandes significations des couleurs de par le monde, voici une infographie remaniée qui apporte des explications pertinentes.

Si vous souhaitez obtenir la version haute définition de cette carte, vous devez être membre. Créez un compte (gratuit) sur notre site, ici. Vous recevrez un e-mail de confirmation contenant le code d’accès à notre espace « boîte à outils » dédiée à l’ergonomie web, ou vous aurez accès au fichier et à d’autres téléchargements dédiés.  Infographie en haute définition disponible pour les membres ici.

.

couleurs internet web chinois

Pour télécharger cette fiche sur les couleurs en chine, en haute définition, vous devez être membre.

Créez un compte (gratuit) sur notre site, ici.

Signification Couleurs Web Chine Trinity AdviseTéléchargez la Fiche E-marketing N°4 : Ergonomie - Les codes couleurs en Chine (59).

.

Retour – haut de page

3. Combinaisons et contrastes

Le cycle des couleurs

Ci-contre, le cycle des couleurs, ou cercle chromatique, est une sorte de roue sur laquelle se positionnent progressivement des différentes couleurs correspondant aux trois degrés de base de l’univers chromatique : primaire, secondaire et tertiaire. Il permet d’identifier les teintes et indique leur concordance et / ou possible co-habitation. Sur cette roue de couleurs, on trouve les couleurs froides (des verts au violet en passant par les bleus) ainsi que les couleurs chaudes (depuis les rouges vers l’orangé jusqu’aux teintes de jaune).

Les couleurs analogues

Les couleurs analogues sont celles qui se positionnent de façon directement mitoyenne dans le cercle chromatique. Elles offrent souvent des trios de couleurs très présents dans la nature. De ce fait, des pages web les utilisant offrent généralement un graphisme cohérent, riche et harmonieux.

.

Les couleurs complémentaires

Les couleurs complémentaires sont positionnées de façon diamétralement opposée dans le cercle chromatique. Ces couleurs sont toujours contrastées et très démarquées graphiquement l’une de l’autre. Lorsque l’on utilise une teinte donnée en fond d’écran, sa couleur complémentaire est souvent le meilleur compromis pour colorier les textes et les petits blocs d’information.

.

Les couleurs complémentaires par analogie

Les couleurs complémentaires par analogie (split complémentaire) correspondent à un trio de teintes permettant de donner un design avec un haut degré de contraste, toutefois moins fort que celui créé avec la couleur complémentaire directe. Il s’obtient en utilisant les deux couleurs voisines d’une teinte et en les utilisant avec la couleur opposée de cette teinte.
.

Analogie triangulée (triade isocèle).

Les couleurs obtenues par analogie triangulée sont des teintes équidistantes dans le cercle chromatique (triangle isocèle). L’avantage de ce type de combinaison pour les sites web est qu’il donne des jeux de couleurs équilibrés mais très colorés et vifs. Utilisez-les de préférence pour des sites ayant besoin de véhiculer des valeurs de dynamisme et de création.

————————————————–

Retour – haut de page

Module de choix de couleurs web : générez des teintes, des contrastes et des thèmes de couleurs pour votre site internet. Cliquez ici pour l’essayer.

module de choix de couleurs web Rendez-vous sur la page du sélecteur de couleurs web, ici. Retour – haut de page ————————————————–

4. Jouez avec les couleurs

Découvrez le sens des couleurs avec une approche ludique ! Ici.

jouer avec les couleurs web ————————————————–

Annotations et explications complémentaires :

[1] Une maquette graphique Internet (en anglais « template » ou « web design ») est un prototype épuré de page web présentant les éléments graphiques, la navigation et la colorimétrie du futur site.

La maquette permet de formaliser les aspects conceptuels du site et constitue généralement l’étape de validation de cette phase, pour ensuite passer à la phase de réalisation. Dans certains cas, la maquette graphique peut parfois être déclinée en plusieurs exemplaires relativement aboutis, afin de de les faire tester par des internautes et ainsi choisir le meilleur modèle. La plupart des agences web proposent deux à trois maquettes graphiques avant de concevoir la version finale d’un site. En savoir plus, ici. et .

[2] On appelle « charte graphique Internet » (en anglais graphic charter) le document de synthèse qui récapitule les règles de présentation des composants graphiques d’un site Internet, traduisant son identité visuelle. Elle définit l’habillage graphique de la page : tailles et gabarits, couleurs et apparences des textes, images et boutons, positionnement relatif des composants de la page. Plus d’info ici.

[3] La synthèse additive des couleurs est l’opération consistant à combiner la lumière de plusieurs sources émettrices colorées afin d’obtenir une nouvelle couleur. En synthèse additive, les couleurs primaires généralement utilisées sont au nombre de trois : le rouge, le vert et le bleu (RVB ou RGB). – L’addition de ces trois couleurs donne du blanc. – L’absence de couleur donne du noir. – L’addition deux à deux de ces couleurs primaires permet d’obtenir les couleurs secondaires.

Autre mode d’analyse en colorimétrie, la synthèse soustractive des couleurs est l’opération consistant à combiner l’effet d’absorption de plusieurs couleurs afin d’en obtenir une nouvelle. Par exemple, la superposition sur une surface blanche de deux filtres colorés, l’un jaune et l’autre bleu, permet d’obtenir du vert. Une couleur obtenue par synthèse soustractive de plusieurs autres sera forcement plus sombre qu’elles. En synthèse soustractive, les couleurs primaires sont au nombre de trois : le cyan, le magenta et le jaune + le noir (d’où le CMJN). En savoir plus, ici.

——————————————————————–

.

Retour – haut de page

Téléchargements complémentaires :

Pour télécharger les fichiers, vous devez être membre. Créez un compte (gratuit) sur notre site, ici.
.
Fiche E-marketing N°2 : Signification des couleurs pour le web (occident) (229)

Fiche E-marketing N°5 : Couleurs, Equivalence Hex <> RVB (96)
.

En savoir plus / Liens externes :

- Tous les noms des déclinaisons de couleurs par ordre alphabetique

- Faire un audit des couleurs de son site

- Utilisation des effets de lumière sur les couleurs

- Lexique du graphisme et des couleurs

- Tutoriel vidéo pour l’utilisation des couleurs web avec Illustrator.

- Recommandations de Microsoft sur l’usage des codes couleurs pour Internet.

- Liens de signification entre couleurs et musique.

- Signification des couleurs en religion et en ésotérisme.


.


E-publicité : Statistiques de croissance.

Posted in: E-marketing, E-publicité, News- jan 16, 2011 No Comments

.
L’Observatoire de l’e-pub SRI-CAPGEMINI confirme que le marché de la publicité en ligne reste dynamique : + 9% en 2010 sur le périmètre qui comprend le search, le display, la recherche locale, l’affiliation, l’emailing, les comparateurs et le mobile.
.
Principaux résultats

• le Search (liens sponsorisés) pèse près d’1 milliard d’€,
• le Display (publicité graphique) est porté par la vidéo et des opérations très coûteuses et sophistiquées,
• l’Affiliation est en hausse de 15%,
• l’Emailing est le seul segment en baisse avec -9%,
• les Comparateurs sont en forte croissance (+20%),
• le Mobile explose (+23%) grâce aux smartphones et aux applications.

Faits marquants en 2010

• Le marché de la pub vidéo instream (spot pub dans contenu vidéo) atteint 30 M€, contre 12 M€ en 2009.
• L’interactivité vidéo devient un élément différenciant puissant par rapport à la pub TV (cf la campagne Tipp-Ex vs les Roller babies d’Evian).
• Le display performance continue sa progression.
• Le retargeting (affichage de bannières contextuelles sur un site après l’intérêt manifesté par un internaute sur un autre site) représente la plus forte croissance malgré l’absence de capping.
• L’engouement pour les médias sociaux malgré les coûts cachés et les résultats en termes de ROI.
• La part des smartphones dans le parc mobile (35% attendus pour 2011) pose des questions stratégiques : comment durer au delà du téléchargement d’une application ?

En 2011, la digitalisation des acteurs du offline devrait susciter des investissements importants, avec une croissance prévue de 12%.

Téléchargez les deux études de SRI :
.
Etude : progression de l\'e-publicité - 2011 - SRI (529)
.

5 forces de Porter en E-Marketing

Posted in: E-marketing, News- jan 07, 2011 2 Comments

Rappel : Le schéma des cinq forces de Porter a été conçu par le professeur de marketing stratégique Michæl Porter en 1979 [1].

Il compile les facteurs influant sur la performance d’une entreprise, via cinq vecteurs de force :

- le pouvoir de négociation des clients,
- la menace d’entrants potentiels,
- le pouvoir de négociation des fournisseurs,
- la menace des produits de substitution,
- l’intensité de la concurrence intra-sectorielle.

Le poids de ces cinq forces permet de déterminer la capacité des entreprises du secteur à dégager du profit. Si l’ensemble des forces est élevé, le profit envisageable sera assez limité. En revanche, si les forces sont faibles, il est théoriquement possible de dégager un profit conséquent. L’objectif principal est donc de hiérarchiser ces forces afin de déterminer quels sont les éléments clés de succès dans l’industrie, c’est-à-dire les facteurs stratégiques qu’il faut maîtriser pour obtenir un bon avantage concurrentiel.

Notez qu’en théorie, la pression concurrentielle est facteur de baisse de prix. Mais cette pression ne dépend pas toujours du nombre de concurrents mais plutôt de la structure du marché sur lequel l’entreprise se situe.

1. État des lieux du marché du e-commerce sur Internet

Avant d’analyser chacune des forces, analysons avec un regard de web marketeurs la structure du marché de l’e-commerce français actuelle.

Le top 15 des portails « e-commerce » cumulant le plus de visiteurs en France, début 2011 :

Nous trouvons dans ce tableau tous les principaux sites de e-commerce où les internautes peuvent effectuer des transactions d’achat/vente de biens, services et informations.

L’on peut subdiviser les grands sites de e-commerce de la façon suivante :

* les sites de ventes aux enchères (ebay)
* les places de marché (priceminsiter)
* les sites d’e-commerce pure players (cdiscount, rue du commerce, …) et click & mortar (3suisses, la redoute, …)
* les sites de ventes privées (vente-privee.com)

Dans notre démarche, le modèle le plus intéressant à analyser est le troisième, celui des sites e-commerçants au sens restrictif, c’est à dire ceux où un commerçant met en vente des produits / services qu’il a créé ou plus souvent acheté à un fournisseur en prenant une marge sur la revente.

2. Stratégie web marketing de « prise de volume »

Les dernières études e-marketing de la Fevad (troisième trimestre 2010) démontrent que les marchés sur Internet regorgent de sites de e-commerce et concluent qu’à terme, seuls 2 ou 3 devraient subsister par univers de vente. Si l’avenir donne raison à la Fevad, une re-concentration / consolidation par e-secteurs devrait donc avoir lieu dans les prochaines années.
Quelques interviews pour confirmer que la tendance stratégique de nombreuses entreprises de e-commerce reste la croissance en volume au détriment de la marge :

« On parle beaucoup des taux de croissance fantastiques de l’e-commerce. Cette façade cache souvent une course à la taille et à la part de marché qui coûte très cher aux sites marchands » [...] « ce phénomène entraîne les acteurs dans une spirale déflationniste pernicieuse alors qu’à terme, il ne sera jamais possible de devenir incontournable sur Internet » [...] « Même si 3 ou 4 acteurs s’échappent du peloton des chiffres d’affaires, il restera toujours possible de comparer leurs prix à ceux de leurs concurrents ». D. Larramendy, DG de Ventadis, filiale d’M6 – Mistergooddeal

« Le jour où nous remonterons les marges de 2 ou 3 %, nous serons toujours 10 % moins cher que le commerce traditionnel et nous gagnerons de l’argent » G. Picquart, Rue du Commerce.
—————————–

3. Interprétation e-marketing des 5 forces de porter

Force N°1 : Le pouvoir de négociation des clients

Même si certains sites ont développé un solution B2B, il est plus pertinent de nous concentrer sur les sites de vente B2C, plus nombreux, diversifiées et face à une demande très éclatée. Dans ce contexte, le pouvoir de négociation des clients est théoriquement faible. L’on peut supposer que les évolutions des réseaux sociaux modifieront la donne à moyen terme, si la acheteurs apprennent à auto-syndiquer leurs avis et leurs expériences d’achat de façon indépendante. Les internautes auront aussi plus de poids de négociation lorsque l’interactivité avec le vendeur utilisera plus largement les canaux audio-visuels et l’interaction avec un vendeur à distance.

Force N°2 : Le pouvoir de négociation des fournisseurs

conseil e-marketingHormis exceptions, les fournisseurs sont nombreux sur chaque segment de e-marché. Comme les consommateurs on-line, ils ne sont pas vraiment en situation de dicter leurs conditions aux sites et donc de récupérer une bonne partie des marges. Attention ce constat s’applique aux sites de vente majeurs ayant un très fort pouvoir de distribution e-sectoriel. Actuellement, ces types de sites leaders sont même tant en position de force qu’il n’est plus rare de voir des pratiques de marges arrière apparaitre sur Internet.

Force N°3 : Les produits substituts

Sans mystère, l’e-commerce absorbe progressivement les parts de marché aux magasins traditionnels. Mais la tendance pourra-t-elle s’inverser au point que le off-line viendra substituer l’on-line ? Pas vraiment. Selon les derniers états du e-commerce de Forrester Research nous assistons plus à des fusions internet/off-line visant à préserver les forces de l’entreprise. Cela a pour but  de mieux se diversifier et d’offrir plus de services complémentaires. Ainsi, SNCF déploie une stratégie globale dans le secteur du e-voyage en proposant de nouvelles offres exclusives sur son site grand public, mais aussi en innovant dans ses agences de réservation, où il est désormais possible de créer son propre voyage sur mesure : en train voiture ou bateau !

Nous rajouterons qu’aujourd’hui la rapidité de montage d’un portail e-commerce implique la nécessité de faire une veille e-concurrentielle permanente. Il s’agit de ne pas perdre de vue des évolutions de e-marchés mais aussi technologiques : l’iPhone a ainsi révolutionné le secteur de la téléphone mobile en 3 ans, simplement en substituant son terminal aux portables classiques.

Force N°4 : La concurrence intra-sectorielle

En matière de e-commerce, point de salut ailleurs que par les prix (comme vu ci-dessus). Entre les leaders du secteur, la concurrence est et devrait rester très forte au niveau des prix, ce qui a pour effet de travailler avec des marges très réduites. Les dernières expertises de conseil e-marketing par Trinity Advise à ce sujet, confirment que pour ne pas perdre de terrain face aux concurrents, trois vecteurs stratégiques doivent toujours être mis en place sur le web (et suivis !) : veille, innovation et conduite du changement.

Force N°5 : La menace de nouveaux entrants

> Exemple du e-secteur des sites d’enchères : une diversification nécessaire

commerce electronique trinity adviseLes perspectives de croissance dans l’univers des enchères sur Internet étant minimes, Ebay essaie d’améliorer son business model initial en se diversifiant (me-commerce, vente de contenus digitaux…). Bien que leader incontesté dans son secteur, Ebay doit donc découvrir de nouveaux horizons, non pas à cause des concurrents, mais de deux menaces externes.

D’abord à cause de nombreuses startups qui lancent des modèles de vente aux enchères innovants et plus performants, car plus proches des internautes via les réseaux sociaux. Ensuite, en raison du rapide changement des habitudes des internautes :  les clients sont de plus en plus éduqués et donc toujours plus exigeants face aux produits, services et interfaces des sites de e-commerce.

Avis de P. Kosciusko-Morizet – DG de priceminister : « PriceMinister et eBay sont autant des médias que des e-commerçants. Notre audience est très importante et nous n’avons pas d’investissements de logistique et de stocks, ce qui permet aux deux plates-formes d’achat-vente d’être profitables.  Pour autant, la croissance de notre chiffre d’affaire passera inéluctablement par de la diversification car les modèles classiques de sites d’enchères sont maintenant dépassés…».

[1] Michael Porter Bio.

Bilan des meilleurs CMS

Posted in: CMS, News- jan 05, 2011 1 Comment

Pour conclure la compétition des meilleurs CMS Open Source de l’année 2010, l’agence de marketing digital Water & Stone a publié son rapport de 55 pages (pour la troisième année consécutive) mettant en évidence les résultats. L’étude porte sur 20 CMS open source différents et plus de 5.000 personnes ont répondu au sondage.

Voici ci-dessous une partie des résultats les plus importants (les différences observées entre 2009 et 2010 peuvent être parfois dues au changement de la méthode de calcul).

Nombre de téléchargements hebdomadaires :

WordPress est loin devant avec 9 fois plus de téléchargements que le 2ème qui n’est autre que Joomla! (respectivement 983 625 et 113 836). A noter aussi l’énorme croissance du CMS Tiki (+570,2%).

Nombre d’installations :

Ici Joomla! prend la première place de peu à WordPress. Ces deux là restent loin devant les autres avec plus du double de téléchargements par rapport à Drupal, en troisième place.

Popularité :

e107, Liferay, concrete5, MODx, SilverStripe, OpenCms, Tiki et Umbraco ont été répertoriés comme ayant moins de 0,1%
la part de marché. C’est pourquoi ils n’apparaissent pas sur le graphique. Comme attendu, WordPress est loin devant tous les autres en termes de popularité.

Parts de marché :


PageRank Google :

Pour rappel, le PageRank est un algorithme d’analyse et de classement créé par Larry Page (co-fondateur de Google) et utilisé pour évaluer l’importance relative des sites Internet aux yeux de Google. L’algorithme assigne une valeur numérique de 0 à 10 (10 étant le meilleur classement) pour chaque page Web sur Internet.

Il y a peu de changements notables sur cette partie de l’étude part rapport à 2009. Nous pouvons toutefois souligner que CMSMadeSimple est passé d’un PageRank de 5 à 7 et que Drupal l’a amélioré d’un point (passant de 8 à 9).

Téléchargez le rapport, ici (3)
(Enregistrez-vous pour downloader)

Bonne Année à tous !

Posted in: News, Trinity Advise- déc 31, 2010 No Comments

.
Toute notre équipe vous souhaite une excellente année 2011, pleine de succès et de joies !
.
Nous avons hâte de vous retrouver nombreux pour continuer à surfer ensemble sur les vagues digitales de l’Internet.
.
Une pensée toute particulière pour nos proches, amis et  collaborateurs qui soutiennent et suivent la progression de Trinity Advise. La voie du succès est toujours plus heureuse lorsque l’on est bien accompagné ;-)
.
Pour commencer la nouvelle année avec force et ambition, nous souhaitions citer G.B. Shaw:
« Faites en sorte d’obtenir ce que vous aimez, sinon vous serez forcé d’aimer ce que vous obtenez. »

Bonne Année !

Nicolas.

Curator : définition du nouveau community manager

Posted in: Dossiers thématiques, E-marketing, News, Réseaux sociaux- déc 30, 2010 4 Comments

Après le Community Management, le buzzword de cette année 2010, il semblerait que pour la nouvelle année qui arrive, le terme de Curator soit en passe de le détrôner. En effet, depuis quelques mois, les américains parlent de plus en plus de ce dernier (cf. Brian Solis dans son livre “Engage” citant l’exemple du compte Twitter  de Google), et il commence à apparaître sur les blogs français et dans les timeline Twitter de beaucoup d’entre nous (cf. Techcrunch et consorts).

Pourtant, il n’est pas évident à l’heure actuelle d’en donner une définition ferme et définitive. Certains le voient simplement comme un “veilleur” qui filtre l’actualité et redistribue à l’ensemble de sa communauté, mais aussi aux autres, les informations qui jugent les plus pertinentes. Plus qu’un agrégateur, le Curator a la faculté de “digérer” et de retransmettre de manière pertinente et efficace l’ensemble des informations qu’il analyse et qu’il traite au quotidien.

D’autres ne se contentent pas de cette définition et essayent d’aller plus loin dans la pertinence de l’analyse. Notons à ce sujet l’excellente analyse de Arnaud Briand, sur son blog [1], qui voit le Curator comme un courtier en information. Il faut admettre que cette idée est assez séduisante, même si le terme de courtier en lui-même n’a pas bonne presse ces temps-ci. Pour l’auteur, “Il semble que la curation permet de faire abstraction du bruit pour ne filtrer que le meilleur. La curation est un moteur de recommandation”. Preuve à l’appui, Arnaud Briand met en avant la pyramide de la marque engagée d’Altimeter :

Enfin, dernière tentative de définition du terme de Curator, celle que ce dernier pourrait être une sorte de “rédacteur en chef” de l’information. En effet, par sa capacité de veille et d’agrégation des informations, il sélectionnerait pour ses cibles les informations les plus pertinentes, et comme un rédacteur en chef, ferait au quotidien le “chemin de fer” digital de son “journal” numérique des celles à retenir.

Dans les modèles de curation à la française, je me permets de citer l’excellent exemple de Guillaume Decugis que vous pouvez retrouver sur la plateforme de curation qu’il a lancé, Scoop.it. Cet outil est d’ailleurs encore en phase de beta test, mais ses possibilités sont assez intéressantes. Il est donc à suivre pour l’avenir. D’ailleurs, voici la vidéo de présentation de ce service, qui au passage décrit bien une certaine idée de ce qu’est la curation :

Par conséquent, clairement, donner une définition de ce terme n’est pas chose aisée. D’ailleurs, cet article ne couvre pas encore l’ensemble du sujet, très fluctuent. C’est bien une première approche qui appellera d’autres analyses. Pourtant, ce que l’on peut avancer sans trop se tromper est que, si comme pour le Community Management, le terme est assez récent, ce n’est pas le cas de l’activité en elle-même. En effet, nombreux sont ceux qui se reconnaitront dans une partie de la définition de curator, celle de veille. D’autres pratiquent déjà cette activité dans son ensemble. Aujourd’hui, ils auront un nouveau terme “à la mode” pour qualifier leurs activités, et les agences un nouvel aspect à revendre et à mettre en avant dans leurs prestations, surtout si curator devient le buzzword de l’année 2011.

[1]  http://www.my.epokhe.com/

Zones de clics : Analyse des zones les plus cliquées par vos visiteurs

Posted in: Dossiers thématiques, Ergonomie web, News, Technologies- déc 28, 2010 4 Comments

Les études d’ergonomie permettant de comprendre l’utilité et l’utilisabilité des sites internet, sont devenues incontournables lorsqu’il s’agit d’optimiser le taux de transformation en e-commerce. Les outils d’eye tracking et de mouse tracking offrent tous deux des résultats précis, très utiles pour les démarches e-business.

Les deux outils permettent un rendu graphiques des statistiques de visibilité et/ou de clics, grâce à des représentations de fréquentation sur une page, appelées Heat Maps. Plus la couleur des zones est sombre, plus l’ensemble des visiteurs ont attaché de l’intérêt aux contenus de la page situés en dessous du point de chaleur.

D’une part, l’eye tracking, qui utilise des systèmes de reconnaissance du mouvement des yeux, devient de plus en plus perfectionné et financièrement abordable pour les entreprises de moyenne taille. D’autre part le mouse tracking, basé sur des logiciels beaucoup plus anciens et aboutis, permet de suivre le mouvement de la souris à travers un site Internet.

Durant les dernières années, ces deux outils ont atteint leur phase de maturité, d’où la nécessité de savoir si le mouse tracking peut-être suffisant, et s’il existe un lien de corrélation entre le mouvement de l’oeil et de la souris.

1. Mouse tracking ou eye tracking ?

zones de clics google trinity advise

Les dernières recherches ont démontré que lorsque les deux méthodes d’eye tracking et de mouse tracking sont utilisées en même temps pour des études d’ergonomie, le niveau de corrélation atteint des scores variant entre 84% et 88%.

Plus précisément, il apparait qu’au minimum 84% des zones survolées par le curseur ont aussi éte parcourues par les yeux.

Nous nous sommes aussi aperçus que leurs heat maps respectives couvrent les mêmes zones de pages, aux mêmes rythmes et sur les mêmes points de focus.

Par ailleurs, la plupart des études universitaires préalablement menées sur ce sujet ont confirmé que la stricte majorité des internautes utilise le curseur de la souris comme repère visuel pour diriger la lecture des pages et pour les assister dans le choix de points de clics [1]

Sur le même sujet, le dernier rapport scientifique de la STC (Society for technical communication | stc.org), affirme que les internautes bougent plus leur souris, pour cliquer sur point d’intérêt placçé proche du haut de page.

Les deux options d’audit ergonomique semblent donc pouvoir fonctionner de façon indépendante, bien qu’elles possèdent chacune des avantages et inconvénients spécifiques:

.

Eye tracking

> Avantages

. Précision des données visuelles

. Maîtrise des environnements testés

. Rendu oral des impressions

> Inconvénients

. Coût d’achat de matériel ou de prestations élevé

. Nombre d’utilisateurs testés limité

. Les utilisateurs, connaissent le contexte, savent qu’ils sont « surveillés » et n’agissent pas complètement de façon naturelle (effet Hawthorne : http://en.wikipedia.org/wiki/Hawthorne_effect)

Mouse tracking

> Avantages

. Tests effectués en environnement « naturel » et varié (lieux et types de connexion).

. L’utilisateur se comporte librement, sans savoir qu’il génère des statistiques.

. Recueil de statistiques perpétuel, sans limites de temps ni d’espace.

. Coût d’acquisition de solution technique très réduit.

> Inconvénients

. Pas de tests prédéfinis, mais une simple analyse basèe sur des constats de comportements

. Pas ou peu de contrôle sur l’environnement de test

. Aucun feedback des utilisateurs à court terme.

__________________________

Au vu de ce bilan, les deux outils sont donc certainement complémentaires mais peuvent être tous deux utilisés indépendamment. Néanmoins le débat fait toujours rage entre les prestataires d’eye et de mouse tracking, quant à la valeur qualitative des données recueillies en état de tracking inconscient (zones de clics), par rapport aux données obtenues lors de tests imposés, soumis à des actions volontaires (eye trackers).

Ainsi, les tests de perception oculométrique permettent de capter plus de mouvements involontaires que le suivi de souris, mais le click-tracking compense par le fait que ses statistiques soient obtenues librement, sans que le sondé soit influencé de quelque façon que ce soit par une sphère de sondage marketing.

En somme, si votre budget vous le permet, il nous semble préférable d’opter pour une solution de mouse tracking gratuite ou peu onéreuse (cf. paragraphes suivants) et d’investir en parallèle dans une prestation d’analyse oculométrique pour optimiser la validité de votre audit d’ergonomie web. Ce compromis d’outils vous aidera à optimiser l’agencement des pages, à choisir les contenus  les plus adaptées aux comportements des visiteurs, et donc être plus efficaces pour atteindre votre ROI rapidement.

.

2. Installez le plugin wordpress pour visionner les heatmaps de clics

Bloggeurs et utilisateurs de wordpress, voici un plugin open source qui va probablement révolutionner la façon dont vous analysez la performance de votre site : Clickheat. Ce plugin gratuit pour wordpress permet de générer des cartographies représentant les zones les plus cliquées sur vos pages, appelées « heat maps ».

Attention, les cartes générées ne représentent que les clics des visiteurs, ce qui est différent de l’eye-tracking, pour lequel un dossier complet sera bientôt publié sur le site.

Voici notre tutoriel pour l’installation de  Clickheat:
.
2.1. Téléchargez la dernière version du logiciel gratuit Clickheat ici.

2.2. Décompressez l’archive et dans le répertoire Clickheat, ouvrez le fichier index.php avec le bloc notes. Avant la ligne: if (@ini_get(‘zlib.output_compression’) rajoutez la ligne: ob_end_clean();

Enregistrez le fichier puis, par ftp, placez le dossier Clickheat à la racine de votre site, de façon à obtenir le résultat suivant: www.mysite.com/clickheat (remplacez www.mysite.com par votre vraie adresse)

2.3. Téléchargez le plugin Clickheat ici (attention, le plugin est différent du logiciel). Décompressez l’archive et uploadez le répertoire du plugin dans votre espace ftp à l’endroit www/wp-content/plugins. Rendez-vous ensuite dans l’interface d’administration de wordpress et activez le plugin (Menu Extensions).

 mouse clicks zones trinity advise2.4. Depuis votre navigateur internet rendez vous à l’adresse suivante www.mysite.com/clickheat. Cela lancera l’installation automatique du logiciel.En contrebas, rentrez votre login et mot de passe d’administration wordpress. Validez.

Pour finir, une message d’erreur devrait apparaître à la fin, vous spécifiant que le script n’est pas trouvé sur votre  site. C’est normal, nous allons maintenant installer ledit script. Laissez la page ouverte, et rendez-vous dans un nouvel onglet, dans votre espace d’administration de wordpress.

2.5. Copiez  le code ci-dessous. Remplacez les lettres en majuscules par votre adresse de site / nom de site.

<script type= »text/javascript » src= »http://WWW:VOTRESITE.COM/clickheat/js/clickheat.js »></script><noscript><p><a href= »http://www.labsmedia.fr/index.html »>Cloud Computing Center</a></p></noscript><script type= »text/javascript »><!–
clickHeatSite = ‘NOM DE VOTRE SITE’;clickHeatGroup = ‘CARTE1′;clickHeatQuota = 3;clickHeatServer = ‘http://WWW.VOTRESITE.COM/clickheat/click.php’;initClickHeat(); //–></script>
.
2.6. Rendez-vous dans le menue Apparence / Editor.  A droite, cliquez sur « pied de page / footer.php ». Collez le code modifié dans le champ de texte, tout en bas, avant la ligne <?php wp_footer(); ou avant la ligne </body> . Enregistrez les modifications.
.
2.7. Retournez dans votre navigateur, dans l’onglet d’installation du logiciel clickheat (cf. 4.). Rafraîchissez la page.
.
2.8. Les statistiques commenceront alors à générer des heat maps lorsque vous serez déconnecté de l’interface d’administration de wordpress et que vous aurez cliqué à plusieurs endroits dans votre site.
.

2.9. Pour le suivi de vos heatmaps, rendez vous à l’adresse www.votresite.com/clickheat, et rentrez vos codes d’administration précédemment utilisés.

3. Les autres solutions de mouse tracking recommandées

Plusieurs solutions techniques payantes et efficaces existent. Nous avons sélectionné les plus intéressantes, qui proposent une période d’essai afin que vous puissiez évaluer leurs outils d’analyse de clics. Notez que ces solutions sont bien plus avançées que Google Analytics, du moins pour l’instant…


3.1. Click Density


3.2. Crazy Egg


3.3. Click Tale


3.4. Mouse Eye Tracking – WordPress Plug In

.
En savoir plus :
.
Téléchargez : Etude : Le mouse tracking est-il l'eye tracking du pauvre ? (45) (enregistrez-vous pour télécharger le fichier)
.
Bonne analyse !
.
Nicolas BOURNEZ DESVIGNE
.
[1] Byrne, M.D., Anderson, J.R. Eye tracking the visual search of click-down menus. In Proc. CHI 2007