La question peut faire débat et pourtant je n’ai pas hésité un instant à mettre une introduction à la SEO dans le programme de mon cours d’ergonomie web. Ma réflexion est la suivante: pour autant que vous restiez du côté lumineux de la Force (« white hat SEO »), tout ce que vous pouvez faire pour aider votre visiteur à trouver le contenu qui l’intéresse contribue à rendre son expérience positive et participe donc de la démarche ergonomique.

Cet article n’a pas pour objet de répéter pour la millième fois les principes de base du référencement organique: utiliser les metatags, la balise Titre, coder en xhtml valide et sémantiquement correct, densité de mots-clefs… Vous n’avez qu’à les googler ou venir à mon cours pour en être informé. L’objet de cet article est de voir comment intégrer la SEO dans le processus de création de sites web.

La SEO est un processus

La SEO, ce n’est pas (plus) une étape que l’on fait à la fin du processus de création, lorsque le site est en ligne. Finie l’époque où il suffisait d’envoyer son url à Google et d’attendre quelques semaines pour le voir apparaitre dans les premières page de résultats (« SERP-1« ).

La 1ère page de résultats de Google aujourd’hui, c’est un peu comme la loge de Scarlett Johansson: on voudrait tous être dedans, mais il n’y a de place que pour quelques (heureux) élus.

De plus, même si vous êtes l’un de ces petits veinards qui caracolent en première page des résultats (« SERP-1« ), les moteurs de recherche évoluent, adaptent leurs algorithmes en fonction de l’évolution de leurs utilisateurs, de leur technologie et de leurs objectifs business. Rien n’est donc jamais garanti, ce qui explique que l’on dise de la SEO que ce n’est pas Scarlett Johansson une étape, mais un processus permanent. Il ne faut donc jamais baisser la garde et toujours garder l’œil sur les dernières évolutions des moteurs de recherche. Je sais, vous n’aviez justement que cela à faire.

Intégrer la SEO dans le processus de création

En fait, la SEO c’est un peu comme l’ergonomie à ses débuts. Ce n’est qu’à la toute fin, lorsque le bel interface pleins de jolies fonctionnalités très utiles s’avère inutilisable qu’on se rend compte qu’on aurait peut-être dû penser aux utilisateurs finaux un peu plus en aval. Même chose pour la SEO: si vous ne réfléchissez pas dès la phase de conception de votre site comment chaque url du site devrait être référencé, vous ne pourrez au mieux que « patcher » le site. Il ne s’agira donc plus d’optimisation mais de « rafistolage du référencement de votre site dans les principaux moteurs de recherche. Erreur fatale: a quoi sert un site si personne ne le trouve?

Architecture de l’information et SEO

Dans ma pratique, c’est au moment où j’organise le contenu du site en nodes de contenu (groupes, sous-groupes et éléments unitaires) que je m’intéresse au référencement de chaque composant du site.

Concrètement, j’indique les mots-clefs (ou la famille de mots-clef) et l’url de chaque node de contenu, ce qui me permet d’avoir une vision d’ensemble. Je mets cela en page sous forme d’arborescence puis j’en discute avec le client, ce qui lui permet de comprendre comment le référencement fonctionne et comment s’impliquer dans le référencement de son site, et moi de récolter d’autres informations et d’autres mots-clef auxquels on n’avait pas pensé auparavant, tout en passant un agréable moment avec le client à chercher ensemble les dernières photos de Scarlett.

Intégrer la SEO dans l' AI consiste à y indiquer l'url et les mots-clefs de chaque node dans l'organigramme du contenu

Ma stratégie SEO est le fruit d’une réflexion sur le concept de la « longue traîne ». Comme je suis d’humeur partageuse, je vais tenter de vous l’expliquer.

Longue Traîne et optimisation moteurs de recherche

Imaginons que l’on représente le trafic généré par les moteurs de recherche en fonction du nombre de mots composant les recherches qui ont mené à votre site. Ce faisant, vous représentez en fait la concurrence existant entre les sites pour apparaître sur la première page d’un moteur de recherche (« SERP-1″). Il est évident que la compétition est plus rude pour les recherches à un mot qu’à dix mots. Or, l’on constate que le taux de conversion est important pour les recherches très spécifiques (composées de 3,4 ou plus mots-clefs). Ces urls profonds génèrent donc peu de trafic, mais on a remarqué que ce trafic a tendance à réaliser les actes de conversion que vous souhaitez. C’est ce que l’on appelle le « trafic qualifié » – votre public-cible en fait.

Le trafic est moindre mais le taux de conversion est plus élevé si la recherche contient beaucoup de mots-clef

Le concept de Longue Traîne appliqué à l’architecture d’information exploite le fait que lors du lancement de votre site, les premières url à « bien se comporter » en terme de SERP seront vos url pointant vers vos plus profondes nodes de contenu. Autrement dit, votre article intitulé « Élevage de crevettes grises en mer du nord » a plus de chances d’apparaitre en première page pour une recherche telle que: « élevage crevettes grises mer du nord » que pour « crevettes », qui est plus vague, et est donc en compétition avec les pages de beaucoup d’autres sites.

On remarque dès lors que ces pages de contenu précis ont tendance à générer un flux faible mais continu de public très qualifié (a fort taux de conversion).

Lors de la conception de l’architecture de l’information, je veille donc à la répartition harmonieuse des mots-clefs, du plus général (la homepage) au particulier (les url les plus profonds). Ainsi, les nodes les plus profondes reçoivent un meilleur pagerank, poussant ainsi le pagerank de l’étage « supérieur » de ma structure – la node listant le contenu de la catégorie « crevettes » dans mon (bête) exemple. Sur le long terme, avec un site dynamique, cela paye, car plus des nodes sont créées plus la longue traîne s’allonge.

Conclusion

La SEO ne s’improvise pas (plus). Elle ne consiste pas à générer le plus de trafic possible, mais le plus de trafic qualifié possible. Il faut réfléchir à son référencement au moment où l’on réfléchit à la structure de son site internet, c-à-d. à la phase d’architecture de l’information. La méthode que j’ai proposée part du bas de la pyramide: les urls profonds. La croissance de leur référencement tirera vers le haut les pages supérieures, plus « génériques » du site.

Pour en savoir plus, je vous recommande cette lecture sur la Longue Traîne et le SEO (en anglais).

« reduced noise ». Beaucoup moins de bruit graphique, pas (souvent) de pub, navigation plus simple et donc page chargeant plus rapidement.

Tiens? C’est la même raison qui m’avait fait passer de Yahoo à Altavista puis à Google il y a 8 ans: l’efficacité de l’interface. L’homme évolue moins vite que la technologie…

Exemple sur mobile.slate.com et m.lesoir.be :

Je vous invite à participer à ce buzz qui élève le débat et utilise l’interactivité à bon escient: http://1milliondeclicscontrelamisere.org/

Cela étant, petit clin d’oeil qui m’a amusé. L’intitulé du bouton d’envoi du formulaire de contact aurait pu être mieux choisi…

Mais revenons à nos wireframes: deux nouveaux candidats à l’intégration de ma boîte à outils ont pointé leur nez aujourd’hui.

1. hotGloo

hotGloo crée des wireframes au look plus professionnel, plus propre que balsamiq, et semble très prometteur. Cela étant, tout votre travail est conservé sur leurs serveurs, ce qui ne me plait guère.
Par ailleurs, la gestion dynamique du menu de navigation du wireframe (voir vidéo ci dessus) est impressionnante. Je lui donnerai une chance pour mon prochain projet.

2. FlairBuilder

FlairBuilder me fait fort penser à balsamiq, en plus cher.

Et plein d’autres

Je suis également tombé sur ce sondage, qui liste encore des dizaines d’outils de wireframing / prototyping, en plus des manières classiques de faire du wireframing.

Enfin, je vous recommande la revue très fouillée de plusieurs logiciels de prototyping sur Usaddict, en français.

C’est l’overdose !

Si vous avez une expérience à partager avec ces deux outils, I’m all ears !!

Très simple d’utilisation, il permet de rapidement créer des wireframes et de les faire partager en envoyant l’ URL pointant vers votre wireframe aux adresses email que vous indiquez, ou via image png (et donc non navigables).

Positif

Le test que j’ai réalisé dévoile un outil extrêmement facile d’utilisation, qui génère des wireframes solides et propres et qui n’a pas planté (chose qui arrive relativement régulièrement avec Balsamiq Mockup Desktop).

Le plan gratuit permet de créer un wireframe fait de 4 mockups maximum, partageable à deux personnes uniquement. Le plan « premium », donnant un accès illimité, vous coûtera 4 USD par mois ou 49 USD par an.

Au final, un bon produit, encore jeune et qui va donc se consolider. Utile en l’état pour mes étudiants: dieu sait ce que l’on peut faire avec 4 écrans

Cette vidéo (sans son) vous montre rapidement son fonctionnement, supra simple:

Négatif

1. me demander les adresses email des personnes qui doivent voir les mockups: qu’est-ce qui me prouve qu’il ne les utilisera pas à un moment ou à un autre pour les revendre ?
2. ne pouvoir exporter des png et perdre l’aspect wireframing oblige à utiliser leur viewer en ligne. Je n’aime pas être prisonnier de leur système. Ils pourraient générer une page html par image et utiliser des « imagemap » pour implémenter la navigation entre les écrans.
3. l’email envoyé oblige les reviewers à se créer un compte. Pas question de demander cela à mes clients !
   

   « Alexandre Plennevaux has shared this Wireframe: test mockup.
   Sign-up a free account using your email address: aplennevaux@domain.com at http://www.mockflow.com and view this wireframe under ‘Shared Mockups’ »

Conclusion

Au final, je considère que Mockflow représente potentiellement un concurrent direct pour balsamiq Mockup, mais qu’il souffre de quelques erreurs de choix stratégique et a besoin de temps pour mûrir .

La seule chose qui lui manquait était de pouvoir créer des liens depuis un mockup vers un autre, à la manière d’un wireframe.

Comme annoncé sur leur site, c’est maintenant chose possible, et de manière très simple. N’importe quel objet relatif à une action (par exemple un lien ou bouton) a une option complémentaire « link to « , suivi d’un dropdown menu qui liste les mockups associables (concrètement, les autres mockups se trouvant dans le dossier du mockup actif).

Well done !

Pour en savoir plus, lisez l’explication complète sur le blog de balsamiq.

Navigation sur une même page

Il s’agit typiquement de proposer à l’utilisateur un raccourci spatial de n’importe quel endroit d’une page web vers un bout de contenu situé à un autre endroit de cette même page. On l’implémente de la sorte:

le lien:

Le lien est une balise « A » dont l’attribut href commence par une dièse « # » suivi de l’ identifiant de l’élément à pointer.

<p>Le philosophe
<a id="lienVersNietsche" href="#definitionNietzsche">Nietzsche</a>
 le disait fort à propos: ...</p>

la destination

La destination est assignée via un attribut « id » ayant, forcément, une valeur unique dans le DOM de la page.

<p id="definitionNietzsche">
Nietsche est un philosophe allemand  controversé....
 <a href="#lienVersNietsche">retourner au texte</a>

Voilà grosso modo comment l’implémenter au mieux via le html.

Exemple : Découvrez Nietzche sur wikipedia (puis revenez ici, je n’en ai pas fini avec vous).

Le problème : l’utilisateur expérimente une rupture

Sur une longue page, l’écran « saute » à la nouvelle position indiquée par l’attribut href= »# » (pour autant que l’élément existe dans le DOM).

Ce saut provoque une désorientation de l’utilisateur, une rupture de son flux mental, et il est alors forcé de quitter son état de « consultation d’information » vers l’état « bon dieu mais où suis-je, et comment est-ce que je retourne lire la suite de la phrase?« .

Les solutions

Cascading Stylesheet pseudo-tags: :target et :focus

En utilisant les pseudo classes « :target » et « :focus » on peut souligner visuellement à l’utilisateur l’endroit qu’il a quitté et l’endroit où il se trouve.

Démonstration:

Ce (vieil et ) long article sur e-konomica.net utilise des ancres numérique ( [1] ) typiques du paradigme légal. Si l’on clique dessus, un surligné jaune attrape le regard.

Javascript

La solution CSS est une forte amélioration de l’expérience offerte par le simple html mais c’est encore un sparadrap sur une fracture si vous me passez l’expression. En effet, le sentiment de « rupture » vient du fait que l’on ne perçoit pas le déplacement spatial. Le javascript permet les animations, voyons 2 exemples que j’estime très pertinents:

• scrollTo: déplacement de l’écran. Claire amélioration, mais on reste désorienté. L’usage le plus approprié est dès lors avec un menu à position fixe, tel que sur cet exemple: f555 (cliquez sur les liens du menu à droite).
• l’effet « spectrum » : (demo) ce plugin jquery offre une approche très très intéressante à cette problématique: déplacement et objet visuel qui se déplace du départ à la destination. Magnifique!

J’espère que cet article contribuera à voir émerger de meilleures propositions de navigation interne à une page. Merci de votre lecture !

Alignement à droite du site

La tendance étant aux écrans aux proportions 16:9, j’ai du mal à comprendre ce choix d’aligner le bloc de contenu à droite de l’écran. C’est contre-intuitif et diminue le potentiel immersif de l’écran: en regardant le contenu, la périphérie du regard sort de l’écran.

L’alignement au centre de l’écran est une évidence, particulièrement pour un site qui est à fort contenu textuel, et donc dédié à la lecture: typiquement, on utilise le design pour favoriser l’acte de lecture, afin de le rendre le plus confortable possible – du moins si l’on prétend placer l’utilisateur au centre du site.

typographie peu ergonomique

1. Les liens sont mal identifiés. Exemple:
   Devinez-vous que le texte en gras est un lien ? Une solution simple est d’utiliser le soulignement, c’est un principe qui a fait jurisprudence.
2. manque de contraste (utilisation du jaune sur fond blanc)
3. police de caractère élégante mais trop fine: du coup les caractères vibrent et la lecture fatigue inutilement les yeux.

Formulaire peu ergonomique

J’ai voulu soumettre un site via le formulaire anglais, le captcha m’a empêché de le faire. Après 4 essais, j’ai utilisé le formulaire en français. Voici ce que j’ai eu comme message de retour:

Vous voyez le problème ? L’utilisation de la couleur rouge m’a d’abord fait croire que ma soumission avait (encore!) échoué. J’avais déjà presque quitté la page lorsque je me suis rendu compte qu’il m’informait du succès de l’opération.

Qui sont les auteurs?

Ce n’est pas un point critique mais, personnellement, j’aime savoir à qui je m’adresse afin de pouvoir évaluer la subjectivité du contenu notamment. C’est toujours utile de se présenter, une phrase suffit souvent. Rien ici qui m’indique le parcours des auteurs. La seule chose que j’ai trouvée qui identifie les auteurs, c’est tout en bas de la page, le … copyright.

2 noms de personnes que je ne connais pas personnellement. Difficile de juger sur cette base…

Conclusion de l’oncle Alex

Vous l’aurez remarqué, j’ai dit beaucoup de mal de ce site, mais je n’ai pas dit qu’il était moche ou bâclé. Au contraire, il s’agit d’un site manifestement soigné sur le plan graphique, simplement, le focus du design s’est porté sur ce qui plaisait à l’auteur, non sur ce qui rendrait les actions de l’utilisateur plus satisfaisantes, plus efficientes.
Toute l’attention s’est portée sur le plaisir graphique de l’auteur au détriment du contexte de la lecture de l’utilisateur.

Le public cible étant les web designers, on peut certainement s’accorder une liberté, mais est-ce bien honnête de rendre ses concurrents aveugles, angoissés, frustrés, voire de leur donner un torticoli ?

Il y a de nombreuses découvertes en terme de mauvais design d’interfaces, parfois franchement amusantes, à faire sur l’Interface Hall of Shame découvert sur le wiki de jquery UI. Décidémment, il y a tant à apprendre des erreurs… des autres bien entendu ! °-¨

J’avais envie de voir ce que cela représentait de réaliser un thème pour WordPress. J’ai profité du lancement de ce blog pour répondre à cette question. C’est finalement relativement simple, le travail le plus compliqué étant de trouver les tags disponibles dans l’aide fournie par WordPress (ce qu’ils appellent en bons geeks ayant passé trop de temps à Warhammer 40,000: le Codex ).

thème « Ergonomie Web »

Je vous l’accorde: je n’ai pas été chercher le nom de mon thème très loin . Il est basé sur l’idée de donner au contenu la prédominance en terme d’espace écran, et de concentrer la navigation et les actes de conversion sur la colonne de droite. Le contraste blanc et noir fait référence à cet approche: le blanc comme fond pour le texte, le noir comme fond pour la navigation.

Je dois encore travailler un peu le thème: indiquer les liens déjà cliqué dans la partie « contenu », et autres détails de ce genre. D’ailleurs si vous voyez des améliorations, n’hésitez pas à me les communiquer via le formulaire de commentaire.

Sticky Comment form

Justement: je tente une expérience d’ergonomie avec le formulaire de commentaires. L’idée est que si l’on consulte un billet, le formulaire soit visible même si la page est très longue. En anglais j’appelerais cela « a sticky comment form ». Implémentée via la propriété CSS « position:fixed » ajoutée dynamiquement par du javascript qui détecte la taille d’écran disponible (si pas suffisant, pas sticky) ainsi que la position scroll de la page.

Voilà, j’espère que ce thème vous plaît !