Quand l’expérience utilisateur rencontre le SEO

BofIl parait que quand un référenceur, un webdesigner et un ergonome sont dans un bateau, ça ne finit pas comme une blague de Jean Roucas mais plutôt en combat de coqs. Pourtant je vous promets qu'on peut mettre les trois d'accord, et pour ce faire on va voir comment agissent les meilleurs.

On va donc reprendre le même principe que l'article sur le maillage interne intelligent et décortiquer les stratégies utilisées par les autres acteurs du web, il ne nous restera plus qu'à les adapter à notre cas, voire même à les améliorer.

Trop de texte, l'exemple de Whisky.fr

Le référenceur est un obsédé textuel, le webdesigner veut une cohérence graphique et l'ergonome souhaite faciliter l'accès aux informations importantes. Les fiches produit du site Whisky.fr marient à merveille les exigences de chacun :

  • Par défaut, toutes les fiches produits font la même taille, chaque bloc de chaque fiche est identique,
  • Un texte descriptif bien utile pour le SEO, assez long mais de taille variable est présent et crawlable,
  • Le tableau présentant les caractéristiques du produit est facilement accessible : très peu de scroll est requis.

whisky.fr

Mais comment ont-ils fait ? C'est simple : l'élément le plus changeant, ici le texte, n'est pas affiché en totalité par défaut et un bête javascript permet de le dérouler si l'internaute en ressent le besoin. Pour que ce soit bien clair, la dernière ligne du texte est en fondu transparent pour que le visiteur comprenne bien qu'il doit effectuer une action s'il veut continuer la lecture. Exemple. Ah, au fait, ça marche aussi dans la SERP.

Recherche Redbreast

Ici le texte est de qualité, mais vous pouvez utiliser la même astuce si vous achetez du texte relativement pauvre dont l'objectif est uniquement SEO et que vous ne souhaitez pas le mettre en avant.

Les sujets importants mais volatiles, l'exemple de Lemonde.fr

Tous ceux qui travaillent dans l'actualité le savent, c'est un calvaire de travailler sur les sujets chauds. D'un point de vue SEO d'abord, parce qu'en général tous les concurrents traitent également le sujet, mais également d'un point de vue ergonomique : comment, sur la home, faire un focus sur les sujets chauds sans laisser de côté les autres actualités ?

lemonde.fr

Le Monde (et bien d'autres sites de presse) a trouvé un bon moyen de répondre à ces deux problématiques. On retrouve sur la home un bandeau nommé "En ce moment", bandeau impossible à manquer et qui liste les gros sujets d'actualité. L'internaute est conquis : il trouve directement son information sans la chercher pendant des heures. Évidemment, chaque lien de ce bandeau renvoie vers une page listant tous les articles liés à l'actualité du sujet. Tapez "crise de l'euro" sur Google pour voir ? L'essai est transformé.

Recherche crise de l'euro

Si vous ne faites pas dans l'actualité mais plutôt dans le e-commerce, vous pouvez trouver un équivalent en mettant en avant des catégories de produits et/ou évènements liés à la saisonnalité.

Le fil d'Ariane "catégorisé", l'exemple de Decathlon.fr

Je ne vais surprendre personne si j'annonce avec aplomb que le breadcrumb est bon pour le SEO. Sauf que nous faisons tous (ou presque) des fils d'Ariane "basiques". C'est un bon début, l'internaute peut remonter les catégories et Google peut les crawler, mais si nous essayions d'aller plus loin ?

decathlon.fr

Décathlon l'a fait : regardez un peu la petite flèche à côté de "rugby", lorsqu'on clique dessus nous découvrons les sous-catégories, avec bien sûr un lien et la possibilité d'y accéder. Le rêve : l'internaute ajoute au panier son maillot du XV irlandais (malgré la faute honteuse de la description) et va directement acheter le ballon qui va avec. Parce que bien sûr Décathlon a fait les choses bien : la mise au panier ne renvoie pas vers une nouvelle page. Et bien sûr, Google crawle plutôt bien tout ce qui est présenté dans le fil d'Ariane. La preuve, une recherche Google nous indique que Décathlon est en première page, et c'est le premier site non spécialisé.

Recherche maillot rugby

Si vous reprenez l'idée, faites tout de même attention à ne pas trop doubler les liens avec ceux présents dans le menu principal ;-)

Conclusion

Comme quoi, le SEO, le webdesign et l'ergonomie peuvent bel et bien faire bon ménage. L'avantage de ces exemples, c'est qu'on agit toujours dans l'intérêt de l'utilisateur et par conséquent dans son propre intérêt : on se retrouve mieux positionné sur Google et on accélère la conversion.

Et vous votre choix, c'est SEO, expérience utilisateur ou les deux ?

D'autres cas d'école :
Le maillage interne intelligent
Audit du site de l'Élysée

Catégorie Référencement | Thématique .

28 réponses à Quand l’expérience utilisateur rencontre le SEO

  1. Sylvain says:

    Sympa l’article ;)

    J’avoue que l’exemple de Whisky.fr est vraiment nickel ;) ça permet de ne pas encombrer la page à l’ouverture… Niveau maillage interne c’est aussi pas mal ce qu’ils ont fait avec  » Pour aller plus loin » et  » Produits associés », et là, je ne parle pas que de SEO mais les produits proposés sont correct et peuvent réellement amener au cross selling ;)

  2. Bastien says:

    Sympa la technique du texte déroulant ! Concernant le SEO pour les sujets d’actualité « chauds », je suis bien d’accord, c’est très dur de se placer rapidement et ce, même en étant parmi les premiers !

    Merci pour cet article et ces exemples.

  3. Thomas says:

    Il est vrai que c’est compliqué de faire travailler plusieurs métiers différents ensemble, quand chacun défend ce qu’il considère comme « qualitatif ». Et si en plus tu rajoute l’intégrateur et le développeur dans le lot, pas forcément formés au référencement, c’est vite dur de contenter tout le monde !

  4. Hamza says:

    Les deux pour moi avec une priorité majeure pour l’expérience utilisateur qui a beaucoup d’impact sur le SEO. Bravo pour l’article et surtout pour les analyses qui ont été faites sur ces grands sites. C’est sûr, j’aurai de quoi m’inspirer :D

  5. Capi says:

    Super intéressant cet article, franchement la technique de whisky.fr pour le texte des fiches produits est vraiment top, quelqu’un aurait-il une idée du code javascript à insérer ?! sinon sympa les produits et en plus ce soir c’est le week end… ça donne des idées ^^

  6. Pierre says:

    Salut,
    Ton article est très intéressant et les exemples pour lesquels tu as opté me semblent très pertinent.
    Par contre, il ne faut pas oublier une autre stratégie qui fonctionne très bien et s’adresse à un autre type d’entrepreneur du web, les modèles de landing page, avec un énorme call to action pour envoyer tout de suite le visiteur où on le souhaite et des tartines de texte sur une seule page que l’on peut crawler à en user la souris (ou presque).
    Et ça c’est le genre de site très pertinent, en seo, en ergonomie et en design, mais bien entendu cela s’adresse à des services spécifiques et ce n’est pas applicable à un site comme ceux que tu présentes.

  7. Seo.fr says:

    Une idée révolutionnaire apportée par le site whisky.fr ! Ce fondu transparent est vraiment incitatif pour l’internaute qui arrête sa lecture et comprend qu’il doit cliquer sur le lien pour la poursuivre. En outre, cela permet un gain de place vraiment intéressant si l’on veut mettre beaucoup de texte. Beaucoup de sites utilisent ce fameux texte déroulant mais de cette façon je n’en avais jamais rencontré.

  8. Loïc says:

    Souvent SEO et ergonomie / accessibilité ne font pas très bon ménage en effet, d’ailleurs il y a une étude qui circule sur twitter aujourd’hui au sujet des longs articles qui déjà ne seraient pas lu en entier, alors quand il s’agit de fiches produits.. l’exemple Whisky.fr est sans doute celui qui va le plus me servir et je vais sans doute reprendre l’idée du texte « aperçu / texte complet » !

    Par contre un petit point m’a tout de même titillé : « Ici le texte est de qualité, mais vous pouvez utiliser la même astuce si vous achetez du texte relativement pauvre dont l’objectif est uniquement SEO et que vous ne souhaitez pas le mettre en avant. »
    Attention sur ce point, car pour un Quality Rater cela aura vite fait de passer pour du texte caché si le contenu est trop SEO !

  9. LaurentB says:

    Je trouve la refonte de Decathlon très intéressante, par rapport au siloing du fil d’Ariane.
    Sauf que les mega menus continuent de gâcher le concept.

  10. Christian says:

    Chez moi le texte déroulant ne déroule pas… hum, cela ne doit être fait que pour les utilisateurs de Windows; donc, puisque tous les utilisateurs ne sont pas considérés ici, on va dire que c’est 100 % pour le SEO dans ce premier exemple.

    Sinon, il faut essayer bien sûr de concilier les deux : SEO et internaute (et inversement), pour une raison très simple, il faut que l’internaute reste sur le site et parte à la découverte de ce qu’il propose, sinon, le site ne sert à rien.

  11. Xavier says:

    Bravo pour cet article.

    Après quand on est « tout seul » dans son coin sans avoir les connaissances fondamentales concernant ces trois métiers/vision il n’est pas toujours facile de faire les choses comme il le faut mais bon … avec les exemples concrets de ton article on a déjà quelques pistes ! (d’ailleurs si tu veux en faire d’autres du même genre alors je serais tout a fait preneur :) )

  12. Sylvain says:

    @Capi : ça doit se trouver assez facilement sur le net, je prendrai le temps de chercher si tu ne trouves pas d’ici là (ou au pire regarde le code source de whisky.fr ;-) )

    @Loïc : oui en effet, il faut trouver le juste milieu et ne pas trop le cacher

    @LaurentB : pour ta deuxième phrase, je me suis fait exactement la même remarque en voyant ça… C’est brillant mais ça pourrait être mieux utilisé

    @Christian : ça fonctionne très bien sous mac chez moi quelque soit le navigateur, il doit y avoir un problème chez toi ;-)

    @Xavier : jette un oeil à l’article sur le maillage interne, il est présenté de la même façon que celui-ci ;-)

  13. sogedent says:

    Merci pour ce très bon billet sur le référencement & l’ergonomie.
    Comme vous dites la conversion est l’objectif final, mais cela dépend des mentalités (pays, habitudes de consommation, le pouvoir d’achat, payement par internet…)

  14. Sumo du net says:

    J’adore cet article ! Ceci dit tu prends l’exemple d’un projet pouvant supporter un seo, un graphiste et un ergonome. Ce n’est en revanche pas toujours possible quand on est en solo et qu’on doit tout supporter. Mais j’avoue que ça donne des idées en tout cas et les exemples choisis sont vraiment bons. On peut s’en inspirer pour de nombreux sites.

  15. Vorbis82 says:

    Pour le site Whisky.fr il y a effectivement un énorme contenu et pour travailler, un peu sur la thématique du whisky, c’est vraiment LA référence sur le sujet. Cet énorme contenu est un gros plus que Google apprécie, évidemment. Après si le fondu est vraiment novateur, le concept de poursuite de la lecture est, lui, assez répandu. Par contre le fil d’ariane du menu chez Décathlon je trouve ça vraiment ingénieux et je crois ne pas connaître d’équivalent. Merci pour cette étude de cas qui donne matière à réfléchir.

  16. Forex says:

    personnellement je préfère les deux, ça donne beaucoup d’avantage au niveau de contenu + affichage sur les moteurs de recherche !

  17. Monica says:

    Question de noviceo pour Whisky: le texte n’apparaissant pas sans avoir à le dérouler est-il naturellement indexé sans souci par les moteurs?

    Autre question pour Déca (juste après le whisky ça se tient): mélanger visuellement fil d’Ariane et menus ne comporte-t-il des pièges au niveau de l’afordance?

    A part ça l’idée d’enfermer 3 zigues spécialistes en design, ref et ergo, sonne un peu téléréalité/loft-des-secrets mais c’est tellement drôle et intéressant au final :-)

  18. alex says:

    Super article, l’exemple de whisky.fr est très bien trouvé, c’est un bon cas d’école… Ca nous donne des idées en plus car comme le dit Xavier, pour la plupart on est tout seul et ça nous donne une vision transverse (du coup les gueguerres SEO vs Design, c’est plus des guerres de schizophrènes avec mon double moi WedDesign ;) )

  19. Rom says:

    Hello,

    @capi : le code c’est ça

    Texte visible
    Texte caché

    $(document).ready(function(){
    $('.hiddenText').hide();
    $('.hiddenText').after('Read More');

    $('p.readMore').click(function(){
    $(this).prev().slideToggle(function() {
    $(this).next('p.readMore').text(function (index, text) {
    return (text == 'Read More' ? 'Read Less' : 'Read More');
    });
    });

    return false;
    });

    });

  20. Bérou says:

    C’est un bon article.
    Je pense que l’exemple de whisky est très bien et particulièrement le fait de ne pas montrer le texte en entier (s’il est long cela peut se montrer comme étant un blocage pour l’internaute) donc là il a le choix c’est parfait.. Je pense dans le fond qu’il faut essayer de combiner les ensemble pour optimiser le site en question.

  21. Chris says:

    Comme le dit Xavier, ce n’est pas toujours évident de faire la meme chose que les grosses pointures du web quand on se retrouve tout seul sur son projet web. Mais une fois qu’on a des exemples concrets sous les yeux on finit par trouver des pistes ou des partenaires pour les intégrer à notre sauce.

  22. Maxime says:

    Merci, c’est toujours bien de pouvoir bénéficier d’exemples lorsqu’on nous propose de nouvelles idées. Recopier c’est mal, mais s’inspirer de cas concrets qui bénéficient d’un bon positionnement et quelque chose d’essentiel pour rester au goût du jour !

  23. Lamy2013 says:

    Bonjour,

    Merci pour le partage. Je souhaite noter que « le SEO, le webdesign et l’ergonomie peuvent bel et bien faire bon ménage »: tout dépend pour moi de la stratégie du site Web.
    Pour certains clients l’objectif (au lancement du site par exemple) est d’adopter une structure de site Optimale pour le SEO permettant d’être rapidement visible sur les moteurs de recherche, et dans ce cas particulier il est difficile d’y allier l’expérience utilisateur: typiquement l’utilisation de certaines fonctionnalités ou blocs qui sont pour 95 % des internautes inutiles et donc à part essayer d’améliorer le design nous ne pouvons pas faire grand chose.
    Donc le Design oui, mais en terme d’utilité pour l’utilisateur non…j’espère que je me suis fait comprendre :)

  24. Vincent says:

    C’est sur que c’est parfois difficile de trouver le juste milieu entre optimisation SEO parfaite et optimisation de l’expérience utilisateur qui est indispensable pour maximiser le taux de conversion! Mais à choisir, autant que ce soit la même personne qui se charge du SEO et l’optimisation ergonomique, comme ça on évite les conflits :p !

  25. Shelko says:

    @Rom: je pense que le code de Whisky est un poil plus complexe que celui-ci (pour la gestion de la dernière ligne grisée)

    J’ai toujours hésité à utiliser ce genre de système, car je fuis le contenu géré par du javascript comme le peste, mais cet article donne envie de faire des tests ;)

  26. Superbe la technique du texte déroulant ! Mais le fait de le cacher ne donne t’il pas une mauvaise impression à notre cher dieu vivant google ?

    Merci pour ce partage, et merci @ Rom pour le code !

  27. Clément says:

    Il est clair que tout est question de dosage et de savant mélange entre l’intérêt seo, ergonomique et l’expérience utilisateur.
    Pour ce qui est du contenu sur le Whisky, il a l’avantage d’être peu lu puisque ce type de produit se choisit essentiellement sur la marque, la quantité et l’âge. Il n’en est pas de même pour d’autres sites. Je suis, d’ailleurs, assez admiratif de la page Kindle d’Amazon qui réussit l’exploit, selon-moi, à être une page parfaitement optimisée pour le SEO mais aussi redoutable d’un point de vue utilisateur. C’est d’ailleurs la première fois que j’ai vraiment lu avec intérêt une description du début à la fin.

    Je suis donc partisan d’un texte utile, même s’il possède moins de « mots ». Cela fait moins bourrage et c’est clairement plus vendeur pour les utilisateurs.

  28. Eric says:

    Haha le clash des 3 ! L’ergonomie est un sacré défi mine de rien, d’autant plus pour les sites ayant une architecture développée et un nombre de page important. Je pense aux journaux en général ou les sites avec beaucoup de contenu!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Veuillez utiliser votre nom ou votre pseudo. Tout commentaire ne respectant pas cette règle verra son lien supprimé.