Ergonomie et optimisation
pour les moteurs de recherche (SEO)-
Quand Google lui-même soutient l'utilisabilité
Sophia Antip...
Qui est Use Age ?
Une Communauté professionnelle centrée sur les
usages, le développement de l'ergonomie et le rôle des
fa...
L’approche ergonomique
DCU, Ergonomie des IHM, utilisabilité et User
Experience sont des facettes d’une démarche de
concep...
User Experience
Peter Morville
26/09/2013 4
Findability – « Repérabilité »
Trouver ce que l'on cherche !
1. Le site que l'on cherche parmi tous les autres sites
(aspe...
Cela dépend...
• Des utilisateurs (ex. familiarité avec les moteurs de
recherche)
• De leurs contextes (ex. fixe vs mobili...
Où suis-Je ?
Quel chemin ai-je
parcouru ?
Où puis-je
aller ?
Comment puis-je y
aller ?
Où est l'information
que je cherche...
Le rôle de l'ergonome
Comprendre :
• Qui sont les utilisateurs ?
• Que cherchent-ils ?
• Comment cherchent-ils ? Quelles c...
Ergonomie et SEO : objectifs et moyens
ou Partenaires ?
Adversaires
26/09/2013 9
Qu’est-ce que le SEO ?
26/09/2013 10
• Ensemble de techniques visant à améliorer la visibilité des
sites Web dans les mote...
Pourquoi le SEO est-il si important ?
26/09/2013 11
www.ricardo.ch
(top 5 e-commerce en Suisse)
www.ricardolino.ch
(site j...
… et pourquoi Google ?
26/09/2013 12
www.ricardo.ch www.ricardolino.ch
Parcours des résultats et positionnement
Parcours visuel
en « F »
=
Triangle d’or
du SEO
Ligne de flottaison
26/09/2013 13
Mécanismes ciblés par le SEO
Processus d’indexation
(Crawling + Indexing + Ranking)
Transmission du Page Rank
(Link Juice)...
L’algorithme de classement de Google
Les règles du jeu
• L’algorithme de classement
est secret.
• Les facteurs pris en com...
Facteurs de ranking perçus en 2003
1626/09/2013
Ergonomie & SEO - Recommandations
• Urls simples et signifiantes
• Facilité de repérage et de navigation
• Structure de pa...
Les techniques « classiques » du SEO
• Fichier robots.txt
• XML sitemaps
• Redirections 301
• Réécriture d’Url
• Balises m...
Nouvelles techniques orientées Utilisateurs
26/09/2013 19
Des réponses adaptées aux usages
26/09/2013 20
Vous avez demandé une “pizza” ?
Et une réelle anticipation des besoins
26/09/2013 2121
Ex.1 – Optimiser ses balises meta
26/09/2013 22
Ecrire pour l’utilisateur… pas pour Google !
26/09/2013 23
Titre coupé à 45 caractèresTitre entier de 107 caractères
• Opt...
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é...
Ex.2 – Optimiser sa page d’accueil
26/09/2013 25
Définir un prototype centré sur l’objectif
26/09/2013 26
Penser « Personas » et « Use Cases »
26/09/2013 27
26/09/2013 28
Ex.3 – Optimiser la structure de son site
Définir une structure intelligible
26/09/2013 29
http://www.monsite.com/?rayon=femme&type=chemisiers&taille=38 => Mauvais
...
Utiliser la technique du « Tri par cartes »
26/09/2013 30
Ergonomie et SEO – Toujours compatibles ?
• La vigilance s’impose pour ne pas perdre de vue les
exigences des deux domaine...
3 points clés à retenir
• L’ergonomie du Web a développé ses propres critères de
qualité, notamment celui de repérabilité ...
Réflexion étendue pour l’optimisation Web
26/09/2013 33
SEO
Ergonomie
Rapidité &
Continuité
du Service
Respect
des
Standar...
Merci de votre participation !
Rendez-vous le 14 Novembre 2013…
Sophia Antipolis, 26/09/2013 Powered by
Prochain SlideShare
Chargement dans…5
×

Petit Déj' "Ergonomie et SEO" organisé par Use Age le 26 Septembre 2013

3 054 vues

Publié le

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.

0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
3 054
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
7
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • 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.
  • Petit Déj' "Ergonomie et SEO" organisé par Use Age le 26 Septembre 2013

    1. 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. 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. 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
    4. 4. User Experience Peter Morville 26/09/2013 4
    5. 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. 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. 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. 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. 9. Ergonomie et SEO : objectifs et moyens ou Partenaires ? Adversaires 26/09/2013 9
    10. 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. 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. 12. … et pourquoi Google ? 26/09/2013 12 www.ricardo.ch www.ricardolino.ch
    13. 13. Parcours des résultats et positionnement Parcours visuel en « F » = Triangle d’or du SEO Ligne de flottaison 26/09/2013 13
    14. 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. 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
    16. 16. Facteurs de ranking perçus en 2003 1626/09/2013
    17. 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. 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 !
    19. 19. Nouvelles techniques orientées Utilisateurs 26/09/2013 19
    20. 20. Des réponses adaptées aux usages 26/09/2013 20 Vous avez demandé une “pizza” ?
    21. 21. Et une réelle anticipation des besoins 26/09/2013 2121
    22. 22. Ex.1 – Optimiser ses balises meta 26/09/2013 22
    23. 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. 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 ?
    25. 25. Ex.2 – Optimiser sa page d’accueil 26/09/2013 25
    26. 26. Définir un prototype centré sur l’objectif 26/09/2013 26
    27. 27. Penser « Personas » et « Use Cases » 26/09/2013 27
    28. 28. 26/09/2013 28 Ex.3 – Optimiser la structure de son site
    29. 29. Définir une structure intelligible 26/09/2013 29 http://www.monsite.com/?rayon=femme&type=chemisiers&taille=38 => Mauvais http://www.monsite.com/chemisiers-pour-femme-taille-38 => Plutôt bon http://www.monsite.com/vetements/femmes/chemisiers/taille-38/ => Mieux !
    30. 30. Utiliser la technique du « Tri par cartes » 26/09/2013 30
    31. 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. 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. 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. 34. Merci de votre participation ! Rendez-vous le 14 Novembre 2013… Sophia Antipolis, 26/09/2013 Powered by

    ×