Ergonomie, Rails et Architecture de l'information web (2.0)

À la fin de l’année dernière, j’ai commencé à m’intéresser au positionnement de ce site sur les moteurs de recherche. J’ai alors contacté Sébastien Billard qui tient l’excellent blog Référencement, Design et Compagnie afin qu’il me fasse profiter de ses lumières. Suite à ses réponses, j’ai commencé une refonte structurelle – et ergonomique – qui a amené à la version actuelle. Un mois plus tard, retour sur les améliorations effectuées et sur les résultats obtenus.

Conseils Structurels

• Remplir le champ <title> à l’aide du titre du billet suivie de la mention “Frédéric de Villamil.com”. Cela permet aux outils de référencement de bien distinguer les pages les unes des autres.
• Dans la structure du code, mettre le contenu de chaque billet avant la navigation, de telle sorte qu’il se retrouve à la première place. Là aussi, il s’agit d’éviter que les moteurs de recherche ne considèrent les contenus comme semblables d’une page à l’autre. Techniquement, cela se fait en jouant sur la position des éléments : le contenu, placé avant dans le code, est placé dans un float: right;, tandis qu’on laisse la navigation dans le flot de la page.
• Supprimer le lien sur le titre du billet en mode lecture puisqu’il pointe de toute manière vers la page en cours. Cela rajoute en plus un bon point pour l’accessibilité.
• Mettre le message “Répondre à ce billet” dans une balise <h3> et non une balise <h2>, cette dernière étant déjà utilisée par le titre du billet, hiérarchiquement supérieur au formulaire de réponse dans la structure de la page.

Conseils éditoriaux

• Ajouter une tagline reprenant les principaux mots clé du site. Sébastien m’avait suggéré “Ergonomie, web design, métiers du web : le blog de Frédéric de Villamil”, mais ma préférence est finalement allée à “Webdesign, Ergonomie et Métiers du Web (2.0)”. Côté sémantique structurelle, le titre du blog se trouve dans une balise <h1> et l’accroche juste en dessous dans une balise <h2>.
• Supprimer le paragraphe de présentation placé en haut de chaque page. Relativement long, celui-ci leurrait les outils de recherche en leur faisant croire que toutes les pages étaient semblables. Le résultat était catastrophique, puisque Google ne recensait que 4 pages différentes, et plus de 1500 doublons. Le paragraphe de présentation a finalement rejoint la navigation, en bas de page.
• Faire figurer les catégories sur l’ensemble des pages, et particulièrement sur celles des billets. Seul problème, je ne voulais plus de sidebar sur ce blog. J’ai finalement décidé de déroger en ce qui concerne les catégories, pour des raisons purement ergonomiques : ce système permet au lecteur d’embrasser le contenu du dernier billet et les thématiques du site d’un seul coup d’oeil, sans retomber dans la pollution visuelle entraînée par une sidebar “fourre tout”.
• Soumettre le site à des annuaires afin de varier la provenance de mes liens entrants, principalement des blogs à ce jour.

Les résultats

Mot clé	14/12/2006	23/12/2006	13/01/2007
Pages	8 + 1200 doublons	1700	1930
Frederic	168	16	10
Frédéric	174	10	8
Webdesign	875	851	152
Ergonomie	763	804	144
Métiers du Web	979	143	36

Source : google.com, les chiffres de google.fr peuvent être différentes.

Je referai le point sur ces mots clé dans 6 mois, afin de constater les évolutions à venir, en faisant une vérification sur ces mots clé chaque premier du mois, et en les comparant à mes statistiques en entrée. Je remercie Sébastien pour ces conseils qui ne m’ont absolument rien coûté, puisque la bière promise n’a pas encore été commandée. J’espère que vous pourrez à votre tour en profiter pour accroître la visibilité de votre site.

Question : comment fait Google pour tester ses nouveaux algorithmes d’indexation et ses fonctionnalités à venir en grandeur réelle sans pour autant rendre son service inutilisable à deux ou trois milliards d’utilisateurs ?

Réponse : en lançant un moteur de recherche alternatif : SearchMash.

Searchmash reprend la simplicité et l’austérité de l’interface de son grand frêre en y ajoutant des fonctionnalités intéressantes. Outre la recherche sur les blogs et les images déjà existantes, il y ajoute une recherche sur les vidéos et l’encyclopédie libre Wikipédia, ce qui accroît encore un peu la légitimité du site collaboratif. Les recherches “alternatives” sont disponibles sur la page principale et sont affichées à la demande avec un bout d’AJAX.

Un menu “hide details” permet de cacher les détails des résultats pour ne laisser que le titre de la page retournée. Pas très lisible pour l’instant, mais intéressant quand on choisit d’afficher plusieurs dizaines résultats sur une recherche.

Cependant, la principale nouveauté réside dans le retour utilisateur sur l’opportunité des résultats retournés dans chacune des catégories. Reste à savoir dans quelle mesure il est pris en compte par Searchmash.

Crowdsourcing, AJAX, média alternatifs – je me demande s’ils utilisent le microformat rel=”tag” pour les indexer – Wikipédia… ce Google en devenir répand en tout cas de belles effluves de web 2.0, il ne lui manque que le bêta ;-).

• Samedi, atelier Google Map.
• Jeudi, séminaire sur le Web Mobile
• Vendredi, conférence Paris on Rails

Le week-end commençant, ne vous étonnez donc pas de me voir arriver lundi avec une killer app en Rails utilisant la Google Map API à destination des PDA et téléphones mobiles.

Les liens hypertextes sont au coeur du web. Sans eux, rien n’existerait, et nous avons pourtant tendance à les négliger. Bien employés, ils ajoutent de la valeur aux contenus publiés ; bâclés, ils peuvent aller jusqu’à leur retirer tout intérêt. Raison de plus pour s’y intéresser et en prendre grand soin.

Combien de fois êtes vous passés à côté de documents passionnants pour cause de liens invisibles, introuvables, incompréhensibles, illisibles ou inaccessibles par bête négligence ? Ce genre de choses ne doit plus arriver, et ce billet se propose justement de vous aider à les éviter en passant en revue les erreurs les plus fréquemment rencontrées et les optimisations trop souvent méconnues. Parce qu’il n’y a que sous UNIX que les liens sont symboliques.

Anatomie d’un lien hypertexte

Selon la définition du W3C :

Un lien est une balise à deux bouts – les ancres – et une direction. Le lien va de l’ancre “source”, et pointe vers l’ancre “destination”. Celle-ci peut être n’importe quel ressource sur le web (une image, une vidéo, un fichier musical, un document HTML, un élément embarqué dans un document HTML, etc…)

Nous nous intéressons aujourd’hui au lien hypertexte visible matérialisé par la balise <a> ... </a>. Il existe aussi le lien <link /> qui fera l’objet d’un autre billet.

<a href="http://t37.net">Frédéric de Villamil</a>

L’ancre “source” possède nombre d’attributs. Certains d’entre eux sont sous utilisés, voire franchement ignorés quand leur emploi à bon escient ajouterait pourtant une valeur certaine à vos liens.

hreflang :

L’attribut hreflang vous permet de spécifier la langue du document destination. Il s’utilise à l’aide du code langue à deux lettres :

<a href="http://t37.net" hreflang="fr">
    Frédéric de Villamil
</a>

Sous les navigateurs modernes, un peu de CSS permet d’afficher cette information juste à coté du lien :

a[hreflang]:after {
   content: "\0000a0[" attr(hreflang) "]";
   color:#999;
}

On peut aussi choisir d’afficher une icône en fonction du code langue :

a[hreflang=fr] {
    padding-left: 20px;
    background: url("fr.png") left no-repeat;
}

Ceci affichera un petit drapeau français à gauche de vos liens.

Bien que ceci ne soit pas supporté par Internet Explorer, il serait dommage de priver les 20% de vos visiteurs munis de navigateurs modernes non ?

type :

Souvent ignoré, l’attribut type vous permet d’indiquer le type mime du document destination.

<a href="http://t37.net/cv.pdf" type="application/pdf">
    Télécharger mon CV
</a>

Comme précédemment, un peu de CSS permettra aux utilisateurs de navigateurs modernes d’afficher une petite icône à côté du lien pour un document destination au format PDF :

a[type=application/pdf] {
    padding-left: 20px;
    background: url("pdf.png") left no-repeat;
}

Évidemment, ceci reste valable pour n’importe quel type mime.

Les attributs ne s’excluant pas l’un l’autre, on pourra proposer :

<a href="http://t37.net/cv.pdf" type="application/pdf" hreflang="fr">
    Télécharger mon CV
</a>

En utilisant les deux bouts de CSS proposés ci dessus, le visiteur verra donc au premier coup d’oeil que le lien pointe vers un PDF rédigé en français.

title :

L’attribut title donne le titre exact de la destination, en plus de l’image ou du texte placés entre la balise ouvrante et la balise fermante.

<a href="http://t37.net/cv.pdf" title="Curriculum Vitae de Frédéric de Villamil">
    Télécharger mon CV
</a>

Le navigateur affiche généralement la valeur de l’attribut title au passage de la souris sur le lien. Un peu de javascript permet même d’afficher celui-ci dans une élégante info bulle.

title permet de spécifier le titre d’une oeuvre ou d’un document d’une manière plus formelle et complète qui n’aurait pas forcément eu sa place dans le flot du texte. Les moteurs de recherche prennent aussi ces informations supplémentaires en compte, ce qui peut s’avérer utile.

rel :

Souvent mal utilisé, rel décrit la relation existant entre le document courant et celui indiqué dans l’attribut href. On trouve de nombreux exemples d’utilisation de rel dans les Microformats, comme le le microformat rel="tag", mais aussi dans les liens de type <link />

<a href="http://t37.net/articles/tag/microformats" rel="tag">
    Microformats
</a>

Comme précédemment, vous pouvez signaler la présence d’un tag – par exemple – à l’aide d’un peu de CSS. Et comme précédemment, cela ne fonctionnera que sur les navigateurs modernes.

a[rel=tag] {
    padding-left: 20px;
    background: url("tag.png") left no-repeat;
}

rev :

À l’inverse de l’attribut rel, l’attribut rev décrit la relation entre le document pointé par l’attribut href et le document courant. L’attribut rev est notamment utilisé dans les Microformats, particulièrement dans les vote-links.

<a href="http://t37.net" rev="vote-for">
    Frédéric de Villamil
</a>

Vous pouvez maintenant utiliser un peu de CSS afin d’afficher de petites icônes à côté du lien afin de permettre à vos visiteurs utilisant un navigateur moderne – et non pas forcément récent – de connaître votre opinion à propos du lien cible :

a[rev=vote-for] {
    padding-left: 20px;
    background: url("for.png") left no-repeat;
}

a[rev=vote-against] {
    padding-left: 20px;
    background: url("against.png") left no-repeat;
}

tabindex :

tabindex nous fait quitter le domaine de l’information sur la destination des liens pour entrer dans le cadre de l’ergonomie et de l’utilisabilité. tabindex sert à indiquer dans quel ordre les liens – ou les champs d’un formulaire – doivent être parcourus lorsque le visiteur navigue à l’aide de la touche tab de son clavier.

accesskey

Là aussi, on rentre dans l’ergonomie et l’accessibilité, puisque accesskey permet de définir une touche permettant d’accéder directement au lien – ou au champ d’un formulaire – à l’aide d’une seule touche.

Un peu de clarté ne nuit pas

Donner une ribambelle de liens tout juste séparés d’un espace dans une même phrase ne sert pas à grand chose. Non seulement le visiteur aura du mal à définir où commence et où finit un lien, mais il ne saura très probablement pas de quoi ces liens vont parler. Si ce genre d’énumérations est particulièrement fréquente sur les blogs, elle est évidemment à proscrire.

Pour des raisons d’accessibilité, chaque lien doit être séparé du suivant par un caractère imprimable qui ne soit pas un lien, comme le stipulent les WAI Guidelines du W3C.

Until user agents (including assistive technologies) render adjacent links distinctly, include non-link, printable characters (surrounded by spaces) between adjacent links. [Priority 3]

Une avalanche de liens n’apporte souvent pas grand chose à un billet. Si pour une raison ou une autre vous souhaitez cependant indiquer un grand nombre de liens concernant un même sujet, vous pouvez le faire de manière bien plus pratique ou élégante. Pourquoi ne pas ajouter à la fin de votre article une annexe présentant un lien et sa description par ligne ? S’ils sont si pertinents, ils méritent cet espace dédié. Et s’ils ne le méritent pas, c’est probablement qu’il vous faut remettre leur présence en cause.

Tant qu’on en est à parler de ce qui se trouve entre l’ancre “source” et l’ancre “destination”, réfléchissez bien à ce que vous y mettez. C’est en effet de votre choix que naîtra chez votre visiteur l’envie de cliquer ou de ne pas cliquer. S’il s’agit d’une image ou d’un bouton, n’hésitez pas à abuser des attributs alt et title. Au sein d’un paragraphe, soyez clairs, précis et concis. Non seulement vous influencerez vos visiteurs dans leurs choix, mais en plus vous aiderez les moteurs de recherche. Que demander de plus ?

Mettez vos liens en valeur

Pour être visités, vos liens doivent avant tout être vus par vos visiteurs, et ce au premier coup d’oeil. Pour cela, un peu de CSS peut faire beaucoup.

Un peu de typographie

Commencez par leur choisir une couleur qui tranche avec celle du texte et du fond. J’ai choisi un texte noir sur fond blanc pour la lisibilité, et je mets mes liens en rouge pour les faire ressortir. Laissez vos liens soulignés. Il s’agit du comportement par défaut de tous les navigateurs, et l’oeil du visiteur cherche instinctivement des éléments soulignés pour cliquer dessus. En revanche, ne soulignez que les liens – une bordure sous un titre n’est pas un soulignement. Si vous devez donner le titre d’une oeuvre et souhaitez la souligner, profitez-en tant qu’à faire pour donner un lien vers sa page officielle ou Wikipedia, ça ne coûte rien et ça donnera peut-être envie au visiteur d’aller plus loin.

Utilisons les comportements

La balise a dispose de deux pseudo classes bien pratiques, supportées par tous les navigateurs et combinables entre elles : hover et visited.

hover permet de définir un comportement lorsque la souris survole le lien. visited permet de définir le comportement lorsque le lien a déjà été visité.

Je ne sais pas s’il existe une règle définie pour cela, mais j’ai tendance à toujours utiliser les mêmes comportements.

• a : couleur vive tranchant à la fois avec le texte et le fond, souligné.
• a:hover : même couleur que précédemment, sans soulignement. La transition souligné / non souligné au survol de la souris permet d’attirer l’oeil sur le fait qu’il s’agisse d’une zone active de la page.
• a:visited : couleur dans les mêmes tons qu’un lien non visité, mais plus foncé, souligné. J’avais coutume d’utiliser l’attribut text-decoration: line-through; pour indiquer que ce lien n’était plus à visiter – je le supprimais tout de même au au survol de la souris – mais je me suis rendu compte que cela grêvait trop la lisibilité du document.
• a:visited:hover : même couleur plus foncée que précédemment, mais avec le soulignement en moins.

Je tiens à préciser que j’utilise ces règles dans le corps de texte d’une page, et non dans le menu dans lequel je supprime généralement le soulignement. En effet, cette partie d’une page me semble suffisamment parlante d’elle même et est généralement assez lourde – surtout sur un blog – pour ne pas tout souligner systématiquement. Peut-être est-ce une erreur ? Je n’ai cependant pas trouvé assez d’arguments qui me poussent vraiment à changer pour l’instant.

Attendez vous à voir pas mal de modifications de ce billet dans les prochains jours. Je suis complètement crevé, il doit donc être bourré de fautes de français, et probablement incomplet par rapport à ce que j’avais initialement prévu de faire.

Je n’ai pas trop le temps de faire un article de fond sur le sujet, mais puisque tout le monde semble y aller de ses prédictions, je vais moi aussi dire pourquoi je pense que Google pourrait bien annoncer rapidement le rachat de Youtube.

• Google Vidéo a beaucoup de mal à décoller.
• La quantité d’utilisateurs de Youtube est phénoménale. À un degré moindre, le principal intérêt de Lafraise pour Threadless Spreadshirt était la communauté drainée par le site.
• Google devrait parvenir à régulariser les problèmes légaux de Youtube assez rapidement – et au pire, ils pourront toujours réréférencer les sociétés leur posant problème, ce ne sera pas la première fois.
• Quand bien même les navigateurs modernes bloqueraient les publicités traditionnelles, il serait beaucoup plus dur de bloquer celles contenues dans les vidéos.
• Les récents accords passés entre Google, Sony et Time Warner laissent présager de quelque chose de gros.

Après, le prix supposé annoncé par Youtube peut sembler phénoménal, mais tout dépend de la manière dont Google pense rentabiliser le service. Si le rachat est effectif, il serait intéressant de savoir à combien l’utilisateur inscrit est valorisé.

Alors, rachètera ou rachètera pas ?

[edit]

• Bingo. On dirait que j’avais raison. Peut-être pas sur les motivations mais au moins sur le résultat final.
• La prochaine fois que vous voulez un conseil en investissement, vous savez où sonner… promis je ne suis pas (trop) cher.
• Comme le signale Xavier Borderie, Lafraise a été racheté par Spreadshirt et non par Threadless.

J’avais ça, ce matin, dans ma boite mail :

C’est un article de canoe.com, site d’informations canadien qu’on apprends que le verbe “google” vient d’entrer à la fois au très respectable et très connu Oxford English Dictionary et au moins connu Merriam-Webster.

Le premier définit le verbe to google comme :

Dernier arrivé dans le monde très fermé de qui cherchent à rogner l’hégémonie de Google, Accoona se présente comme un moteur de recherche sémantique basé sur un système d’intelligence artificielle. Selon ses concepteurs, Accoona analyse les requêtes des utilisateurs afin d’en comprendre le sens et de donner les résultats les plus pertinents possibles. On ne sait en revanche pas si le moteur est capable d’apprendre des recherches précédemment faites pour accroître la finesse de ses recherches. All your bayes are belong to us.

En marge de ma présentation des Microformats samedi au BarCamp Paris, j’exposais les raisons qui me faisaient voir la recherche par tag comme un complément indissociable de la recherche sur le contenu.

Il semble que pour certains, le pagerank Google représente encore le Saint Graal du Web. J’en veux pour preuve ce mail reçu cette nuit :