petit déj' "ergonomie et seo" organisé par use age le 26 septembre 2013

Prsentation PowerPoint

Ergonomie et optimisation pour les moteurs de recherche (SEO) - Quand Google lui-mme soutient l'utilisabilitSophia Antipolis, 26/09/2013

Powered by

Qui est Use Age ?Une Communaut professionnelle centre sur les usages, le dveloppement de l'ergonomie et le rle des facteurs humains

Use Age regroupe des ergonomes experts en Interaction Homme-Machine et des personnes intresses par lergonomie26/09/20132

Lapproche ergonomiqueDCU, Ergonomie des IHM, utilisabilit et User Experience sont des facettes dune dmarche de conception qui se concentre sur lutilisateur plutt que sur le produit et la technologie sous-jacente.Le but de lergonomie : obtenir des interfaces utilisables (utilisabilit) :EfficacesEfficientesSatisfaisantes(Norme ISO 9241-210)

26/09/20133

User Experience

Peter Morville26/09/20134

Prenons la findability comme un aspect de l'UX illustrant tout particulirement les liens possibles entre ergonomie et SEO4

Findability Reprabilit

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/20135

Cela dpend...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/20136

O suis-Je ?Quel chemin ai-je parcouru ?O puis-je aller ?Comment puis-je y aller ?O est l'information que je cherche ?Concrtement...

La reprabilit se dcline en un ensemble de questions auxquelles une interface ergonomique doit donner des rponses (efficacit) de la faon la plus directe et simple possible (efficience).Ces rponses prennent par exemple la forme de : titres explicites, fils d'ariane (breadcrumb), identification visuelle de la rubrique active, organisation claire et bien hirarchise de l'information, etc.7

Le rle de l'ergonomeComprendre :Qui sont les utilisateurs ?Que cherchent-ils ?Comment cherchent-ils ? Quelles connaissances activent-ils ?... Quelles sont leurs stratgies de recherche ? Par exemple search vs navigationQuels repres les aident reconnaitre et trouver ?Comment traitent-ils l'information qu'ils reoivent ?...Proposer les solutions :Architecture de l'information et de l'interaction

26/09/20138

Ergonomie et SEO : objectifs et moyensou Partenaires ? Adversaires26/09/20139

Partenaires par rapport l'objectif de reprabilit, avec des nuances cependant (SEO : plutt externe et Ergonomie : plutt interne)Et par rapport aux moyens ?9

Quest-ce que le SEO ?26/09/201310Ensemble de techniques visant amliorer la visibilit des sites Web dans les moteurs de rechercheCible les rsultats organiques ou naturels par opposition au rfrencement payant

Explication des visuels

A gauche : (source http://tinyurl.com/pjsxc9r)Dcoupage grossier dune page de rsultats entre SEO (rfrencement naturel) et SEM (rfrencement payant). Le but terme pour un site qui finance le SEM est de migrer vers la zone SEO pour minimiser ses cots.

A droite : Fournir une visiblilit nest pas la finalit du SEO. Les objectifs cibls sont en effet :Amliorer la visibilit dun site sur les moteurs de rechercheAugmenter la quantit et la qualit du traffic entrantConvertir ce traffic en actions/souscriptions au service propos10

Pourquoi le SEO est-il si important ?26/09/201311www.ricardo.ch(top 5 e-commerce en Suisse)www.ricardolino.ch(site jeune fort potentiel)

Explication des visuels(source Google Analytics)

La moiti du traffic entrant dun site e-commerce de taille moyenne importante provient des moteurs de recherche (traffic organique).11

et pourquoi Google ?26/09/201312

www.ricardo.chwww.ricardolino.ch


En haut : (source Google Analytics) La grande majorit du traffic organique provient de Google.

En bas : (source http://tinyurl.com/pw7aqum) Rpartition des parts de march entre les diffrents moteurs de recherche en 2011. Except en Chine et Russie (prfrence nationale oblige) Google est largement en tte. La tendance se maintient aujourdhui, mme si Microsoft Bing gagne du terrain.

12

Parcours des rsultats et positionnement

Parcours visuelen F =Triangle dor du SEOLigne de flottaison26/09/201313

Explication du visuel(source http://tinyurl.com/ou3eopw)

Les tudes deye-tracking ont dmontr que lutilisateur ne regardait que partiellement les rsultats de recherche.Son regard sur la page parcourt une forme de F.

Les positions cibles par ordre dcroissant : Dans le Triangle dor (top 3) Sur la ligne de flotaison En premire page (top 10) Parmi les 3 premires pages (top 30)13

Mcanismes cibls par le SEOProcessus dindexation(Crawling + Indexing + Ranking)Transmission du Page Rank(Link Juice)26/09/201314


A gauche :Le processus dindexation peut se rsumer quatre tapes :1. Les pages Web sont crawles, autrement dit visites par un robot qui en scanne leur contenu et retient les informations pertinentes. Le crawl sopre de site en site, par lintermdiaire des backlinks, ou lintrieur dun mme site gce aux liens internes.2. En fonction des mots cls rencontrs, le moteur construit un index smantique (chaque page y est associe une liste de mots) puis un index invers (chaque mot est associ plusieurs pages).3. Lorsquune requte est soumise au moteur, celui-ci utilise ses index ainsi quun algorithme de calcul pour slectionner et classer les pages les plus pertinentes.4. Les rsultats organiques sont affichs suivant le classement effectu, ventuellement en association avec des rsultats payants.

A droite : (source http://tinyurl.com/ojm94se)Le Page Rank se transmet entre deux sites et au sein dun mme site, travers les liens parcourus. Si une page contient plusieurs liens, son Page Rank sera dilu entre chacune des pages lies. Lajout de liens sur une page populaire permet ainsi de booster dautres pages, qui peinent se classer dans les pages de rsultats. A noter que lutilisation dinstructions spcifiques (nofollow, noindex) bloque la transmission du Page Rank.14

Lalgorithme de classement de GoogleLes rgles du jeu

Lalgorithme de classement est secret.Les facteurs pris en compte et leurs coefficients respectifs varient en permanence. Seule lobservation des rsultats donne une ide des changements apports.Un bon positionnement nest jamais acquis. Le travail du SEO doit tre maintenu sur le long terme.

26/09/201315


En haut droite : (source http://tinyurl.com/png6ppx)Au fil du temps le poids des critres de classement volue. En hausse : lautorit du nom de domaine et les signaux utilisateurs (apparus en 2002)En baisse : le page Rank (notation spcifique chaque page) et les ancres des liens qui y pointent)

En bas droite : Google publie rgulirement des updates de son algorithme. Les plus marquantes depuis 2010 : Caffeine (rapidit de crawl et dindexation accrue)Panda (exigences qualitatives accrues)Penguin (vigilence sur les liens accrue)Venice (avnement de la golocalisation)

15

Facteurs de ranking perus en 2003

1626/09/2013

Explication du visuel(source : http://tinyurl.com/pb3psf5) Daprs un sondage auprs de 120 professionnels reconnus du SEO, la lisibilit du contenu, lergonomie et la conception de linterface sont des critres de classement non ngligeables. Leur importance serait stable, voire en augmentation compare 2012.16

Ergonomie & SEO - Recommandations Urls simples et signifiantesFacilit de reprage et de navigationStructure de page logique et correctement baliseMise en vidence des lments importantsContenus accessibles tous (textes et images)Contenus uniques et clairement identifiablesContenus crdibles et de qualitSuggestion de contenus similairesRapidit de chargement des pagesGestion des erreurs (r-aiguillage du traffic)

26/09/201317

Explication du visuel

Ouvrage de rfrence de S. Krug sur lergonomie du Web (titre original :"Dont Let Me Think")Paradoxalement, les utilisateurs en qute dinformation rechignent chercher. Ils soumettent leurs requtes au moteur et attendent en rponse un guidage optimal jusqu linformation pertinente.17

Les techniques classiques du SEOFichier robots.txtXML sitemapsRedirections 301Rcriture dUrlBalises meta et liens relatifsBalisage HTML Densit des mots cls Noms des images et textes alternatifsLiens internes Liens entrants (backlinks)26/09/201318

... et beaucoup de monitoring !


Les techniques SEO se divisent en White Hat (rfrencement rgulier) et Black Hat (rfrencement abusif). Les techniques Black Hat tant efficaces court terme mais risques sur le moyen et le long terme, nous ne recommandons ici que des techniques White Hat.18

Nouvelles techniques orientes Utilisateurs26/09/201319


En haut gauche : Diffrents types de rich-snippets (1. valuation + prix ; 2. auteur ; 3. vido)En bas gauche : Elments de golocalisation (rich-snippets, Google Maps)En haut droite : Encart Google ShoppingEn bas droite : Utilisation des rseaux sociaux parfois appele SMO (Social Media Optimization)19

Des rponses adaptes aux usages26/09/201320Vous avez demand une pizza ?


A gauche : anticipation dun besoin dapprentissageAu milieu : anticipation dune intention dachat20

Et une relle anticipation des besoins26/09/201321

21


Une requte non explicite ne reoit pas de suggestions directe, mais Google anticipe ici plusieurs types de besoins :Localisation dun restaurantRecettes de cuisineInformations gnriques

On note la prsence de liens commerciaux associ au mot-cl pizza tout en haut des rsultats.21

Ex.1 Optimiser ses balises meta26/09/201322

22

Ecrire pour lutilisateur pas pour Google !26/09/201323

Attention aux rebonds !

Titre coup 45 caractres

Titre entier de 107 caractres

Optimiser le dbut du titre pour les onglets et les signetsInsrer la marque (au dbut ou la fin) selon lobjectif 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)


En haut : La prsence ou la position de la marque dans le Titre dpendra de lobjectif de la page courante.

En bas, gauche : (source http://tinyurl.com/7m4qqc3)Par le pass on voquait une longueur maximale pour le titre de 64-68 caractres. En fait ce qui importerait ce serait la longueur en pixels (dpendante de la chasse des caractres), qui doit correspondre la largeur de la zone visible. 500ps serait la longueur recommande.23

Vrifier ses choix avec des Surveys 26/09/201324Demander de noter les metas sur une chelle de 1 5 (ou 7)Comprhensible ? Attractif ? Adapt ? ( un scnario) etc.

Demander dindiquer une prfrence entre plusieurs choix:Parmi ces couples titre+description, indiquez celui qui vous semble le plus comprhensible / attractif / adapt / etc.

Poser des questions ouvertes:Que pensez-vous trouver en cliquant sur ce rsultat ?Vous avez cliqu sur ce rsultat. Etes-vous satisfait du site qui vous est prsent ? Si non, pourquoi ?

24

Ex.2 Optimiser sa page daccueil26/09/201325


Les dfauts de lancienne interface APCE :Excs dinformation, sans relle hierarchisationPlusieurs stratgies proposes mais pas de rel guidage Choix des visuels et code couleur peu appropris 25

Dfinir un prototype centr sur lobjectif26/09/201326

Explication du visuel (source http://tinyurl.com/2b9zs6h)

Dix rgles doivent tre respectes pour russir une landing page :Le titre de la page doit tre visible et comprhensible immdiatementLes enttes de section doivent tre clairs et concisLorthographe et la grammaire doivent tre impeccableUtiliser des indicateurs de confianceMettre en vidence le call-to-action (appel laction)Mettre en vidence le bouton daction associAfficher des hyperliens pertinentsRenforcer le contenu textuel par des images et/ou des vidos adaptesSe focaliser sur la zone visible10. Toujours tester !

Diffrents niveaux de maquettes seront ncessairesBas niveau (pour tester larchitecture de linformation)Moyen niveau (pour tester la manipulation de linterface)Haut niveau (pour tester limpact des couleurs et des visuels)

Avec en parallle (pour le SEO) un template HTML pour tester loutlining, lutilisation des mots cls, le positionnement des liens, etc.

26

Penser Personas et Use Cases 26/09/201327

Explication du visuel(Source : http://www.apce.com/)

Les amliorations apportes :Informations ares et lisiblesDcoupage clair en 5 profils dutilisationBien que probablement issus dune banque dimages, les photos sont plus reprsentatives et contribuent la comprhension ; le code couleur se fait discret (entte de sections uniquement, transposer au reste du site)27

26/09/201328Ex.3 Optimiser la structure de son site


A limage de ce plan du rseau RER Ile-de-France, une structure trop touffue ou insuffisamment balise peut rebuter les utilisateurs ou les perdre dans leur recherche dinformation.28

Dfinir une structure intelligible26/09/201329

http://www.monsite.com/?rayon=femme&type=chemisiers&taille=38 => Mauvaishttp://www.monsite.com/chemisiers-pour-femme-taille-38 => Plutt bonhttp://www.monsite.com/vetements/femmes/chemisiers/taille-38/=> Mieux !


En haut gauche : Structure de site en volution ; plusieurs structures sont possibles selon le volume du site et le type dinformation prsent (plus de structures ici : http://tinyurl.com/qjh8ujy).

En bas gauche : Toujours tayer la structure par un fil dAriane (breadcrumb) contenant des liens vers les pages parentes.

A droite : Une fois la structure comprise par les robots, laffichage sur les pages de rsultats peut voluer pour un meilleur guidage de lutilisateur.29

Utiliser la technique du Tri par cartes26/09/201330

Explication du visuel(source http://tinyurl.com/p4crb63)

Afficher le titre de chaque page sur une carte et demander des utilisateurs (reprsentatifs de laudience cible) de les regrouper et/ou hierarchiser suivant leur propre schma cognitif permet de dterminer une structure plus parlante.30

Ergonomie et SEO Toujours compatibles ?La vigilance simpose pour ne pas perdre de vue les exigences des deux domaines.

Des compromis peuvent savrer ncessaires.

Intgrer les deux approches ncessite une conception plus complexe et un dveloppement plus coteux.

26/09/201331


A gauche : les solutions de responsive design (ex. Bootstrap) et surtout les applications DHTML (ex. Sencha Touch) amliorent le confort dutilisation sur mobile, mais elles peuvent gner lindexation du contenu.

Au milieu, haut : la prsentation des listings en pages multiples (prfrable pour les listings longs) pose souvent des problmes de duplication ; lutilisation de liens non-HTML entre pages peut aussi entraver le processus de crawling.

Au milieu, bas : Lutilisation dAjax pour acclrer le chargement et fluidifier lexprience utilisateur limite laccs au contenu pour les crawlers.

A droite : La duplication volontaire des produits pour faciliter lidentification par lutilisateur (ex. une fiche par couleur) peut tre pnalisante pour le SEO.

31

3 points cls retenirLergonomie du Web a dvelopp ses propres critres de qualit, notamment celui de reprabilit (findability) en lien direct avec la fonction de recherche dinformation.

Lvolution des standards SEO tend vers une intgration toujours plus grande des problmatiques ergonomiques et cognitives. Loptimisation par mot-cls a cd la place des techniques ancres sur la satisfaction des usagers.

Ergonomie et SEO sont parfaitement compatibles. Leur utilisation combine peut impliquer des contraintes supplmentaires, mais elle constitue une avance relle vers une exprience utilisateur optimale.

26/09/201332

32

Rflexion tendue pour loptimisation Web26/09/201333Aspects BusinessAspects Techniques


Loptimisation dun site Web requiert la collaboration de spcialits habituellement distinctes, mais en fait complmentaires. Une sparation Business / Technique trop tranche nest pas recommande car lergonomie en particulier se situe la jonction des deux domaines.33

Merci de votre participation !Rendez-vous le 14 Novembre 2013Sophia Antipolis, 26/09/2013

Powered by

34

petit déj' "ergonomie et seo" organisé par use age le 26 septembre 2013

Documents