SlideShare une entreprise Scribd logo
CESI SEO, CONTENUS & ERGONOMIE
Arnaud BRIAND - 4 et 5 février 2013
REFERENCEMENT &
MANAGEMENT DES CONTENUS
3
Les taux de clics dans Google selon Optify
Source : Etude OPTIFY
REFERENCEMENT & MANAGEMENT DES CONTENUS
L’étude OPTIFY de 2011 montre que le 1er résultat
capte 36,4% des clics.
4
Les taux de clics dans Google selon WordStream
Source : L’étude WordStream souligne que 64,6% des clics concernent les liens sponsorisés AdWords contre
35,4% pour les liens naturels.
REFERENCEMENT & MANAGEMENT DES CONTENUS
Les 3 premiers résultats
captent 41,1% des clics.
Le 1er résultat naturel
capte 8,9% des clics.
5
Les taux de clics dans Google selon Ian Howells
Source : www.seoinphiladelphia.com/wp-content/uploads/2011/09/ctr-data-ian-howells-sept-2011.pdf
REFERENCEMENT & MANAGEMENT DES CONTENUS
52,5% de CTR
des résultats naturels
13% de CTR
des liens sponsorisés
6
Comment fonctionne un moteur de recherche ?
Un robot d’indexation
(araignée, crawler), se
charge de « visiter » les
pages du web.
Un index est une
gigantesque base de
données actualisée
régulièrement, parfois
même plusieurs fois par
jour. Google disposerait
d’un million de serveurs
répartis sur 32 sites*.
Un système de
traitement des requêtes
ou index d’exécution, qui
relie l’arrière boutique
(index) au guichet
(l’interface Google
depuis le navigateur).
1 2 3
La révolution Google - John Battelle
* Chiffre non confirmé par Google. Lien vers la source de l’image.
REFERENCEMENT & MANAGEMENT DES CONTENUS
7
Le référencement, ça se construit * patiemment ...
* Une e-réputation, ça ne se nettoie pas, ça se construit. (Spintank)
La marque a
besoin d’une
identité.
Autres leviers :
✓ AdWords
✓ Display
✓ Réseau de contenu
✓ Remarketing (Criteo,
Google)
✓ Emailing
✓ Newsletter
✓ Facebook Ads
✓ Affiliation
REFERENCEMENT & MANAGEMENT DES CONTENUS
8
Les 3 grandes familles de critères
Technique & sémantique
✓ Construction du site
(HTML5 et microdata) et
performance technique
✓ Domaining (brand)
✓ Ancienneté du nom
de domaine
✓ TITLE navigateur et
métadonnée Description
✓ URLs
✓ Balises de titres Hx
✓ Attributs ALT
✓ Maillage interne
Editorial
✓Sélection des mots
clés
✓ Robustesse de la
structuration et IA
✓ Saupoudrage
d’occurrences clés
✓ Nommage des
rubriques
✓ Animation éditoriale
et fréquence
d’actualisation (content
excellence)
Réputation
✓Nombre de liens
référents (backlinks)
✓ Qualité des liens
référents (backlinks)
✓ Variété des backlinks
✓ Qualité des sites
référents
✓ Régularité et
pérennité du maillage
TRUST RANK, PAGE
RANK & AUTHOR RANK
REFERENCEMENT & MANAGEMENT DES CONTENUS
✓ Socialisation (likes, ratings, reviews, followers, etc.)
9
LE CONCEPT DE LANDING PAGE.
10
Source : Eric Smith - Ex-CEO de Google / * cesspool = fosse à purin
« Internet is a cesspool* where false information thrives.
Brands are the solution, not the problem. Brands are how
you sort out of the cesspool. »
La marque est la solution ...
www.hotel-nantes.fr ?
REFERENCEMENT & MANAGEMENT DES CONTENUS
11
Source : www.webmetricsguru.com (2 mai 2012)
La marque est la solution ...
« People use SEO to compensate for a lack of branding, or simply having not
invested enough in branding ».
REFERENCEMENT & MANAGEMENT DES CONTENUS
12
A QUEL MOMENT INJECTER LA REFLEXION SEO DANS
LA CHAÎNE DE PRODUCTION ?
13
Le référencement, on verra à la fin.
Schéma sur une idée de David Marbac (www.davidmarbac.com/blog/)
Etudes amont / IA / UX & Contenu / Design / Intégration (RWD) /
Développement (avec plan de marquage) / Intégration ou mise en
scène des contenus / Recettage
SEO
Le SEO est un meneur de jeu au service de l’IA, de l’UX
et de la content strategy.
REFERENCEMENT & MANAGEMENT DES CONTENUS
14
Source : Jeffrey Zeldman (www.zeldman.com)
Content first !? Content as the absolute priority.
« Content precedes design. Design in the absence of
content is not design, it’s decoration ».
REFERENCEMENT & MANAGEMENT DES CONTENUS
15
QUEL EST LE TAMIS EDITORIAL DU SITE ?
BRAINSTORMING / GOOGLE KEYWORD TOOL / WA
REFERENCEMENT & MANAGEMENT DES CONTENUS
16
Ce fichier est situé à la racine.
Il est présent et bien renseigné
avec les deux lignes importantes
ci-dessous :
User-agent: *
Sitemap: http://www.nomdusite.com/
siteindex.xml
Le fichier sitemap.xml est situé
également à la racine.
Il peut être nommé avec un autre
nom.
Outil : www.xml-sitemaps.com
Le fichier robots.txt Le fichier sitemap.xml
Les fichiers robots.txt et sitemap.xml
REFERENCEMENT & MANAGEMENT DES CONTENUS
17
La qualité ergonomique des URLs
Source : Des URL « tout-terrain », courtes et conceptuelles (EPOKHE)
L’URL représente un détail dans les optimisations « on-site ». Pour obtenir
une qualité ergonomique, nous les voulons :
✓ « tout-terrain »
✓ conceptuelles
REFERENCEMENT & MANAGEMENT DES CONTENUS
REFERENCEMENT & MANAGEMENT DES CONTENUS18
Supprimer les caractères spéciaux (!, ?, %) et les espaces
Supprimer les niveaux de pages inutiles
Supprimer les stopwords (a, de, du, des, ou, et, en, les, la, le, l, d, un,
une)
Supprimer si possible les extensions (.asp, .html, .php)
Supprimer les majuscules
Des URLs conceptuelles et « tout-terrain » qui restent inchangées au
gré des refontes à périmètre (IA) constant.
1
2
3
4
5
Des URLs de pages « tout-terrain »
19
Le filtrage des URLs de pages dans GA
REFERENCEMENT & MANAGEMENT DES CONTENUS
Source : CAIRN - Fabricant de structures gonflables
L’étiquette méta title
20
Les étiquettes de page
Elle doit être composée d’environ 65 à 70
signes (en fonction de l’usage de certaines
lettres) pour éviter d’être tronquée dans les
résultats des moteurs.
Sa capacité à inviter l’internaute à passer à
l’action sera également réduite.
La description ne devra pas dépasser les 150
signes. Au travers de ce petit texte vous devez
séduire l’internaute et lui présenter
directement des éléments différenciateurs.
Votre étiquette doit faire passer à l’action.
Autour de vous, il y a au moins 9 concurrents.
L’étiquette méta description
REFERENCEMENT & MANAGEMENT DES CONTENUS
21
La rédaction du titre navigateur et de la description
65
150
La présence de mots clés dans le titre au premier chef, la
description doit apporter un complément d’information.
Des mots clés positionnés en amont de la balise de titre
navigateur ?
1
1
REFERENCEMENT & MANAGEMENT DES CONTENUS
22
Que dit WordPress ?
2
1
Titre = 70 signes
Description = 156 signes
1
2
REFERENCEMENT & MANAGEMENT DES CONTENUS
23
Les liens de site naturels et payants
REFERENCEMENT & MANAGEMENT DES CONTENUS
24
La complémentarité orientée sur la tâche
REFERENCEMENT & MANAGEMENT DES CONTENUS
1. Titre AdWords
2. Promesse
3. Les tâches principales
« contrôlables » via les
sitelinks AdWords
4. Titre navigateur
optimisé avec 2 KW
5. Description
informative avec l’idée
des 62 parcours
6. Les grandes rubriques
du site non/moins
« contrôlables » via les
sitelinks
25
Facebook Open Graph META Tags
REFERENCEMENT & MANAGEMENT DES CONTENUS
<meta property='og:locale' content='fr_FR'/>
<meta property='og:title' content='2013, l’année du changement dans
les marchés publics pour les PME ?'/>
<meta property='og:description' content='France Marchés vous
présente le guide pour faciliter l’accès des TPE et PME aux marchés
publics de l&#039;OEAP et le guide de la dématérialisation du
MEDEF.'/>
<meta property='og:url' content='http://www.francemarches.com/
blog/2012/2013-annee-changement-pme/'/>
<meta property='og:site_name' content='France Marchés'/>
<meta property='og:type' content='article'/>
<meta property='og:image' content='http://www.francemarches.com/
blog/wp-content/uploads/2012/12/logo-oeap-e1359037423764.jpg'/
>
<meta property='og:image' content='http://www.francemarches.com/
blog/wp-content/uploads/2012/12/Guide-Dematerialisation.jpg'/>
26
La structuration de l’information
Un titre H1 par page, avant que le
HTML5 change la conception de la
page web en tant qu’unité de
contenu.
Un titre H1 différencié page par
page.
Une parentalité respectée.
1
2
3
LE REFERENCEMENT
27
« Faire partie » du Web (maillage/netlinking) ...
REFERENCEMENT & MANAGEMENT DES CONTENUS
28
Qu’est-ce qu’un lien optimisé ?
REFERENCEMENT & MANAGEMENT DES CONTENUS
Exemple d’un lien optimisé naturellement
Structure du lien (destination + intitulé)
Destination du lien Intitulé du lien
Exemple d’un lien trop optimisé sans notion de marque
<a href="http://www.redpoint.fr">Redpoint - Cabinet conseil UX, SEO et marketing</a>
La sur-optimisation ne s’apprécie pas seulement de manière unitaire mais
surtout dans le profil de liens d’un site web.
Structure du lien (destination + intitulé)
Destination du lien Intitulé du lien
<a href="http://www.redpoint.fr">Consultant SEO Nantes - Référencement 44</a>
29
Qu’est-ce qu’un lien optimisé ?
REFERENCEMENT & MANAGEMENT DES CONTENUS
L30
QUELLES SONT LES BONNES PRATIQUES
DU LIEN HYPERTEXTE ?
Source : Les bonnes pratiques du lien hypertexte (EPOKHE)
REFERENCEMENT & MANAGEMENT DES CONTENUS
31
Le syndrome du cliquez ici ...
Source : Patricia Gallot-Lavallée (www.strategy-interactive.com)
32
Travaillez vos liens comme vos titres de pages !
Ce que dit l’ergonome :
✓ Evitez les liens de
navigation mystère
(l’internaute ne doit pas
douter de l’issue de son
clic)
✓ Intégrez vos liens dans
vos contenus car ils
seraient plus cliqués
✓ Augmentez la taille
réelle des liens
Ce que dit le
référenceur :
✓ Optimisez vos liens
avec des occurrences
clés informatives
✓ Optez pour des
libellés de préférence
explicites
✓ Obtenez des liens
dans des zones de
contenus (« Beware of
sitewide linking ! »)
Ce que dit l’expert en
accessibilité :
✓ Nommez vos liens de
manière explicite (hors
contexte)
✓ Préférez des libellés
HTML (l’attribut TITLE
est une béquille inutile
d’ailleurs en SEO)
✓ Limitez la taille des
liens à 80 signes (hors
cas particuliers)
REFERENCEMENT & MANAGEMENT DES CONTENUS
33
Le lien est une interface de navigation intuitive
Sources : Amélie BOUCHER (Ergonomie Web - Eyrolles) et Jakob NIELSEN (Priorité à la simplicité - Pearson)
Le lien sous-tend un clic dont les
deux versants, physique et mental,
doivent être pris en compte.
D’ailleurs, la difficulté physique liée au
clic (très liée à la loi de Fitts) est
probablement moins difficile que son
pendant mental.
REFERENCEMENT & MANAGEMENT DES CONTENUS
REFERENCEMENT & MANAGEMENT DES CONTENUS34
SEO SpyGlass (www.link-assistant.com/seo-spyglass/)
Ahrefs (http://ahrefs.com)
Advanced Link Manager (www.advancedlinkmanager.com)
Open Site Explorer (www.opensiteexplorer.org)
Link Diagnosis (www.linkdiagnosis.com)
Webmaster Tool (www.google.com/webmasters/)
1
2
3
4
5
Connaître ses liens référents
6
REFERENCEMENT & MANAGEMENT DES CONTENUS35
Un lien fait partie d’un contexte
Sources : http://www.jeromeweb.net/seo/18813-cours-google-analytics et http://www.icademie.com/le_club/?
p=1910
36
Le référencement invisible et keywordless ?!
REFERENCEMENT & MANAGEMENT DES CONTENUS37
Êtes-vous prêt à devenir un éditeur de contenus ?
REFERENCEMENT & MANAGEMENT DES CONTENUS38
La table des éléments de la stratégie de contenu
Source : http://searchengineland.com/seotable
REFERENCEMENT & MANAGEMENT DES CONTENUS39
Êtes-vous prêt pour la diététique éditoriale ?
Souvent, les clients souhaitent
atteindre la masse critique (« critical
mass ») sur la base des mythes
suivants :
✓ Plus j’ai du contenu, meilleures
seront mes positions sur Google.
✓ Plus j’ai du contenu, plus
j’apporterai de la valeur à mon
audience.
REFERENCEMENT & MANAGEMENT DES CONTENUS40
Du linkbaiting au content excellence ?
Les différents types d’appât : informationnel, polémique, créatif, humoristique.
Coca-Cola Content 2020 Part One (www.youtube.com/watch?v=LerdMmWjU_E)
« The role of content excellence is to
behave like a ruthless editor ».
L’excellence éditoriale passe par la
création d’idées contagieuses qui ne
peuvent être contrôlées (liquid) et
qui associent des objectifs business,
la marque et la satisfaction/l’intérêt
client (linked).
L41 REFERENCEMENT & MANAGEMENT DES CONTENUS
LE CONTENT MARKETING DEVIENDRA DANS LES 5
PROCHAINES ANNEES UNE FONCTION ESSENTIELLE.
Qui prendra le leadership ?
L42 REFERENCEMENT & MANAGEMENT DES CONTENUS
LE CONTENT MARKETING NE DOIT PAS ÊTRE PERCU
COMME UN CENTRE DE COÛT.
L43 REFERENCEMENT & MANAGEMENT DES CONTENUS
Source : www.antseyeview.com/90-9-1-principle/
La pyramide de l’engagement utilisateur
L44 REFERENCEMENT & MANAGEMENT DES CONTENUS
Source : www.altimetergroup.com
Les 5 phases de maturité du content management
REFERENCEMENT & MANAGEMENT DES CONTENUS45
Tête et longue traîne
REFERENCEMENT & MANAGEMENT DES CONTENUS46
Ne pas mettre tous ses oeufs dans le même panier
47
EST-IL POSSIBLE DE NETTOYER GOOGLE ?
Les techniques de nettoyage recouvrent la production de contenus positifs, le netlinking, les menaces d'avocats
et attaques en justice.
Choisir son camp ?!
LES FONDAMENTAUX DE
L’ERGONOMIE
49
La loi de proximité (théories de la Gestalt)
LES FONDAMENTAUX DE L’ERGONOMIE
RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS
FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS
N’AYANT PAS DE POINTS COMMUNS.
Source : http://librairie.immateriel.fr/fr/read_book/9782212132151/ch3b
50
La loi de proximité (théories de la Gestalt)
LES FONDAMENTAUX DE L’ERGONOMIE
Une page qui souffre de
problèmes de proximité
manque généralement de
zones de respiration.
Nous avons tendance à considérer
que les éléments proches
physiquement entretiennent des
points communs.
51
La loi de proximité (théories de la Gestalt)
LES FONDAMENTAUX DE L’ERGONOMIE
Source : Google+ Local
52
La loi de proximité (théories de la Gestalt)
LES FONDAMENTAUX DE L’ERGONOMIE
53
La loi de similarité (théories de la Gestalt)
LES FONDAMENTAUX DE L’ERGONOMIE
Source : http://blog.excilys.com/2010/09/13/optimiser-lergonomie-de-son-application-web/
L54 LES FONDAMENTAUX DE L’ERGONOMIE
UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA
GESTALT PERMET AUX INTERNAUTES D’INTEGRER MENTALEMENT
SON CONTENU.
55
La loi de proximité temporelle
LES FONDAMENTAUX DE L’ERGONOMIE
Sources : Blogs de Frédéric CAVAZZA et Jeremiah Owyang
L56 LES FONDAMENTAUX DE L’ERGONOMIE
UNE CIBLE EST D’AUTANT PLUS RAPIDE A ATTEINDRE QU’ELLE EST
PROCHE ET GRANDE.
La loi de Fitts
57
La loi de Fitts
LES FONDAMENTAUX DE L’ERGONOMIE
Source : www.intuiti.net et Slideshare (résultats de recherche)
L’exemple du label qui agrandit la zone
de clic est appréciable pour les
internautes ayant une faible dextérité.
58
La loi de Fitts
LES FONDAMENTAUX DE L’ERGONOMIE
Source : www.voyages-sncf.com
La zone adjacente au libellé et son icône est cliquable.
Toute la zone adjacente du libellé est cliquable.
1
2
2
1
59
La loi de Fitts (appliquée au SEO)
LES FONDAMENTAUX DE L’ERGONOMIE
Pour consulter nos appels d’offre, cliquez ici.
Pour consulter nos appels d’offre, cliquez ici.
Pour consulter nos appels d’offre, visitez le site de l’école CESI.
Pour consulter nos appels d’offre, visitez le site de l’école
d’ingénieurs CESI.
1
2
3
4
L60 LES FONDAMENTAUX DE L’ERGONOMIE
L’AFFORDANCE EST LA CAPACITE D’UN OBJET A
SUGGERER SA PROPRE UTILISATION.
Le concept d’affordance
61
Les affordances de navigation
LES FONDAMENTAUX DE L’ERGONOMIE
2
1
Fittsizing ou augmentation de la taille virtuelle des objets en se
servant des éléments adjacents.
L’affordance de cliquabilité est donnée par l’adjonction d’un élément
(la barre rouge) et d’une nouvelle forme (menu déroulant).
1
2
Source : www.multicity.citroen.fr
62
Les affordances de navigation
LES FONDAMENTAUX DE L’ERGONOMIE
Affordance donnée par la forme et la couleur.1
Source : Slideshare (résultats de recherche)
1
63
Les affordances d’interaction
LES FONDAMENTAUX DE L’ERGONOMIE
1
L’espace de connexion sur le site www.francemarches.com (v1)
manque d’affordance même si le libellé reste explicite hors contexte.
1
64
Les affordances erronées
LES FONDAMENTAUX DE L’ERGONOMIE
Au survol, toute la zone semble cliquable alors que seul le bouton
d’interaction l’est. C’est donc une affordance erronée.
1
Source : www.multicity.citroen.fr
1
Source : www.chateaudegoulaine.fr/le-chateau
L’affordance de cliquabilité est
atteinte si la somme des
affordances de chaque dimension
(forme, couleur, libellé, localisation,
adjonction d’éléments indiquant la
présence d’un lien) de l’objet est
suffisante.
L65 LES FONDAMENTAUX DE L’ERGONOMIE
Monabanq.com (loi de Fitts et affordances)
Source : www.monabanq.com et Référentiel AccessiWeb 2.1 : Consultation
L’animation augmente la charge informationnelle, d’autant qu’elle ne s’arrête
pas. L’utilisateur n’a pas de le contrôle du contenu en mouvement.
L66 LES FONDAMENTAUX DE L’ERGONOMIE
Le point focal ou concept de call-to-action
Source : http://beextend.fr/magazine.html
Le point focal par la variation typographique
Le point focal par l’illustration et la photographie
Le point focal par l’interaction
Le point focal par l’espace négatif
1
2
3
4
Les ressorts de l’incitation à l’action ...
L67 LES FONDAMENTAUX DE L’ERGONOMIE
Le point focal ou concept de call-to-action
68
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE L’ERGONOMIE
69
Le point focal ou concept de call-to-action
LES FONDAMENTAUX DE L’ERGONOMIE
L70 LES FONDAMENTAUX DE L’ERGONOMIE
Le nombre magique d’Alan Baddeley
CITEZ LES NOMS DES SEPT NAINS.
L71 LES FONDAMENTAUX DE L’ERGONOMIE
7 +/- 2 ELEMENTS (EMPAN DE 5 à 9 OBJETS)
ANCIEN CRITERE ACCESSIWEB 1.0 / DANS L’ARBORESCENCE, Y A T-IL
UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION ?
L’OBJECTIF DE CETTE REFERENCE EST D’EVITER DE SURCHARGER
L’INTERFACE. LA LOI DE HICK-NYMAN DEVELOPPE L’IDEE QU’IL EST
PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT D’ELEMENTS (cf.
LE PARADOXE DU CHOIX).
Le nombre magique de Miller vs. loi de Hick-Nyman
Source : www.braillenet.org/accessibilite/AccessiWeb_CMS_10/guide_accessiweb/guide-accessiweb-ref-
accessiweb.html et Le paradoxe du choix (Barry Schwartz)
L72 LES FONDAMENTAUX DE L’ERGONOMIE
06.50.86.20.15
Le nombre magique d’Alan Baddeley
Sources : Alan Baddeley (1986) et Nelson Cowan (2001)
065-086-2015
73
4
Le nombre magique est ...
74
La règle des 3 clics ...
LES FONDAMENTAUX DE L’ERGONOMIE
1
Comprenez-vous les libellés de second niveau de la 2ème entrée ?
La règle des 3 clics laisse de côté la difficulté mentale liée au clic
pour se focaliser sur la difficulté physique. Cette règle est délétère.
1
Source : www.sigma.fr
75
DO YOU SPEAK USER ?
76
Le logo en haut à gauche : standard ou convention ?
LES FONDAMENTAUX DE L’ERGONOMIE
Sources : www.juwi.fr
77
Le breadcrumb à droite : standard ou convention ?
LES FONDAMENTAUX DE L’ERGONOMIE
Sources : www.carrepointu.com
Un fil d’Ariane situé à gauche?
Un fil d’Ariane composé de libellés dont la taille réelle est petite
(cliquabilité plus réduite).
Un fil d’Ariane qui manque de respiration ?
1
2
3
LES FONDAMENTAUX DE L’ERGONOMIE78
Source : Jakob Nielsen
Un standard est un principe
utilisé par plus de 80% des
sites.
Standard versus convention ?
Une convention est un
principe lorsque 50 à 79%
des sites l’utilisent.
LES FONDAMENTAUX DE L’ERGONOMIE79
Le site capitalise sur
l'apprentissage interne
(cohérence du site).
Les conventions internes et externes priment ...
Le site capitalise sur
l'apprentissage externe
(localisation, vocabulaire).
✓ dans la localisation des objets
(surtout pour la navigation)
✓ dans les intitulés, le vocabulaire
utilisé
✓ dans les interactions (style des
liens, comportement des objets...)
✓ Panier en haut à droite
✓ Convention de vocabulaire
(Accueil, Panier, Plan du site,
Contact)
✓ Texte souligné = lien
✓ Navigation en haut ou à gauche
L80 LES FONDAMENTAUX DE L’ERGONOMIE
LE CAS DE L’ATTRIBUT PLACEHOLDER.
L’attribut placeholder change les conventions ?!
L81 LES FONDAMENTAUX DE L’ERGONOMIE
Sources : www.agence-api.fr / www.francemarches.com
La prise de focus change avec placeholder ...
L82 LES FONDAMENTAUX DE L’ERGONOMIE
Source : www.stpo.fr
Une affordance d’interaction sur placeholder
L83 LES FONDAMENTAUX DE L’ERGONOMIE
LA NOTION DE FOLD (CUT-OFF DESIGN).
84
LE SITE EST-IL BIEN RANGE ?
85
Est-ce que les objets qui entretiennent un rapport fonctionnel sont
suffisamment proches ?
Est-ce que les objets qui entretiennent un rapport fonctionnel se
ressemblent (taille, forme, couleur, contenu, comportement)?
La taille réelle et/ou virtuelle des objets de navigation et d’interaction
a-t-elle été augmenté de manière optimale ?
Les libellés des objets de navigation et d’interaction (liens, boutons)
sont-ils suffisamment explicites pour que l’internaute ne doute pas
de l’issue de son clic ?
1
2
3
4
Quelques questions à se poser ...
LES FONDAMENTAUX DE L’ERGONOMIE
86
Les objets (navigation, interaction) sont-ils affordants ?
L’incitation à l’action est-elle gérée par le point focal ?
L’interface capitalise sur l’apprentissage interne et externe ?
Y-a-t-il un nombre réduit d’éléments par niveau de navigation ?
Les call-to-action sont-ils situés au-dessus du fold ?
Le site est-il bien rangé ?
5
6
7
8
Quelques questions à se poser ...
LES FONDAMENTAUX DE L’ERGONOMIE
9
10
87
Les outils d’analyse, de conception et d’évaluation UX
LES FONDAMENTAUX DE L’ERGONOMIE
L’observation
Les personas
Les focus groups
Eyetracking
Les critiques d’experts
Les interviews
Analytics
Guerilla usability testing
Sketching Prototypages
Wireframes Tri des cartes
Thinking aloud Test users
Les outils d’évaluation
Les outils de conception
Les outils d’analyse
88
Tri des cartes
LES FONDAMENTAUX DE L’ERGONOMIE
TRI DES CARTES OUVERT vs. FERME
89
Test users
LES FONDAMENTAUX DE L’ERGONOMIE
SCENARII DE TEST UTILISATEURS
90
Test user La Vélodyssée
LES FONDAMENTAUX DE L’ERGONOMIE
Tâches Exemples de scénarii
Page ou
fonctionnalité
testée
Compréhension du
contexte de la page
d’accueil
« D’abord, sans aller ailleurs, en regardant cette
première page, pouvez-vous me dire ce que
propose La Vélodyssée ? »
Contenu de la
page d’accueil
Chercher un parcours à
vélo pour une journée
« Imaginons que vous souhaitez faire une
balade à vélo d’une journée avec 3 amis. Vous
avez entendu parler de La Vélodyssée. Vous
entreprenez de chercher une balade pour la
journée près de chez vous. »
Navigation dans le
catalogue des
parcours
Regarder si une page
parcours convient
« Votre balade est choisie. Vous décidez de la
planifier et de trouver un endroit pour
déjeuner. »
Contenu de la
page parcours
91 LES FONDAMENTAUX DE L’ERGONOMIE
TESTING IS AN ENDLESS LOOP OF QUESTIONING?
DISCOVERY, EXPLORATION, LEARNING ...
Source : https://twitter.com/lynn_mckee
LES IMAGES
93
Référentiel AccessiWeb 2.1.
LES IMAGES
Critère 1.1 [Bronze]
CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE
ALTERNATIVE TEXTUELLE ?
(www.sigma.fr)
Source : http://www.braillenet.org/accessibilite/referentiel-aw21/index.php#images
94
Des pecadilles qui manquent de sens ...
LES IMAGES
Source : www.verygood.fr et www.netapsys.com
background:url("../image/menu/menu_netapsys_accueil2.jpg");
<img src="upload/home/corbieres_cendrillon10.jpg" align="left"/>
2
1
1
2
95
Référentiel AccessiWeb 2.1.
LES IMAGES
Critère 1.2 [Bronze]
POUR CHAQUE IMAGE DE DECORATION AYANT UNE
ALTERNATIVE TEXTUELLE, CETTE ALTERNATIVE
EST-ELLE VIDE ?
Source : http://www.braillenet.org/accessibilite/referentiel-aw21/index.php#images
96
Référentiel AccessiWeb 2.1.
LES IMAGES
Critère 1.3 [Bronze]
POUR CHAQUE IMAGE PORTEUSE D’INFORMATION
AYANT UNE ALTERNATIVE TEXTUELLE, CETTE
ALTERNATIVE EST-ELLE PERTINENTE ?
Source : http://www.braillenet.org/accessibilite/referentiel-aw21/index.php#images
97
Cette légende est-elle pertinente ?
LES IMAGES
98
La légende sur le logo (page d’accueil)
LES IMAGES
2
alt="FAFIEC OPCA – Organisme paritaire collecteur agréé de
l’ingénierie, de l’informatique, des études, du conseil, des foires et
salons et des traductions"
Quel attribut ALT pour l’image-lien sur le logo dans les pages
intérieures ?
1
1
Source : www.fafiec.fr
99
La légende sur le logo (pages intérieures)
LES IMAGES
<a href="/">
<img src="logo.png" alt="Retour à l'accueil - OPCA FAFIEC" />
</a>
L100 LES IMAGES
QUELLE LONGUEUR POUR LES ALTERNATIVES
TEXTUELLE ?
L101 LES IMAGES
La longueur des alternatives textuelles est inférieure ou égale à
80 caractères (* critères 103 du baromètre Temesis Opquast).
L'alternative textuelle indiquant l'action associée à l'élément ou
reproduisant l'information véhiculée par l'élément devra être
formulée de façon à être la plus concise possible. Une limite située
entre 80 et 120 caractères semble convenir à une manipulation
aisée de ces informations. Au-delà, il est obligatoire de s'interroger
sur la nécessité de l'utilisation d'une description longue **.
1. http://temesis-emakina.opquast.net/barometers/tourisme/criteria
2. Référentiel Général d’Accessibilité pour les Administrations RGAA - Annexe 1 : Critères de succès (page 3)
1
2
Temesis/Opquast & RGAA
102
Le cas de la description détaillée
LES IMAGES
Une description détaillée peut être insérée via :
✓ un attribut LONGDESC qui contient l’adresse d’une page ou d’un
emplacement dans la page contenant la description détaillée,
✓ l’indication, dans l’attribut ALT de l’emplacement dans la page de la
description détaillée,
✓ un lien adjacent à l’image qui contient l’adresse d’une page ou d’un
emplacement dans la page contenant la description détaillée.
Sources : www.veolia.com
http://www.braillenet.org/accessibilite/referentiel-aw21/glossaire.php#mDescDetaillee
L103 LES IMAGES
COMBIEN DE TYPES D’ALTERNATIVES TEXTUELLES ?
L104 LES IMAGES
Les types d’images et alternatives associées
Les types d’image Les alternatives associées2.1.
L’image porteuse d’information
L’image de décoration
L’image-lien
La légende ALT doit être pertinente.
L’attribut ALT doit rester vide.
L’alternative doit permettre la
compréhension de la fonction et de la
destination du lien.
L’image-captcha L’alternative doit permettre d’identifier la
nature et la fonction de l’image.
L’ERGONOMIE DES CONTENUS
106
La lecture sur le web (un média d’interaction)
Lean forward (actif)
(desktop,
tablettes, smartphones)
Lean back (passif)
(télévision, livres,
magazines, journaux papier)
L’ERGONOMIE DES CONTENUS
107
Mythe 1 : Les gens ne lisent pas sur le web
"Un individu lit 25% moins vite sur le web
(lecture hypertextuelle) par rapport au
papier (lecture linéaire)".
Chaque page est un tout. La page est un
ensemble qui se suffit à lui-même.
L’ERGONOMIE DES CONTENUS
108
Source : Blueglass
80% des internautes lisent les titres
L’ERGONOMIE DES CONTENUS
L109
Source : Bernard Poulet
La fin des ensembles
Des médias de masse, l’économie de
l’attention est passée à des masses de
médias.
Contrairement à ce que pense Rupert
Murdoch, qui exprime un faible intérêt
pour les lecteurs « occasionnels » et « non
loyaux » que Google amène et qui
consomment de la « bande passante »,
les jeunes utilisateurs n'accèdent plus à
un ensemble mais à un article en
particulier. Ils picorent des liens partagés
sur les réseaux à la recherche d’une
unité de contenu.
L’ERGONOMIE DES CONTENUS
L110
Source : Outsell
L’importance du titre : 8 mots maximum
L’ERGONOMIE DES CONTENUS
Sur 10 personnes, 2 seulement liront votre contenu tandis que 8 se
satisferont du titre. Un titre explicite, magnétique, est donc de première
importance.
Dans le domaine de l’emailing, des études ont d’ailleurs montré que 50% à
60% des titres les plus efficaces se composent de 8 mots maximum.
Une étude du cabinet conseil Outsell souligne également que 44% des
visiteurs de Google News regardent les titres sans aller sur les sites des
journaux. Près d’un internaute sur deux ne lit que les titres, sans cliquer, ce
qui démontre l’importance de cet élément, souvent déporté hors de son
support d’origine.
L111 L’ERGONOMIE DES CONTENUS
Source : Advanced Content Tracking with Google Analytics (Partie 1 et Partie 2)
Est-ce que les internautes scrollent ?
LA LECTURE SUR LE WEB112
On parcoure, explore, scanne et survole avant de ...
113
Source : http://www.cxpartners.co.uk/thoughts/the_myth_of_the_page_fold_evidence_from_user_testing.htm
La notion de fold
L’ERGONOMIE DES CONTENUS
En ergonomie, une étude de CX
Partners auprès de 800
utilisateurs nous montre que,
même si le pli d’une page (fold en
anglais) n’est pas un frein à
l’exploration, moins il y a de
contenu au-dessous du pli, plus
l’utilisateur sera encouragé à
explorer la page.
114
Source : Universal McCann - Juin 2008
La notion de fold
L’ERGONOMIE DES CONTENUS
« Plus de la moitié des internautes consultent du contenu en dehors de leurs
sites d'origine ».
115
Où se posent les yeux des internautes ?
L’ERGONOMIE DES CONTENUS
Les études d'eyetracking sont formelles : le texte attire davantage
l'attention que les images : 78% des fixations oculaires se font sur le texte et
22% des fixations oculaires se font sur les images.
L’ERGONOMIE DES CONTENUS116
L’ECRITURE WEB EST UN VERITABLE COMBAT.
Source : Crawford Kilian - Writing for the Web (http://crofsblogs.typepad.com)
117
Source : 1/ Steve Krug (Je ne veux pas chercher) - 2/ Gerry McGovern
Le bavardage inutile ...
LA LECTURE SUR LE WEB
« Wasting your customers time is the
biggest sin you can commit on the Web ».
« Le bavardage inutile, repérable, selon Steve Krug, par la petite voix
intérieure qui dit « blablabla, blablabla, blablabla ... », tout en lisant,
est-il supprimé ? ».
1
2
118
Source : Sigma (www.sigma.fr)
Le bavardage inutile ...
LA LECTURE SUR LE WEB
La maîtrise et l’optimisation de votre système d’information est un enjeu
primordial. L'infogérance vous libère de toutes les contraintes de gestion et
d’évolution de votre système d’information.
L’ERGONOMIE DES CONTENUS119
Le texte est-il bien découpé (aéré) en paragraphes ?
Les paragraphes ont-ils une longueur inférieure à 60 mots ?
Le nombre de mots par ligne de texte varie-t-il de 8 à 12, sans
toutefois dépasser un maximum de 15, soit un empan de 40 à 70
signes maximum ?
La longueur des phrases varie-t-elle de 12 à 20 mots ?
Les phrases d'une longueur de 25 à 30 mots peuvent-elles être
réduites pour passer sous la limite des 20 mots ?
1
2
3
4
5
Source : Crawford Kilian - Writing for the Web (http://crofsblogs.typepad.com)
Quelques conseils sur les paragraphes ...
L’ERGONOMIE DES CONTENUS120
La largeur d’une ligne de texte varie-t-il de 50 à 75 signes ?1
Source : Baymard - Readability: the Optimal Line Length (http://baymard.com/blog/line-length-readability)
Une ligne de texte trop longue gêne la lecture car elle empêche d'avoir une vision
globale entre le début et la fin de la ligne. Une ligne de texte trop courte aura
tendance à faire voyager l'oeil du lecteur, et ainsi briser le rythme de lecture.
Quelques conseils sur les paragraphes ...
L’ERGONOMIE DES CONTENUS121
Source : Smashing Magazine (http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-
best-practices-from-the-best-blogs/)
The optimal number of characters per line is between 55 and 75,
but between 75 and 85 characters per line is more popular.
Quelques conseils sur les paragraphes ...
L’ERGONOMIE DES CONTENUS122
Sources : AccessiWeb hors cas particuliers pour les langues chinoises, japonaises et coréennes
(www.braillenet.org/accessibilite/referentiel-aw21/) et RGAA (www.rgaa.net/Largeur-des-blocs-de-textes.html)
Critère 10.11 [OR] Pour chaque page Web, les blocs de texte ont-ils
une largeur inférieure ou égale à 80 caractères ?
Quelques conseils sur les paragraphes ...
L’ERGONOMIE DES CONTENUS123
UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE
SELON LES CONTEXTES.
Quelques conseils sur les paragraphes ...
L’ERGONOMIE DES CONTENUS124
!
Source : Douglas Bowman (http://stopdesign.com v3)
2 Un empan de
12 mots en
moyenne.
Un empan de 18 mots en
moyenne.1
Quelques conseils sur les paragraphes ...
L’ERGONOMIE DES CONTENUS125
Sources : www.ergologique.com/conseils/conseils.php?id_tip=818 et http://www.nngroup.com/articles/top-10-
mistakes-web-design/
Evitez les murs de texte !
L’ERGONOMIE DES CONTENUS126
Source : www.ergologique.com/conseils/conseils.php?id_tip=818
Ferrez vos contenus à gauche !
D'un point de vue de lisibilité, des
études sérieuses démontrent qu'un
texte en drapeau est plus accessible
à l'œil.
Les fins de lignes servent de repère
visuel et fatigue moins le lecteur.
L’ERGONOMIE DES CONTENUS127
LETTRES EN CAPITALES = ERREUR ? NON.
UNE VRAIE PAGE D'ACCUEIL EST UNE PAGE QUI SERT, QUI PRÉSENTE DE L'INFORMATION
ET PERMET DE NAVIGUER. UNE PAGE D'ACCUEIL N'EST PAS UNE SPLASH PAGE OU JUMP
PAGE, QUI NE SONT QU'UNE SORTE D'INTRODUCTION PRÉCÉDANT LA VÉRITABLE PAGE
D'ACCUEIL.
Une vraie page d'accueil est une page qui sert, qui présente de l'information et permet de naviguer.
Une page d'accueil n'est pas une splash page ou jump page, qui ne sont qu'une sorte d'introduction
précédant la véritable page d'accueil.
DES SACCADES JUSQU’A
15 LETTRES PUIS ...
... DES FIXATIONS
L’ERGONOMIE DES CONTENUS128
La pyramide inversée
La pyramide inversée débute par
les informations essentielles pour
aller vers les détails en tenant
compte des lois de proximité :
✓ la loi de proximité temporelle
(parler des évènements à venir et
pas uniquement ceux qui viennent
de se produire, plus inertes);
✓ l a l o i d e p r o x i m i t é
géographique.
http://www.flickr.com/photos/cocolinda/385860049/
DES QUESTIONS ?
130
CE DOCUMENT A ETE REALISE PAR :
Cabinet conseil spécialisé dans les
études, l'accompagnement et la
formation sur les métiers suivants :
conception/maîtrise d'ouvrage,
référencement/contenus, analytics et
marketing 2.0.
redpoint.fr
facebook.com/madebyredpoint
slideshare.net/madebyredpoint
CONTACT :
Arnaud BRIAND
Consultant associé
06 50 86 20 15
a.briand@redpoint.fr
Sylvain GUEGUEN
Consultant associé
06 08 88 70 60
s.gueguen@redpoint.fr
DECOUVREZ NOS AUTRES DOCUMENTS :
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Tous droits réservés Redpoint - Reproduction interdite sans accord préalable
131
redpoint.fr
facebook.com/madebyredpoint
slideshare.net/madebyredpoint

Contenu connexe

Tendances

Du référencement naturel (SEO) au référencement Social (SMO)
Du référencement naturel (SEO) au référencement Social (SMO)Du référencement naturel (SEO) au référencement Social (SMO)
Du référencement naturel (SEO) au référencement Social (SMO)
David Degrelle - Consultant SEO Expert
 
Formation SEO débutant - CREA Genève
Formation SEO débutant - CREA GenèveFormation SEO débutant - CREA Genève
Formation SEO débutant - CREA Genève
Yannick Bouvard
 
Guide du référencement naturel - Copyright Google
Guide du référencement naturel - Copyright GoogleGuide du référencement naturel - Copyright Google
Guide du référencement naturel - Copyright Google
Guillaume Bertil
 
Seo Google
Seo GoogleSeo Google
Seo Google
Abdeltif Bouziane
 
20 techniques de referencement naturel
20 techniques de referencement naturel20 techniques de referencement naturel
20 techniques de referencement naturel
AXIZ eBusiness
 
SEMetrics 2017
SEMetrics 2017SEMetrics 2017
SEMetrics 2017
SEMetrics
 
Guide pratique du référencement - La méthode bee coz
Guide pratique du référencement - La méthode bee cozGuide pratique du référencement - La méthode bee coz
Guide pratique du référencement - La méthode bee coz
Edwin Stephenson
 
SEO - PRESENTATION
SEO - PRESENTATIONSEO - PRESENTATION
SEO - PRESENTATION
Aymeric Baranowski
 
SEO et Moteur de Recherche Interne
SEO et Moteur de Recherche InterneSEO et Moteur de Recherche Interne
SEO et Moteur de Recherche Interne
Charlotte Prevost
 
Atelier SEO - cpme - juillet 2017
Atelier  SEO - cpme - juillet 2017Atelier  SEO - cpme - juillet 2017
Atelier SEO - cpme - juillet 2017
Julien Dereumaux
 
Recommandations SEO/SEM/SMO
Recommandations SEO/SEM/SMORecommandations SEO/SEM/SMO
Recommandations SEO/SEM/SMO
Danièle Attias
 
Cours SEO / Référencement Naturel - août 2013
Cours SEO / Référencement Naturel - août 2013Cours SEO / Référencement Naturel - août 2013
Cours SEO / Référencement Naturel - août 2013
Pierre Ammeloot
 
Formation SEO - CCI parrainage - 5 mars 2018
Formation SEO - CCI parrainage - 5 mars 2018Formation SEO - CCI parrainage - 5 mars 2018
Formation SEO - CCI parrainage - 5 mars 2018
Julien Dereumaux
 
Comment mener une stratégie de référencement naturel efficace ?
Comment mener une stratégie de référencement naturel efficace ?Comment mener une stratégie de référencement naturel efficace ?
Comment mener une stratégie de référencement naturel efficace ?
Respoweb
 
Les évolutions du référencement naturel octobre 2013 - by Intuiti
Les évolutions du référencement naturel   octobre 2013 - by IntuitiLes évolutions du référencement naturel   octobre 2013 - by Intuiti
Les évolutions du référencement naturel octobre 2013 - by Intuiti
Intuiti
 
5 actions incontournables pour m'apporter de la visibilité sur internet et fa...
5 actions incontournables pour m'apporter de la visibilité sur internet et fa...5 actions incontournables pour m'apporter de la visibilité sur internet et fa...
5 actions incontournables pour m'apporter de la visibilité sur internet et fa...
Julien Dereumaux
 
SEO principes - referencement seo - version 2010
SEO   principes - referencement seo - version 2010SEO   principes - referencement seo - version 2010
SEO principes - referencement seo - version 2010
JCDomenget
 
Référencement naturel vs liens sponsorisés
Référencement naturel vs liens sponsorisésRéférencement naturel vs liens sponsorisés
Référencement naturel vs liens sponsorisés
Semaweb
 
"10 tactiques pour améliorer votre SEO en 2015" par Virginie Clève
"10 tactiques pour améliorer votre SEO en 2015" par Virginie Clève"10 tactiques pour améliorer votre SEO en 2015" par Virginie Clève
"10 tactiques pour améliorer votre SEO en 2015" par Virginie Clève
TheFamily
 
Checklist Audit SEO - Formation CREA Genève
Checklist Audit SEO - Formation CREA GenèveChecklist Audit SEO - Formation CREA Genève
Checklist Audit SEO - Formation CREA Genève
Yannick Bouvard
 

Tendances (20)

Du référencement naturel (SEO) au référencement Social (SMO)
Du référencement naturel (SEO) au référencement Social (SMO)Du référencement naturel (SEO) au référencement Social (SMO)
Du référencement naturel (SEO) au référencement Social (SMO)
 
Formation SEO débutant - CREA Genève
Formation SEO débutant - CREA GenèveFormation SEO débutant - CREA Genève
Formation SEO débutant - CREA Genève
 
Guide du référencement naturel - Copyright Google
Guide du référencement naturel - Copyright GoogleGuide du référencement naturel - Copyright Google
Guide du référencement naturel - Copyright Google
 
Seo Google
Seo GoogleSeo Google
Seo Google
 
20 techniques de referencement naturel
20 techniques de referencement naturel20 techniques de referencement naturel
20 techniques de referencement naturel
 
SEMetrics 2017
SEMetrics 2017SEMetrics 2017
SEMetrics 2017
 
Guide pratique du référencement - La méthode bee coz
Guide pratique du référencement - La méthode bee cozGuide pratique du référencement - La méthode bee coz
Guide pratique du référencement - La méthode bee coz
 
SEO - PRESENTATION
SEO - PRESENTATIONSEO - PRESENTATION
SEO - PRESENTATION
 
SEO et Moteur de Recherche Interne
SEO et Moteur de Recherche InterneSEO et Moteur de Recherche Interne
SEO et Moteur de Recherche Interne
 
Atelier SEO - cpme - juillet 2017
Atelier  SEO - cpme - juillet 2017Atelier  SEO - cpme - juillet 2017
Atelier SEO - cpme - juillet 2017
 
Recommandations SEO/SEM/SMO
Recommandations SEO/SEM/SMORecommandations SEO/SEM/SMO
Recommandations SEO/SEM/SMO
 
Cours SEO / Référencement Naturel - août 2013
Cours SEO / Référencement Naturel - août 2013Cours SEO / Référencement Naturel - août 2013
Cours SEO / Référencement Naturel - août 2013
 
Formation SEO - CCI parrainage - 5 mars 2018
Formation SEO - CCI parrainage - 5 mars 2018Formation SEO - CCI parrainage - 5 mars 2018
Formation SEO - CCI parrainage - 5 mars 2018
 
Comment mener une stratégie de référencement naturel efficace ?
Comment mener une stratégie de référencement naturel efficace ?Comment mener une stratégie de référencement naturel efficace ?
Comment mener une stratégie de référencement naturel efficace ?
 
Les évolutions du référencement naturel octobre 2013 - by Intuiti
Les évolutions du référencement naturel   octobre 2013 - by IntuitiLes évolutions du référencement naturel   octobre 2013 - by Intuiti
Les évolutions du référencement naturel octobre 2013 - by Intuiti
 
5 actions incontournables pour m'apporter de la visibilité sur internet et fa...
5 actions incontournables pour m'apporter de la visibilité sur internet et fa...5 actions incontournables pour m'apporter de la visibilité sur internet et fa...
5 actions incontournables pour m'apporter de la visibilité sur internet et fa...
 
SEO principes - referencement seo - version 2010
SEO   principes - referencement seo - version 2010SEO   principes - referencement seo - version 2010
SEO principes - referencement seo - version 2010
 
Référencement naturel vs liens sponsorisés
Référencement naturel vs liens sponsorisésRéférencement naturel vs liens sponsorisés
Référencement naturel vs liens sponsorisés
 
"10 tactiques pour améliorer votre SEO en 2015" par Virginie Clève
"10 tactiques pour améliorer votre SEO en 2015" par Virginie Clève"10 tactiques pour améliorer votre SEO en 2015" par Virginie Clève
"10 tactiques pour améliorer votre SEO en 2015" par Virginie Clève
 
Checklist Audit SEO - Formation CREA Genève
Checklist Audit SEO - Formation CREA GenèveChecklist Audit SEO - Formation CREA Genève
Checklist Audit SEO - Formation CREA Genève
 

Similaire à Cours SEO, contenus et ergonomie - CESI

Hesso valais - referencement naturel
Hesso valais - referencement naturelHesso valais - referencement naturel
Hesso valais - referencement naturel
Philippe Barman
 
Le référencement naturel ou SEO
Le référencement naturel ou SEOLe référencement naturel ou SEO
Le référencement naturel ou SEO
Forestier Mégane
 
20131204 precis du referencement naturel
20131204 precis du referencement naturel20131204 precis du referencement naturel
20131204 precis du referencement naturel
ceciestmonadressmail
 
Webinar seo sea-2020-vff
Webinar seo sea-2020-vffWebinar seo sea-2020-vff
Webinar seo sea-2020-vff
Matthieu Mouillon
 
Les bonnes pratiques SEO avec PrestaShop et WordPress - CCI Montpellier
Les bonnes pratiques SEO avec PrestaShop et WordPress - CCI MontpellierLes bonnes pratiques SEO avec PrestaShop et WordPress - CCI Montpellier
Les bonnes pratiques SEO avec PrestaShop et WordPress - CCI Montpellier
Nicolas Mercatili
 
Référencement naturel - SEO - Points principaux
Référencement naturel - SEO - Points principauxRéférencement naturel - SEO - Points principaux
Référencement naturel - SEO - Points principaux
Nadège tétaz
 
Drupal SEO - Optimiser son site
Drupal SEO - Optimiser son siteDrupal SEO - Optimiser son site
Drupal SEO - Optimiser son site
Stéphane ARRAMI
 
Conférence SEO Ecommerce 2016 - Association WELCOM
Conférence SEO Ecommerce 2016 - Association WELCOM Conférence SEO Ecommerce 2016 - Association WELCOM
Conférence SEO Ecommerce 2016 - Association WELCOM
Remi Ouillon
 
référencement naturel (SEO) : comment améliorer sa visibilité sur les moteurs...
référencement naturel (SEO) : comment améliorer sa visibilité sur les moteurs...référencement naturel (SEO) : comment améliorer sa visibilité sur les moteurs...
référencement naturel (SEO) : comment améliorer sa visibilité sur les moteurs...
supporticom
 
Café Didactique #4 Référencement
Café Didactique #4 RéférencementCafé Didactique #4 Référencement
Café Didactique #4 Référencement
31eme Arrondissement
 
Arnaud maes rencontre_e_tourisme_referencement_naturel_1_5_04_13
Arnaud maes rencontre_e_tourisme_referencement_naturel_1_5_04_13Arnaud maes rencontre_e_tourisme_referencement_naturel_1_5_04_13
Arnaud maes rencontre_e_tourisme_referencement_naturel_1_5_04_13
Lozere Développement
 
Café didactique #4 : B-A-ba du référencement
Café didactique #4 : B-A-ba du référencementCafé didactique #4 : B-A-ba du référencement
Café didactique #4 : B-A-ba du référencement
31ème Arrondissement
 
Analyse et référencement de mon site internet _ Ateliers numériques Pays de B...
Analyse et référencement de mon site internet _ Ateliers numériques Pays de B...Analyse et référencement de mon site internet _ Ateliers numériques Pays de B...
Analyse et référencement de mon site internet _ Ateliers numériques Pays de B...
Pays de Bergerac
 
SEO Référencement
SEO RéférencementSEO Référencement
SEO Référencement
Chris Gaillard
 
Formation SEO & PCC - Agadir Maroc
Formation SEO & PCC - Agadir MarocFormation SEO & PCC - Agadir Maroc
Formation SEO & PCC - Agadir Maroc
ydebbagh
 
T2m Evolution du SEO et synergie Inbound Marketing
T2m Evolution du SEO et synergie Inbound MarketingT2m Evolution du SEO et synergie Inbound Marketing
T2m Evolution du SEO et synergie Inbound Marketing
Serge Esteves
 
Stratégies de Netlinking avancées
Stratégies de Netlinking avancéesStratégies de Netlinking avancées
Stratégies de Netlinking avancées
Majed Ayari
 
Referencement naturel - strategies de liens
Referencement naturel - strategies de liensReferencement naturel - strategies de liens
Referencement naturel - strategies de liens
JCD srcmontbeliard
 
Créer du trafic sur son site
Créer du trafic sur son siteCréer du trafic sur son site
Créer du trafic sur son site
Laurent Evain
 

Similaire à Cours SEO, contenus et ergonomie - CESI (20)

Hesso valais - referencement naturel
Hesso valais - referencement naturelHesso valais - referencement naturel
Hesso valais - referencement naturel
 
Le référencement naturel ou SEO
Le référencement naturel ou SEOLe référencement naturel ou SEO
Le référencement naturel ou SEO
 
20131204 precis du referencement naturel
20131204 precis du referencement naturel20131204 precis du referencement naturel
20131204 precis du referencement naturel
 
Ateliers du web #1 : Référencement naturel
Ateliers du web #1 : Référencement naturelAteliers du web #1 : Référencement naturel
Ateliers du web #1 : Référencement naturel
 
Webinar seo sea-2020-vff
Webinar seo sea-2020-vffWebinar seo sea-2020-vff
Webinar seo sea-2020-vff
 
Les bonnes pratiques SEO avec PrestaShop et WordPress - CCI Montpellier
Les bonnes pratiques SEO avec PrestaShop et WordPress - CCI MontpellierLes bonnes pratiques SEO avec PrestaShop et WordPress - CCI Montpellier
Les bonnes pratiques SEO avec PrestaShop et WordPress - CCI Montpellier
 
Référencement naturel - SEO - Points principaux
Référencement naturel - SEO - Points principauxRéférencement naturel - SEO - Points principaux
Référencement naturel - SEO - Points principaux
 
Drupal SEO - Optimiser son site
Drupal SEO - Optimiser son siteDrupal SEO - Optimiser son site
Drupal SEO - Optimiser son site
 
Conférence SEO Ecommerce 2016 - Association WELCOM
Conférence SEO Ecommerce 2016 - Association WELCOM Conférence SEO Ecommerce 2016 - Association WELCOM
Conférence SEO Ecommerce 2016 - Association WELCOM
 
référencement naturel (SEO) : comment améliorer sa visibilité sur les moteurs...
référencement naturel (SEO) : comment améliorer sa visibilité sur les moteurs...référencement naturel (SEO) : comment améliorer sa visibilité sur les moteurs...
référencement naturel (SEO) : comment améliorer sa visibilité sur les moteurs...
 
Café Didactique #4 Référencement
Café Didactique #4 RéférencementCafé Didactique #4 Référencement
Café Didactique #4 Référencement
 
Arnaud maes rencontre_e_tourisme_referencement_naturel_1_5_04_13
Arnaud maes rencontre_e_tourisme_referencement_naturel_1_5_04_13Arnaud maes rencontre_e_tourisme_referencement_naturel_1_5_04_13
Arnaud maes rencontre_e_tourisme_referencement_naturel_1_5_04_13
 
Café didactique #4 : B-A-ba du référencement
Café didactique #4 : B-A-ba du référencementCafé didactique #4 : B-A-ba du référencement
Café didactique #4 : B-A-ba du référencement
 
Analyse et référencement de mon site internet _ Ateliers numériques Pays de B...
Analyse et référencement de mon site internet _ Ateliers numériques Pays de B...Analyse et référencement de mon site internet _ Ateliers numériques Pays de B...
Analyse et référencement de mon site internet _ Ateliers numériques Pays de B...
 
SEO Référencement
SEO RéférencementSEO Référencement
SEO Référencement
 
Formation SEO & PCC - Agadir Maroc
Formation SEO & PCC - Agadir MarocFormation SEO & PCC - Agadir Maroc
Formation SEO & PCC - Agadir Maroc
 
T2m Evolution du SEO et synergie Inbound Marketing
T2m Evolution du SEO et synergie Inbound MarketingT2m Evolution du SEO et synergie Inbound Marketing
T2m Evolution du SEO et synergie Inbound Marketing
 
Stratégies de Netlinking avancées
Stratégies de Netlinking avancéesStratégies de Netlinking avancées
Stratégies de Netlinking avancées
 
Referencement naturel - strategies de liens
Referencement naturel - strategies de liensReferencement naturel - strategies de liens
Referencement naturel - strategies de liens
 
Créer du trafic sur son site
Créer du trafic sur son siteCréer du trafic sur son site
Créer du trafic sur son site
 

Cours SEO, contenus et ergonomie - CESI

  • 1. CESI SEO, CONTENUS & ERGONOMIE Arnaud BRIAND - 4 et 5 février 2013
  • 3. 3 Les taux de clics dans Google selon Optify Source : Etude OPTIFY REFERENCEMENT & MANAGEMENT DES CONTENUS L’étude OPTIFY de 2011 montre que le 1er résultat capte 36,4% des clics.
  • 4. 4 Les taux de clics dans Google selon WordStream Source : L’étude WordStream souligne que 64,6% des clics concernent les liens sponsorisés AdWords contre 35,4% pour les liens naturels. REFERENCEMENT & MANAGEMENT DES CONTENUS Les 3 premiers résultats captent 41,1% des clics. Le 1er résultat naturel capte 8,9% des clics.
  • 5. 5 Les taux de clics dans Google selon Ian Howells Source : www.seoinphiladelphia.com/wp-content/uploads/2011/09/ctr-data-ian-howells-sept-2011.pdf REFERENCEMENT & MANAGEMENT DES CONTENUS 52,5% de CTR des résultats naturels 13% de CTR des liens sponsorisés
  • 6. 6 Comment fonctionne un moteur de recherche ? Un robot d’indexation (araignée, crawler), se charge de « visiter » les pages du web. Un index est une gigantesque base de données actualisée régulièrement, parfois même plusieurs fois par jour. Google disposerait d’un million de serveurs répartis sur 32 sites*. Un système de traitement des requêtes ou index d’exécution, qui relie l’arrière boutique (index) au guichet (l’interface Google depuis le navigateur). 1 2 3 La révolution Google - John Battelle * Chiffre non confirmé par Google. Lien vers la source de l’image. REFERENCEMENT & MANAGEMENT DES CONTENUS
  • 7. 7 Le référencement, ça se construit * patiemment ... * Une e-réputation, ça ne se nettoie pas, ça se construit. (Spintank) La marque a besoin d’une identité. Autres leviers : ✓ AdWords ✓ Display ✓ Réseau de contenu ✓ Remarketing (Criteo, Google) ✓ Emailing ✓ Newsletter ✓ Facebook Ads ✓ Affiliation REFERENCEMENT & MANAGEMENT DES CONTENUS
  • 8. 8 Les 3 grandes familles de critères Technique & sémantique ✓ Construction du site (HTML5 et microdata) et performance technique ✓ Domaining (brand) ✓ Ancienneté du nom de domaine ✓ TITLE navigateur et métadonnée Description ✓ URLs ✓ Balises de titres Hx ✓ Attributs ALT ✓ Maillage interne Editorial ✓Sélection des mots clés ✓ Robustesse de la structuration et IA ✓ Saupoudrage d’occurrences clés ✓ Nommage des rubriques ✓ Animation éditoriale et fréquence d’actualisation (content excellence) Réputation ✓Nombre de liens référents (backlinks) ✓ Qualité des liens référents (backlinks) ✓ Variété des backlinks ✓ Qualité des sites référents ✓ Régularité et pérennité du maillage TRUST RANK, PAGE RANK & AUTHOR RANK REFERENCEMENT & MANAGEMENT DES CONTENUS ✓ Socialisation (likes, ratings, reviews, followers, etc.)
  • 9. 9 LE CONCEPT DE LANDING PAGE.
  • 10. 10 Source : Eric Smith - Ex-CEO de Google / * cesspool = fosse à purin « Internet is a cesspool* where false information thrives. Brands are the solution, not the problem. Brands are how you sort out of the cesspool. » La marque est la solution ... www.hotel-nantes.fr ? REFERENCEMENT & MANAGEMENT DES CONTENUS
  • 11. 11 Source : www.webmetricsguru.com (2 mai 2012) La marque est la solution ... « People use SEO to compensate for a lack of branding, or simply having not invested enough in branding ». REFERENCEMENT & MANAGEMENT DES CONTENUS
  • 12. 12 A QUEL MOMENT INJECTER LA REFLEXION SEO DANS LA CHAÎNE DE PRODUCTION ?
  • 13. 13 Le référencement, on verra à la fin. Schéma sur une idée de David Marbac (www.davidmarbac.com/blog/) Etudes amont / IA / UX & Contenu / Design / Intégration (RWD) / Développement (avec plan de marquage) / Intégration ou mise en scène des contenus / Recettage SEO Le SEO est un meneur de jeu au service de l’IA, de l’UX et de la content strategy. REFERENCEMENT & MANAGEMENT DES CONTENUS
  • 14. 14 Source : Jeffrey Zeldman (www.zeldman.com) Content first !? Content as the absolute priority. « Content precedes design. Design in the absence of content is not design, it’s decoration ». REFERENCEMENT & MANAGEMENT DES CONTENUS
  • 15. 15 QUEL EST LE TAMIS EDITORIAL DU SITE ? BRAINSTORMING / GOOGLE KEYWORD TOOL / WA REFERENCEMENT & MANAGEMENT DES CONTENUS
  • 16. 16 Ce fichier est situé à la racine. Il est présent et bien renseigné avec les deux lignes importantes ci-dessous : User-agent: * Sitemap: http://www.nomdusite.com/ siteindex.xml Le fichier sitemap.xml est situé également à la racine. Il peut être nommé avec un autre nom. Outil : www.xml-sitemaps.com Le fichier robots.txt Le fichier sitemap.xml Les fichiers robots.txt et sitemap.xml REFERENCEMENT & MANAGEMENT DES CONTENUS
  • 17. 17 La qualité ergonomique des URLs Source : Des URL « tout-terrain », courtes et conceptuelles (EPOKHE) L’URL représente un détail dans les optimisations « on-site ». Pour obtenir une qualité ergonomique, nous les voulons : ✓ « tout-terrain » ✓ conceptuelles REFERENCEMENT & MANAGEMENT DES CONTENUS
  • 18. REFERENCEMENT & MANAGEMENT DES CONTENUS18 Supprimer les caractères spéciaux (!, ?, %) et les espaces Supprimer les niveaux de pages inutiles Supprimer les stopwords (a, de, du, des, ou, et, en, les, la, le, l, d, un, une) Supprimer si possible les extensions (.asp, .html, .php) Supprimer les majuscules Des URLs conceptuelles et « tout-terrain » qui restent inchangées au gré des refontes à périmètre (IA) constant. 1 2 3 4 5 Des URLs de pages « tout-terrain »
  • 19. 19 Le filtrage des URLs de pages dans GA REFERENCEMENT & MANAGEMENT DES CONTENUS Source : CAIRN - Fabricant de structures gonflables
  • 20. L’étiquette méta title 20 Les étiquettes de page Elle doit être composée d’environ 65 à 70 signes (en fonction de l’usage de certaines lettres) pour éviter d’être tronquée dans les résultats des moteurs. Sa capacité à inviter l’internaute à passer à l’action sera également réduite. La description ne devra pas dépasser les 150 signes. Au travers de ce petit texte vous devez séduire l’internaute et lui présenter directement des éléments différenciateurs. Votre étiquette doit faire passer à l’action. Autour de vous, il y a au moins 9 concurrents. L’étiquette méta description REFERENCEMENT & MANAGEMENT DES CONTENUS
  • 21. 21 La rédaction du titre navigateur et de la description 65 150 La présence de mots clés dans le titre au premier chef, la description doit apporter un complément d’information. Des mots clés positionnés en amont de la balise de titre navigateur ? 1 1 REFERENCEMENT & MANAGEMENT DES CONTENUS
  • 22. 22 Que dit WordPress ? 2 1 Titre = 70 signes Description = 156 signes 1 2 REFERENCEMENT & MANAGEMENT DES CONTENUS
  • 23. 23 Les liens de site naturels et payants REFERENCEMENT & MANAGEMENT DES CONTENUS
  • 24. 24 La complémentarité orientée sur la tâche REFERENCEMENT & MANAGEMENT DES CONTENUS 1. Titre AdWords 2. Promesse 3. Les tâches principales « contrôlables » via les sitelinks AdWords 4. Titre navigateur optimisé avec 2 KW 5. Description informative avec l’idée des 62 parcours 6. Les grandes rubriques du site non/moins « contrôlables » via les sitelinks
  • 25. 25 Facebook Open Graph META Tags REFERENCEMENT & MANAGEMENT DES CONTENUS <meta property='og:locale' content='fr_FR'/> <meta property='og:title' content='2013, l’année du changement dans les marchés publics pour les PME ?'/> <meta property='og:description' content='France Marchés vous présente le guide pour faciliter l’accès des TPE et PME aux marchés publics de l&#039;OEAP et le guide de la dématérialisation du MEDEF.'/> <meta property='og:url' content='http://www.francemarches.com/ blog/2012/2013-annee-changement-pme/'/> <meta property='og:site_name' content='France Marchés'/> <meta property='og:type' content='article'/> <meta property='og:image' content='http://www.francemarches.com/ blog/wp-content/uploads/2012/12/logo-oeap-e1359037423764.jpg'/ > <meta property='og:image' content='http://www.francemarches.com/ blog/wp-content/uploads/2012/12/Guide-Dematerialisation.jpg'/>
  • 26. 26 La structuration de l’information Un titre H1 par page, avant que le HTML5 change la conception de la page web en tant qu’unité de contenu. Un titre H1 différencié page par page. Une parentalité respectée. 1 2 3 LE REFERENCEMENT
  • 27. 27 « Faire partie » du Web (maillage/netlinking) ... REFERENCEMENT & MANAGEMENT DES CONTENUS
  • 28. 28 Qu’est-ce qu’un lien optimisé ? REFERENCEMENT & MANAGEMENT DES CONTENUS Exemple d’un lien optimisé naturellement Structure du lien (destination + intitulé) Destination du lien Intitulé du lien Exemple d’un lien trop optimisé sans notion de marque <a href="http://www.redpoint.fr">Redpoint - Cabinet conseil UX, SEO et marketing</a> La sur-optimisation ne s’apprécie pas seulement de manière unitaire mais surtout dans le profil de liens d’un site web. Structure du lien (destination + intitulé) Destination du lien Intitulé du lien <a href="http://www.redpoint.fr">Consultant SEO Nantes - Référencement 44</a>
  • 29. 29 Qu’est-ce qu’un lien optimisé ? REFERENCEMENT & MANAGEMENT DES CONTENUS
  • 30. L30 QUELLES SONT LES BONNES PRATIQUES DU LIEN HYPERTEXTE ? Source : Les bonnes pratiques du lien hypertexte (EPOKHE) REFERENCEMENT & MANAGEMENT DES CONTENUS
  • 31. 31 Le syndrome du cliquez ici ... Source : Patricia Gallot-Lavallée (www.strategy-interactive.com)
  • 32. 32 Travaillez vos liens comme vos titres de pages ! Ce que dit l’ergonome : ✓ Evitez les liens de navigation mystère (l’internaute ne doit pas douter de l’issue de son clic) ✓ Intégrez vos liens dans vos contenus car ils seraient plus cliqués ✓ Augmentez la taille réelle des liens Ce que dit le référenceur : ✓ Optimisez vos liens avec des occurrences clés informatives ✓ Optez pour des libellés de préférence explicites ✓ Obtenez des liens dans des zones de contenus (« Beware of sitewide linking ! ») Ce que dit l’expert en accessibilité : ✓ Nommez vos liens de manière explicite (hors contexte) ✓ Préférez des libellés HTML (l’attribut TITLE est une béquille inutile d’ailleurs en SEO) ✓ Limitez la taille des liens à 80 signes (hors cas particuliers) REFERENCEMENT & MANAGEMENT DES CONTENUS
  • 33. 33 Le lien est une interface de navigation intuitive Sources : Amélie BOUCHER (Ergonomie Web - Eyrolles) et Jakob NIELSEN (Priorité à la simplicité - Pearson) Le lien sous-tend un clic dont les deux versants, physique et mental, doivent être pris en compte. D’ailleurs, la difficulté physique liée au clic (très liée à la loi de Fitts) est probablement moins difficile que son pendant mental. REFERENCEMENT & MANAGEMENT DES CONTENUS
  • 34. REFERENCEMENT & MANAGEMENT DES CONTENUS34 SEO SpyGlass (www.link-assistant.com/seo-spyglass/) Ahrefs (http://ahrefs.com) Advanced Link Manager (www.advancedlinkmanager.com) Open Site Explorer (www.opensiteexplorer.org) Link Diagnosis (www.linkdiagnosis.com) Webmaster Tool (www.google.com/webmasters/) 1 2 3 4 5 Connaître ses liens référents 6
  • 35. REFERENCEMENT & MANAGEMENT DES CONTENUS35 Un lien fait partie d’un contexte Sources : http://www.jeromeweb.net/seo/18813-cours-google-analytics et http://www.icademie.com/le_club/? p=1910
  • 36. 36 Le référencement invisible et keywordless ?!
  • 37. REFERENCEMENT & MANAGEMENT DES CONTENUS37 Êtes-vous prêt à devenir un éditeur de contenus ?
  • 38. REFERENCEMENT & MANAGEMENT DES CONTENUS38 La table des éléments de la stratégie de contenu Source : http://searchengineland.com/seotable
  • 39. REFERENCEMENT & MANAGEMENT DES CONTENUS39 Êtes-vous prêt pour la diététique éditoriale ? Souvent, les clients souhaitent atteindre la masse critique (« critical mass ») sur la base des mythes suivants : ✓ Plus j’ai du contenu, meilleures seront mes positions sur Google. ✓ Plus j’ai du contenu, plus j’apporterai de la valeur à mon audience.
  • 40. REFERENCEMENT & MANAGEMENT DES CONTENUS40 Du linkbaiting au content excellence ? Les différents types d’appât : informationnel, polémique, créatif, humoristique. Coca-Cola Content 2020 Part One (www.youtube.com/watch?v=LerdMmWjU_E) « The role of content excellence is to behave like a ruthless editor ». L’excellence éditoriale passe par la création d’idées contagieuses qui ne peuvent être contrôlées (liquid) et qui associent des objectifs business, la marque et la satisfaction/l’intérêt client (linked).
  • 41. L41 REFERENCEMENT & MANAGEMENT DES CONTENUS LE CONTENT MARKETING DEVIENDRA DANS LES 5 PROCHAINES ANNEES UNE FONCTION ESSENTIELLE. Qui prendra le leadership ?
  • 42. L42 REFERENCEMENT & MANAGEMENT DES CONTENUS LE CONTENT MARKETING NE DOIT PAS ÊTRE PERCU COMME UN CENTRE DE COÛT.
  • 43. L43 REFERENCEMENT & MANAGEMENT DES CONTENUS Source : www.antseyeview.com/90-9-1-principle/ La pyramide de l’engagement utilisateur
  • 44. L44 REFERENCEMENT & MANAGEMENT DES CONTENUS Source : www.altimetergroup.com Les 5 phases de maturité du content management
  • 45. REFERENCEMENT & MANAGEMENT DES CONTENUS45 Tête et longue traîne
  • 46. REFERENCEMENT & MANAGEMENT DES CONTENUS46 Ne pas mettre tous ses oeufs dans le même panier
  • 47. 47 EST-IL POSSIBLE DE NETTOYER GOOGLE ? Les techniques de nettoyage recouvrent la production de contenus positifs, le netlinking, les menaces d'avocats et attaques en justice. Choisir son camp ?!
  • 49. 49 La loi de proximité (théories de la Gestalt) LES FONDAMENTAUX DE L’ERGONOMIE RASSEMBLER LES ELEMENTS AYANT DES POINTS COMMUNS FONCTIONNELS OU CONCEPTUELS ET ELOIGNER LES ELEMENTS N’AYANT PAS DE POINTS COMMUNS. Source : http://librairie.immateriel.fr/fr/read_book/9782212132151/ch3b
  • 50. 50 La loi de proximité (théories de la Gestalt) LES FONDAMENTAUX DE L’ERGONOMIE Une page qui souffre de problèmes de proximité manque généralement de zones de respiration. Nous avons tendance à considérer que les éléments proches physiquement entretiennent des points communs.
  • 51. 51 La loi de proximité (théories de la Gestalt) LES FONDAMENTAUX DE L’ERGONOMIE Source : Google+ Local
  • 52. 52 La loi de proximité (théories de la Gestalt) LES FONDAMENTAUX DE L’ERGONOMIE
  • 53. 53 La loi de similarité (théories de la Gestalt) LES FONDAMENTAUX DE L’ERGONOMIE Source : http://blog.excilys.com/2010/09/13/optimiser-lergonomie-de-son-application-web/
  • 54. L54 LES FONDAMENTAUX DE L’ERGONOMIE UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES D’INTEGRER MENTALEMENT SON CONTENU.
  • 55. 55 La loi de proximité temporelle LES FONDAMENTAUX DE L’ERGONOMIE Sources : Blogs de Frédéric CAVAZZA et Jeremiah Owyang
  • 56. L56 LES FONDAMENTAUX DE L’ERGONOMIE UNE CIBLE EST D’AUTANT PLUS RAPIDE A ATTEINDRE QU’ELLE EST PROCHE ET GRANDE. La loi de Fitts
  • 57. 57 La loi de Fitts LES FONDAMENTAUX DE L’ERGONOMIE Source : www.intuiti.net et Slideshare (résultats de recherche) L’exemple du label qui agrandit la zone de clic est appréciable pour les internautes ayant une faible dextérité.
  • 58. 58 La loi de Fitts LES FONDAMENTAUX DE L’ERGONOMIE Source : www.voyages-sncf.com La zone adjacente au libellé et son icône est cliquable. Toute la zone adjacente du libellé est cliquable. 1 2 2 1
  • 59. 59 La loi de Fitts (appliquée au SEO) LES FONDAMENTAUX DE L’ERGONOMIE Pour consulter nos appels d’offre, cliquez ici. Pour consulter nos appels d’offre, cliquez ici. Pour consulter nos appels d’offre, visitez le site de l’école CESI. Pour consulter nos appels d’offre, visitez le site de l’école d’ingénieurs CESI. 1 2 3 4
  • 60. L60 LES FONDAMENTAUX DE L’ERGONOMIE L’AFFORDANCE EST LA CAPACITE D’UN OBJET A SUGGERER SA PROPRE UTILISATION. Le concept d’affordance
  • 61. 61 Les affordances de navigation LES FONDAMENTAUX DE L’ERGONOMIE 2 1 Fittsizing ou augmentation de la taille virtuelle des objets en se servant des éléments adjacents. L’affordance de cliquabilité est donnée par l’adjonction d’un élément (la barre rouge) et d’une nouvelle forme (menu déroulant). 1 2 Source : www.multicity.citroen.fr
  • 62. 62 Les affordances de navigation LES FONDAMENTAUX DE L’ERGONOMIE Affordance donnée par la forme et la couleur.1 Source : Slideshare (résultats de recherche) 1
  • 63. 63 Les affordances d’interaction LES FONDAMENTAUX DE L’ERGONOMIE 1 L’espace de connexion sur le site www.francemarches.com (v1) manque d’affordance même si le libellé reste explicite hors contexte. 1
  • 64. 64 Les affordances erronées LES FONDAMENTAUX DE L’ERGONOMIE Au survol, toute la zone semble cliquable alors que seul le bouton d’interaction l’est. C’est donc une affordance erronée. 1 Source : www.multicity.citroen.fr 1 Source : www.chateaudegoulaine.fr/le-chateau L’affordance de cliquabilité est atteinte si la somme des affordances de chaque dimension (forme, couleur, libellé, localisation, adjonction d’éléments indiquant la présence d’un lien) de l’objet est suffisante.
  • 65. L65 LES FONDAMENTAUX DE L’ERGONOMIE Monabanq.com (loi de Fitts et affordances) Source : www.monabanq.com et Référentiel AccessiWeb 2.1 : Consultation L’animation augmente la charge informationnelle, d’autant qu’elle ne s’arrête pas. L’utilisateur n’a pas de le contrôle du contenu en mouvement.
  • 66. L66 LES FONDAMENTAUX DE L’ERGONOMIE Le point focal ou concept de call-to-action Source : http://beextend.fr/magazine.html Le point focal par la variation typographique Le point focal par l’illustration et la photographie Le point focal par l’interaction Le point focal par l’espace négatif 1 2 3 4 Les ressorts de l’incitation à l’action ...
  • 67. L67 LES FONDAMENTAUX DE L’ERGONOMIE Le point focal ou concept de call-to-action
  • 68. 68 Le point focal ou concept de call-to-action LES FONDAMENTAUX DE L’ERGONOMIE
  • 69. 69 Le point focal ou concept de call-to-action LES FONDAMENTAUX DE L’ERGONOMIE
  • 70. L70 LES FONDAMENTAUX DE L’ERGONOMIE Le nombre magique d’Alan Baddeley CITEZ LES NOMS DES SEPT NAINS.
  • 71. L71 LES FONDAMENTAUX DE L’ERGONOMIE 7 +/- 2 ELEMENTS (EMPAN DE 5 à 9 OBJETS) ANCIEN CRITERE ACCESSIWEB 1.0 / DANS L’ARBORESCENCE, Y A T-IL UN MAXIMUM DE 9 CATEGORIES PAR NIVEAU DE NAVIGATION ? L’OBJECTIF DE CETTE REFERENCE EST D’EVITER DE SURCHARGER L’INTERFACE. LA LOI DE HICK-NYMAN DEVELOPPE L’IDEE QU’IL EST PLUS FACILE DE DECIDER PARMI UN NOMBRE REDUIT D’ELEMENTS (cf. LE PARADOXE DU CHOIX). Le nombre magique de Miller vs. loi de Hick-Nyman Source : www.braillenet.org/accessibilite/AccessiWeb_CMS_10/guide_accessiweb/guide-accessiweb-ref- accessiweb.html et Le paradoxe du choix (Barry Schwartz)
  • 72. L72 LES FONDAMENTAUX DE L’ERGONOMIE 06.50.86.20.15 Le nombre magique d’Alan Baddeley Sources : Alan Baddeley (1986) et Nelson Cowan (2001) 065-086-2015
  • 74. 74 La règle des 3 clics ... LES FONDAMENTAUX DE L’ERGONOMIE 1 Comprenez-vous les libellés de second niveau de la 2ème entrée ? La règle des 3 clics laisse de côté la difficulté mentale liée au clic pour se focaliser sur la difficulté physique. Cette règle est délétère. 1 Source : www.sigma.fr
  • 75. 75 DO YOU SPEAK USER ?
  • 76. 76 Le logo en haut à gauche : standard ou convention ? LES FONDAMENTAUX DE L’ERGONOMIE Sources : www.juwi.fr
  • 77. 77 Le breadcrumb à droite : standard ou convention ? LES FONDAMENTAUX DE L’ERGONOMIE Sources : www.carrepointu.com Un fil d’Ariane situé à gauche? Un fil d’Ariane composé de libellés dont la taille réelle est petite (cliquabilité plus réduite). Un fil d’Ariane qui manque de respiration ? 1 2 3
  • 78. LES FONDAMENTAUX DE L’ERGONOMIE78 Source : Jakob Nielsen Un standard est un principe utilisé par plus de 80% des sites. Standard versus convention ? Une convention est un principe lorsque 50 à 79% des sites l’utilisent.
  • 79. LES FONDAMENTAUX DE L’ERGONOMIE79 Le site capitalise sur l'apprentissage interne (cohérence du site). Les conventions internes et externes priment ... Le site capitalise sur l'apprentissage externe (localisation, vocabulaire). ✓ dans la localisation des objets (surtout pour la navigation) ✓ dans les intitulés, le vocabulaire utilisé ✓ dans les interactions (style des liens, comportement des objets...) ✓ Panier en haut à droite ✓ Convention de vocabulaire (Accueil, Panier, Plan du site, Contact) ✓ Texte souligné = lien ✓ Navigation en haut ou à gauche
  • 80. L80 LES FONDAMENTAUX DE L’ERGONOMIE LE CAS DE L’ATTRIBUT PLACEHOLDER. L’attribut placeholder change les conventions ?!
  • 81. L81 LES FONDAMENTAUX DE L’ERGONOMIE Sources : www.agence-api.fr / www.francemarches.com La prise de focus change avec placeholder ...
  • 82. L82 LES FONDAMENTAUX DE L’ERGONOMIE Source : www.stpo.fr Une affordance d’interaction sur placeholder
  • 83. L83 LES FONDAMENTAUX DE L’ERGONOMIE LA NOTION DE FOLD (CUT-OFF DESIGN).
  • 84. 84 LE SITE EST-IL BIEN RANGE ?
  • 85. 85 Est-ce que les objets qui entretiennent un rapport fonctionnel sont suffisamment proches ? Est-ce que les objets qui entretiennent un rapport fonctionnel se ressemblent (taille, forme, couleur, contenu, comportement)? La taille réelle et/ou virtuelle des objets de navigation et d’interaction a-t-elle été augmenté de manière optimale ? Les libellés des objets de navigation et d’interaction (liens, boutons) sont-ils suffisamment explicites pour que l’internaute ne doute pas de l’issue de son clic ? 1 2 3 4 Quelques questions à se poser ... LES FONDAMENTAUX DE L’ERGONOMIE
  • 86. 86 Les objets (navigation, interaction) sont-ils affordants ? L’incitation à l’action est-elle gérée par le point focal ? L’interface capitalise sur l’apprentissage interne et externe ? Y-a-t-il un nombre réduit d’éléments par niveau de navigation ? Les call-to-action sont-ils situés au-dessus du fold ? Le site est-il bien rangé ? 5 6 7 8 Quelques questions à se poser ... LES FONDAMENTAUX DE L’ERGONOMIE 9 10
  • 87. 87 Les outils d’analyse, de conception et d’évaluation UX LES FONDAMENTAUX DE L’ERGONOMIE L’observation Les personas Les focus groups Eyetracking Les critiques d’experts Les interviews Analytics Guerilla usability testing Sketching Prototypages Wireframes Tri des cartes Thinking aloud Test users Les outils d’évaluation Les outils de conception Les outils d’analyse
  • 88. 88 Tri des cartes LES FONDAMENTAUX DE L’ERGONOMIE TRI DES CARTES OUVERT vs. FERME
  • 89. 89 Test users LES FONDAMENTAUX DE L’ERGONOMIE SCENARII DE TEST UTILISATEURS
  • 90. 90 Test user La Vélodyssée LES FONDAMENTAUX DE L’ERGONOMIE Tâches Exemples de scénarii Page ou fonctionnalité testée Compréhension du contexte de la page d’accueil « D’abord, sans aller ailleurs, en regardant cette première page, pouvez-vous me dire ce que propose La Vélodyssée ? » Contenu de la page d’accueil Chercher un parcours à vélo pour une journée « Imaginons que vous souhaitez faire une balade à vélo d’une journée avec 3 amis. Vous avez entendu parler de La Vélodyssée. Vous entreprenez de chercher une balade pour la journée près de chez vous. » Navigation dans le catalogue des parcours Regarder si une page parcours convient « Votre balade est choisie. Vous décidez de la planifier et de trouver un endroit pour déjeuner. » Contenu de la page parcours
  • 91. 91 LES FONDAMENTAUX DE L’ERGONOMIE TESTING IS AN ENDLESS LOOP OF QUESTIONING? DISCOVERY, EXPLORATION, LEARNING ... Source : https://twitter.com/lynn_mckee
  • 93. 93 Référentiel AccessiWeb 2.1. LES IMAGES Critère 1.1 [Bronze] CHAQUE IMAGE TEXTUELLE A-T-ELLE UNE ALTERNATIVE TEXTUELLE ? (www.sigma.fr) Source : http://www.braillenet.org/accessibilite/referentiel-aw21/index.php#images
  • 94. 94 Des pecadilles qui manquent de sens ... LES IMAGES Source : www.verygood.fr et www.netapsys.com background:url("../image/menu/menu_netapsys_accueil2.jpg"); <img src="upload/home/corbieres_cendrillon10.jpg" align="left"/> 2 1 1 2
  • 95. 95 Référentiel AccessiWeb 2.1. LES IMAGES Critère 1.2 [Bronze] POUR CHAQUE IMAGE DE DECORATION AYANT UNE ALTERNATIVE TEXTUELLE, CETTE ALTERNATIVE EST-ELLE VIDE ? Source : http://www.braillenet.org/accessibilite/referentiel-aw21/index.php#images
  • 96. 96 Référentiel AccessiWeb 2.1. LES IMAGES Critère 1.3 [Bronze] POUR CHAQUE IMAGE PORTEUSE D’INFORMATION AYANT UNE ALTERNATIVE TEXTUELLE, CETTE ALTERNATIVE EST-ELLE PERTINENTE ? Source : http://www.braillenet.org/accessibilite/referentiel-aw21/index.php#images
  • 97. 97 Cette légende est-elle pertinente ? LES IMAGES
  • 98. 98 La légende sur le logo (page d’accueil) LES IMAGES 2 alt="FAFIEC OPCA – Organisme paritaire collecteur agréé de l’ingénierie, de l’informatique, des études, du conseil, des foires et salons et des traductions" Quel attribut ALT pour l’image-lien sur le logo dans les pages intérieures ? 1 1 Source : www.fafiec.fr
  • 99. 99 La légende sur le logo (pages intérieures) LES IMAGES <a href="/"> <img src="logo.png" alt="Retour à l'accueil - OPCA FAFIEC" /> </a>
  • 100. L100 LES IMAGES QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE ?
  • 101. L101 LES IMAGES La longueur des alternatives textuelles est inférieure ou égale à 80 caractères (* critères 103 du baromètre Temesis Opquast). L'alternative textuelle indiquant l'action associée à l'élément ou reproduisant l'information véhiculée par l'élément devra être formulée de façon à être la plus concise possible. Une limite située entre 80 et 120 caractères semble convenir à une manipulation aisée de ces informations. Au-delà, il est obligatoire de s'interroger sur la nécessité de l'utilisation d'une description longue **. 1. http://temesis-emakina.opquast.net/barometers/tourisme/criteria 2. Référentiel Général d’Accessibilité pour les Administrations RGAA - Annexe 1 : Critères de succès (page 3) 1 2 Temesis/Opquast & RGAA
  • 102. 102 Le cas de la description détaillée LES IMAGES Une description détaillée peut être insérée via : ✓ un attribut LONGDESC qui contient l’adresse d’une page ou d’un emplacement dans la page contenant la description détaillée, ✓ l’indication, dans l’attribut ALT de l’emplacement dans la page de la description détaillée, ✓ un lien adjacent à l’image qui contient l’adresse d’une page ou d’un emplacement dans la page contenant la description détaillée. Sources : www.veolia.com http://www.braillenet.org/accessibilite/referentiel-aw21/glossaire.php#mDescDetaillee
  • 103. L103 LES IMAGES COMBIEN DE TYPES D’ALTERNATIVES TEXTUELLES ?
  • 104. L104 LES IMAGES Les types d’images et alternatives associées Les types d’image Les alternatives associées2.1. L’image porteuse d’information L’image de décoration L’image-lien La légende ALT doit être pertinente. L’attribut ALT doit rester vide. L’alternative doit permettre la compréhension de la fonction et de la destination du lien. L’image-captcha L’alternative doit permettre d’identifier la nature et la fonction de l’image.
  • 106. 106 La lecture sur le web (un média d’interaction) Lean forward (actif) (desktop, tablettes, smartphones) Lean back (passif) (télévision, livres, magazines, journaux papier) L’ERGONOMIE DES CONTENUS
  • 107. 107 Mythe 1 : Les gens ne lisent pas sur le web "Un individu lit 25% moins vite sur le web (lecture hypertextuelle) par rapport au papier (lecture linéaire)". Chaque page est un tout. La page est un ensemble qui se suffit à lui-même. L’ERGONOMIE DES CONTENUS
  • 108. 108 Source : Blueglass 80% des internautes lisent les titres L’ERGONOMIE DES CONTENUS
  • 109. L109 Source : Bernard Poulet La fin des ensembles Des médias de masse, l’économie de l’attention est passée à des masses de médias. Contrairement à ce que pense Rupert Murdoch, qui exprime un faible intérêt pour les lecteurs « occasionnels » et « non loyaux » que Google amène et qui consomment de la « bande passante », les jeunes utilisateurs n'accèdent plus à un ensemble mais à un article en particulier. Ils picorent des liens partagés sur les réseaux à la recherche d’une unité de contenu. L’ERGONOMIE DES CONTENUS
  • 110. L110 Source : Outsell L’importance du titre : 8 mots maximum L’ERGONOMIE DES CONTENUS Sur 10 personnes, 2 seulement liront votre contenu tandis que 8 se satisferont du titre. Un titre explicite, magnétique, est donc de première importance. Dans le domaine de l’emailing, des études ont d’ailleurs montré que 50% à 60% des titres les plus efficaces se composent de 8 mots maximum. Une étude du cabinet conseil Outsell souligne également que 44% des visiteurs de Google News regardent les titres sans aller sur les sites des journaux. Près d’un internaute sur deux ne lit que les titres, sans cliquer, ce qui démontre l’importance de cet élément, souvent déporté hors de son support d’origine.
  • 111. L111 L’ERGONOMIE DES CONTENUS Source : Advanced Content Tracking with Google Analytics (Partie 1 et Partie 2) Est-ce que les internautes scrollent ?
  • 112. LA LECTURE SUR LE WEB112 On parcoure, explore, scanne et survole avant de ...
  • 113. 113 Source : http://www.cxpartners.co.uk/thoughts/the_myth_of_the_page_fold_evidence_from_user_testing.htm La notion de fold L’ERGONOMIE DES CONTENUS En ergonomie, une étude de CX Partners auprès de 800 utilisateurs nous montre que, même si le pli d’une page (fold en anglais) n’est pas un frein à l’exploration, moins il y a de contenu au-dessous du pli, plus l’utilisateur sera encouragé à explorer la page.
  • 114. 114 Source : Universal McCann - Juin 2008 La notion de fold L’ERGONOMIE DES CONTENUS « Plus de la moitié des internautes consultent du contenu en dehors de leurs sites d'origine ».
  • 115. 115 Où se posent les yeux des internautes ? L’ERGONOMIE DES CONTENUS Les études d'eyetracking sont formelles : le texte attire davantage l'attention que les images : 78% des fixations oculaires se font sur le texte et 22% des fixations oculaires se font sur les images.
  • 116. L’ERGONOMIE DES CONTENUS116 L’ECRITURE WEB EST UN VERITABLE COMBAT. Source : Crawford Kilian - Writing for the Web (http://crofsblogs.typepad.com)
  • 117. 117 Source : 1/ Steve Krug (Je ne veux pas chercher) - 2/ Gerry McGovern Le bavardage inutile ... LA LECTURE SUR LE WEB « Wasting your customers time is the biggest sin you can commit on the Web ». « Le bavardage inutile, repérable, selon Steve Krug, par la petite voix intérieure qui dit « blablabla, blablabla, blablabla ... », tout en lisant, est-il supprimé ? ». 1 2
  • 118. 118 Source : Sigma (www.sigma.fr) Le bavardage inutile ... LA LECTURE SUR LE WEB La maîtrise et l’optimisation de votre système d’information est un enjeu primordial. L'infogérance vous libère de toutes les contraintes de gestion et d’évolution de votre système d’information.
  • 119. L’ERGONOMIE DES CONTENUS119 Le texte est-il bien découpé (aéré) en paragraphes ? Les paragraphes ont-ils une longueur inférieure à 60 mots ? Le nombre de mots par ligne de texte varie-t-il de 8 à 12, sans toutefois dépasser un maximum de 15, soit un empan de 40 à 70 signes maximum ? La longueur des phrases varie-t-elle de 12 à 20 mots ? Les phrases d'une longueur de 25 à 30 mots peuvent-elles être réduites pour passer sous la limite des 20 mots ? 1 2 3 4 5 Source : Crawford Kilian - Writing for the Web (http://crofsblogs.typepad.com) Quelques conseils sur les paragraphes ...
  • 120. L’ERGONOMIE DES CONTENUS120 La largeur d’une ligne de texte varie-t-il de 50 à 75 signes ?1 Source : Baymard - Readability: the Optimal Line Length (http://baymard.com/blog/line-length-readability) Une ligne de texte trop longue gêne la lecture car elle empêche d'avoir une vision globale entre le début et la fin de la ligne. Une ligne de texte trop courte aura tendance à faire voyager l'oeil du lecteur, et ainsi briser le rythme de lecture. Quelques conseils sur les paragraphes ...
  • 121. L’ERGONOMIE DES CONTENUS121 Source : Smashing Magazine (http://www.smashingmagazine.com/2009/08/20/typographic-design-survey- best-practices-from-the-best-blogs/) The optimal number of characters per line is between 55 and 75, but between 75 and 85 characters per line is more popular. Quelques conseils sur les paragraphes ...
  • 122. L’ERGONOMIE DES CONTENUS122 Sources : AccessiWeb hors cas particuliers pour les langues chinoises, japonaises et coréennes (www.braillenet.org/accessibilite/referentiel-aw21/) et RGAA (www.rgaa.net/Largeur-des-blocs-de-textes.html) Critère 10.11 [OR] Pour chaque page Web, les blocs de texte ont-ils une largeur inférieure ou égale à 80 caractères ? Quelques conseils sur les paragraphes ...
  • 123. L’ERGONOMIE DES CONTENUS123 UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES. Quelques conseils sur les paragraphes ...
  • 124. L’ERGONOMIE DES CONTENUS124 ! Source : Douglas Bowman (http://stopdesign.com v3) 2 Un empan de 12 mots en moyenne. Un empan de 18 mots en moyenne.1 Quelques conseils sur les paragraphes ...
  • 125. L’ERGONOMIE DES CONTENUS125 Sources : www.ergologique.com/conseils/conseils.php?id_tip=818 et http://www.nngroup.com/articles/top-10- mistakes-web-design/ Evitez les murs de texte !
  • 126. L’ERGONOMIE DES CONTENUS126 Source : www.ergologique.com/conseils/conseils.php?id_tip=818 Ferrez vos contenus à gauche ! D'un point de vue de lisibilité, des études sérieuses démontrent qu'un texte en drapeau est plus accessible à l'œil. Les fins de lignes servent de repère visuel et fatigue moins le lecteur.
  • 127. L’ERGONOMIE DES CONTENUS127 LETTRES EN CAPITALES = ERREUR ? NON. UNE VRAIE PAGE D'ACCUEIL EST UNE PAGE QUI SERT, QUI PRÉSENTE DE L'INFORMATION ET PERMET DE NAVIGUER. UNE PAGE D'ACCUEIL N'EST PAS UNE SPLASH PAGE OU JUMP PAGE, QUI NE SONT QU'UNE SORTE D'INTRODUCTION PRÉCÉDANT LA VÉRITABLE PAGE D'ACCUEIL. Une vraie page d'accueil est une page qui sert, qui présente de l'information et permet de naviguer. Une page d'accueil n'est pas une splash page ou jump page, qui ne sont qu'une sorte d'introduction précédant la véritable page d'accueil. DES SACCADES JUSQU’A 15 LETTRES PUIS ... ... DES FIXATIONS
  • 128. L’ERGONOMIE DES CONTENUS128 La pyramide inversée La pyramide inversée débute par les informations essentielles pour aller vers les détails en tenant compte des lois de proximité : ✓ la loi de proximité temporelle (parler des évènements à venir et pas uniquement ceux qui viennent de se produire, plus inertes); ✓ l a l o i d e p r o x i m i t é géographique.
  • 130. 130 CE DOCUMENT A ETE REALISE PAR : Cabinet conseil spécialisé dans les études, l'accompagnement et la formation sur les métiers suivants : conception/maîtrise d'ouvrage, référencement/contenus, analytics et marketing 2.0. redpoint.fr facebook.com/madebyredpoint slideshare.net/madebyredpoint CONTACT : Arnaud BRIAND Consultant associé 06 50 86 20 15 a.briand@redpoint.fr Sylvain GUEGUEN Consultant associé 06 08 88 70 60 s.gueguen@redpoint.fr DECOUVREZ NOS AUTRES DOCUMENTS : IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
  • 131. Tous droits réservés Redpoint - Reproduction interdite sans accord préalable 131 redpoint.fr facebook.com/madebyredpoint slideshare.net/madebyredpoint