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 :

Avez-vous besoin de préparer votre site aux appareils mobiles?

Comme d’habitude avec internet, la réponse varie selon les cas. Vérifiez donc d’abord:

• que votre public-cible est susceptible d’avoir un usage de votre site via son appareil mobile;
• que vous avez un intérêt à cet effort d’adaptation (effort = ressources = argent / temps / énergie )
• dans quelle mesure ce qui s’affiche sur l’appareil doit être identique au site « desktop » ou plutôt rencontrer un besoin spécifique aux mobiles (ex: trouver des places de parking à proximité, avoir vos heures d’ouverture, et a contrario ne pas charger pleins d’images décoratives gaspillant le crédit telecom de votre visiteur, etc.). Bref, ce point-ci est un sujet de thèse en soi, il est évident que vous avez intérêt à réfléchir à ce que vous allez proposer exactement à vos utilisateurs mobiles-qui sont dans des situations et des motivations fort différentes de la situation « type » de l’utilisateur assis derrière un ordinateur de bureau.

Quelle adresse URL pour votre site mobile?

Une convention semble s’établir pour http://m.votre-nom-de-domaine.tld

Convention n’est pas toujours raison, mais il faut en tout cas tenir compte de la réalité des appareils mobiles: le confort d’encodage y est bien moindre que sur un clavier d’ordinateur complet. De plus, étant en mouvement, l’utilisateur n’a que peu d’attention à donner à une tâche aussi triviale. Autant donc lui faciliter la tâche…

Notez que si votre site vise principalement des visiteurs mobiles, il peut même être judicieux de placer votre site mobile directement accessible via le nom de domaine, et d’utiliser « www » pour la version desktop. Mais j’imagine que c’est un cas de figure encore rare au moment où j’écris ces lignes.

Si mon activité est liée à un lieu physique, géotagguer mon site

C’est un conseil moins souvent -voire jamais- relayé dans les articles sur ce sujet, il me semble pourtant important et fort peu coûteux. Si vous exploitez un magasin, une salle de concert, un café… bref un lieu dans lequel vous recevez le chalant, géotagguer votre site permettra à un utilisateur passant à proximité de votre zone et ayant la fonctionnalité intégrée d’éventuellement se voir afficher des suggestions sur les lieux intéressants à proximité de sa position géographique. Pourquoi pas chez vous?

La procédure est fort simple. Trouvez votre latitude et longitude (par exemple via ce site), puis ajoutez ces deux meta-tags aux pages de votre site (ou à sa template, on est au XIXème siècle no’didjeu) en remplaçant les XX.XXXXX par la latitude, puis la longitude de votre lieu:

<META NAME="ICBM" CONTENT="XXX.XXXXX, XXX.XXXXX">
<META NAME="DC.title" CONTENT="Le nom de votre site, qui s'affichera sur le navigateur mobile">

Cela fait, ajoutez-votre site à la base de données de GeoURL. Finito!

A plus tard pour une prochaine mise à jour!

En tant que designers, nous mettons souvent en place des systèmes qui nous semblent logiques et « couler de source ». Mais, le nez collé sur nos échéances et sur nos contraintes, influencés par notre propre expertise de l’internet, nous pouvons facilement perdre de vue que nous ne sommes jamais (ou quasi jamais) représentatifs des utilisateurs finaux du site que nous concevons. Dès lors ces questions se posent:

• Comment savoir si les utilisateurs cibles d’un site peuvent réaliser les tâches qu’ils souhaitent de la manière qui leur semble la plus efficace et la plus naturelle possible?
• Comment « mesurer » une expérience de manière à pouvoir déceler les éventuels problèmes et émettre des recommandations d’utilisation?

Tels sont les objectifs de la technique d’évaluation de l’expérience utilisateur que je me propose de vous exposer dans cet article.

Ze mission

Il s’agit d’inviter des utilisateurs représentatifs du public visé à naviguer sur le site (ou un prototype du futur site) après lui avoir demandé d’y réaliser certaines tâches. (En moyenne, 1 à 5 utilisateurs-tests par public-cible identifié devraient suffire).

On lui demande également de penser tout haut, d’expliciter à chaque instant ce qu’il est en train de faire ou de chercher à faire.

Son parcours sur le site est enregistré via un logiciel de capture de navigation (« screencast » ou « screen capture » en englishe), un micro (idéalement un micro-casque; la qualité du son est meilleure) et, bonus, une webcam qui permet de lire les expressions de son visage tandis qu’il ou elle navigue. On s’intéresse particulièrement aux émotions (satisfaction, frustration, sentiments de confusion ou d’être « perdu », etc.).

Le kit

Cette technique pose plusieurs exigences :

• avoir un ordinateur, idéalement un portable muni d’une webcam
• avoir un logiciel de capture de navigation performant
• un casque-micro
• développer sa capacité de remise en question et à se mettre dans la peau de l’utilisateur final
• pouvoir « lire entre les clics ».

Personnellement, un petit macbook blanc et silverback constituent l’arme ultime, fiable et performante.

Préparation d’un test utilisateur

1. Déterminer un scénario comprenant la ou les tâches à effectuerInclure toute fonction critique (pouvoir se connecter via un écran de login, pouvoir utiliser le menu de navigation principal de manière à se rendre jusqu’à l’écran testé, etc.)
2. Configurer et tester la configuration matérielle et logicielle
   • vérifier la disponibilité de mémoire RAM et d’espace disque suffisante pour un enregistrement vidéo de 60 minutes.
   • installer le logiciel de capture de navigation : c’est le plus difficile et l’objet principal de ce billet.
     • Sur Mac OS X: la meilleure application à un coût extrêmement raisonnable est Silverback. D’une simplicité enfantine, elle gère à la fois la capture de la navigation et l’enregistrement de la webcam. Lorsque vous rejouez l’enregistrement, les clics sont visualisés comme des petites « ondes » graphiques. D’une simplicité et d’une fiabilité extrêmes; c’est l’outil idéal.
     • Sur Windows: c’est plus compliqué… En plus de Camtasia (payant), en voici deux gratuits:
       • Free Screen Capturer, mais il arrive souvent que la vidéo s’interrompe tandis que le son continue
       • BB FlashBack Express: je ne l’ai pas testé mais les échos que j’en ai eu sont positifs.

Notez qu’il existe des sites offrant ce genre de fonctionnalité (exemple: ScreenToaster parmi d’autres) , mais d’après mon expérience, leur fiabilité est décevante sur de longs enregistrements, tandis que l’exportation du fichier vidéo final est souvent limité.

Le test

Une fois l’utilisateur installé, vérifiez qu’il a bien compris la consigne de « parler tout haut » en lui demandant d’expliquer comment, par exemple, régler la hauteur de sa chaise de bureau. Cela doit donner quelque chose comme ceci:

« Je veux régler la hauteur de l’assise. Je cherche avec ma main droite une manette. Je trouve une manette et je tente de la pousser; le siège descend. J’ajuste la hauteur en me levant, c’est bon, j’y suis ».

Faites-lui également réciter le scénario (les tâches à effectuer).

Enfin, vous pouvez lui poser d’autres questions, du style:

•  » décrivez votre humeur ? »
• « comment vous attendez-vous à réaliser ces tâches ? »
• etc.

Insistez bien sur le fait que ce n’est pas lui qui est testé, mais l’interface et qu’il ne doit donc pas craindre d’être jugé ou moqué. Au contraire, toute difficulté rencontrée est intéressante pour le travail.

Une fois que le test commence, vous vous taisez et observez. N’intervenez pas, afin de ne pas influencer ses choix.

Après le test

Lorsque le test est terminé, demandez-lui de décrire son état émotionnel (satisfait, frustré, de bonne ou mauvaise humeur…) et puis de se lever. Vous couperez l’enregistrement après cela.
Le moment est venu d’analyser le déroulement de la séance et de coucher sur papier les observations faites, ainsi qu’émettre des recommandations d’amélioration.

Voilà, je pense que c’est tout, le reste relève de votre… expérience !

Je ne peux que vous conseiller de tester vos créations: c’est amusant, riche en enseignements et cela va améliorer votre instinct de web designer.

L’idée est simple : une main = 5 doigts. I doigt = 1 souris. Efficience = efficience x 10. Ce qui les amène à parler d’ « interaction bandwidth » que l’on pourrait définir par l’ampleur du vocabulaire interactif.

Et justement, les propositions de vocabulaire interactif du système proposé sont bigrement bien imaginées.

Par contre, j’ai une suggestion à faire à google : si vous me lisez, môssieur Google, pourriez-vous rapidement améliorer cette affreuse pagination qui demande que l’on regarde là où l’on clique, sous peine de faire des aller-retour sur des pages de résultat de recherche déjà visitées? Personnellement, cela m’arrive quasi à chaque fois. Pourquoi? Parce que mes yeux sont occupés à scruter les résultats, et que je clique machinalement pour aller à la page suivante, ne me doutant pas que la flèche se déplace en fonction du nombre de liens directs aux pages de résultat.
J’en viendrais à croire que vous ne voulez pas que l’on aille voir au delà de la première page de résultat…

Le problème

la zone rouge indique la position de la souris après avoir cliqué une première fois sur «suivant». Après ce premier clic, la souris se trouve hors zone active. Elle doit donc se déplacer, ce qui force l’utilisateur à détourner son attention de ce qui l’intéresse vraiment – consulter les résultats.

Cela détruit également la fonction première d’un tel bouton « précédent – suivant »: passer d’une page à l’autre tel un slideshow manuel.

Proposition de solution

Autoload

C’est une fonction de plus en plus à la mode: lorsqu’on arrive en fin de page, une requête ajax est envoyée qui charge le contenu à la suite du contenu existant. Plus besoin de cliquer, on continue à scroller tout simplement! Exemple chez dzone.com

redesign

Redesigner cette pagination pour qu’elle utilise des dimensions fixes, tout simplement. Imagine-t-on un livre dont le numéro de page en bas serait à chaque page à un endroit différent, goddamit ?
Alors môssieur google, smashingmagazine a dédié un article au sujet de la pagination que je vous recommande. D’ailleurs, je l’ai trouvé via votre excellentissime moteur de recherche en tapant: pagination done right.

La morale de cette métaphore est que tout est dans la nuance et sur cette Terre, les nuances, cela compte.

En développement web, la nuance se traduit par une analyse « coût/bénéfices »: on met à plat et l’on compare les avantages et désavantages d’une option sur l’autre, en fonction de la situation, du contexte et surtout du public-cible. C’est cela l’ergonomie: la prise en compte du public-cible, et dans ce cas-ci, de sa maîtrise de l’outil informatique.

De l’usage du target= »_blank »

Le dernier commandement en date: « il ne faut pas utiliser l’attribut target: »_blank ».

situation

espace: monde
époque: juillet 2009
public-cible: dépend du projet

coût

- ne permet pas à l’utilisateur de choisir la fenêtre dans laquelle va s’afficher la page, en forçant l’ouverture du lien sur une nouvelle fenêtre

bénéfices

- ouverture de fichiers de type autre que « html »
- dans une application ajax mal développée, ne perturbe pas l’historique du navigateur pour l’application en question (et il y en a beaucoup)
- de nombreux utilisateurs ne connaissent pas l’usage du bouton central, ou n’ont pas une souris à trois bouton, ou ne connaissent pas la fonction CTRL (POMME sur mac) + Click.

A la lumière de ces éléments, vous pouvez juger si par exemple vous héritez de la maintenance d’un vieux magasin e-commerce de produits d’entretien développé par un amateur d’ajax… amateur, et que votre public cible, ce sont des ménagères de 65 ans avec un équippement informatique digne de mathusalem, alors vous devrez sans doute choisir l’utilisation de l’attribut target.

Si par contre votre public cible est composé essentiellement de développeurs web, vous savez ce qu’il vous reste à faire ….

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.

Cliquer ici pour voir la vidéo.

Les exemples qu’il montre illustrent bien le fait que suivre une démarche ergonomique ne signifie pas se cantonner aux conventions aveuglément. Oui l’expérimentation a toute sa place en design ergonomique; gardez simplement à l’esprit que si vous choisissez cette voie, priorité absolue à l’utilisateur final, rencontrez-le, regardez-le travailler/vivre/faire l’opération concernée, mettez-vous dans sa peau et oubliez votre égo. Et alors peut-être que votre innovation deviendra… la convention de vos concurrents

J’ai montré la vidéo aux étudiants aujourd’hui, ils semblent avoir réagi positivement. Certains vont d’ailleurs battre les trottoirs pour rencontrer les utilisateurs potentiels du site qu’ils doivent réaliser pour la fin de l’année.

source: ted.com

(1) Paul Bennett travaille chez IDEO, ceux qui ont conçu, entre-autre, le treo et le Palm Pilot.

Cela ressemble de plus en plus à une tendance lourde: le clavier , mesdames et messieurs, qu’il soit qwerty ou azerty, est de retour dans le rang des interfaces de commande. Il s’était éteint avec le DOS et ne survivait depuis lors que parmi les tribus des hardcore de la ligne de commandes, reclus pour la plupart dans les réserves linux, tels les derniers des mohicans. Et bien là, il est de retour. Cela a commencé avec les lanceurs d’applications, et particulièrement Quicksilver sur Mac OS X, Launchy ou (ma préférence personnelle) Find & Run Robot sur PC.

Grâce à ces programmes, plus besoin de farfouiller avec sa souris dans son menu Programmes pour lancer cette application dont on connaît très souvent mieux le nom que l’emplacement dans le menu. Alt+ SPACE et hop, vous commencez à taper le nom de l’application et un menu tente de deviner ce que vous cherchez. En moins de cinq lettres en général vous avez le programme que vous cherchiez à la portée de la touche ENTER, qui l’exécute. Probablement plusieurs secondes de gagnées sur une journée, mais surtout, l’esprit n’est plus interrompu par la recherche du programme ce qui résulte en une meilleure fluidité dans la relation homme-machine: cela devient un réflexe, et il m’arrive régulièrement de ne me rendre compte qu’à postériori que je viens de déclencher l’ouverture du programme dont j’ai besoin.

Il n’aura pas fallu attendre longtemps pour voir ce type d’interaction porté sur le web: google Suggest notamment, et l’excellent keyboardr qui reproduit exactement le type de fonctionnalité que Launchy et les autres proposent sur dekstop, mais appliqué à un moteur de recherche généraliste à la Google.

Popularité retrouvée

Pourquoi cette popularité retrouvée du clavier? Xerox, le premier fabricant à proposer un PC incluant la souris moderne, et qui détrôna les OS à ligne de commande type DOS doit se retourner dans sa photocopieuse !

Personnellement, je décèle deux raisons possibles:

• situation de confusion:
  je crois que l’explosion de programmes disponibles plus ou moins gratuitement sur internet a rendu la gestion des logiciels installés sur un ordinateur trop fastidieuse pour l’utilisateur. Résultat: la majorité d’entre nous sifflotons gaiement un « J’installe et puis j’oublie, c’est la vie, c’est la vie ». Les programmes s’accumulent, et l’on n’a pas envie de maintenir constamment à jour son menu programmes, qui devient à plus ou moins long terme un véritable souk.
• généralisation de l’usage du clavier:
  parallèlement, de plus en plus de personnes intègrent l’usage du clavier quotidiennement et deviennent chaque jour plus habiles à tapoter qu’à écrire avec un stylo-bille.

Quant à son arrivée sur le web, je crois que la raison est à la fois conjoncturelle et technique:

• conjoncturelle, avec la montée en puissance des applications web, cherchant elles-même à reproduire la sensation des applications desktop
• technique : le formidable avènement des librairies javascript (prototype, motools, jquery…) a rendu l’implémentation des événements claviers aussi simples que l’implémentation d’un événement « onclick ». Du coup, le coût en temps de l’implémentation étant quasi nul, les développeurs web ont beaucoup moins de réticence à faire en sorte que l’utilisateur final puisse avoir accès aux raccourcis claviers comme sur une application desktop.

Il ne reste plus qu’à implémenter correctement le tag TABINDEX sur les zillions de formulaires en ligne qui n’en tiennent pas compte, mais là, je me dis que je rêve trop fort. < ENTER >

PS: voir également ce plugin jquery HotBox : tentative de menu additionnel à la 3D studio Max, porté sur le web.