2 principes et 3 techniques marketing pour rendre nos sites plus aguicheurs [Tuto]

Comme je sens de plus en plus de sites vont apparaître autour de la Ğ1, et que je ne vais pas avoir le temps de contribuer à tout, je propose ici quelques éléments clefs pour vous aider à rendre vos sites web aguicheurs.

Voilà donc ce que j’ai appris ces dernières années dans ma pratique du webmarketing :

Principe n°1 : Vendons l’aspirateur avant d’essayer d’en réciter le manuel à nos clients

La plupart des gens se moquent du « comment ».

Idéalement, ils aimeraient bien ne pas s’embarrasser avec le « comment ».

Alors avant de commencer à parler du « comment », parlons d’abord du « pourquoi ».

Car, comme dirait l’autre :

Il faut donc faire les choses dans l’ordre :

  1. Attirer l’attention, susciter l’intérêt, créer le désir
  2. Expliquer le comment

D’ailleurs, une des formules les plus utilisées dans les techniques d’écriture de publicités (« copywriting ») est précisément celle-là : AIDA (Attention > Interest > Desire > Action). Si vous vouez en savoir plus à ce sujet, cherchez « AIDA copywriting » dans un moteur de recherche.

Principe n°2 : Une page illisible ne sera pas lue

Quand on utilise un outil, c’est normalement pour gagner quelque chose.

Généralement : du temps.

Mais un site dont la page d’accueil nous laisse penser que, pour gagner 15 minutes par mois, on va devoir commencer par dépenser une heure aujourd’hui en en déchiffrant le contenu, ça n’inspire pas la confiance.

Je sais pas vous mais, moi, quand je tombe une page sans aucun titre qui me parle, je prends mes jambes à mon cou et je fuis très loin (quitte à me retrouver sur perdu.com).

Si on prétend faire gagner du temps à nos utilisateurs, il faut donc le faire dès le départ, dès la page d’accueil du site web de l’outil.

L’attention de l’utilisateur est une ressource très rare, et tout le monde se bat pour la capter. C’est la guerre les amis.

Ça semble donc un pari risqué de se pointer avec un couteau dans un combat à l’arme à feu.

Il faut donc rendre notre page lisible :

80% de l’info la plus importante doit pouvoir être obtenue en moins de 10 secondes, en parcourant une page en diagonale.

La lisibilité passe principalement par 3 éléments :

  1. La proposition de valeur unique
  2. Les sous-titres orientés bénéfices
  3. Les images et pictogrammes

Technique n°1 : Soyons clairs, grâce aux « propositions de valeur unique »

La partie la plus importante d’un site, c’est le petit million de pixels carrés qu’on voit quand on arrive sur l’accueil au-dessus de la ligne de flottaison, c’est-à-dire sans faire défiler la page.

Ici, on doit d’entrée de jeu annoncer la couleur.

Ici, on doit répondre cash à la question du visiteur « Qu’est-ce que j’y gagne ? ».

Répondre à cette question, c’est écrire une « proposition de valeur unique » (ou USP en anglais, pour « Unique Selling Proposition »).

L’USP est une « proposition de valeur »

« Au service de la monnaie libre » (texte en gros sur Axiom-Team.fr) dit ce qu’est Axiom-Team ; c’est donc une tagline, un slogan, comme « I’m lovin’ it » pour McDo, mais ce n’est pas une USP. En revanche, pour l’accueil d’Axiom-Team, une USP pourrait être :

Ensemble, œuvrons à la promotion de la monnaie libre, et facilitons le travail des développeurs de Duniter

L’USP est « unique »

L’USP doit permettre de distinguer ce que vous vendez de ce que les autres vendent.

Exemple :

Un client Duniter

est une proposition de valeur, mais pas une proposition de valeur unique

En revanche :

est unique, et si par la suite d’autres clients en ligne de commande apparaissent, ces derniers devront rajouter un adjectif à cette proposition de valeur pour qu’elle soit unique.

Quelques exemples d’USP

L’USP de Gsper est probablement une des USP les plus claires de tout l’écosystème actuellement :

En voici d’autres :

(SP pas unique d’ailleurs, et elle est de moi en plus :flushed:)

(SP pas unique non plus)

Sur quels types de sites utiliser les USP

Les USP sont utiles pour tout site qui propose un service (ça comprend donc les logiciels).

C’est d’ailleurs toujours sur ce genre de sites que vous les verrez, et vous vous verrez rarement un site dans ce genre qui n’en possède pas (tout simplement parce qu’une boite qui n’aurait pas d’USP finirait par couler et donc fermerait ledit site).

Comment formuler une USP

Une USP doit toujours, d’une façon ou d’une autre, répondre à la question « qu’est-ce que j’y gagne ».

Mais il y a plusieurs façons de faire ça :

Manière n°1 : Expliquer quel but le visiteur va pouvoir atteindre s’il reste lire

Formuler comme ça, c’est pas mal généralement, parce que c’est répondre à la question « pourquoi ? » (sous-entendu « pourquoi j’utiliserais ça ? ») :

Manière n°2 : Comparer son service à un service célèbre

Utile quand on arrive en concurrent d’un service déjà bien connu.

Par exemple, on pourrait avoir :

Manière n°3 : Dire ce que c’est

Parfois, ça peut suffire de simplement dire ce que c’est, de répondre au « quoi ? » :

Manières inclassables

Je trouve que celle-là pose le problème qu’elle fait référence à une situation antérieure, généralement inconnue de l’utilisateur (l’époque pré-ğchange, où il était compliqué d’échanger en Ğ1).

Technique n°2 : Rendez votre page « scannable » grâce aux « titres orientés bénéfices »

Personne n’a le temps et tout le monde est fatigué.

On ne va donc pas prendre le temps de lire le contenu d’une page s’il est difficilement lisible et surtout pas si on n’y voit pas d’intérêt.

On préférera aller lire un message plus simple à décoder ou, pire : une vidéo de chat.

Parce que la vie est courte, on scanne la page à la recherche d’informations ; on espère trouver ces informations dans les titres.

La lisibilité est notamment un critère mesuré par certains logiciels de SEO, comme Yoast SEO pour Wordpress.

Essentiellement, Yoast SEO va vous dire de mettre plus de titres quand vous n’en mettez pas assez.

C’est mieux que rien comme conseil, mais c’est loin d’être suffisant.

Les titres ne servent pas qu’à rendre la page moins monotone visuellement.

Les titres doivent permettre à l’internaute de faire au moins 2 choses :

  1. Accéder à l’information qui l’intéresse lors de sa première visite,
  2. Retrouver rapidement l’information qu’il cherche le jour où il revient sur la page (par exemple pour citer un extrait de la page sur un forum),

On n’est pas en train d’écrire un dictionnaire là

« Production », « Toile de confiance », etc. ne sont pas des titres qui aident le visiteur à juger rapidement la page, car ils ne contiennent aucune information.

C’est assez rare les moments où n’avoir pour titre qu’un seul mot sera pertinent.

Des deux versions de la page ci-dessous, laquelle vous semble la plus lisible ?

La page FAQ c’est une seule page, pas tout le site

Je ne saurais m’expliquer pourquoi, mais on est pas mal ici (moi compris) à avoir naturellement tendance à faire des sites qui ressemblent à des FAQ.

Par exemple, je me rends compte que c’est ce que j’avais fait pour monnaie-libre.fr

Ça n’a pas de énormément de sens : quand on débarque sur la page d’un site dont on ne sait rien, on en sait trop peu pour avoir des questions. Du coup, quand on scanne la page à la recherche d’information, ce qu’on cherche, ce sont des informations, pas des réponses ni même des questions.

Il faudra que je change ça :


N’ayons pas peur des répétitions

Un caractère ASCII ça pèse un 7 bits. Bon, je sais qu’avec UTF-8 c’est un peu plus.

M’enfin quand même ! On n’est pas à l’octet près !

N’ayons pas peur de répéter 3 fois le même groupe nominal.

Par exemple, on a le droit de faire ça :

On n’a pas d’encre à économiser là !

En plus, avec un site en noir sur blanc, plus on écrit de texte, moins l’écran de notre visiteur à de lumière à émettre.

Technique n°3 : Oui, même pour les adultes, il faut mettre des images

La seule personne au monde qui arrive à faire avaler des billets de 50 000 mots à 603 159 lecteurs, c’est Tim Urban sur son blog « Wait But Why ».

Comment y arrive-t-il ?

En mettant des images.

Il y a une raison pour laquelle les panneaux de la route contiennent des pictogrammes et non du texte : l’image transmet beaucoup plus d’information que le texte en beaucoup moins de temps.

Il existe tout un tas de SVG libres sur le web. Des banques même, comme Font Awesome par exemple, que vous n’êtes pas obligé d’utiliser sous sa forme « police de caractère » (vous pouvez télécharger les .svg si vous voulez).

Conclusion

Voilà, j’espère que ce tuto aura apporté un peu de valeur.

Je le mettrai probablement à jour si je pense avoir d’autres trucs utiles à transmettre.

Cya :slight_smile:

13 J'aimes

Merci pour toutes ces infos super utiles ! Que du bon sens…

Aussi, ce serait bien d’harmoniser les sites, peut-être qu’un système de design commun ou charte graphique serait pratique ? (sans être obligatoire, ça à peut être déjà été discuté…)
Et puis faire du crosslink entre les outils aussi ! Par exemple des liens entre la wotmap et la WorldWotMap et tous les autres… Idéalement, un logo Ğ1 qui ferait apparaître un menu avec tous les liens de la junosphère, à intégrer facilement sur chaque site…

3 J'aimes

Oui, tu penses à quoi précisément ?

Dans une certaine mesure, c’est un peu ce que j’ai fait avec Cesium.app et Silkaj (même disposition des éléments, même intitulés pour les liens du menu). Bon, en l’occurrence, ici l’harmonisation n’était pas le but, mais la conséquence d’un copier/coller à la base :sweat_smile:

Yes.

A voir. Des liens il y en a beaucoup. Il faudrait faire une sélection pertinente. Tu penses à quoi ?

Wo les gars, vous me donnez une idée : réunir tous les liens majeurs par thème dans une seule page, dont le centre serait le logo de la G1, avec des tas de ramifications menant vers les thèmes, les thèmes vers des liens. Je vais faire un dessin rapidos ce sera plus parlant :

L’idée c’est on a que le logo, et quand on passe la souris ça illumine des chemins menant aux thèmes. Si on les suit, les thèmes ouvrent des fenêtres qui proposent les liens liés aux thèmes. On peut mettre plein de thèmes essentiels avec plein de liens utiles, pratiques ou théoriques. ça fait une seule page qui permettrait de tout retrouver.

Bon je sais pas c’est peut être très con, hein…

1 J'aime

Une mindmap ; pas une mauvaise idée effectivement pour organiser tout ce bordel.

Je veux bien bosser avec toi dessus, si ça te dit, notamment sur l’organisation des thèmes et le fastidieux travail de référencement des URL et sur une compo graphique ultra dépouillée. Par contre mes maigres connaissances en html ne suffiront pas à faire un truc joli à priori.

Vous pouvez déjà utiliser framindmap.org pour organiser les idées/sites, avant de créer la page en elle-même.

1 J'aime

Merci pour la proposition :slight_smile: Ce sera non car j’ai plein d’autres trucs en cours.

Mais comme dit matograine tu peux commencer un truc avec un outil de mind mapping en ligne.

Ok, si tu trouves que ça vaut le coup je vais commencer le boulot en amont alors.

2 J'aimes

Je viens de voir que @1000i100 avait un site avec un peu le design que tu cherches :

https://g1.1000i100.fr/

3 J'aimes

Yep c’est exactement l’idée, mais en plus complet et en plus « stylisé »…