Par Alex le 23 mars 2015 • 109 commentaires

Votre site a-t-il contracté le syndrome du sapin de Noël ?

Cela fait déjà plusieurs fois que je parle de ce trouble qui atteint un nombre non négligeable de sites internet. Aujourd’hui, je veux vous en parler plus en détail afin de vous immuniser contre ce fléau.

Je sais que lorsque l’on crée son premier site, on veut faire en sorte que tout soit mis en valeur. Après tout c’est bien normal, il faut que les visiteurs ne ratent aucune information, que tout soit à portée de main.

Cependant, dans la plupart des cas on se retrouve avec un beau sapin de Noël.

Certains sites deviennent quasiment impraticables et leurs visiteurs font du sur place.

Votre site est-il devenu impraticable ?

Le pire dans tout ça est que les webmasters n’en ont même pas conscience…

Si je vous parle de cela, ce n’est pas pour accabler telle ou telle personne. Je veux juste faire en sorte que les visiteurs de tous ces sites puissent passer un bon moment et trouver ce qu’ils recherchent.

Pour vous donner un exemple de ce qu’il ne faut pas faire, regarder ce site :

Syndrome du site sapin de Noel

Sur ce site de chambres d’hôtes (notez que j’en profite pour faire la promo de la région de Troyes, venez le champagne est super ! Bon, je redeviens sérieux), on s’aperçoit que :

  • Le nom du site est en orange
  • Le menu est en blanc et constitué de 18 éléments (quand même !)
  • Le titre de la page est en grenat
  • Le contenu est en bleu ciel
  • Les liens sont en vert

Est-ce grave docteur ?

Et bien, je suis au regret de vous annoncer que ce site souffre du syndrome du sapin de Noël.

Le syndrome du sapin de Noël n’est pourtant pas une fatalité. Il est possible de s’en débarrasser très rapidement, voire de ne jamais le contracter.

Pour cela, il suffit de respecter des règles très simples :

  1. Ne mettez pas de texte en couleur

    Afin de mettre du texte en valeur, on peut avoir tendance à vouloir mettre du texte en couleur.

    C’est une grave erreur.

    En procédant ainsi, il y a de grande chances que vous commenciez à déballer les guirlandes pour décorer votre sapin.

    Vous allez vous dire que telle chose est importante, puis qu’une autre l’est aussi donc il faut choisir une autre couleur et ainsi de suite. Au final tout est coloré et plus rien n’est lisible.

    Pas cool pour vos visiteurs 🙁

    Veillez donc à n’utiliser l’outil de coloration de texte sous aucun prétexte !

    Cet outil est à proscrire
    Solution : Si vous avez besoin de mettre du texte en avant, utilisez la mise en gras, italique ou insérez un bloc de citation. Cela fonctionne très bien.

  2. N’utilisez qu’une seule couleur d’action

    Si vous utilisez un thème WordPress qui propose pas mal d’options, vous pouvez être tenté d’employer une couleur pour les liens situés dans le contenu, une pour les titres d’articles, une pour les liens de la sidebar, une pour les boutons, etc.

    Imaginez-vous la tête d’un site avec toutes ces couleurs. Autant vous dire que ça va commencer à sentir le sapin…

    Tous les liens mentionnés précédemment sont des liens d’action, c’est à dire qu’ils ont vocation à être cliqués par vos visiteurs.

    Pour les identifier clairement, il faut utiliser une couleur d’action.

    Grâce à elle, vous allez entraîner vos visiteurs à se dire :

    Si je vois cette couleur, c’est que c’est cliquable.

    N’avez-vous jamais remarqué que tout ce qui est cliquable est en bleu sur la Marmite ?

    Notez qu’il peut y avoir quelques exceptions au niveau de l’en-tête (les liens du menu sont déjà en avant par leur positionnement), du pied de page (les liens sont moins importants que les autres) et de certains appels à l’action.

    Solution : Choisissez une couleur d’action pour vos liens et boutons et tenez-vous y.

  3. N’utilisez pas plus de 2 couleurs (et bannissez les couleurs vives)

    En dehors des textes et des liens, n’utilisez pas 36 couleurs sur votre site sinon ça risque de piquer les yeux.

    Les arrières-plans colorés peuvent littéralement faire pleurer les écrans de vos visiteurs :

    Ça pique les yeux n'est-ce pas ?
    Ça fait d’autant plus mal aux yeux lorsque les couleurs sont vives (oui je vous assure, de tels sites existent!).

    Solution
    : Restez simple et efficace. Un gris foncé (quasiment noir) sur du blanc sera très bien. Vous pouvez aussi utiliser une couleur pastel en arrière-plan (mais utilisez une couleur claire).

  4. N’utilisez pas plus de 2 polices d’écriture

    Une erreur que je vois souvent sur certains sites est l’utilisation de plusieurs polices d’écriture. J’imagine que cela a pour but de mettre des contenus en avant mais cela apporte plus de confusion qu’autre chose…

    Ce genre d’erreur est principalement commise sur des sites dotés de thèmes WordPress ultra personnalisables. Étant donné que l’on peut tout modifier, certains s’en donnent à coeur joie.

    Solution : Marier des polices d’écriture est un art assez subtil. Si vous êtes comme moi et que vous n’êtes pas très au point sur le sujet, n’en prenez qu’une et jouez sur la taille, la mise en gras et la mise en majuscules (la Marmite n’utilise que la police Helvetica Neue).

    Si vous voulez en utiliser 2 (une pour les titres et une autre pour le contenu), je vous recommande cet article de Jiminy Panoz, celui de TutsPlus et le site FontPair.

  5. Allez y mollo avec le CSS personnalisé

    La plupart des templates permettent d’ajouter du CSS supplémentaire pour ajouter une petite touche d’originalité. C’est très bien mais il ne faut pas en abuser.

    L'abus de CSS nuit à la santé de votre site
    J’ai pu voir des sites dénaturés par des ajouts de code CSS qui ruinent complètement le travail de design réalisé par l’auteur du thème WordPress. C’est triste de voir cela…

    Solution : Si vous avez envie d’ajouter une image en arrière-plan de votre site, d’ajouter des ombrages sur vos titres ou d’insérer des animations, dans la plupart des cas abstenez-vous.

  6. Bannissez les diaporamas

    À la base, les diaporamas sont nés afin de placer un maximum de contenu dans un espace donné.

    L’idée est bonne sauf que des études ont montré que très peu de personnes cliquent sur les éléments d’un diaporama (on les appelle aussi slider, slideshow, carousels, etc).

    À mon sens, les seules exceptions où vous pouvez les utiliser sont les galeries photos et les portfolios (mais vous pouvez aussi ne pas les utiliser ^^).

    Solution : Si vous voulez absolument utiliser un diaporama, ne mettez pas plus de 3 diapos. Si vous pouvez vous en passer, votre site vous remerciera 🙂

  7. N’ajoutez pas d’images corporates

    Une des erreurs que j’ai commise à mes débuts était d’utiliser des images avec de fausses personnes.

    Vous savez, il s’agit de ces images qui font « pro » et qui ne vous représentent pas du tout. Regardez ce site par exemple :

    Les fausses images c'est le mal
    Pensez-vous vraiment qu’il s’agit de la personne qui a créé le site ? J’en doute…

    Sur internet, l’authenticité fonctionne (vous pouvez le constater avec la Marmite). Si on affiche une photo de jolie fille plutôt que de se montrer, c’est que quelque part on veut tromper le visiteur. Cela vaut aussi pour ce genre de photos.

    J’imagine que ce n’est pas comme cela que vous voulez démarrer une relation avec vos visiteurs.

    Solution : Montrez-vous tel que vous êtes ou ne vous montrez pas. Cela vaut mieux que de mettre une fausse image en avant.

  8. Évitez les gifs animés

    Alors là, je vous entends déjà me dire :

    Tu rigoles j’espère, il y a 3 gifs animés dans ton article et tu nous dis de ne pas en utiliser ?!

    Exactement, je persiste et je signe !

    Les gifs animés utilisés dans cet article sont ici pour illustrer mes propos.

    Les gifs que l’on peut trouver sur les sites souffrant du syndrome du sapin de Noël sont parfaitement inutiles. Prenez ce gif par exemple :

    Betty Boop
    Pouvez-vous me dire franchement à quoi peut-il servir ? Pas grand chose n’est-ce pas ?

    Solution : N’utilisez pas de gifs animés sur votre site sauf si vous employez un ton décalé dans vos articles.

  9. N’intégrez pas de compteurs de visites

    Les sites atteints du syndrome du sapin de Noël ont une fâcheuse tendance à indiquer combien de personnes l’ont visité depuis qu’il est en ligne.

    Les compteurs de visite, c'est le mal (et c'est moche)
    Honnêtement, à quoi cela sert-il ?

    Je comprends que montrer un nombre élevé de visiteurs peut apporter de la preuve sociale mais est-ce vraiment nécessaire pour votre site ?

    Si vous gérez une association, en quoi cette information est-elle pertinente pour vos visiteurs ?

    Attention, je ne suis pas en train de vous dire de pas installer de Google Analytics ou un autre moyen de suivre vos visites. Je parle uniquement du widget qui affiche le nombre de visiteurs sur votre site.

    Solution : N’installez pas de compteur de visite, de carte localisant les visiteurs ni de widget qui liste les visiteurs en ligne. Cela donne l’impression d’être pisté.

  10. Menu à rallonge

    Le premier site donné en exemple dans cet article (celui sur les chambres d’hôtes de Troyes) comporte 18 éléments dans son menu.

    18 !

    Je veux bien qu’un menu soit un peu long mais il ne faut pas abuser. Mettre autant d’éléments dans un menu montre que la personne n’a pas bien défini le but de son site.

    Quand je travaille avec quelqu’un, je demande toujours quel est l’objectif du site. Le menu doit être conçu de manière à ce que l’objectif soit réalisé.

    Solution : Moins votre menu aura d’éléments, plus il sera efficace. Il doit être concis et uniquement présenter ce qui est pertinent pour vos visiteurs.

  11. Bonus des lecteurs

    Suite à la publication de l’article, Corine m’a signalé sur Facebook que j’avais oublié de parler des effets ajoutant des petites étoiles derrière la souris, de la neige qui tombe pendant Noël (pour aller avec le sapin !) et de la musique qui se lance automatiquement. Merci Corine !

Conclusion

Le syndrome du sapin de Noël peut affecter plus ou moins votre site, mais cela n’est pas irréversible (bon ok, parfois il vaut mieux repartir d’une page blanche).

S’il y a un point que je veux que vous vous rappeliez après avoir lu cet article, c’est de privilégier la lisibilité à ce que vous pouvez trouver beau (mais qui ne l’est pas toujours).

Personnaliser son thème à sa sauce sans expérience dans la création de site vous nuira plus qu’autre chose.

Pour avoir de bons exemples, inspirez-vous des sites de presse et des blogs influents. Ils ne souffrent généralement pas du syndrome du sapin de Noël.

Il en est de même pour la majorité des thèmes WordPress que vous pourrez trouver sur internet.

Avez-vous déjà essayé de personnaliser votre site ? Comptez-vous le faire à l’avenir ?

Si vous le faites, méfiez-vous syndrome du sapin de Noël 😉

Crédit photo : Merci à Arnaud Abadie sur Flickr