Nous avons envoyé le lien de vérification/téléchargement à l'adresse "". Connectez-vous à votre boîte électronique et cliquez sur le lien pour télécharger le fichier directement.
Si vous ne trouvez pas notre message, vérifiez dans votre dossier courrier indésirable/spam.
Cours SEO, contenus et ergonomie - CESIPresentation Transcript
CESI SEO, CONTENUS & ERGONOMIE Arnaud BRIAND - 4 et 5 février 2013
REFERENCEMENT &MANAGEMENT DES CONTENUS
3 REFERENCEMENT & MANAGEMENT DES CONTENUS L’étude OPTIFY de 2011 montre que le 1er résultat capte 36,4% des clics.Source : Etude OPTIFYLes taux de clics dans Google selon Optify
4 REFERENCEMENT & MANAGEMENT DES CONTENUS Les 3 premiers résultats captent 41,1% des clics. Le 1er résultat naturel capte 8,9% des clics.Source : L’étude WordStream souligne que 64,6% des clics concernent les liens sponsorisés AdWords contre35,4% pour les liens naturels.Les taux de clics dans Google selon WordStream
5 REFERENCEMENT & MANAGEMENT DES CONTENUS 52,5% de CTR 13% de CTR des résultats naturels des liens sponsorisésSource : www.seoinphiladelphia.com/wp-content/uploads/2011/09/ctr-data-ian-howells-sept-2011.pdfLes taux de clics dans Google selon Ian Howells
6 REFERENCEMENT & MANAGEMENT DES CONTENUS Un robot d’indexation Un index est une Un système de (araignée, crawler), se gigantesque base de traitement des requêtes charge de « visiter » les données actualisée ou index d’exécution, qui pages du web. régulièrement, parfois relie l’arrière boutique même plusieurs fois par (index) au guichet jour. Google disposerait (l’interface Google d’un million de serveurs depuis le navigateur). répartis sur 32 sites*.1 2 3La révolution Google - John Battelle* Chiffre non confirmé par Google. Lien vers la source de l’image.Comment fonctionne un moteur de recherche ?
7 REFERENCEMENT & MANAGEMENT DES CONTENUS Autres leviers : La marque a ✓ AdWords besoin d’une ✓ Display identité. ✓ Réseau de contenu ✓ Remarketing (Criteo, Google) ✓ Emailing ✓ Newsletter ✓ Facebook Ads ✓ Affiliation* Une e-réputation, ça ne se nettoie pas, ça se construit. (Spintank)Le référencement, ça se construit * patiemment ...
8 REFERENCEMENT & MANAGEMENT DES CONTENUSTechnique & sémantique Editorial Réputation✓ Construction du site ✓Sélection des mots ✓Nombre de liens(HTML5 et microdata) et clés référents (backlinks)performance technique ✓ Robustesse de la ✓ Qualité des liens✓ Domaining (brand) structuration et IA référents (backlinks)✓ Ancienneté du nom ✓ Saupoudrage ✓ Variété des backlinksde domaine d’occurrences clés ✓ Qualité des sites✓ TITLE navigateur et ✓ Nommage des référentsmétadonnée Description rubriques ✓ Régularité et✓ URLs ✓ Animation éditoriale pérennité du maillage✓ Balises de titres Hx et fréquence✓ Attributs ALT d’actualisation (content TRUST RANK, PAGE✓ Maillage interne excellence) RANK & AUTHOR RANK ✓ Socialisation (likes, ratings, reviews, followers, etc.)Les 3 grandes familles de critères
9 LE CONCEPT DE LANDING PAGE.
10 REFERENCEMENT & MANAGEMENT DES CONTENUS www.hotel-nantes.fr ? « Internet is a cesspool* where false information thrives. Brands are the solution, not the problem. Brands are how you sort out of the cesspool. »Source : Eric Smith - Ex-CEO de Google / * cesspool = fosse à purinLa marque est la solution ...
11 REFERENCEMENT & MANAGEMENT DES CONTENUS « People use SEO to compensate for a lack of branding, or simply having not invested enough in branding ».Source : www.webmetricsguru.com (2 mai 2012)La marque est la solution ...
12 A QUEL MOMENT INJECTER LA REFLEXION SEO DANS LA CHAÎNE DE PRODUCTION ?
13 REFERENCEMENT & MANAGEMENT DES CONTENUS Etudes amont / IA / UX & Contenu / Design / Intégration (RWD) / Développement (avec plan de marquage) / Intégration ou mise en SEO scène des contenus / Recettage Le SEO est un meneur de jeu au service de l’IA, de l’UX et de la content strategy.Schéma sur une idée de David Marbac (www.davidmarbac.com/blog/) Le référencement, on verra à la fin.
14 REFERENCEMENT & MANAGEMENT DES CONTENUS « Content precedes design. Design in the absence of content is not design, it’s decoration ».Source : Jeffrey Zeldman (www.zeldman.com)Content first !? Content as the absolute priority.
15 REFERENCEMENT & MANAGEMENT DES CONTENUS QUEL EST LE TAMIS EDITORIAL DU SITE ? BRAINSTORMING / GOOGLE KEYWORD TOOL / WA
16 REFERENCEMENT & MANAGEMENT DES CONTENUS Le fichier robots.txt Le fichier sitemap.xmlCe fichier est situé à la racine. Le fichier sitemap.xml est situé également à la racine.Il est présent et bien renseignéavec les deux lignes importantes Il peut être nommé avec un autreci-dessous : nom.User-agent: *Sitemap: http://www.nomdusite.com/ Outil : www.xml-sitemaps.comsiteindex.xmlLes fichiers robots.txt et sitemap.xml
17 REFERENCEMENT & MANAGEMENT DES CONTENUSL’URL représente un détail dans les optimisations « on-site ». Pour obtenirune qualité ergonomique, nous les voulons :✓ « tout-terrain »✓ conceptuellesSource : Des URL « tout-terrain », courtes et conceptuelles (EPOKHE)La qualité ergonomique des URLs
18 REFERENCEMENT & MANAGEMENT DES CONTENUS 1 Supprimer les caractères spéciaux (!, ?, %) et les espaces 2 Supprimer les niveaux de pages inutiles 3 Supprimer les stopwords (a, de, du, des, ou, et, en, les, la, le, l, d, un, une) 4 Supprimer si possible les extensions (.asp, .html, .php) 5 Supprimer les majuscules Des URLs conceptuelles et « tout-terrain » qui restent inchangées au gré des refontes à périmètre (IA) constant.Des URLs de pages « tout-terrain »
19 REFERENCEMENT & MANAGEMENT DES CONTENUSSource : CAIRN - Fabricant de structures gonflablesLe filtrage des URLs de pages dans GA
20 REFERENCEMENT & MANAGEMENT DES CONTENUS L’étiquette méta title L’étiquette méta descriptionElle doit être composée d’environ 65 à 70 La description ne devra pas dépasser les 150signes (en fonction de l’usage de certaines signes. Au travers de ce petit texte vous devezlettres) pour éviter d’être tronquée dans les séduire l’internaute et lui présenterrésultats des moteurs. directement des éléments différenciateurs.Sa capacité à inviter l’internaute à passer à Votre étiquette doit faire passer à l’action.l’action sera également réduite. Autour de vous, il y a au moins 9 concurrents.Les étiquettes de page
21 REFERENCEMENT & MANAGEMENT DES CONTENUS 1 65 150 1 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 ?La rédaction du titre navigateur et de la description
22 REFERENCEMENT & MANAGEMENT DES CONTENUS 1 2 1 Titre = 70 signes 2 Description = 156 signesQue dit WordPress ?
23 REFERENCEMENT & MANAGEMENT DES CONTENUSLes liens de site naturels et payants
24 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 sitelinksLa complémentarité orientée sur la tâche
25 REFERENCEMENT & MANAGEMENT DES CONTENUS<meta property=og:locale content=fr_FR/><meta property=og:title content=2013, l’année du changement dansles marchés publics pour les PME ?/><meta property=og:description content=France Marchés vousprésente le guide pour faciliter l’accès des TPE et PME aux marchéspublics de l'OEAP et le guide de la dématérialisation duMEDEF./><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/>Facebook Open Graph META Tags
26 LE REFERENCEMENT 1 Un titre H1 par page, avant que le HTML5 change la conception de la page web en tant qu’unité de contenu. 2 Un titre H1 différencié page par page. 3 Une parentalité respectée.La structuration de l’information
27 REFERENCEMENT & MANAGEMENT DES CONTENUS« Faire partie » du Web (maillage/netlinking) ...
28 REFERENCEMENT & MANAGEMENT DES CONTENUS Exemple d’un lien optimisé naturellement <a href="http://www.redpoint.fr">Redpoint - Cabinet conseil UX, SEO et marketing</a> Destination du lien Intitulé du lien Structure du lien (destination + intitulé) Exemple d’un lien trop optimisé sans notion de marque <a href="http://www.redpoint.fr">Consultant SEO Nantes - Référencement 44</a> Destination du lien Intitulé du lien Structure du lien (destination + intitulé)La sur-optimisation ne s’apprécie pas seulement de manière unitaire maissurtout dans le profil de liens d’un site web.Qu’est-ce qu’un lien optimisé ?
29 REFERENCEMENT & MANAGEMENT DES CONTENUSQu’est-ce qu’un lien optimisé ?
30 REFERENCEMENT & MANAGEMENT DES CONTENUS L QUELLES SONT LES BONNES PRATIQUES DU LIEN HYPERTEXTE ?Source : Les bonnes pratiques du lien hypertexte (EPOKHE)
31Source : Patricia Gallot-Lavallée (www.strategy-interactive.com)Le syndrome du cliquez ici ...
32 REFERENCEMENT & MANAGEMENT DES CONTENUSCe qui dit l’ergonome : Ce qui dit l’expert en Ce qui dit le référenceur : accessibilité :✓ Evitez les liens de ✓ Optimisez vos liensnavigation mystère ✓ Nommez vos liens de avec des occurrences(l’internaute ne doit pas manière explicite (hors clés informativesdouter de l’issue de son contexte)clic) ✓ Optez pour des ✓ Préférez des libellés libellés de préférence✓ Intégrez vos liens dans HTML (l’attribut TITLE explicitesvos contenus car ils est une béquille inutileseraient plus cliqués d’ailleurs en SEO) ✓ Obtenez des liens dans des zones de✓ Augmenter la taille ✓ Limitez la taille des contenus (« Beware ofréelle des liens liens à 80 signes (hors sitewide linking ! ») cas particuliers)Travaillez vos liens comme vos titres de pages !
33 REFERENCEMENT & MANAGEMENT DES CONTENUS 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.Sources : Amélie BOUCHER (Ergonomie Web - Eyrolles) et Jakob NIELSEN (Priorité à la simplicité - Pearson)Le lien est une interface de navigation intuitive
34 REFERENCEMENT & MANAGEMENT DES CONTENUS 1 SEO SpyGlass (www.link-assistant.com/seo-spyglass/) 2 Ahrefs (http://ahrefs.com) 3 Advanced Link Manager (www.advancedlinkmanager.com) 4 Open Site Explorer (www.opensiteexplorer.org) 5 Link Diagnosis (www.linkdiagnosis.com) 6 Webmaster Tool (www.google.com/webmasters/)Connaître ses liens référents
35 REFERENCEMENT & MANAGEMENT DES CONTENUSSources : http://www.jeromeweb.net/seo/18813-cours-google-analytics et http://www.icademie.com/le_club/?p=1910Un lien fait partie d’un contexte
36Le référencement invisible et keywordless ?!
37 REFERENCEMENT & MANAGEMENT DES CONTENUSÊtes-vous prêt à devenir un éditeur de contenus ?
38 REFERENCEMENT & MANAGEMENT DES CONTENUSSource : http://searchengineland.com/seotableLa table des éléments de la stratégie de contenu
39 REFERENCEMENT & MANAGEMENT DES CONTENUS 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.Êtes-vous prêt pour la diététique éditoriale ?
40 REFERENCEMENT & MANAGEMENT DES CONTENUS « 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).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)Du linkbaiting au content excellence ?
41 REFERENCEMENT & MANAGEMENT DES CONTENUS L LE CONTENT MARKETING DEVIENDRA DANS LES 5 PROCHAINES ANNEES UNE FONCTION ESSENTIELLE.Qui prendra le leadership ?
42 REFERENCEMENT & MANAGEMENT DES CONTENUS L LE CONTENT MARKETING NE DOIT PAS ÊTRE PERCU COMME UN CENTRE DE COÛT.
43 REFERENCEMENT & MANAGEMENT DES CONTENUS LSource : www.antseyeview.com/90-9-1-principle/La pyramide de l’engagement utilisateur
44 REFERENCEMENT & MANAGEMENT DES CONTENUS LSource : www.altimetergroup.comLes 5 phases de maturité du content management
45 REFERENCEMENT & MANAGEMENT DES CONTENUSTête et longue traîne
46 REFERENCEMENT & MANAGEMENT DES CONTENUSNe 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 davocatset attaques en justice.Choisir son camp ?!
LES FONDAMENTAUX DEL’ERGONOMIE
49 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/ch3bLa loi de proximité (théories de la Gestalt)
50 LES FONDAMENTAUX DE L’ERGONOMIE Une page qui souffre de Nous avons tendance à considérer problèmes de proximité que les éléments proches manque généralement de physiquement entretiennent des zones de respiration. points communs.La loi de proximité (théories de la Gestalt)
51 LES FONDAMENTAUX DE L’ERGONOMIESource : Google+ LocalLa loi de proximité (théories de la Gestalt)
52 LES FONDAMENTAUX DE L’ERGONOMIELa loi de proximité (théories de la Gestalt)
53 LES FONDAMENTAUX DE L’ERGONOMIESource : http://blog.excilys.com/2010/09/13/optimiser-lergonomie-de-son-application-web/La loi de similarité (théories de la Gestalt)
54 LES FONDAMENTAUX DE L’ERGONOMIE L UNE PAGE QUI APPLIQUE CORRECTEMENT LES THEORIES DE LA GESTALT PERMET AUX INTERNAUTES D’INTEGRER MENTALEMENT SON CONTENU.
55 LES FONDAMENTAUX DE L’ERGONOMIESources : Blogs de Frédéric CAVAZZA et Jeremiah OwyangLa loi de proximité temporelle
56 LES FONDAMENTAUX DE L’ERGONOMIE L UNE CIBLE EST D’AUTANT PLUS RAPIDE A ATTEINDRE QU’ELLE EST PROCHE ET GRANDE.La loi de Fitts
57 LES FONDAMENTAUX DE L’ERGONOMIE L’exemple du label qui agrandit la zone de clic est appréciable pour les internautes ayant une faible dextérité.Source : www.intuiti.net et Slideshare (résultats de recherche)La loi de Fitts
58 LES FONDAMENTAUX DE L’ERGONOMIE 1 2 1 La zone adjacente au libellé et son icône est cliquable. 2 Toute la zone adjacente du libellé est cliquable.Source : www.voyages-sncf.comLa loi de Fitts
59 LES FONDAMENTAUX DE L’ERGONOMIE 1 Pour consulter nos appels d’offre, cliquez ici. 2 Pour consulter nos appels d’offre, cliquez ici. 3 Pour consulter nos appels d’offre, visitez le site de l’école CESI. 4 Pour consulter nos appels d’offre, visitez le site de l’école d’ingénieurs CESI.La loi de Fitts (appliquée au SEO)
60 LES FONDAMENTAUX DE L’ERGONOMIE L L’AFFORDANCE EST LA CAPACITE D’UN OBJET A SUGGERER SA PROPRE UTILISATION.Le concept d’affordance
61 LES FONDAMENTAUX DE L’ERGONOMIE 1 2Source : www.multicity.citroen.fr 1 Fittsizing ou augmentation de la taille virtuelle des objets en se servant des éléments adjacents. 2 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).Les affordances de navigation
62 LES FONDAMENTAUX DE L’ERGONOMIE 1 1 Affordance donnée par la forme et la couleur.Source : Slideshare (résultats de recherche)Les affordances de navigation
63 LES FONDAMENTAUX DE L’ERGONOMIE 1 1 L’espace de connexion sur le site www.francemarches.com (v1) manque d’affordance même si le libellé reste explicite hors contexte.Les affordances d’interaction
64 LES FONDAMENTAUX DE L’ERGONOMIE 1 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. Source : www.multicity.citroen.fr 1 Au survol, toute la zone semble cliquable alors que seul le bouton d’interaction l’est. C’est donc une affordance erronée.Source : www.chateaudegoulaine.fr/le-chateauLes affordances erronées
65 LES FONDAMENTAUX DE L’ERGONOMIE LL’animation augmente la charge informationnelle, d’autant qu’elle ne s’arrêtepas. L’utilisateur n’a pas de le contrôle du contenu en mouvement.Source : www.monabanq.com et Référentiel AccessiWeb 2.1 : ConsultationMonabanq.com (loi de Fitts et affordances)
66 LES FONDAMENTAUX DE L’ERGONOMIE L Les ressorts de l’incitation à l’action ... 1 Le point focal par la variation typographique 2 Le point focal par l’illustration et la photographie 3 Le point focal par l’interaction 4 Le point focal par l’espace négatifSource : http://beextend.fr/magazine.htmlLe point focal ou concept de call-to-action
67 LES FONDAMENTAUX DE L’ERGONOMIE LLe point focal ou concept de call-to-action
68 LES FONDAMENTAUX DE L’ERGONOMIELe point focal ou concept de call-to-action
69 LES FONDAMENTAUX DE L’ERGONOMIELe point focal ou concept de call-to-action
70 LES FONDAMENTAUX DE L’ERGONOMIE L CITEZ LES NOMS DES SEPT NAINS.Le nombre magique d’Alan Baddeley
71 LES FONDAMENTAUX DE L’ERGONOMIE L 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).Source : www.braillenet.org/accessibilite/AccessiWeb_CMS_10/guide_accessiweb/guide-accessiweb-ref-accessiweb.html et Le paradoxe du choix (Barry Schwartz)Le nombre magique de Miller vs. loi de Hick-Nyman
72 LES FONDAMENTAUX DE L’ERGONOMIE L 06.50.86.20.15 065-086-2015Sources : Alan Baddeley (1986) et Nelson Cowan (2001)Le nombre magique d’Alan Baddeley
73 4Le nombre magique est ...
74 LES FONDAMENTAUX DE L’ERGONOMIE 1 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.Source : www.sigma.frLa règle des 3 clics ...
75 DO YOU SPEAK USER ?
76 LES FONDAMENTAUX DE L’ERGONOMIESources : www.juwi.frLe logo en haut à gauche : standard ou convention ?
77 LES FONDAMENTAUX DE L’ERGONOMIE 1 Un fil d’Ariane situé à gauche? 2 Un fil d’Ariane composé de libellés dont la taille réelle est petite (cliquabilité plus réduite). 3 Un fil d’Ariane qui manque de respiration ?Sources : www.carrepointu.comLe breadcrumb à droite : standard ou convention ?
78 LES FONDAMENTAUX DE L’ERGONOMIE Un standard est un principe Une convention est un utilisé par plus de 80% des principe lorsque 50 à 79% sites. des sites l’utilisent.Source : Jakob NielsenStandard versus convention ?
79 LES FONDAMENTAUX DE L’ERGONOMIE Le site capitalise sur Le site capitalise sur lapprentissage interne lapprentissage externe (cohérence du site). (localisation, vocabulaire). ✓ dans la localisation des objets ✓ Panier en haut à droite (surtout pour la navigation) ✓ Convention de vocabulaire ✓ dans les intitulés, le vocabulaire (Accueil, Panier, Plan du site, utilisé Contact) ✓ dans les interactions (style des ✓ Texte souligné = lien liens, comportement des objets...) ✓ Navigation en haut ou à gaucheLes conventions internes et externes priment ...
80 LES FONDAMENTAUX DE L’ERGONOMIE L LE CAS DE L’ATTRIBUT PLACEHOLDER.L’attribut placeholder change les conventions ?!
81 LES FONDAMENTAUX DE L’ERGONOMIE LSources : www.agence-api.fr / www.francemarches.comLa prise de focus change avec placeholder ...
82 LES FONDAMENTAUX DE L’ERGONOMIE LSource : www.stpo.frUne affordance d’interaction sur placeholder
83 LES FONDAMENTAUX DE L’ERGONOMIE L LA NOTION DE FOLD (CUT-OFF DESIGN).
84 LE SITE EST-IL BIEN RANGE ?
85 LES FONDAMENTAUX DE L’ERGONOMIE 1 Est-ce que les objets qui entretiennent un rapport fonctionnel sont suffisamment proches ? 2 Est-ce que les objets qui entretiennent un rapport fonctionnel se ressemblent (taille, forme, couleur, contenu, comportement)? 3 La taille réelle et/ou virtuelle des objets de navigation et d’interaction a-t-elle été augmenté de manière optimale ? 4 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 ?Quelques questions à se poser ...
86 LES FONDAMENTAUX DE L’ERGONOMIE 5 Les objets (navigation, interaction) sont-ils affordants ? 6 L’incitation à l’action est-elle gérée par le point focal ? 7 L’interface capitalise sur l’apprentissage interne et externe ? 8 Y-a-t-il un nombre réduit d’éléments par niveau de navigation ? 9 Les call-to-action sont-ils situés au-dessus du fold ? 10 Le site est-il bien rangé ?Quelques questions à se poser ...
87 LES FONDAMENTAUX DE L’ERGONOMIE Les outils d’analyse L’observation Les critiques d’experts Les personas Les interviews Les focus groups Analytics Les outils de conception Sketching Prototypages Wireframes Tri des cartes Les outils d’évaluation Eyetracking Guerilla usability testing Thinking aloud Test usersLes outils d’analyse, de conception et d’évaluation UX
88 LES FONDAMENTAUX DE L’ERGONOMIE TRI DES CARTES OUVERT vs. FERMETri des cartes
89 LES FONDAMENTAUX DE L’ERGONOMIE SCENARII DE TEST UTILISATEURSTest users
90 LES FONDAMENTAUX DE L’ERGONOMIE Page ou Tâches Exemples de scénarii fonctionnalité testée Compréhension du « D’abord, sans aller ailleurs, en regardant cette Contenu de la contexte de la page première page, pouvez-vous me dire ce que page d’accueil d’accueil propose La Vélodyssée ? » « Imaginons que vous souhaitez faire une balade à vélo d’une journée avec 3 amis. Vous Navigation dans leChercher un parcours à avez entendu parler de La Vélodyssée. Vous catalogue des vélo pour une journée entreprenez de chercher une balade pour la parcours journée près de chez vous. » « Votre balade est choisie. Vous décidez de la Regarder si une page Contenu de la planifier et de trouver un endroit pour parcours convient page parcours déjeuner. »Test user La Vélodyssée
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 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#imagesRéférentiel AccessiWeb 2.1.
94 LES IMAGES 1 <img src="upload/home/corbieres_cendrillon10.jpg" align="left"/> 2 1 2 background:url("../image/menu/menu_netapsys_accueil2.jpg");Source : www.verygood.fr et www.netapsys.comDes pecadilles qui manquent de sens ...
95 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#imagesRéférentiel AccessiWeb 2.1.
96 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#imagesRéférentiel AccessiWeb 2.1.
97 LES IMAGESCette légende est-elle pertinente ?
98 LES IMAGES 1 2 1 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 ?Source : www.fafiec.frLa légende sur le logo (page d’accueil)
99 LES IMAGES <a href="/"> <img src="logo.png" alt="Retour à laccueil - OPCA FAFIEC" /> </a>La légende sur le logo (pages intérieures)
100 LES IMAGES L QUELLE LONGUEUR POUR LES ALTERNATIVES TEXTUELLE ?
101 LES IMAGES L 1 La longueur des alternatives textuelles est inférieure ou égale à 80 caractères (* critères 103 du baromètre Temesis Opquast). 2 Lalternative textuelle indiquant laction associée à lélément ou reproduisant linformation 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 sinterroger sur la nécessité de lutilisation dune description longue **.1. http://temesis-emakina.opquast.net/barometers/tourisme/criteria2. Référentiel Général d’Accessibilité pour les Administrations RGAA - Annexe 1 : Critères de succès (page 3)Temesis/Opquast & RGAA
102 LES IMAGESUne description détaillée peut être insérée via :✓ un attribut LONGDESC qui contient l’adresse d’une page ou d’unemplacement dans la page contenant la description détaillée,✓ l’indication, dans l’attribut ALT de l’emplacement dans la page de ladescription détaillée,✓ un lien adjacent à l’image qui contient l’adresse d’une page ou d’unemplacement dans la page contenant la description détaillée.Sources : www.veolia.comhttp://www.braillenet.org/accessibilite/referentiel-aw21/glossaire.php#mDescDetailleeLe cas de la description détaillée
103 LES IMAGES L COMBIEN DE TYPES D’ALTERNATIVES TEXTUELLES ?
104 LES IMAGES L1. Les types d’image 2. Les alternatives associées L’image porteuse d’information La légende ALT doit être pertinente. L’image de décoration L’attribut ALT doit rester vide. L’image-lien 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.Les types d’images et alternatives associées
L’ERGONOMIE DES CONTENUS
106 L’ERGONOMIE DES CONTENUS Lean forward (actif) Lean back (passif) (desktop, (télévision, livres, tablettes, smartphones) magazines, journaux papier)La lecture sur le web (un média d’interaction)
107 L’ERGONOMIE DES CONTENUS "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.Mythe 1 : Les gens ne lisent pas sur le web
108 L’ERGONOMIE DES CONTENUSSource : Blueglass80% des internautes lisent les titres
109 L’ERGONOMIE DES CONTENUS L 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 naccèdent plus à un ensemble mais à un article en particulier. Ils picorent des liens partagés sur les réseaux à la recherche d’uneSource : Bernard Poulet unité de contenu.La fin des ensembles
110 L’ERGONOMIE DES CONTENUS LSur 10 personnes, 2 seulement liront votre contenu tandis que 8 sesatisferont du titre. Un titre explicite, magnétique, est donc de premièreimportance.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% desvisiteurs de Google News regardent les titres sans aller sur les sites desjournaux. Près d’un internaute sur deux ne lit que les titres, sans cliquer, cequi démontre l’importance de cet élément, souvent déporté hors de sonsupport d’origine.Source : OutsellL’importance du titre : 8 mots maximum
111 L’ERGONOMIE DES CONTENUS LSource : Advanced Content Tracking with Google Analytics (Partie 1 et Partie 2)Est-ce que les internautes scrollent ?
112 LA LECTURE SUR LE WEBOn parcoure, explore, scanne et survole avant de ...
113 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.Source : http://www.cxpartners.co.uk/thoughts/the_myth_of_the_page_fold_evidence_from_user_testing.htmLa notion de fold
114 L’ERGONOMIE DES CONTENUS« Plus de la moitié des internautes consultent du contenu en dehors de leurssites dorigine ».Source : Universal McCann - Juin 2008La notion de fold
115 L’ERGONOMIE DES CONTENUSLes études deyetracking sont formelles : le texte attire davantagelattention que les images : 78% des fixations oculaires se font sur le texte et22% des fixations oculaires se font sur les images.Où se posent les yeux des internautes ?
116 L’ERGONOMIE DES CONTENUS L’ECRITURE WEB EST UN VERITABLE COMBAT.Source : Crawford Kilian - Writing for the Web (http://crofsblogs.typepad.com)
117 LA LECTURE SUR LE WEB « Le bavardage inutile, repérable, selon Steve Krug, par la petite voix 1 intérieure qui dit « blablabla, blablabla, blablabla ... », tout en lisant, est-il supprimé ? ». « Wasting your customers time is the 2 biggest sin you can commit on the Web ».Source : 1/ Steve Krug (Je ne veux pas chercher) - 2/ Gerry McGovernLe bavardage inutile ...
118 LA LECTURE SUR LE WEB La maîtrise et l’optimisation de votre système d’information est un enjeu primordial. Linfogérance vous libère de toutes les contraintes de gestion et d’évolution de votre système d’information.Source : Sigma (www.sigma.fr)Le bavardage inutile ...
119 L’ERGONOMIE DES CONTENUS 1 Le texte est-il bien découpé (aéré) en paragraphes ? 2 Les paragraphes ont-ils une longueur inférieure à 60 mots ? 3 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 ? 4 La longueur des phrases varie-t-elle de 12 à 20 mots ? 5 Les phrases dune longueur de 25 à 30 mots peuvent-elles être réduites pour passer sous la limite des 20 mots ?Source : Crawford Kilian - Writing for the Web (http://crofsblogs.typepad.com)Quelques conseils sur les paragraphes ...
120 L’ERGONOMIE DES CONTENUS 1 La largeur d’une ligne de texte varie-t-il de 50 à 75 signes ? Une ligne de texte trop longue gêne la lecture car elle empêche davoir une vision globale entre le début et la fin de la ligne. Une ligne de texte trop courte aura tendance à faire voyager loeil du lecteur, et ainsi briser le rythme de lecture.Source : Baymard - Readability: the Optimal Line Length (http://baymard.com/blog/line-length-readability)Quelques conseils sur les paragraphes ...
121 L’ERGONOMIE DES CONTENUS The optimal number of characters per line is between 55 and 75, but between 75 and 85 characters per line is more popular.Source : Smashing Magazine (http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/)Quelques conseils sur les paragraphes ...
122 L’ERGONOMIE DES CONTENUS Critère 10.11 [OR] Pour chaque page Web, les blocs de texte ont-ils une largeur inférieure ou égale à 80 caractères ?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)Quelques conseils sur les paragraphes ...
123 L’ERGONOMIE DES CONTENUS UN EMPAN MOYEN DE 40 A 80 SIGNES PAR LIGNE SELON LES CONTEXTES.Quelques conseils sur les paragraphes ...
124 L’ERGONOMIE DES CONTENUS Un empan de 18 mots en 1 moyenne. 2 Un empan de 12 mots en moyenne. !Source : Douglas Bowman (http://stopdesign.com v3)Quelques conseils sur les paragraphes ...
125 L’ERGONOMIE DES CONTENUSSources : 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 CONTENUS Dun point de vue de lisibilité, des études sérieuses démontrent quun texte en drapeau est plus accessible à lœil. Les fins de lignes servent de repère visuel et fatigue moins le lecteur.Source : www.ergologique.com/conseils/conseils.php?id_tip=818Ferrez vos contenus à gauche !
127 L’ERGONOMIE DES CONTENUSUNE VRAIE PAGE DACCUEIL EST UNE PAGE QUI SERT, QUI PRÉSENTE DE LINFORMATIONET PERMET DE NAVIGUER. UNE PAGE DACCUEIL NEST PAS UNE SPLASH PAGE OU JUMPPAGE, QUI NE SONT QUUNE SORTE DINTRODUCTION PRÉCÉDANT LA VÉRITABLE PAGEDACCUEIL.Une vraie page daccueil est une page qui sert, qui présente de linformation et permet de naviguer.Une page daccueil nest pas une splash page ou jump page, qui ne sont quune sorte dintroductionprécédant la véritable page daccueil. DES SACCADES JUSQU’A ... DES FIXATIONS 15 LETTRES PUIS ...LETTRES EN CAPITALES = ERREUR ? NON.
128 L’ERGONOMIE DES CONTENUS 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); ✓ la loi de proximité géographique.La pyramide inversée
DES QUESTIONS ?http://www.flickr.com/photos/cocolinda/385860049/
130 CE DOCUMENT A ETE REALISE PAR : Arnaud BRIAND Consultant associé 06 50 86 20 15 a.briand@redpoint.fr Cabinet conseil spécialisé dans les études, laccompagnement et la formation sur les métiers suivants : Sylvain GUEGUEN conception/maîtrise douvrage, Consultant associé référencement/contenus, analytics et 06 08 88 70 60 marketing 2.0. s.gueguen@redpoint.frCONTACT : DECOUVREZ NOS AUTRES DOCUMENTS : IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIredpoint.fr IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIfacebook.com/madebyredpoint IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIslideshare.net/madebyredpoint IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Optimhat
1–10 sur 14 précédent suivant Publier un commentaire
1–10 sur 14 précédent suivant