Marketing pour développeurs – Partie 3 – Le site web

Share Button

Cet article fait suite à la présentation « Marketing for Hackers » à l’école 42 en décembre dernier. Il s’adresse avant tout aux profils techniques voulant lancer un produit technique avec peu de moyens financiers, mais les conseils restent les mêmes pour tout autre profil.

Il sera publié en plusieurs parties dont voici la troisième. Si vous les avez loupées, commencez par la première (introduction et “histoires”) et la seconde (tracking, IRL & ABC)!

image

Comme promis, cette semaine nous allons parler du site web. Impossible de parler de tout sans écrire un roman, mais voici les conseils les plus importants pour démarrer sans budget, ainsi que la solution aux erreurs les plus fréquentes.

Le site web doit répondre aux besoins de tous types de profil arrivant sur votre page d’accueil. Mais avant tout il doit répondre à la question « qu’est-ce que c’est » pour les nouveaux visiteurs. Les habitués iront chercher un peu plus loin (la documentation, etc…).

AIDA

Attention, Interest, Decision, Action. Les quatre piliers de votre future équipe de commerciaux, plus connus du grand publique depuis la sortie du célèbre film Glengarry Glen Ross (que je vous recommande fortement).

Chaque cycle de « vente » (et vous « vendez » dans tous les cas votre produit ou service via votre site web, que vous le fassiez payer ou non) passe par ces trois piliers. Grossièrement Il faut d’abord susciter l’attention du visiteur, pour pouvoir susciter son intérêt, afin qu’il prenne la décision d’accomplir une action particulière. Servez vous de cette formule pour tout: votre site web, vos présentations, etc…

Les premières secondes sont les plus importantes

Les gens ne restent pas très longtemps sur un site s’ils ne comprennent pas de suite de quoi il parle. Il faut donc démarrer par une phrase courte pour décrire le produit (nous revenons encore et toujours à nos « histoires », voir Partie 1). Si cette phrase n’arrive pas à capter l’attention (AIDA) du visiteur, vous l’avez perdu. Si elle est trop longue, pas assez visible, trop complexe, vous l’avez perdu.

Complétez avec une ou deux phrases plus « techniques » pour décrire ce que fait le produit / service de façon plus concrète pour suciter l’intérêt (AIDA) du premier visiteur et lui faire prendre la décision (AIDA) de rester plus longtemps, voir d’effectuer une action (AIDA).

CTA

Si l’intérêt (AIDA) du visiteur est suscité alors il cherchera naturellement un « call to action » (AIDA), en général un bouton ou un formulaire. Il faut donc que ce bouton/lien soit repérable facilement. Il peut y avoir plusieurs « calls to action », mais pas des dizaines. Et en fonction du placement et des couleurs vous pouvez attirer l’attention du visiteur sur des actions clés.

Above the Fold

Le cycle AIDA qui vise particlièrement le visiteur qui vient pour la première fois doit se trouver entièrement sur la page d’accueil, sans avoir besoin de scroller. La définition courte, claire de votre produit ou service et les « calls to action » principaux doivent toujours être « above the fold ». C’est-à-dire toujours visible par le visiteur sans qu’il ait besoin de scroller, peu-importe sa taille ou résolution d’écran.

Airbnb

Prenons rapidement l’exemple d’un site qui marche bien: Airbnb.

image

La page d’accueil de Airbnb capte l’attention du visiteur rapidement via sa tagline « Bienvenue à la maison » et complète rapidement et simplement avec une phrase plus contrète / technique : « Louez des logements uniques auprès d’hôtes locaux dans plus de 190 pays. ». Si vous voulez en savoir plus il y a un bouton gris clair transparent « Mode d’emploi » placé naturellement juste après. Le « call to action » principal reste le formulaire de recherche avec un bouton « Rechercher » flashy.

En quelques secondes le visiteur comprend ce qu’est Airbnb et sait exactement ou cliquer ensuite. Et ce sans scroller.

NOTE: Notez que Airbnb a repéré que mon navigateur était langue francaise et qu’il m’a donc redirigé vers le site en français lorsque j’ai tapé airbnb.com. Et notez également que chaque homepage de chaque langue a des buts différents, adaptés en fonction des utilisateurs qu’ils connaissent parfaitement (voir partie 2) et du marché local. Ne commencez surtout pas par là. C’est trop compliqué et coûteux en temps. Choisissez la langue et les goals qui ont le plus de sens du point de vue global pour commencer.

Notez également que juste au dessus du « fold » on entrevoit le début de la suite, pour bien faire comprendre visuellement que vous pouvez scroller pour en savoir plus.

Faites tester votre site par des spécialistes

Et par spécialistes, j’entends votre famille, vos amis, vos collègues. Demandez-leur de vous décrire exactement, ce qu’ils voient en premier, en second, etc.. Si leur regard n’est pas attiré rapidement vers le message principal, ou le bouton action principal, vous avez un problème :)

Message vs Design

Mieux vaut un site pas trop joli avec un message clair qu’un site très joli ou le message est perdu dans la beauté du design. Le design doit venir en complément des messages et des « calls to action ». Et pas l’inverse.

Amazon c’est moche, mais c’est clair. Voici un exemple de site beaucoup plus joli. Mais personellement je n’arrive pas a lire le texte qui est au dessus de cette belle image. Fail.

image

Formulaires

Les formulaires sont souvent incontournables. Inscription, login, newsletters, etc… Plus nous avons d’informations sur nos utilisateurs mieux c’est. Nous avons donc souvent tendance à demander plus d’informations que nécessaire. Malheureusement il existe une autre règle : plus il y a de champs à votre formulaire, moins vous aurez d’inscriptions. Pensez-y et faites en sorte d’avoir les formulaires les plus courts possibles.

Si vous avez besoin de beaucoup d’information, peut-être pouvez-vous penser à des façons de demander ces informations en plusieurs fois (plusieurs formulaires, espacés dans le temps, etc…) pour optimiser vos taux de conversion.

Pensez également que plus l’utilsateur a investi de temps plus il prendra de temps additionel pour effectuer des tâches qu’il estime fastidieuses, comme par exemple remplir le formulaire d’inscription. Souvent, mieux vaut laisser l’utilisateur entrer dans le funnel sans être inscrit, et lui demander de s’inscrire une fois qu’il a complété une ou plusieurs actions qui le rapprochent de son but final.

Vitesse de chargement

Enormément d’études démontrent que plus un site est rapide, meilleur sera le taux de conversion, le nombre de pages vues et le chiffre d’affaire généré. Il est donc important que vos pages chargent rapidement.

En diminuant le temps de chargement de ses pages web de 2.2 secondes, Mozilla a augmenté ses téléchargements de 60 millions par an.

image

Utilisez des outils comme pingdom, ou Chrome (Timeline) pour vous aider à analyser ce qui est rapide ou lent sur votre site. Vous pouvez également utiliser des CDN pour optimiser les temps de chargements de vos pages.

Responsive & multi-browser

Pensez dès le début à tester votre site sur tous les browsers et les téléphones. Trop souvent le site est top sur Chrome sous Mac, mais est illisible sur Firefox sous Windows ou sur iPhone. Tout ce qui a été dit plus haut, doit être vrai pour tous les navigateurs, tous les devices.

Pour les browsers, utilisez des machines virtuelles (ou des Docker containers) et pour tester les devices, commencez simplement avec Chrome (option: Toggle device mode).

image

Pour en apprendre plus sur le responsive design, je ne peux que vous conseiller le livre de mon ami Rudy Rigot: Projet Responsive Web Design.

To be continued

C’est la fin de cette troisième partie. Votre défi cette semaine: Analysez le site web de votre école et/ou de votre startup/société et essayez de l’améliorer. N’hésitez pas à poster dans les commentaires pour en discuter.

N’oubliez pas de nous suivre sur Twitter ou sur Facebook pour être alerté de la publication de la quatrième partie de cet article « Marketing pour développeurs » qui sera publiée au cours du mois prochain. Et si vous avez aimé, partagez ! :)

Share Button