Ergonomie Web - Gestalt et web design

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.

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

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!

Fournisseurs de services d’oculométrie

Voici donc deux sites qui proposent des enregistrements en eyetracking de votre site/application/interface pour 30 à 50 USD par utilisateur test.

• GazeHawk
• UserTesting

Si ce genre de service vous intéresse pour votre entreprise, vérifiez notamment que le service permette bien de spécifier les caractéristiques du public cible, et notamment sa localisation géographique: en effet, si un cow-boy américain évalue votre site de vente de véritables pipes d’Ardenne, je ne suis pas certain que la trajectoire de son regard va forcément refléter celui de votre public-cible.
Vu sous cet angle, et si l’on tient également compte du prix, usertesting.com me semble bien plus intéressant que GazeHawk, mais je ne les ai pas encore testés ni l’un ni l’autre.

D’ici à ce qu’une occasion se présente, je les outil dans ma boite à conserve conserve dans ma boîte à outil! Et vous, avez-vous déjà fait appel à ce genre de service? En connaissez-vous de valable en francophonie?

Lecture augmentée

Concrètement, comme vous pouvez le voir sur la vidéo de démonstration ci-dessous, la lecture de certains mots, phrases ou noms peut déclencher l’apparition d’informations complémentaires, de traduction automatique, de notes biographiques, de définitions, d’images et d’effets animés. Vous pouvez, par votre simple regard, savoir comment se prononce un terme. Si le système détecte que vous faites une lecture en diagonale du texte, il atténue la visibilité des mots secondaires pour faire ressortir les mots importants. Lorsque votre regard quitte la page puis revient, une flèche rouge le guide pour retourner là où vous aviez interrompu votre lecture.

La technologie est évidemment prometteuse: quel potentiel en terme de lecture augmentée! Mais il y a évidemment la crainte que cette pseudo-intelligence se retourne contre l’utilisateur pour au final lui donner moins de contrôle (publicités intempestives?).
Or, l’un des attraits qui permet à l’objet « livre » de survivre est justement ce sentiment de contrôle. Le texte imprimé ne se modifie pas, les pages ne se tournent que lorsque j’en ai envie (ou lors d’une bourrasque de vent si je lis dehors ). Ses contraintes sont ses richesses: le livre impose le retrait, l’immersion. Le texte en ligne beaucoup moins mais tout de même… Cela m’énerverait vite d’avoir mon attention attirée par des animations, aussi pertinentes soient-elles. Il y a donc un grand effort de calibrage pour qu’une telle technologie apporte une réelle amélioration à l’expérience de lecture.

A suivre…

• la désinscription se fait en un clic (le lien classique « se désinscrire » vous amène sur une page web confirmant la désinscription
• si vous le souhaitez vous pouvez dire pour quelle raison vous vous désinscrivez
• vous n’avez qu’à sélectionner parmi les options choisies
• vous pouvez si vous le souhaitez, mettre un message personnel.

Peut faire mieux?

• Pourquoi ne pas l’afficher dans la langue de départ (l’email original était en néérlandais)
• Pourquoi ne pas ajouter un lien permettant d’annuler la désinscription ( à partir du moment où j’ai été directement désinscrit, il faut tenir compte des clics impulsifs : l’on clique parfois sur un lien par erreur)

Well done Chimp!

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.

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 !!

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.