08
sept 12

Lien « Skip to content » / Lien direct vers le contenu

Aujourd’hui c’est dimanche, jour du Seigneur. Cela tombe bien, je voulais justement vous parler de charité chrétienne appliquée au web design: le lien « skip to content » (« Aller directement au contenu »).

Vous l’avez peut-être déjà aperçu lors de vos pérégrinations sur la toile, surtout si vous développez pour le web: on le croise de temps en temps sans y prêter trop attention, sans savoir exactement à quoi il sert, ce lien qui vous invite à « passe directement au contenu ». Etrange, non?

En vérité, je vous le dis, il sert bien à quelque chose: permettre aux malvoyants utilisant un screen reader de ne pas devoir attendre que le lecteur ait terminé de lire l’entièreté du contenu de l’entête (contenant souvent un menu conséquent) et de passer directement à ce qui l’intéresse dans la page: le contenu.

Comment coder un lien « skip to content »?

Vous veillerez à placer le lien « skip to content » directement après l’ouverture de la balise <body>.

a2b64e5651dbbe6aa4d273ebc7d45765000

Voilà, rien de bien méchant. Fonctionnellement c’est suffisant pour améliorer l’expérience des malvoyants… Et abîmer celle des autres, qui n’ont pas besoin de ce lien. Son affichage ajoute donc un peu de bruit graphique, il vaut mieux le supprimer visuellement… Sauf, astuce, pour ceux d’entre nous qui n’utilisent pas de souris mais naviguent exclusivement au clavier. Linux power. Voici comment:

a2b64e5651dbbe6aa4d273ebc7d45765001

De la sorte, le lien est invisible, mais lorsqu’il reçoit le focus (via la touche TAB), il apparait (démo). Wow.

Source: webaim.org


11
déc 11

Les lois de la Gestalt appliquées au Web Design

Je suis particulièrement fier de cette slide, faite dans le train alors que je relisait une dernière fois ma présentation. Elle est extraite de mon cours d’Ergonomie Web dédié à l’application des lois de la Gestalt au Web Design.

Ergonomie Web - Gestalt et web design

Ergonomie Web - Gestalt et web design


Bon résumé non?

L’ensemble de ma présentation se trouve sur Speakerdeck.

Bonne lecture et comme à chaque fois, si vous avez des questions, remarques… N’hésitez pas.


14
fév 11

Ergonomie et référencement (SEO)

Qu’est-ce que l’optimisation du référencement de sites internet a à voir avec l’ergonomie web?

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

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 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).


20
nov 10

Vive le mobile, même quand on n’a pas d’appareil mobile

Je me surprends à surfer de plus en plus sur la version mobile des articles qui m’intéressent depuis mon ordinateur portable voire mon ordinateur de bureau. Pourquoi?

« 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 :


05
nov 10

préparer son site au mobile


Cet article devrait vous permettre d’adapter votre site internet aux visiteurs y accédant via navigateurs embarqués-autrement dit, les smartphone mais également certains modèles de téléphone mobile « augmentés ». Il est en cours d’écriture et me sert de pense-bête, donc n’hésitez pas à réagir si j’écris trop de bièsseries. Continue reading →


06
sept 10

HTML5 Boilerplate : modèle de base pour coder son site en html5

HTML5 Boilerplate
html5 boilerplate est une template de départ pour tout site html/css/javascript , conçue pour intégrer toutes les astuces et bonnes pratiques de dégradation progressive, d’optimisation de bande passante, de support aux différents médias y compris les téléphones mobiles basiques à partir de html5. Oui, vous pouvez donc coder votre site en html5, CSS3 sans vous inquiéter pour les pauvres âmes qui utilisent encore internet explorer 6, votre site se dégradera correctement pour eux. Continue reading →


12
août 10

Oculométrie (eye tracking study) pas chère, peuchère !

OculométrieL’oculométrie (je dois toujours réprimer un sourire obscène lorsque j’écris ce terme) est, me semble-t-il, mieux connue sous son nom anglais: eye-tracking study, et désigne une méthode de capture de la position du regard d’un utilisateur visionnant et/ou interagissant avec un contenu affiché sur écran. En gros, elle se base sur un logiciel enregistrant via une caméra rétinienne la direction du regard visionnant une interface afin d’en analyser les trajectoires, ce qu’il regarde en premier, puis en second, etc. Le résultat est formalisé en cartes de chaleur (également mieux connues sous leur appellation anglaise: heatmap). Cette technique est très utile pour tester des interfaces ou effectuer des tests A/B, tests comparant 2 positions possibles pour un bouton de conversion (« call to action » my friends).
Continue reading →


24
mar 10

Text 2.0: l'avènement du texte réactif?

text 2.0
Ralf Biedert et son équipe du German Research Center for Artificial Intelligence (DFKI) utilisent l’oculométrie (eye-tracking) de la société suédoise Tobii en conjonction avec du html, css et javascript pour mettre au point une technologie d’amélioration de la lecture, baptisée « Text 2.0« . Continue reading →


21
mar 10

L' optimisation moteurs de recherche, selon Google

Optimiser l'indexation dans les moteurs de recherche, par google
Jolie trouvaille faite sur Google Webmaster Central: Google vient de rendre disponible gratuitement un PDF de 49 pages pleines de bonnes pratiques afin d’optimiser la manière dont votre site sera référencé sur les différents moteurs de recherche – et particulièrement Google. Continue reading →


04
fév 10

désinscription à une newsletter: un bon exemple


J’aime beaucoup l’expérience-utilisateur offerte par la fonctionnalité de désinscription telle qu’implémentée par le service de mailing lists « MailChimp » :
Continue reading →