Petit Déj' Ergonomie et SEO organisé par Use Age le 26 Septembre 2013 à Sophia Antipolis : "Ergonomie et SEO - Quand Google lui-même soutient l'utilisabilité". Présentation de Carole Chagniat, coordinatrice SEO - Introduction par Catherine Bellino, ergonome et présidente de Use Age.
Use Age - WUD 2011 - 05 - Serious Games - Teresa Colombi
Petit Déj' "Ergonomie et SEO" organisé par Use Age le 26 Septembre 2013
1. Ergonomie et optimisation
pour les moteurs de recherche (SEO)-
Quand Google lui-même soutient l'utilisabilité
Sophia Antipolis, 26/09/2013 Powered by
2. Qui est Use Age ?
Une Communauté professionnelle centrée sur les
usages, le développement de l'ergonomie et le rôle des
facteurs humains
Use Age regroupe des ergonomes experts en
Interaction Homme-Machine et des personnes
intéressées par l’ergonomie
26/09/2013 2
3. L’approche ergonomique
DCU, Ergonomie des IHM, utilisabilité et User
Experience sont des facettes d’une démarche de
conception qui se concentre sur l’utilisateur plutôt que
sur le produit et la technologie sous-jacente.
Le but de l’ergonomie : obtenir des interfaces utilisables
(utilisabilité) :
• Efficaces
• Efficientes
• Satisfaisantes
(Norme ISO 9241-210)
26/09/2013 3
5. Findability – « Repérabilité »
Trouver ce que l'on cherche !
1. Le site que l'on cherche parmi tous les autres sites
(aspect externe)
2. Le contenu que l'on cherche dans le site que l'on a
trouvé (aspect interne)
26/09/2013 5
6. Cela dépend...
• Des utilisateurs (ex. familiarité avec les moteurs de
recherche)
• De leurs contextes (ex. fixe vs mobilité)
• De leurs buts (ex. savoir ce que l'on cherche vs
explorer)
• ...
26/09/2013 6
7. Où suis-Je ?
Quel chemin ai-je
parcouru ?
Où puis-je
aller ?
Comment puis-je y
aller ?
Où est l'information
que je cherche ?
Concrètement...
8. Le rôle de l'ergonome
Comprendre :
• Qui sont les utilisateurs ?
• Que cherchent-ils ?
• Comment cherchent-ils ? Quelles connaissances activent-ils ?...
• Quelles sont leurs stratégies de recherche ? Par exemple search vs
navigation
• Quels repères les aident à reconnaitre et trouver ?
• Comment traitent-ils l'information qu'ils reçoivent ?
• ...
Proposer les solutions :
• Architecture de l'information et de l'interaction
26/09/2013 8
9. Ergonomie et SEO : objectifs et moyens
ou Partenaires ?
Adversaires
26/09/2013 9
10. Qu’est-ce que le SEO ?
26/09/2013 10
• Ensemble de techniques visant à améliorer la visibilité des
sites Web dans les moteurs de recherche
• Cible les résultats organiques ou naturels par opposition au
référencement payant
Convertir en souscriptions
Diriger le traffic pertinent
Etablir une présence
11. Pourquoi le SEO est-il si important ?
26/09/2013 11
www.ricardo.ch
(top 5 e-commerce en Suisse)
www.ricardolino.ch
(site jeune à fort potentiel)
12. … et pourquoi Google ?
26/09/2013 12
www.ricardo.ch www.ricardolino.ch
13. Parcours des résultats et positionnement
Parcours visuel
en « F »
=
Triangle d’or
du SEO
Ligne de flottaison
26/09/2013 13
14. Mécanismes ciblés par le SEO
Processus d’indexation
(Crawling + Indexing + Ranking)
Transmission du Page Rank
(Link Juice)
26/09/2013 14
Parcours
des pages
par les crawlers
Construction
des index
Calcul de
pertinence &
Classement
Affichage des
résultats
15. L’algorithme de classement de Google
Les règles du jeu
• L’algorithme de classement
est secret.
• Les facteurs pris en compte et
leurs coefficients respectifs
varient en permanence.
• Seule l’observation des
résultats donne une idée
des changements apportés.
• Un bon positionnement n’est
jamais acquis. Le travail du SEO
doit être maintenu sur le long
terme.
26/09/2013 15
17. Ergonomie & SEO - Recommandations
• Urls simples et signifiantes
• Facilité de repérage et de navigation
• Structure de page logique et correctement balisée
• Mise en évidence des éléments importants
• Contenus accessibles à tous (textes et images)
• Contenus uniques et clairement identifiables
• Contenus crédibles et de qualité
• Suggestion de contenus similaires
• Rapidité de chargement des pages
• Gestion des erreurs (ré-aiguillage du traffic)
26/09/2013 17
18. Les techniques « classiques » du SEO
• Fichier robots.txt
• XML sitemaps
• Redirections 301
• Réécriture d’Url
• Balises meta et liens relatifs
• Balisage HTML
• Densité des mots clés
• Noms des images et textes alternatifs
• Liens internes
• Liens entrants (backlinks)
26/09/2013 18
... et beaucoup de monitoring !
23. Ecrire pour l’utilisateur… pas pour Google !
26/09/2013 23
Titre coupé à 45 caractèresTitre entier de 107 caractères
• Optimiser le début du titre pour les onglets et les signets
• Insérer la marque (au début ou à la fin) selon l’objectif
• Ajuster la longueur en fonction de la zone visible (env. 500px)
• Le titre influence le classement, la description influence le clic.
• Attention aux rebonds ! (Pogo-Sticking effect)
24. Vérifier ses choix avec des « Surveys »
26/09/2013 24
• Demander de noter les metas sur une échelle de 1 à 5 (ou 7)
Compréhensible ?
Attractif ?
Adapté ? (à un scénario)
etc.
• Demander d’indiquer une préférence entre plusieurs choix:
Parmi ces couples titre+description, indiquez celui qui vous semble le plus
compréhensible / attractif / adapté / etc.
• Poser des questions ouvertes:
Que pensez-vous trouver en cliquant sur ce résultat ?
Vous avez cliqué sur ce résultat. Etes-vous satisfait du site qui vous est présenté ?
Si non, pourquoi ?
31. Ergonomie et SEO – Toujours compatibles ?
• La vigilance s’impose pour ne pas perdre de vue les
exigences des deux domaines.
• Des compromis peuvent s’avérer nécessaires.
• Intégrer les deux approches nécessite une conception plus
complexe et un développement plus coûteux.
26/09/2013 31
32. 3 points clés à retenir
• L’ergonomie du Web a développé ses propres critères de
qualité, notamment celui de repérabilité (findability) en
lien direct avec la fonction de recherche d’information.
• L’évolution des standards SEO tend vers une intégration
toujours plus grande des problématiques ergonomiques
et cognitives. L’optimisation par mot-clés a cédé la place
à des techniques ancrées sur la satisfaction des usagers.
• Ergonomie et SEO sont parfaitement compatibles. Leur
utilisation combinée peut impliquer des contraintes
supplémentaires, mais elle constitue une avancée réelle
vers une expérience utilisateur optimale.
26/09/2013 32
33. Réflexion étendue pour l’optimisation Web
26/09/2013 33
SEO
Ergonomie
Rapidité &
Continuité
du Service
Respect
des
Standards
Web
Sécurité &
Protection
des
Données
Approche
Marketing
Qualité
des
Contenus
Aspects
Business
Aspects
Techniques
34. Merci de votre participation !
Rendez-vous le 14 Novembre 2013…
Sophia Antipolis, 26/09/2013 Powered by
Notes de l'éditeur
Explication des visuelsA gauche : (source http://tinyurl.com/pjsxc9r)Découpagegrossier d’’une page de résultats entre SEO (référencementnaturel) et SEM (référencementpayant). Le but à terme pour un site qui finance le SEM est de migrervers la zone SEO pour minimisersescoûts.A droite: Fournirunevisiblilitén’est pas la finalité du SEO. Les objectifscibléssont en effet :Améliorerla visibilité d’un site sur les moteurs de rechercheAugmenter la quantité et la qualité du traffic entrantConvertirce traffic en actions/souscriptions au service proposé
Explication des visuels(source Google Analytics)La moitié du traffic entrant d’un site e-commerce de taillemoyenne à importanteprovient des moteurs de recherche (traffic organique).
Explication des visuelsEn haut : (source Google Analytics) La grandemajorité du traffic organiqueprovient de Google.En bas : (source http://tinyurl.com/pw7aqum) Répartitiondes parts de marché entre les différentsmoteurs de recherche en 2011. Excepté en Chine et Russie (préférencenationale oblige) Google estlargement en tête. La tendance se maintientaujourd’hui, mêmesiMicrosoft Bing gagnedu terrain.
Explication du visuel(source http://tinyurl.com/ou3eopw)Les étudesd’eye-tracking ontdémontréquel’utilisateur ne regardaitquepartiellement les résultats de recherche.Son regard sur la page parcourtuneforme de “F”.Les positions ciblées par ordredécroissant :Dans le “Triangle d’or” (top 3) Sur la ligne de flotaison En première page (top 10)Parmi les 3 premières pages (top 30)
Explication des visuelsA gauche :Le processusd’indexationpeut se résumer à quatreétapes :1. Les pages Web sontcrawlées, autrementditvisitées par un robot qui en scanneleurcontenu et retient les informationspertinentes. Le crawl s’opère de site en site, par l’intermédiaire des backlinks, ou à l’intérieur d’un même site gâce aux liens internes.2. En fonction des mots clésrencontrés, le moteurconstruit un index sémantique (chaque page y estassociée à uneliste de mots) puis un index inversé (chaque mot estassocié à plusieurs pages).3. Lorsqu’unerequêteestsoumise au moteur, celui-ci utiliseses index ainsiqu’unalgorithme de calcul pour sélectionner et classer les pages les plus pertinentes.4. Les résultatsorganiquessontaffichéssuivant le classementeffectué, éventuellement en association avec des résultatspayants.A droite: (source http://tinyurl.com/ojm94se)Le Page Rank se transmet entre deux sites et au sein d’un même site, à travers les liens parcourus. Si une page contientplusieurs liens, son Page Rank sera dilué entre chacune des pages liées. L’ajout de liens surune page populairepermetainsi de “booster” d’autres pages, qui peinent à se classer dans les pages de résultats. A noterquel’utilisationd’instructionsspécifiques (nofollow, noindex) bloque la transmission du Page Rank.
Explication des visuelsEn haut à droite: (source http://tinyurl.com/png6ppx)Au fil du temps le poids des critères de classementévolue. En hausse : l’autorité du nom de domaine et les signauxutilisateurs (apparus en 2002)En baisse : le page Rank (notation spécifique à chaque page) et les ancres des liens qui y pointent)En bas à droite: Googlepublierégulièrement des “updates” de son algorithme. Les plus marquantesdepuis 2010 : Caffeine” (rapidité de crawl et d’indexation accrue)“Panda” (exigencesqualitatives accrues)“Penguin” (vigilencesur les liens accrue)“Venice” (avènement de la géolocalisation)
Explication du visuel(source : http://tinyurl.com/pb3psf5)D’après un sondageauprès de 120 professionnelsreconnus du SEO, la lisibilité du contenu, l’ergonomie et la conception de l’interfacesont des critères de classement non négligeables. Leur importance serait stable, voire en augmentation comparée à 2012.
Explication du visuelOuvrage de référence de S. Krug sur l’ergonomie du Web (titre original : "Don’tLet Me Think ")Paradoxalement, les utilisateurs en quête d’information rechignent à chercher. Ils soumettent leurs requêtes au moteur et attendent en réponse un guidage optimal jusqu’à l’information pertinente.
Explication du visuelLes techniques SEO se divisent en White Hat(référencementrégulier) etBlack Hat (référencementabusif). Les techniques Black Hat étantefficaces à court termemaisrisquéessur le moyen et le long terme, nous ne recommandonsicique des techniques White Hat.
Explication des visuelsEn haut à gauche : Différents types de rich-snippets (1. évaluation + prix ; 2. auteur ; 3. vidéo)En bas à gauche : Eléments de géolocalisation (rich-snippets, Google Maps)En haut à droite: Encart Google ShoppingEn bas à droite: Utilisation des réseauxsociauxparfoisappelée SMO (Social Media Optimization)
Explication des visuelsA gauche : anticipation d’un besoind’apprentissageAu milieu : anticipation d’une intention d’achat
Explication du visuelUnerequête non explicite ne reçoit pas de suggestions directe, mais Google anticipeiciplusieurs types de besoins :Localisation d’un restaurantRecettes de cuisineInformationsgénériquesOn note la présence de liens commerciauxassocié au mot-clé “pizza” tout en haut des résultats.
Explication des visuelsEn haut :La présenceou la position de la marque dans le Titredépendra de l’objectif de la page courante.En bas, à gauche : (source http://tinyurl.com/7m4qqc3)Par le passé on évoquaitunelongueurmaximale pour le titre de 64-68 caractères. En fait ce qui importeraitceserait la longueur en pixels (dépendante de la chasse des caractères), qui doitcorrespondre à la largeur de la zone visible. 500ps serait la longueurrecommandée.
Explication duvisuelLes défauts de l’ancienne interface APCE :Excèsd’information, sans réellehierarchisationPlusieursstratégiesproposéesmais pas de réelguidageChoix des visuels et code couleurpeuappropriés
Explication du visuel(source http://tinyurl.com/2b9zs6h)Dixrèglesdoiventêtrerespectées pour réussirune landing page :Le titre de la page doit être visible et compréhensible immédiatementLes entêtes de section doivent être clairs et concisL’orthographe et la grammaire doivent être impeccableUtiliser des indicateurs de confianceMettre en évidence le call-to-action (appel à l’action)Mettre en évidence le bouton d’action associéAfficher des hyperliens pertinentsRenforcer le contenu textuel par des images et/ou des vidéos adaptéesSe focaliser sur la zone visible10. Toujours tester !Différentsniveauxde maquettesserontnécessairesBas niveau (pour tester l’architecture de l’information)Moyenniveau (pour tester la manipulation de l’interface)Haut niveau (pour tester l’impactdes couleurs et des visuels)Avec en parallèle (pour le SEO) un template HTML pour tester l’outlining, l’utilisation des mots clés, le positionnement des liens, etc.
Explication du visuel(Source : http://www.apce.com/)Les améliorationsapportées :Informationsaérées et lisiblesDécoupageclairen 5 profilsd’utilisationBienqueprobablementissusd’unebanqued’images, les photos sont plus représentatives et contribuent à la compréhension ; le code couleur se fait discret (entête de sections uniquement, à transposer au reste du site)
Explication du visuelA l’image dece plan du réseau RER Ile-de-France, une structure trop touffueouinsuffisammentbaliséepeutrebuter les utilisateursou les “perdre” dansleurrecherched’information.
Explication des visuelsEn haut à gauche : Structure de site en évolution ; plusieurs structures sontpossiblesselon le volume du site et le type d’informationprésenté (plus de structures ici : http://tinyurl.com/qjh8ujy).En bas à gauche : Toujoursétayer la structure par un fild’Ariane (breadcrumb) contenant des liens vers les pages parentes.A droite: Unefois la structure comprise par les robots, l’affichagesur les pages de résultatspeutévoluer pour un meilleurguidage de l’utilisateur.
Explication du visuel(source http://tinyurl.com/p4crb63)Afficher le titre de chaque page surune carte et demander à des utilisateurs (représentatifs de l’audienceciblée) de les regrouper et/ouhierarchisersuivantleurpropreschémacognitifpermet de déterminerune structure plus “parlante”.
Explication des visuelsA gauche : les solutions de responsive design (ex. Bootstrap) et surtout les applications DHTML (ex. Sencha Touch) améliorent le confortd’utilisationsur mobile, maisellespeuventgênerl’indexation du contenu.Au milieu, haut : la présentation des listings en pages multiples (préférable pour les listings longs) pose souvent des problèmes de duplication ; l’utilisation de liens non-HTML entre pages peutaussientraver le processus de crawling.Au milieu, bas : L’utilisationd’Ajax pour accélérer le chargement et fluidifierl’expérienceutilisateurlimitel’accès au contenu pour les crawlers.A droite: La duplication volontaire des produits pour faciliterl’identification par l’utilisateur (ex. une fiche par couleur) peutêtrepénalisante pour le SEO.
Explication du visuelL’optimisation d’un site Web requiert la collaboration de spécialitéshabituellementdistinctes, mais en fait complémentaires. Uneséparation Business / Technique trop tranchéen’est pas recommandée car l’ergonomie en particulier se situe à la jonction des deuxdomaines.